/* ============================================================================
   A BUILDER'S PAGE
   She stands in the arch from the logo, over the city, lit from above: the
   site's "She arises" made personal. Her story on the light ground, then what
   she offers on a gold shelf like the book store. Loaded after store.css.
   ========================================================================= */

/* this page opens dark, so the menu can float clear until you scroll */
.page-builder--dark .nav:not(.is-stuck){
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;
}

/* ---------- she arises ---------- */
.bhero{padding:clamp(6.5rem,11vw,8.5rem) 0 0;overflow:hidden}
.bhero-inner{
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-areas:"figure" "words";
}
@media(min-width:960px){
  .bhero-inner{grid-template-columns:1fr 1fr;grid-template-areas:"words figure";align-items:end}
}
.bhero-figure{
  grid-area:figure;position:relative;width:min(520px,100%);aspect-ratio:600/760;margin-inline:auto;
  display:flex;align-items:flex-end;justify-content:center;isolation:isolate;
}
.bhero-glow{
  position:absolute;inset:6% 4% 0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 46% at 50% 40%,rgba(224,179,82,.24),rgba(224,179,82,.06) 55%,transparent 74%),
    radial-gradient(60% 30% at 50% 96%,rgba(252,41,153,.16),transparent 76%);
}
.bhero-arch{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.bhero-skyline{position:absolute;left:-30%;right:-30%;bottom:0;z-index:-1;opacity:.24;pointer-events:none}
.bhero-skyline img{width:100%;height:auto}
.bhero-photo{
  position:relative;width:80%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.55));
}

.bhero-words{grid-area:words;padding-bottom:clamp(2.5rem,7vw,6.5rem);text-align:center}
@media(min-width:960px){.bhero-words{text-align:left;align-self:center;padding-bottom:clamp(4rem,8vw,7rem)}}
.bhero-words .eyebrow{justify-content:center}
@media(min-width:960px){.bhero-words .eyebrow{justify-content:flex-start}}
.bhero-name{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.4rem,6vw,4.9rem);line-height:1.02;
}
.bhero-name span{display:block}
.bhero-name span:first-child{color:var(--silver)}
.bhero-meta{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5em 1.6em;justify-content:center;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
}
@media(min-width:960px){.bhero-meta{justify-content:flex-start}}
.bhero-meta span{display:flex;align-items:center;gap:1.6em}
.bhero-meta span+span::before{content:"";width:4px;height:4px;rotate:45deg;background:var(--fuchsia);margin-left:-.8em;flex:none}
.bhero-line{
  margin-top:1.6rem;font-family:var(--prose);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.4;color:var(--gold-lite);max-width:26ch;
}
.bhero-words .bhero-line{margin-inline:auto}
@media(min-width:960px){.bhero-words .bhero-line{margin-inline:0}}
.bhero-words .btn-row{margin-top:2.2rem;justify-content:center}
@media(min-width:960px){.bhero-words .btn-row{justify-content:flex-start}}

/* ---------- her story ---------- */
.bstory-inner{max-width:780px;margin-inline:auto}
.bstory .prose{color:var(--on-light-soft);margin-top:1.5rem}
.bstory .eyebrow{margin-bottom:.4rem}
.bstory-lead{color:var(--on-light)!important}
.bstory-lead::first-letter{
  float:left;font-family:var(--display);font-weight:600;font-size:4.4em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--gold-deep);
}
.bstory-light{margin:clamp(3rem,6vw,4.5rem) auto 0;text-align:center;max-width:40rem;position:relative}
.bstory-light .scripture-mark{
  position:static;translate:none;background:none;padding:0;
  display:block;font-family:var(--prose);font-size:5.5rem;line-height:.6;color:var(--gold);margin-bottom:.5rem;
}
.bstory-light p{
  font-family:var(--prose);font-style:italic;font-weight:400;
  font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.35;color:var(--on-light);
}

