/* Home: an architectural discovery journey. Shared brand values remain in tokens.css. */
.marketing-home { --home-mint: #e7f0eb; }
.marketing-home .shell { width: min(1440px, calc(100% - clamp(36px, 7vw, 112px))); margin-inline: auto; }
.public-site .home-story { background: var(--color-surface); }
.home-story :where(h1,h2,h3,p) { margin-top: 0; }
.home-story :where(a,button,summary):focus-visible { outline: 3px solid var(--color-action); outline-offset: 5px; }
.home-story :where(button,summary) { touch-action: manipulation; }
.home-story :where(h1,h2) { font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; }
.home-story h2 { font-size: clamp(2.1rem, 3.35vw, 3.6rem); margin-bottom: 22px; }
.home-story p { line-height: 1.75; }
.public-site .home-label { color: var(--color-brand-teal-deep); font: 650 .79rem/1.5 var(--font-body); margin: 0 0 20px; }
.home-section { padding-block: clamp(64px, 8vw, 120px); }
.home-heading { display: grid; grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: end; margin-bottom: 42px; }
.home-heading h2 { margin-bottom: 0; }
.home-heading > div:last-child { max-width: 430px; justify-self: end; }
.home-heading p { font-size: .95rem; }
.home-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--color-brand-teal-deep); font-size: .84rem; font-weight: 750; text-decoration: none; border-bottom: 1px solid var(--color-brand-champagne); }
.home-link svg { flex: none; transition: transform 180ms ease; }
.home-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 28px; padding: 12px 24px; border-radius: 8px; font-size: .86rem; font-weight: 750; text-decoration: none; }
.home-button--light { color: var(--color-brand-teal-deep); background: var(--color-surface-warm); }
/* A light title frame opens into the full architectural panorama. */
.home-hero { padding-top: 135px; background: var(--color-surface-warm); }
.home-hero__heading { display: grid; grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: end; padding-block: 30px 45px; }
.home-hero h1 { font-size: clamp(3.4rem, 5.7vw, 6.1rem); line-height: 1.02; max-width: 13ch; margin: 0; }
.home-hero__intro { max-width: 370px; padding-bottom: 8px; justify-self: end; }
.home-hero__intro p { font-size: .94rem; margin-bottom: 15px; }
.home-showcase { position: relative; width: min(1680px, calc(100% - 32px)); margin: auto; overflow: hidden; border-radius: 12px; isolation: isolate; }
.home-showcase__images { position: relative; height: clamp(360px, 39vw, 620px); background: var(--color-surface-soft); }
.home-showcase__images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0; transition: opacity 280ms ease; }
.home-showcase__images img.is-active { opacity: 1; }
.home-showcase__caption { position: absolute; top: 24px; left: 28px; padding: 12px 16px; background: rgb(255 255 255 / 94%); border-radius: 8px; }
.home-showcase__caption > span { display: block; color: var(--color-brand-ink); font-size: .83rem; font-weight: 700; }
.home-showcase__caption small { display: block; color: var(--color-text-muted); font-size: .66rem; margin-top: 4px; }
.home-showcase__switcher { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); display: flex; gap: 6px; padding: 7px; background: rgb(255 255 255 / 96%); border-radius: 10px; box-shadow: var(--shadow-soft); }
.home-showcase__switcher button { display: flex; align-items: center; gap: 10px; min-height: 46px; border: 0; border-radius: 6px; padding: 10px 18px; background: transparent; color: var(--color-brand-ink); cursor: pointer; font-size: .73rem; font-weight: 650; }
.home-showcase__switcher button[aria-pressed="true"] { color: white; background: var(--color-brand-teal-deep); }
.home-showcase__dot { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
[aria-pressed="true"] > .home-showcase__dot { background: var(--color-brand-champagne); border-color: var(--color-brand-champagne); }
.home-start { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 22px; padding-block: 28px 35px; align-items: stretch; }
.home-start__lead { align-self: center; }
.home-start__lead > span { font-size: .73rem; color: var(--color-text-muted); }
.home-start__lead h2 { margin: 5px 0 0; font: 650 1.15rem/1.3 var(--font-body); letter-spacing: -.025em; }
.home-start__choice { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); color: var(--color-brand-teal-deep); text-decoration: none; }
.home-start__choice span { flex: 1; }
.home-start__choice svg { flex: none; }
.home-start__choice strong, .home-start__choice small { display: block; }
.home-start__choice strong { font-size: .88rem; }
.home-start__choice small { margin-top: 5px; font-size: .73rem; }
.home-start__choice--teal { background: var(--color-brand-teal-deep); color: white; border-color: var(--color-brand-teal-deep); }
/* Published tenant catalogue, never a disconnected mock listing. */
.home-models { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.home-model__image { display: block; position: relative; overflow: hidden; border-radius: 10px; }
.home-model__image img { width: 100%; aspect-ratio: 1.35; height: auto; object-fit: cover; transition: transform 280ms ease; }
.home-model__image > span:first-of-type { position: absolute; top: 14px; left: 14px; padding: 6px 10px; background: var(--color-surface); border-radius: 5px; font-size: .65rem; color: var(--color-brand-ink); }
.home-model__arrow { position: absolute; bottom: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-brand-teal-deep); background: var(--color-surface); }
.home-model__body { padding-top: 22px; }
.home-model h3 { font-size: 1.2rem; margin-bottom: 12px; }
.home-model h3 a { text-decoration: none; }
.home-model p { font-size: .83rem; margin-bottom: 18px; }
.home-model ul { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 15px 0 0; margin: 0; list-style: none; border-top: 1px solid var(--color-border); font-size: .73rem; color: var(--color-brand-teal-deep); }
.home-collection__empty { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.home-collection__empty img { width: 100%; height: auto; }
.home-collection__empty small { display: block; margin-top: 15px; }
/* Deep teal is an intentional chapter in a predominantly light page. */
.home-design { background: var(--color-brand-teal-deep); padding-block: clamp(64px,8vw,112px); }
.home-design__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px,7vw,105px); align-items: center; }
.home-design__visual { padding-bottom: 80px; position: relative; }
.home-design__visual > img { width: 100%; aspect-ratio: .95; height: auto; object-fit: cover; border-radius: 140px 12px 12px 12px; }
.home-design__sample { position: absolute; bottom: 0; right: -18px; width: min(86%,360px); padding: 25px; color: var(--color-brand-ink); background: var(--color-surface-warm); border-radius: 10px; box-shadow: var(--shadow-deep); }
.home-design__sample > span { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .85rem; margin-bottom: 16px; color: var(--color-brand-teal-deep); }
.home-design__sample > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid var(--color-border); font-size: .72rem; }
.home-design__sample small { display: block; color: var(--color-text-muted); font-size: .75rem; margin-top: 12px; }
.public-site .home-design__copy, .public-site .home-design__copy h2 { color: white; }
.public-site .home-design__copy > p { color: #dbe8e3; font-size: .9rem; }
.public-site .home-design__copy .home-label { color: var(--color-brand-champagne); }
.home-design__steps { list-style: none; padding: 0; margin: 30px 0; }
.home-design__steps li { display: flex; gap: 20px; margin-top: 20px; }
.home-design__steps li > span { color: var(--color-brand-champagne); font-size: .75rem; padding-top: 3px; }
.home-design__steps h3 { font-size: .95rem; margin: 0 0 5px; color: white; }
.public-site .home-design__steps p { color: #dbe8e3; font-size: .79rem; margin: 0; }
.home-design__copy > small { display: block; max-width: 50ch; margin-top: 18px; color: #dbe8e3; font-size: .67rem; }
.home-land { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.home-land > div:first-child > p:last-child { max-width: 43ch; font-size: .95rem; }
.home-land__choices form { margin: 0; }
.home-land__choice { display: flex; align-items: center; width: 100%; gap: 22px; padding: 26px 4px; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; text-align: left; text-decoration: none; cursor: pointer; color: var(--color-brand-teal-deep); }
.home-land__choice > span { flex: 1; }
.home-land__choice svg { flex: none; }
.home-land__choice strong,.home-land__choice small { display: block; }
.home-land__choice strong { font-size: 1rem; }
.home-land__choice small { color: var(--color-text-muted); font-size: .79rem; line-height: 1.6; margin-top: 6px; }
.home-method { background: var(--home-mint); }
.home-build { display: grid; grid-template-columns: 1.7fr 1fr; background: var(--color-surface); border-radius: 12px; overflow: hidden; }
.home-build__scene { position: relative; aspect-ratio: 1672 / 1100; background: var(--color-surface-soft); }
.home-build__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms ease; }
.home-build__scene img.is-active { opacity: 1; }
.home-build__scene > span { position: absolute; left: 15px; bottom: 14px; max-width: 70%; padding: 6px 9px; border-radius: 4px; background: var(--color-surface); font-size: .6rem; }
.home-build__scene > button { position: absolute; right: 15px; bottom: 14px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 5px; background: white; color: var(--color-brand-teal-deep); cursor: pointer; font-size: .72rem; }
.home-build__controls { padding: clamp(20px,3vw,42px); align-self: center; }
.home-build__controls > p:first-child { font-weight: 700; font-size: .93rem; }
.home-build__stages { display: grid; gap: 5px; }
.home-build__stages button { display: flex; gap: 16px; align-items: center; min-height: 46px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 10px 14px; text-align: left; font-size: .84rem; }
.home-build__stages button span { font-size: .65rem; }
.home-build__stages button[aria-pressed="true"] { background: var(--color-brand-teal-deep); color: white; }
.public-site .home-build__description { margin: 20px 0 0; font-size: .75rem; min-height: 4em; }
.home-materials { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,100px); align-items: center; }
.home-materials__image { position: relative; }
.home-materials__image img { width: 100%; height: auto; aspect-ratio: .95; object-fit: cover; border-radius: 10px; }
.home-materials__image span { position: absolute; left: 18px; bottom: 18px; padding: 8px 12px; font-size: .66rem; background: var(--color-surface); border-radius: 5px; }
.home-materials__item { display: flex; gap: 20px; margin-block: 24px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.home-materials__item svg { flex: none; color: var(--color-brand-teal); }
.home-materials__item h3 { font-size: 1rem; margin-bottom: 6px; }
.home-materials__item p { margin: 0; font-size: .83rem; }
.home-faq { background: var(--color-surface-warm); }
.home-faq__grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 80px; }
.home-faq details { border-bottom: 1px solid var(--color-border-strong); }
.home-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 76px; padding-block: 18px; cursor: pointer; font-size: .91rem; font-weight: 650; list-style: none; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary span { font-size: 1.5rem; color: var(--color-brand-teal); transition: transform 180ms ease; }
.home-faq details[open] summary span { transform: rotate(45deg); }
.home-faq details p { padding-right: 28px; font-size: .86rem; }
.home-finale { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--color-brand-teal-deep); overflow: hidden; }
.home-finale > .shell { width: auto; margin: 0; padding: clamp(50px,7vw,105px); align-self: center; }
.public-site .home-finale p { color: var(--color-brand-champagne); font-size: .86rem; }
.home-finale h2 { color: white; max-width: 12ch; font-size: clamp(2.6rem,4.4vw,4.8rem); }
.home-finale img { width: 100%; height: 100%; object-fit: cover; }
.home-finale__secondary { display: block; width: fit-content; min-height: 44px; margin-top: 15px; padding-block: 10px; color: white; font-size: .78rem; text-underline-offset: 5px; }
/* The final invitation already appears above; avoid repeating it in the shared footer. */
.marketing-home .public-footer__lead { display: none; }
.home-story [hidden] { display: none !important; }
@media (hover:hover) and (pointer:fine) {
 .home-link:hover svg { transform: translateX(5px); }
 .home-model__image:hover img { transform: scale(1.035); }
 .home-start__choice:hover,.home-land__choice:hover { box-shadow: inset 0 -3px var(--color-brand-champagne); }
 .home-button:hover { background: white; }
 .home-showcase__switcher button:not([aria-pressed="true"]):hover { background: var(--home-mint); }
}
@media (prefers-reduced-motion:no-preference) {
 .home-hero__heading { animation: home-intro 600ms ease-out both; }
 @keyframes home-intro { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (min-width:1800px) { .home-showcase__images { height: 660px; } }
@media (max-width:1100px) {
 .home-hero__heading,.home-heading { gap: 35px; }
 .home-start { gap: 12px; grid-template-columns: 1fr 1fr; }
 .home-start__lead { grid-column: 1/-1; }
 .home-design__grid,.home-land,.home-faq__grid { gap: 40px; }
 .home-build { grid-template-columns: 1.3fr 1fr; }
 .home-build__scene { aspect-ratio: auto; min-height: 390px; }
}
@media (max-width:760px) {
 .home-hero { padding-top: 110px; }
 .home-hero__heading { grid-template-columns: 1fr; gap: 22px; padding-block: 20px 30px; }
 .home-hero h1 { font-size: clamp(3.1rem,10vw,4.4rem); max-width: 14ch; }
 .home-hero__intro { justify-self: start; max-width: 50ch; padding: 0; }
 .home-hero__intro p { font-size: .86rem; margin-bottom: 8px; }
 .home-showcase { width: calc(100% - 20px); }
 .home-showcase__images { height: auto; aspect-ratio: 1.22; }
 .home-showcase__images img { object-position: center; }
 .home-showcase__caption { left: 12px; top: 12px; padding: 9px 11px; }
 .home-showcase__caption span { font-size: .71rem; }
 .home-showcase__caption small { font-size: .57rem; }
 .home-showcase__switcher { position: static; transform: none; width: 100%; max-width: none; border-radius: 0; gap: 4px; padding: 7px; }
 .home-showcase__switcher button { flex: 1; min-width: 0; justify-content: center; padding: 8px 5px; font-size: .64rem; line-height: 1.4; }
 .home-showcase__dot { display: none; }
 .home-start { grid-template-columns: 1fr; padding-block: 25px; }
 .home-start__choice { padding: 17px; }
 .home-heading,.home-design__grid,.home-land,.home-materials,.home-faq__grid,.home-collection__empty { grid-template-columns: 1fr; gap: 28px; }
 .home-heading > div:last-child { justify-self: start; }
 .home-heading h2 { margin: 0; }
 .home-models { grid-template-columns: 1fr; gap: 36px; }
 .home-model__image img { aspect-ratio: 1.5; }
 .home-design__visual { max-width: 520px; }
 .home-design__visual > img { aspect-ratio: 1.2; border-top-left-radius: 80px; }
 .home-design__sample { right: 0; }
 .home-design__copy { margin-top: 15px; }
 .home-build { grid-template-columns: 1fr; }
 .home-build__scene { min-height: 0; aspect-ratio: 1672 / 941; }
 .home-build__stages { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; }
 .home-build__stages button { flex-direction: column; padding: 9px 2px; gap: 5px; font-size: .59rem; text-align: center; }
 .home-build__controls { padding: 20px 12px; }
 .public-site .home-build__description { min-height: 0; }
 .home-materials__image img { aspect-ratio: 1.3; }
 .home-finale { grid-template-columns: 1fr; }
 .home-finale > .shell { padding: 55px 24px; }
 .home-finale img { height: auto; aspect-ratio: 1.6; }
}
@media (prefers-reduced-motion:reduce) { .home-story *, .home-story *::before, .home-story *::after { animation: none !important; transition: none !important; } }

.home-showcase__switcher button[aria-busy="true"] { cursor: progress; opacity: .7; }
.home-showcase__switcher button:disabled { cursor: not-allowed; opacity: .5; }
.home-story :where(h1,h2,h3) { overflow-wrap: anywhere; }

/* Full-screen framed hero with a brisk, fixed-camera construction timelapse. */
.marketing-home .home-hero { padding: 12px; background: #fff; }
.marketing-home .home-showcase--build { position: relative; isolation: isolate; width: 100%; height: calc(100vh - 24px); height: calc(100dvh - 24px); min-height: 520px; overflow: hidden; border-radius: 10px; background: var(--color-brand-ink); }
.home-showcase--build .home-showcase__images { position: absolute; z-index: -1; inset: 0; height: 100%; overflow: hidden; background: var(--color-brand-ink); }
.home-showcase--build .home-showcase__images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; opacity: 0; animation: urbanix-construction-film 12s linear infinite; will-change: opacity; }
.home-showcase--build .home-showcase__images img.is-active { opacity: 1; }
.home-showcase--build .home-showcase__images img:nth-child(1) { animation-delay: 0s; }
.home-showcase--build .home-showcase__images img:nth-child(2) { animation-delay: -9.6s; }
.home-showcase--build .home-showcase__images img:nth-child(3) { animation-delay: -7.2s; }
.home-showcase--build .home-showcase__images img:nth-child(4) { animation-delay: -4.8s; }
.home-showcase--build .home-showcase__images img:nth-child(5) { animation-delay: -2.4s; }
@keyframes urbanix-construction-film {
  0%, 1.25%, 18.75% { opacity: 1; }
  20%, 98.75% { opacity: 0; }
  100% { opacity: 1; }
}
.home-showcase--build .home-showcase__shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgb(7 26 32 / 76%) 0%,rgb(7 26 32 / 55%) 31%,rgb(7 26 32 / 16%) 59%,transparent 84%),linear-gradient(0deg,rgb(7 26 32 / 42%) 0%,transparent 32%); pointer-events: none; }
.home-showcase--build .home-showcase__content { position: absolute; z-index: 1; top: 50%; left: max(5.5%,calc((100% - 1440px)/2)); width: min(620px,50%); padding: 0; transform: translateY(-48%); color: white; }
.public-site .home-showcase--build .home-label { margin-bottom: 20px; color: #f3dfb6; font-size: .86rem; }
.public-site .home-showcase--build h1 { max-width: 10ch; margin-bottom: 24px; color: white; font-size: clamp(3.4rem,6.2vw,6.6rem); line-height: .99; text-shadow: 0 2px 24px rgb(0 0 0 / 14%); }
.public-site .home-showcase--build .home-showcase__description { max-width: 47ch; margin-bottom: 28px; color: rgb(255 255 255 / 94%); font-size: clamp(.95rem,1.15vw,1.08rem); line-height: 1.7; }
.home-showcase__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.home-showcase__actions .home-button { min-height: 54px; padding-inline: 22px; box-shadow: 0 10px 28px rgb(0 0 0 / 16%); }
.home-showcase__link { display: inline-flex; min-height: 48px; align-items: center; gap: 12px; color: white; font-size: .85rem; font-weight: 750; text-decoration: none; text-underline-offset: 5px; }
.home-showcase__link:hover { text-decoration: underline; }
.home-showcase__link:focus-visible { outline: 3px solid var(--color-brand-champagne); outline-offset: 3px; }
.home-showcase__note { position: absolute; z-index: 2; right: 24px; bottom: 22px; margin: 0; padding: 8px 12px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 4px; color: rgb(255 255 255 / 90%); background: rgb(7 26 32 / 48%); font-size: .67rem; letter-spacing: .025em; backdrop-filter: blur(10px); }
@media (max-width: 900px) {
  .home-showcase--build .home-showcase__shade { background: linear-gradient(0deg,rgb(7 26 32 / 82%) 0%,rgb(7 26 32 / 52%) 42%,transparent 100%); }
  .home-showcase--build .home-showcase__content { top: auto; bottom: 42px; left: 6%; width: 82%; transform: none; }
  .home-showcase--build h1 { max-width: 13ch; }
  .home-showcase__note { top: 104px; right: 18px; bottom: auto; }
}
@media (max-width: 560px) {
  .marketing-home .home-hero { padding: 10px; }
  .marketing-home .home-showcase--build { height: calc(100vh - 20px); height: calc(100dvh - 20px); min-height: 520px; border-radius: 8px; }
  .home-showcase--build .home-showcase__images img { object-position: 51% center; }
  .home-showcase--build .home-showcase__shade { background: linear-gradient(0deg,rgb(7 26 32 / 88%) 0%,rgb(7 26 32 / 64%) 40%,rgb(7 26 32 / 7%) 100%); }
  .home-showcase--build .home-showcase__content { right: 22px; bottom: 30px; left: 22px; width: auto; }
  .public-site .home-showcase--build .home-label { margin-bottom: 14px; font-size: .75rem; }
  .public-site .home-showcase--build h1 { max-width: 10ch; margin-bottom: 16px; font-size: clamp(2.85rem,12vw,4.1rem); }
  .public-site .home-showcase--build .home-showcase__description { margin-bottom: 19px; font-size: .85rem; line-height: 1.6; }
  .home-showcase__actions { align-items: flex-start; flex-direction: column; gap: 6px; }
  .home-showcase__actions .home-button { width: 100%; }
  .home-showcase__note { top: 104px; right: 14px; bottom: auto; max-width: calc(100% - 28px); font-size: .58rem; }
}

/* Approved 2026 public hero: architectural film, editorial copy and live model finder. */
.marketing-home .home-hero { min-height:100svh; padding:18px; background:#fff; }
.marketing-home .home-showcase--build { width:100%; height:calc(100svh - 36px); min-height:720px; border-radius:18px; box-shadow:0 20px 70px rgb(8 30 31 / 14%); }
.home-showcase--build .home-showcase__images img { animation:none !important; opacity:0; transform:scale(1.015); transition:opacity .72s ease,transform 1.8s ease; }
.home-showcase--build .home-showcase__images img.is-active { opacity:1; transform:scale(1); }
.home-showcase--build .home-showcase__shade { background:linear-gradient(90deg,rgb(5 23 27 / 78%) 0%,rgb(5 23 27 / 48%) 34%,rgb(5 23 27 / 4%) 66%),linear-gradient(0deg,rgb(5 23 27 / 47%) 0%,transparent 48%); }
.home-showcase--build .home-showcase__content { top:43%; left:clamp(52px,6vw,112px); width:min(680px,49%); transform:translateY(-50%); }
.public-site .home-showcase--build h1 { max-width:9ch; font-size:clamp(4rem,7vw,7.5rem); letter-spacing:-.045em; }
.public-site .home-showcase--build .home-label { display:flex; align-items:center; gap:14px; letter-spacing:.17em; text-transform:uppercase; }
.public-site .home-showcase--build .home-label::before { width:38px; height:1px; content:""; background:currentColor; }
.home-film-control { position:absolute; z-index:5; right:28px; bottom:188px; min-width:74px; padding:9px 13px; border:1px solid rgb(255 255 255 / 45%); border-radius:999px; color:#fff; background:rgb(4 26 27 / 40%); font:700 .68rem/1 var(--font-sans); backdrop-filter:blur(10px); }
.home-film-progress { position:absolute; z-index:5; right:28px; bottom:174px; width:74px; height:2px; overflow:hidden; background:rgb(255 255 255 / 35%); }
.home-film-progress i { display:block; width:0; height:100%; background:#fff; }
.home-match { position:absolute; z-index:4; right:30px; bottom:26px; left:30px; display:grid; grid-template-columns:minmax(0,1fr) 310px; min-height:130px; overflow:hidden; border:1px solid rgb(255 255 255 / 60%); border-radius:15px; background:rgb(255 253 249 / 96%); box-shadow:0 16px 45px rgb(4 25 27 / 23%); backdrop-filter:blur(18px); }
.home-match__options { display:grid; grid-template-columns:1fr .9fr 1.35fr; align-items:center; }
.home-match fieldset { min-width:0; margin:0; padding:19px 24px; border:0; border-right:1px solid #ddd9d0; }
.home-match legend { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#273637; font-size:.67rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.home-match legend span { display:grid; width:26px; height:26px; place-items:center; border:1px solid #cbc8c0; border-radius:50%; letter-spacing:0; }
.home-match fieldset > div { display:flex; flex-wrap:wrap; gap:7px; }
.home-match fieldset button { min-height:39px; padding:8px 13px; border:1px solid #d8d6cf; border-radius:7px; color:#263537; background:#fff; font:650 .76rem/1 var(--font-sans); }
.home-match fieldset button[aria-pressed="true"] { border-color:#00594f; color:#fff; background:#00594f; box-shadow:0 5px 15px rgb(0 89 79 / 16%); }
.home-match__result { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 94px; align-items:center; gap:13px; padding:16px 18px; color:#10292c; background:#f3eee4; text-decoration:none; }
.home-match__result span { min-width:0; }
.home-match__result small,.home-match__result em { display:block; color:#6e7673; font-size:.66rem; font-style:normal; }
.home-match__result small { margin-bottom:7px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.home-match__result strong { display:block; margin-bottom:7px; overflow:hidden; font-family:var(--font-display); font-size:1.45rem; font-weight:500; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.home-match__result img { width:94px; height:88px; border-radius:9px; object-fit:cover; }
.home-match__result > i { position:absolute; right:9px; bottom:9px; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:#00695e; }
.home-showcase--build .home-showcase__note { top:112px; right:28px; bottom:auto; }
.home-process-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px; border-block:1px solid #d9ddd7; }
.home-process-strip article { padding:30px 28px; border-right:1px solid #d9ddd7; }
.home-process-strip article:last-child { border:0; }
.home-process-strip span { color:#008b7d; font-size:.72rem; font-weight:800; }
.home-process-strip h3 { margin:22px 0 10px; font-size:1.25rem; }
.home-process-strip p { margin:0; color:#63706f; font-size:.83rem; }
.home-principles { border-bottom:1px solid #dde1dc; background:#fff; }
.home-principles .shell { display:grid; grid-template-columns:repeat(3,1fr); }
.home-principles span { display:flex; min-height:72px; padding:14px 24px; align-items:center; justify-content:center; border-right:1px solid #dde1dc; color:#47605e; font-size:.7rem; font-weight:750; letter-spacing:.055em; text-align:center; text-transform:uppercase; }
.home-principles span:first-child { border-left:1px solid #dde1dc; }

@media (max-width:1180px) {
  .home-match { grid-template-columns:1fr 265px; }
  .home-match fieldset { padding-inline:15px; }
  .home-match fieldset button { padding-inline:10px; }
}

@media (max-width:800px) {
  .marketing-home .home-hero { padding:10px; background:var(--color-surface-warm); }
  .marketing-home .home-showcase--build { display:block; height:auto; min-height:0; overflow:hidden; border-radius:18px; background:#f7f4ed; }
  .marketing-home .home-showcase--build .home-showcase__images { position:relative; z-index:0; width:100%; height:43svh; min-height:310px; }
  .marketing-home .home-showcase--build .home-showcase__images img { object-position:52% 54%; }
  .marketing-home .home-showcase--build .home-showcase__shade { display:none; }
  .marketing-home .home-showcase--build .home-showcase__content { position:relative; z-index:2; inset:auto; width:auto; margin-top:-46px; padding:70px 28px 28px; transform:none; color:#0b292c; background:#f7f4ed; clip-path:polygon(0 28px,100% 0,100% 100%,0 100%); }
  .marketing-home .home-showcase--build .home-label { color:#a46c22; }
  .marketing-home .home-showcase--build h1 { max-width:10ch; margin-bottom:18px; color:#09272a; font-size:clamp(3.2rem,13vw,5.5rem); text-shadow:none; }
  .marketing-home .home-showcase--build .home-showcase__description { color:#626d6d; }
  .marketing-home .home-showcase__actions { display:grid; }
  .marketing-home .home-showcase__actions .home-button { width:100%; color:#fff; background:#00594f; }
  .marketing-home .home-showcase__link { justify-content:center; color:#00594f; }
  .home-match { position:relative; inset:auto; display:block; margin:0 18px 20px; border-color:#ebe6db; box-shadow:0 12px 34px rgb(21 49 46 / 10%); }
  .home-match__options { display:block; }
  .home-match fieldset { padding:18px; border-right:0; border-bottom:1px solid #e1ddd4; }
  .home-match__result { grid-template-columns:minmax(0,1fr) 105px; min-height:128px; }
  .home-match__result img { width:105px; height:94px; }
  .home-film-control { top:20px; right:18px; bottom:auto; }
  .home-film-progress { top:62px; right:18px; bottom:auto; }
  .home-showcase--build .home-showcase__note { top:82px; right:18px; }
  .home-process-strip { grid-template-columns:1fr 1fr; }
  .home-process-strip article:nth-child(2) { border-right:0; }
  .home-process-strip article:nth-child(-n+2) { border-bottom:1px solid #d9ddd7; }
  .home-principles .shell { width:100%; grid-template-columns:1fr; }
  .home-principles span,.home-principles span:first-child { min-height:52px; border-right:0; border-bottom:1px solid #e5e8e3; border-left:0; }
}

@media (max-width:520px) {
  .marketing-home .home-showcase--build .home-showcase__images { height:39svh; min-height:270px; }
  .marketing-home .home-showcase--build .home-showcase__content { padding-inline:20px; }
  .marketing-home .home-showcase--build h1 { font-size:clamp(3rem,14vw,4.15rem); }
  .home-match { margin-inline:12px; }
  .home-match fieldset > div { display:grid; grid-template-columns:repeat(2,1fr); }
  .home-match fieldset button { width:100%; }
  .home-match__result { grid-template-columns:minmax(0,1fr) 90px; padding:15px; }
  .home-match__result img { width:90px; height:86px; }
  .home-process-strip { display:block; }
  .home-process-strip article { border-right:0; border-bottom:1px solid #d9ddd7; }
}
@media (prefers-reduced-motion: reduce) {
  .home-showcase--build .home-showcase__images img { animation: none; opacity: 0; }
  .home-showcase--build .home-showcase__images img.is-active { opacity: 1; }
}


/* Mobile and tablet: one image-first editorial composition. */
@media (max-width: 800px) {
  .marketing-home .home-hero {
    min-height: 0;
    padding: 10px;
    background: var(--color-surface-warm);
  }
  .marketing-home .public-header { padding-top: 10px; }
  .marketing-home .public-header .shell { width: calc(100% - 20px); }
  .marketing-home .public-header__row {
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    min-height: 76px;
    padding: 10px 12px 10px 18px;
    border: 0;
    border-radius: 18px 18px 10px 10px;
    background: #fff;
    box-shadow: none;
  }
  .marketing-home .public-header .brand:not(.brand--tagline) { width: clamp(174px, 37vw, 238px); }
  .marketing-home .public-header .brand__logo { height: 50px; }
  .marketing-home .public-header__toggle {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  .marketing-home .public-header__toggle span { display: none; }
  .marketing-home .public-nav {
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    border-radius: 12px;
  }
  .marketing-home .home-showcase--build {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: 76px;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    color: var(--color-brand-ink);
    background: #f7f4ed;
    box-shadow: none;
  }
  .marketing-home .home-showcase--build .home-showcase__images {
    position: relative;
    inset: auto;
    order: 1;
    z-index: 0;
    width: 100%;
    height: clamp(330px, 58vw, 470px);
    min-height: 0;
    flex: none;
    background: #dce5df;
  }
  .marketing-home .home-showcase--build .home-showcase__images img {
    object-position: 53% 58%;
  }
  .marketing-home .home-showcase--build .home-showcase__shade,
  .marketing-home .home-film-control,
  .marketing-home .home-film-progress,
  .marketing-home .home-showcase__note { display: none; }
  .marketing-home .home-showcase--build .home-showcase__content {
    position: relative;
    inset: auto;
    order: 2;
    z-index: 2;
    width: auto;
    margin-top: -48px;
    padding: 82px clamp(28px, 7vw, 58px) 34px;
    transform: none;
    clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
    color: var(--color-brand-ink);
    background: #f7f4ed;
  }
  .public-site .home-showcase--build .home-label {
    margin-bottom: 19px;
    color: #9a641f;
    font-size: .72rem;
    line-height: 1.45;
  }
  .public-site .home-showcase--build h1 {
    max-width: 11ch;
    margin-bottom: 22px;
    color: #08262a;
    font-size: clamp(3.6rem, 11vw, 5.4rem);
    line-height: .92;
    letter-spacing: -.055em;
    text-shadow: none;
  }
  .public-site .home-showcase--build .home-showcase__description {
    max-width: 42ch;
    margin-bottom: 26px;
    color: #5d6869;
    font-size: 1rem;
    line-height: 1.65;
  }
  .marketing-home .home-showcase__actions {
    display: grid;
    gap: 10px;
  }
  .marketing-home .home-showcase__actions .home-button {
    width: 100%;
    min-height: 58px;
    justify-content: center;
    color: white;
    background: var(--color-brand-teal-deep);
    box-shadow: 0 10px 24px rgb(0 89 79 / 13%);
  }
  .marketing-home .home-showcase__link {
    min-height: 48px;
    justify-content: center;
    color: var(--color-brand-teal-deep);
    text-decoration: underline;
    text-decoration-color: #ba9152;
    text-underline-offset: 6px;
  }
  .marketing-home .home-match {
    position: relative;
    inset: auto;
    order: 3;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 clamp(20px, 5vw, 42px) clamp(24px, 5vw, 42px);
    overflow: hidden;
    border-color: #e5dfd4;
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 14px 34px rgb(21 49 46 / 10%);
    backdrop-filter: blur(12px);
  }
  .marketing-home .home-match__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .marketing-home .home-match fieldset {
    min-width: 0;
    padding: 18px;
    border: 0;
    border-bottom: 1px solid #e1ddd4;
  }
  .marketing-home .home-match fieldset:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid #e1ddd4;
  }
  .marketing-home .home-match fieldset:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    border-bottom: 0;
  }
  .marketing-home .home-match fieldset:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .marketing-home .home-match fieldset > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .marketing-home .home-match fieldset:nth-child(2) > div,
  .marketing-home .home-match fieldset:nth-child(3) > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marketing-home .home-match fieldset button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    white-space: normal;
  }
  .marketing-home .home-match__result {
    grid-template-columns: minmax(0, 1fr) 124px;
    min-height: 140px;
    padding: 18px 20px;
  }
  .marketing-home .home-match__result img {
    width: 124px;
    height: 104px;
  }
  .marketing-home .home-match__result > i {
    right: 12px;
    bottom: 18px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 520px) {
  .marketing-home .home-hero { padding: 7px; }
  .marketing-home .public-header { padding-top: 7px; }
  .marketing-home .public-header .shell { width: calc(100% - 14px); }
  .marketing-home .public-header__row {
    max-width: calc(100% - 14px);
    min-height: 68px;
    padding: 8px 9px 8px 14px;
    border-radius: 15px 15px 8px 8px;
  }
  .marketing-home .public-header .brand:not(.brand--tagline) { width: min(53vw, 184px); }
  .marketing-home .public-header .brand__logo { height: 44px; }
  .marketing-home .public-header__toggle {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
  .marketing-home .home-showcase--build {
    padding-top: 68px;
    border-radius: 15px;
  }
  .marketing-home .home-showcase--build .home-showcase__images {
    height: clamp(270px, 77vw, 330px);
  }
  .marketing-home .home-showcase--build .home-showcase__images img { object-position: 55% 57%; }
  .marketing-home .home-showcase--build .home-showcase__content {
    margin-top: -34px;
    padding: 64px 20px 28px;
    clip-path: polygon(0 25px, 100% 0, 100% 100%, 0 100%);
  }
  .public-site .home-showcase--build .home-label {
    gap: 10px;
    margin-bottom: 16px;
    font-size: .62rem;
    letter-spacing: .12em;
  }
  .public-site .home-showcase--build .home-label::before { width: 26px; }
  .public-site .home-showcase--build h1 {
    max-width: 10ch;
    margin-bottom: 18px;
    font-size: clamp(3rem, 15vw, 4.15rem);
  }
  .public-site .home-showcase--build .home-showcase__description {
    margin-bottom: 22px;
    font-size: .9rem;
  }
  .marketing-home .home-showcase__actions .home-button { min-height: 54px; }
  .marketing-home .home-match {
    margin: 0 12px 18px;
    border-radius: 13px;
  }
  .marketing-home .home-match fieldset { padding: 15px 12px; }
  .marketing-home .home-match legend {
    gap: 7px;
    font-size: .57rem;
    letter-spacing: .09em;
  }
  .marketing-home .home-match legend span {
    width: 23px;
    height: 23px;
  }
  .marketing-home .home-match fieldset button {
    min-height: 42px;
    padding-inline: 4px;
    font-size: .67rem;
  }
  .marketing-home .home-match fieldset:nth-child(3) > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-home .home-match__result {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 120px;
    padding: 15px;
  }
  .marketing-home .home-match__result strong { font-size: 1.2rem; }
  .marketing-home .home-match__result img {
    width: 92px;
    height: 88px;
  }
  .marketing-home .home-match__result > i {
    right: 8px;
    bottom: 13px;
    width: 36px;
    height: 36px;
  }
}