/* FORMA homepage interactions and Bootstrap layouts. Version 2.5.2. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }
.row { --bs-gutter-x: 0; }
.mission-grid { row-gap: 3rem; }
.founder-grid { row-gap: 3rem; }
.mission-grid > div, .founder-grid > div { padding-inline: calc(var(--bs-gutter-x) / 2); }
.press-feature { margin-inline: 0; }
.press-feature > div { height: auto; }
#site-header { transform: translateY(-100%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
body.is-ready #site-header { transform: translateY(0); }
#site-header > div { transition: background .5s, color .5s, border-color .5s; }
#site-header.is-scrolled > div { background: rgba(250,248,244,.94); color: var(--color-ink); border-color: rgba(10,10,10,.12); backdrop-filter: blur(18px); }
#site-header.is-scrolled img[src*="forma-dark"] { opacity: 1; }
#site-header.is-scrolled img[src*="forma-light"] { opacity: 0; }
.homepage-navigation { background: var(--color-cream); color: var(--color-ink); }
.homepage-navigation .shell { padding-block: 1.5rem; }
.homepage-navigation a { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; }
.homepage-navigation a:hover { color: var(--color-honey); }
#page-loader { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem,4vw,3.5rem); background: #000; color: var(--color-cream); transition: opacity .65s ease, visibility .65s; }
.loader-center { text-align: center; display: flex; flex-direction: column; align-items: center; padding-block: 2rem; }
.loader-eyebrow { font-size: .55rem; text-transform: uppercase; letter-spacing: .2em; color: var(--color-honey); }
.loader-wordmark { width: clamp(200px,24vw,300px); height: auto; margin-top: 1.75rem; }
.loader-center p { font-family: var(--font-display); font-size: clamp(1.5rem,2.3vw,2rem); margin-top: 1.5rem; }
.loader-center p em { color: var(--color-honey); }
#loader-track { width: 160px; height: 1px; overflow: hidden; background: rgba(250,248,244,.15); margin-top: 2.5rem; }
#loader-track > div { height: 100%; background: var(--color-honey); transition: width .1s linear; }
.loader-caption { margin-top: 1rem; font-size: .5rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(250,248,244,.4); }
body.is-ready #page-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.hero-enter { opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1.1s cubic-bezier(.16,1,.3,1); }
h1 .hero-enter { transform: translateY(115%); }
body.is-ready .hero-enter { opacity: 1; transform: translateY(0); transition-delay: .15s; }
body.is-ready #home ul.hero-enter { transition-delay: .5s; }
.reveal { opacity: 1; }
body.has-motion .reveal { opacity: 0; filter: blur(8px); transform: translateY(30px); transition: opacity 1s, filter 1s, transform 1s cubic-bezier(.16,1,.3,1); }
body.has-motion .reveal.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); }
.header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding-block: 1.25rem; }
.header-brand { justify-self: start; }
.header-bar > .justify-self-end { justify-self: end; }
.header-brand > span { height: 48px; }
.desktop-navigation { display: flex; align-items: center; gap: clamp(1.25rem,2.6vw,2.6rem); }
.desktop-navigation a { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.desktop-navigation a:hover, .desktop-navigation a:focus-visible { color: var(--color-honey); }
.mobile-menu-toggle { display: none; }
.header-order { white-space: nowrap; }
[data-order-online] { cursor: default; }
.gallery-grid { --bs-gutter-x: 2rem; margin: 3.5rem -1rem 0; row-gap: 2rem; }
.gallery-grid > figure { padding-inline: 1rem; }
.gallery-shot { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
.gallery-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.gallery-shot:hover img { transform: scale(1.05); }
.gallery-grid figcaption { padding-top: 1.25rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .18em; }
.contact-intro { text-align: center; }
.contact-logo { width: 175px; height: auto; margin: 2.5rem auto 1.25rem; }
.contact-grid { --bs-gutter-x: 3rem; margin: 4rem -1.5rem 0; row-gap: 3rem; }
.contact-grid > div { padding: 2rem 1.5rem 0; border-top: 1px solid rgba(10,10,10,.15); }
.contact-link { display: block; font-size: .85rem; line-height: 1.9; transition: color .3s; }
.contact-link:hover { color: var(--color-honey-deep); }
address { font-style: normal; }
.contact-hours { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(10,10,10,.15); row-gap: 2rem; }
.contact-hours > div { padding-right: 1rem; }
.footer-top { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 4rem; }
.footer-logo { width: 230px; height: auto; }
.footer-navigation { display: flex; flex-direction: column; gap: .8rem; }
.footer-navigation > span { margin-bottom: .8rem; }
.footer-navigation a { font-size: .9rem; transition: color .3s; }
.footer-navigation a:hover { color: var(--color-honey); }
.footer-bottom { margin-top: 5rem; border-top: 1px solid rgba(250,248,244,.12); padding-block: 2rem; display: flex; justify-content: space-between; gap: 1rem; color: rgba(250,248,244,.45); }
.showcase-video { object-position: center 38%; }
@media (min-width:768px) {
  .press-feature > .col-md-6 { width: 50%; }
}
@media (min-width:1024px) {
  .mission-grid { --bs-gutter-x: 5rem; margin-inline: -2.5rem; }
  .founder-grid { --bs-gutter-x: 5rem; margin-inline: -2.5rem; }
}
/* Align Bootstrap columns with the reference's 640px and 1024px breakpoints. */
@media (min-width:992px) and (max-width:1023px) {
  .mission-grid > div, .founder-grid > div { width: 100%; }
}
@media (max-width:1023px) {
  .header-bar { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .5rem; }
  .header-brand { justify-self: center; display: flex; align-items: center; }
  #studio > .founder-grid { margin-inline: auto; padding-inline: 24px; max-width: 720px; row-gap: 3rem; }
  .mobile-menu-toggle { display: block; }
  .desktop-navigation { display: none; }
  .header-brand > span { height: 38px; }
  .header-order { font-size: .6rem; padding: .8rem 1rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width:575px) {
  .header-brand > span { height: 30px; }
  .header-order { font-size: .52rem; padding: .8rem .75rem; letter-spacing: .1em; }
  .homepage-navigation .shell { gap: 1.1rem !important; }
  .gallery-grid { margin-top: 2.5rem; }
  .contact-grid { margin-top: 3rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-top > div:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hero-enter, body.has-motion .reveal { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
.membership-intro { max-width: 650px; }
.membership-intro > p { max-width: 420px; margin-top: 1.5rem; font-size: 1rem; line-height: 1.8; color: rgba(10,10,10,.65); }
.membership-grid { margin: 3.5rem -12px 0; row-gap: 24px; }
.membership-grid > div { padding-inline: 12px; }
.membership-card { display: flex; flex-direction: column; height: 100%; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid rgba(10,10,10,.18); }
.membership-featured { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }
.membership-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-honey-deep); font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; }
.membership-featured .membership-meta { color: var(--color-honey); }
.membership-card h3 { font-family: var(--font-display), Georgia, serif; font-size: clamp(2rem,3vw,3rem); margin-top: 2.5rem; font-weight: 400; }
.membership-price { font-size: 2rem; margin-top: 1.25rem; }
.membership-price span { font-size: .75rem; opacity: .6; }
.membership-description { font-size: .85rem; margin-top: .75rem; opacity: .7; }
.membership-card ul { list-style: none; padding: 0; margin: 2rem 0; flex: 1; }
.membership-card li { border-top: 1px solid currentColor; border-color: rgba(10,10,10,.12); padding-block: .9rem; font-size: .8rem; line-height: 1.6; }
.membership-featured li { border-color: rgba(250,248,244,.2); }
.membership-card .btn { justify-content: center; text-align: center; width: 100%; }
.membership-note { margin-top: 1.75rem; font-size: .7rem; line-height: 1.8; opacity: .55; max-width: 650px; }
@media (max-width:575px) { .membership-grid { margin-top: 2.5rem; } .membership-card { padding: 1.75rem; } }


.membership-card .btn-outline { border: 1px solid rgba(10,10,10,.25); color: var(--color-ink); background: transparent; }

/* Small editorial refinements for the banner, story and service menu. */
.studio-banner { background: var(--color-ink); color: var(--color-cream); padding-block: 1.4rem; border-color: rgba(250,248,244,.12); }
.studio-banner .type-h2 { font-size: clamp(1.6rem,2.6vw,2.5rem); }
.studio-banner .marquee-row > span:nth-child(even) .type-h2 { font-style: normal; color: var(--color-honey); }
.studio-banner .marquee-row > span > .text-honey { font-size: .7rem !important; opacity: .65; }
.about-kicker > span:first-child { border: 1px solid rgba(10,10,10,.2); padding: .7rem 1rem; border-radius: 2rem; }
.about-refined .mission-grid { align-items: center; }
.about-refined h2 { font-size: clamp(2.6rem,4.6vw,4.5rem); line-height: 1.06; }
.about-refined h2 .italic-serif { color: var(--color-honey-deep); }
.about-story { border-left: 1px solid var(--color-honey); padding-left: 2rem; }
.about-story p { font-size: .95rem; line-height: 1.95; }
.about-details { border-top: 0; padding-top: 0; gap: 1rem; }
.about-details > div { border: 1px solid rgba(10,10,10,.12); padding: 1.75rem; background: rgba(250,248,244,.45); }
.about-details .type-stat { font-size: clamp(2.5rem,4vw,3.5rem); line-height: 1; }
@media (max-width:1023px) {
 .about-story { padding-left: 1.5rem; }
}
@media (max-width:575px) {
 .about-kicker { flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
 .about-kicker > span:nth-child(2) { display: none; }
 .about-kicker > span:last-child { font-size: .55rem; }
 .about-details { gap: .75rem; margin-top: 2.5rem; }
 .about-details > div { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; padding: 1.25rem; align-items: center; }
 .about-details .type-stat { grid-row: 1 / 3; font-size: 2.5rem; }
 .about-details .type-eyebrow { margin-top: 0; }
 .about-details .type-body { margin-top: .4rem; font-size: .75rem; }
}
/* Editorial service cards and category filters. */
.menu-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 4rem; }
.menu-heading h2 { margin-top: 1.5rem; font-size: clamp(3rem,5.6vw,5.5rem); line-height: 1.02; }
.menu-heading-copy { max-width: 340px; justify-self: end; }
.menu-heading-copy p { font-size: .95rem; line-height: 1.85; color: rgba(250,248,244,.65); }
.menu-heading-copy > span { display: block; margin-top: 1.5rem; color: var(--color-honey); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; }
.menu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.5rem; margin-top: 3rem; border-top: 1px solid rgba(250,248,244,.2); }
.menu-filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.menu-filters button { padding: .75rem 1.1rem; border: 1px solid rgba(250,248,244,.2); border-radius: 2rem; color: rgba(250,248,244,.65); font-size: .65rem; cursor: pointer; transition: color .25s, background .25s, border-color .25s; }
.menu-filters button[aria-pressed="true"] { background: var(--color-honey); color: var(--color-ink); border-color: var(--color-honey); }
.menu-filters button:hover { border-color: var(--color-honey); }
.menu-filters button:focus-visible, .menu-card-order:focus-visible { outline: 2px solid var(--color-honey); outline-offset: 4px; }
.menu-filters button span { margin-left: .6rem; opacity: .6; }
.menu-count { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; color: rgba(250,248,244,.45); }
.menu-cards { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2rem; }
.menu-card { grid-column: span 2; background: #171512; border: 1px solid rgba(250,248,244,.12); }
.menu-card-featured { grid-column: span 3; }
.menu-card[hidden] { display: none; }
.menu-card-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #26221e; }
.menu-card-featured .menu-card-image { aspect-ratio: 16 / 10; }
.menu-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.15),transparent 45%,rgba(0,0,0,.55)); }
.menu-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.menu-card:hover .menu-card-image img { transform: scale(1.035); }
.menu-card-number { position: absolute; z-index: 1; top: 1.25rem; left: 1.25rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(250,248,244,.5); background: rgba(10,10,10,.25); font-size: .65rem; }
.menu-card-tags { position: absolute; z-index: 1; bottom: 1.25rem; left: 1.25rem; font-size: .55rem; text-transform: uppercase; letter-spacing: .14em; }
.menu-card-content { padding: 1.5rem; }
.menu-card-featured .menu-card-content { padding: 2rem; }
.menu-card-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.menu-card-title h3 { font-family: var(--font-display); font-size: clamp(1.8rem,2.8vw,2.5rem); font-weight: 400; line-height: 1.1; }
.menu-card-title > span { color: var(--color-honey); font-size: 1.3rem; }
.menu-card-content > p { margin-top: 1rem; font-size: .8rem; line-height: 1.85; color: rgba(250,248,244,.55); min-height: 7.4em; }
.menu-card-details { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(250,248,244,.12); }
.menu-card-details > span:first-child { font-size: .9rem; color: var(--color-honey); }
.menu-card-details > span:last-child { font-size: .65rem; color: rgba(250,248,244,.5); }
.menu-card-order { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding: 1rem; border: 1px solid rgba(250,248,244,.2); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; transition: background .25s; }
.menu-card-order:hover { background: rgba(250,248,244,.06); }
.menu-footnote { display: flex; justify-content: space-between; gap: 3rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(250,248,244,.12); }
.menu-footnote > span { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-honey); }
.menu-footnote p { max-width: 400px; color: rgba(250,248,244,.4); font-size: .65rem; line-height: 1.8; }
@media (max-width:1023px) {
 .menu-cards { gap: 1.25rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .menu-card, .menu-card-featured { grid-column: span 1; }
 .menu-card-featured .menu-card-image { aspect-ratio: 4 / 3; }
 .menu-card-featured .menu-card-content { padding: 1.5rem; }
 .menu-heading { gap: 2rem; }
}
@media (max-width:575px) {
 .menu-heading { grid-template-columns: 1fr; gap: 1.5rem; }
 .menu-heading-copy { justify-self: start; }
 .menu-heading-copy > span { margin-top: 1rem; }
 .menu-toolbar { margin-top: 2rem; gap: 1rem; align-items: start; }
 .menu-count { display: none; }
 .menu-filters { gap: .5rem; }
 .menu-filters button { font-size: .6rem; padding: .7rem .9rem; }
 .menu-cards { grid-template-columns: 1fr; gap: 1.5rem; }
 .menu-card-content > p { min-height: 0; }
 .menu-footnote { flex-direction: column; gap: 1rem; }
}


/* Centered homepage and a simple gallery text link. */
#home { min-height: 640px; }
.hero-centered { flex: 1; display: flex; align-items: center; padding-block: 120px 60px; }
.hero-layout { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-kicker { font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(250,248,244,.75); }
.hero-title { margin-top: 1.5rem; font-family: var(--font-display); font-size: clamp(3.5rem,5.8vw,5.2rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.hero-line { display: block; overflow: hidden; padding-bottom: .12em; }
.hero-line > span { display: block; }
.hero-title .italic-serif { color: var(--color-honey); }
.hero-services { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem 1.5rem; list-style: none; padding: 0; margin-top: 1.5rem; max-width: 550px; color: rgba(250,248,244,.7); }
.hero-services li { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.hero-gallery-bar { border-top: 1px solid rgba(250,248,244,.15); padding-block: 1.25rem; text-align: center; }
.hero-gallery-link { display: inline-flex; align-items: center; justify-content: center; gap: .9rem; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(250,248,244,.65); }
.hero-gallery-link > span { color: var(--color-honey); transition: color .3s; }
.hero-gallery-link:hover > span { color: var(--color-cream); }
.membership-featured .btn-honey { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-ink); }
.membership-featured .btn-honey:hover, .membership-featured .btn-honey:focus-visible { background: #e8cfa6; border-color: #e8cfa6; color: var(--color-ink); }
@media (max-width:575px) {
 .hero-centered { padding-block: 190px 30px; }
 .hero-kicker { font-size: .5rem; letter-spacing: .12em; }
 .hero-title { font-size: clamp(2.7rem,13vw,3.5rem); }
 .hero-services { max-width: 320px; gap: .6rem 1rem; }
 .hero-services li { font-size: .5rem; }
 .hero-actions { width: 100%; max-width: 320px; flex-direction: column; margin-top: 1.75rem; gap: .75rem; }
 .hero-actions .btn { justify-content: center; }
 .hero-gallery-link { gap: .65rem; font-size: .5rem; letter-spacing: .08em; }
}