/* ---------- what she offers ---------- */
.boffer-quote{margin-top:1.6rem;color:#D6D0E2}
.boffer-quote cite{
  display:block;margin-top:1rem;font-family:var(--ui);font-style:normal;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--steel);
}
.bshelf{
  --cg:0px;display:grid;grid-template-columns:1fr;row-gap:clamp(3.5rem,8vw,4.5rem);column-gap:var(--cg);
  margin:clamp(3rem,6vw,4.5rem) auto 0;max-width:420px;
}
@media(min-width:760px){.bshelf{--cg:clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(3,1fr);max-width:none}}
.bshelf a{display:grid;justify-items:center;text-align:center}
.bshelf-niche{
  position:relative;width:100%;height:clamp(220px,22vw,270px);
  display:flex;align-items:flex-end;justify-content:center;isolation:isolate;
}
.bshelf-niche::before{
  content:"";position:absolute;inset:0 6% 0;z-index:-1;pointer-events:none;opacity:.85;
  background:radial-gradient(52% 62% at 50% 66%,rgba(224,179,82,.18),rgba(224,179,82,.05) 52%,transparent 74%);
  transition:opacity .6s var(--ease);
}
.bshelf-niche::after{
  content:"";position:absolute;bottom:-1px;height:2px;
  left:calc(var(--cg) * -.5);right:calc(var(--cg) * -.5);
  background:var(--leaf-gold);box-shadow:0 10px 26px -6px rgba(224,179,82,.4);
}
.bshelf-niche img{
  max-width:84%;max-height:90%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.55));
  transition:transform .6s var(--ease);transform-origin:50% 100%;
}
.bshelf a:hover .bshelf-niche img,.bshelf a:focus-visible .bshelf-niche img{transform:translateY(-8px)}
.bshelf a:hover .bshelf-niche::before{opacity:1}
.bshelf-name{
  margin-top:1.7rem;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:.05em;color:var(--silver);
}
.bshelf-go{
  margin-top:.7rem;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(224,179,82,.5);padding-bottom:.2em;
}
.boffer-cta{margin-top:clamp(3.5rem,7vw,5rem);display:grid;justify-items:center;gap:1rem;text-align:center}
.boffer-cta p{font-size:.8rem;color:var(--steel);max-width:44ch}

/* ---------- support our builders ---------- */
.bnext{text-align:center}
.bnext .prose{color:#D6D0E2}

/* ---------- the builders page: everyone in one place ---------- */
.bindex{padding-top:clamp(2rem,4vw,3rem)}
.bgrid{
  display:grid;gap:clamp(3.5rem,7vw,5rem) clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,320px));justify-content:center;
}
.bgrid a{display:grid;justify-items:center;text-align:center}
.bgrid-arch{
  position:relative;width:min(300px,78vw);aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;
  border-radius:50% 50% 0 0 / 38% 38% 0 0;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(224,179,82,.45);
  border-bottom:2px solid transparent;
  background:linear-gradient(180deg,rgba(224,179,82,.05),transparent 40%);
}
.bgrid-arch::after{
  content:"";position:absolute;left:-12%;right:-12%;bottom:-2px;height:2px;background:var(--leaf-gold);
  box-shadow:0 10px 26px -6px rgba(224,179,82,.45);
}
.bgrid-glow{
  position:absolute;inset:6% 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 50% at 50% 42%,rgba(224,179,82,.24),rgba(252,41,153,.07) 58%,transparent 76%);
}
.bgrid-arch img{
  width:88%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  transition:transform .7s var(--ease);transform-origin:50% 100%;
}
.bgrid a:hover .bgrid-arch img,.bgrid a:focus-visible .bgrid-arch img{transform:translateY(-6px) scale(1.02)}
.bgrid-name{
  margin-top:1.8rem;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:.04em;color:var(--silver);
}
.bgrid-biz{margin-top:.45rem;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fuchsia)}
.bgrid-line{margin-top:.6rem;font-family:var(--prose);font-size:1.12rem;line-height:1.5;color:#C4BECF;text-wrap:balance;max-width:26ch}
.bgrid-go{
  margin-top:1rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(224,179,82,.5);padding-bottom:.2em;
}
.bindex-note{margin-top:clamp(3.5rem,7vw,5rem);text-align:center;font-size:.8rem;letter-spacing:.06em;color:var(--steel)}

/* ---------- her other businesses ---------- */
.bmore-eyebrow{margin-top:clamp(4.5rem,9vw,6.5rem)}
.bmore{display:grid;gap:clamp(1.5rem,3vw,2.2rem);margin-top:1.4rem}
@media(min-width:880px){.bmore{grid-template-columns:1fr 1fr}}
.bmore-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bmore-card h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.3;color:var(--silver);
}
.bmore-quote{
  margin:1rem 0 1.8rem;font-family:var(--prose);font-style:italic;font-size:clamp(1.1rem,1.4vw,1.25rem);
  line-height:1.6;color:#D6D0E2;overflow-wrap:anywhere;
}
.bmore-card .btn{margin-top:auto}
.plate-eyebrow--rose{color:var(--fuchsia)}

/* ---------- a head and shoulders photo stands in the arch a little larger ---------- */
.bhero-photo--bust{width:96%}
.bgrid-arch--bust img{width:100%}

/* ---------- a builder who offers services, not a shop ---------- */
.bmore--offer{margin-top:clamp(3rem,6vw,4.5rem)}
.bmore--offer .bmore-card{justify-content:flex-start}
.bmore--offer .bmore-card h3{margin-top:.2rem}
@media(min-width:880px){.bmore--offer .bmore-card--wide{grid-column:1 / -1}}