/* VENZA homepage sections (loaded only by the home page; tokens come from venza.css). */
.page-home { --gutter: max(1.25rem, calc((100vw - 1160px) / 2)); }

.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font: 500 .75rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--copper-light); }
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.eyebrow-teal { color: var(--teal); }

/* ---- hero ---- */
.hero { background: var(--navy); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { padding: 3.25rem var(--gutter) 3rem; align-self: center; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.6rem); line-height: 1; letter-spacing: -.01em; margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--copper-light); }
.lead { font-size: 1.15rem; max-width: 34rem; margin: 0 0 2rem; color: #d9dde6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.link-arrow { color: var(--ivory); text-decoration: none; font: 500 .82rem var(--sans); letter-spacing: .12em; text-transform: uppercase; padding-block: .4rem; border-bottom: 1px solid var(--copper); transition: color .15s; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--copper-light); }
.roles { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 2.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, .12); font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #b9c0cd; }
.roles li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 1rem; vertical-align: middle; background: var(--copper); border-radius: 50%; }
@media (max-width: 599px) {
  .roles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
  .roles li + li::before { display: none; }
}
.hero-media { position: relative; aspect-ratio: 4 / 3; background: var(--navy); overflow: hidden; }
.hero-media > img, .hero-media > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media > img, .hero-media picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(46rem, calc(100vh - 4.75rem)); }
  .hero-copy { padding: 4.5rem 3.5rem 4.5rem var(--gutter); }
  .hero-media { aspect-ratio: auto; min-height: 30rem; }
}

/* brand-artwork fallback while no hero photograph exists */
.ph-emblem { position: absolute; inset: 0; display: grid; place-items: center; background: var(--navy); }
.ph-emblem::before { content: ""; position: absolute; inset: 1.5rem; border: 1px solid var(--hair); pointer-events: none; }
.ph-emblem img { width: min(78%, 36rem); height: auto; }

/* ---- generic sections ---- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-ivory { background: var(--ivory); }
.section-white { background: var(--paper); border-block: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2, .story-copy h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.section-note { color: var(--muted); margin: 0; }

/* ---- collection tiles ---- */
.tiles { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.tile { margin: 0; }
.tile-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.tile-media > img, .tile-media > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-media > img, .tile-media picture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover .tile-media > img, .tile:hover .tile-media picture img { transform: scale(1.025); }
/* no photograph yet: compact brand-artwork tile instead of a large empty block */
.tile-media.is-placeholder { aspect-ratio: 1 / 1; }
@media (max-width: 699px) { .tile-media.is-placeholder { aspect-ratio: 5 / 4; } }
.tile figcaption { padding-top: 1.1rem; }
.tile h3 { font-size: 1.75rem; margin: .35rem 0 .35rem; }
.tile p { margin: 0; color: var(--muted); max-width: 30rem; }
.tile-tag { display: inline-block; font: 500 .68rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); border: 1px solid var(--copper); padding: .15rem .6rem; }

.ph-tile { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 2rem; }
.ph-tile::before { content: ""; position: absolute; inset: 1.25rem; border: 1px solid var(--hair); pointer-events: none; z-index: 1; }
.ph-navy { background: var(--navy); }
.ph-teal { background: var(--teal-deep); }
.ph-tile-emblem { position: absolute; left: 50%; top: 8%; width: 72%; height: auto; transform: translateX(-50%); }
.ph-tile-icons { position: absolute; left: 50%; top: 24%; width: 64%; height: auto; transform: translateX(-50%); mix-blend-mode: lighten; } /* logo icons sit on navy: 'lighten' lets the teal panel show through */
.ph-word { position: relative; z-index: 2; font: italic 500 clamp(3.5rem, 9vw, 6rem)/1 var(--serif); color: var(--copper-light); }

/* ---- benefits ---- */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.benefits li { border-top: 1px solid var(--copper); padding-top: 1.1rem; }
.benefit-n { display: block; font: italic 500 1.5rem var(--serif); color: var(--copper-dark); margin-bottom: .5rem; }
.benefits h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.benefits p { margin: 0; color: var(--muted); }

/* ---- story ---- */
.story-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; } }
.story-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e6dfd0; }
.story-media > img, .story-media > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-media > img, .story-media picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-media.is-placeholder { aspect-ratio: 1 / 1; }
.story-copy p { max-width: 34rem; margin: 0 0 1.1rem; font-size: 1.08rem; }
.ph-story { position: absolute; inset: 0; display: flex; align-items: flex-end; background: #e6dfd0; }
.ph-story::before { content: ""; position: absolute; inset: 1.25rem; border: 1px solid var(--hair); pointer-events: none; z-index: 1; }
.ph-fabric { position: absolute; left: 0; top: 0; width: 28%; height: 100%; object-fit: cover; }
.ph-quote { position: relative; margin: 0 2rem 2.25rem 34%; font: italic 500 clamp(2.2rem, 5vw, 3.4rem)/1.02 var(--serif); color: var(--navy); }

/* ---- account call-to-action ---- */
.cta { position: relative; background: var(--teal-deep); overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta-fabric { display: none; }
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 34rem; }
.cta-copy { max-width: 32rem; margin: 0 0 2rem; color: #dbe7e5; }
.cta .eyebrow { color: var(--copper-light); }
@media (min-width: 900px) {
  .cta-fabric { display: block; position: absolute; left: var(--gutter); top: 0; height: 100%; width: 5.1rem; object-fit: cover; opacity: .95; }
  .cta-inner { padding-left: 8.5rem; }
}
.story-image-fallback { position:absolute; inset:0; display:grid; place-content:center; padding:1.5rem; color:#f6f2e9; text-align:center; font:500 clamp(1.5rem,5vw,3rem)/1.2 Georgia,serif; letter-spacing:.08em; background:linear-gradient(145deg,#102338,#255d5c 62%,#a56e59); }