/* ==========================================================================
   Front page: hero slider, types, looks, feature band, tools, steps,
   audiences, FAQ, lead band.
   ========================================================================== */

.hero { position: relative; min-block-size: min(92vh, 860px); display: grid; color: #fff; background: var(--forest); isolation: isolate; }
.hero--plain { min-block-size: 0; padding-block: calc(var(--header-h) + var(--topbar-h) + 4rem) 4rem; }
.hero-slides { position: relative; display: grid; }
.hero-slide { grid-area: 1 / 1; position: relative; display: grid; align-items: end; min-block-size: min(92vh, 860px); opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 0s linear 900ms; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-slide__media { position: absolute; inset: 0; z-index: -1; background: var(--forest-2); overflow: hidden; }
.hero-slide__img, .hero-slide__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-slide.is-active .hero-slide__img { animation: vf-kenburns 14s var(--ease) both; }
@keyframes vf-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-slide__video { opacity: 0; transition: opacity 600ms; }
.hero-slide.is-playing .hero-slide__video { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 30, 24, 0.78) 0%, rgba(18, 30, 24, 0.45) 45%, rgba(18, 30, 24, 0.05) 75%), linear-gradient(to top, rgba(18, 30, 24, 0.55), transparent 40%); }
.hero-slide__inner { padding-block: calc(var(--header-h) + var(--topbar-h) + 3rem) clamp(7rem, 6rem + 4vw, 9rem); }
.hero-slide__text { max-inline-size: 640px; }
.hero__title { font-size: var(--fs-4xl); color: #fff; font-weight: 400; margin-block-end: 0.4em; }
.hero__sub { font-size: var(--fs-lg); color: #EDE6DA; max-inline-size: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
.hero .btn--primary { background: var(--oak); }
.hero .btn--primary:hover { background: var(--oak-ink); }
.hero .btn--light { background: rgba(251, 248, 243, 0.95); }
.hero-slide__caption { inset-block-end: 6.5rem; }
.hero-controls { position: absolute; inset-inline: 0; inset-block-end: 4.25rem; z-index: 4; }
.hero-controls__bar { display: flex; align-items: center; gap: 0.6rem; }
.hero-controls__btn { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-size: 0.9rem; }
.hero-controls__btn:hover { background: rgba(255, 255, 255, 0.15); }
.hero-controls__dots { display: flex; gap: 0.4rem; }
.hero-controls__dot { inline-size: 28px; block-size: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.hero-controls__dot[aria-current="true"] { background: #F1D9BC; }
.hero__trust { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; background: rgba(18, 30, 24, 0.55); backdrop-filter: blur(6px); border-block-start: 1px solid rgba(255, 255, 255, 0.1); }
.trust-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0.9rem 0; font-size: var(--fs-xs); color: #EDE6DA; }
.trust-strip li { display: inline-flex; align-items: center; gap: 0.4rem; }
.trust-strip .icon { inline-size: 14px; block-size: 14px; color: #F1D9BC; }
@media (max-width: 760px) {
  .hero__shade { background: linear-gradient(to top, rgba(18, 30, 24, 0.88), rgba(18, 30, 24, 0.6) 55%, rgba(18, 30, 24, 0.4)); }
  .hero__sub { font-size: var(--fs-md); }
  .hero-slide__inner { padding-block-end: 9.5rem; }
  .trust-strip { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .hero-slide__caption { inset-block-end: 8.5rem; }
  .hero-controls { inset-block-end: 3.6rem; }
}

/* Types */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.type-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; color: #fff; text-decoration: none; }
.type-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 30, 24, 0.85), rgba(18, 30, 24, 0) 60%); }
.type-card:hover img { transform: scale(1.05); }
.type-card__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: grid; gap: 0.25rem; padding: 1.1rem; }
.type-card__title { font-family: var(--font-head); font-size: var(--fs-xl); line-height: 1.15; }
.type-card__text { font-size: var(--fs-xs); color: #E8E2D6; }
@media (max-width: 1000px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .type-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .type-card__text { display: none; } }

/* Looks */
.looks { display: grid; gap: 1rem; margin-block-end: 2rem; }
.tone-chips, .look-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tone-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem 0.5rem 0.6rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: var(--fs-sm); }
.tone-chip:hover { border-color: var(--forest); }
.tone-chip .tone-dot { inline-size: 22px; block-size: 22px; }
.swatch-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.swatch-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; text-decoration: none; }
.swatch-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.swatch-tile:hover img { transform: scale(1.08); }
.swatch-tile__name { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.5rem 0.6rem 0.5rem; font-size: 11.5px; color: #fff; background: linear-gradient(to top, rgba(18, 30, 24, 0.8), transparent); }
@media (max-width: 900px) { .swatch-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .swatch-strip { grid-template-columns: repeat(3, 1fr); } }

/* Feature band */
.feature-band { background: var(--forest); color: #DCE6DF; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.feature-band__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.feature-band__title { color: #fff; font-size: var(--fs-3xl); font-weight: 400; }
.feature-band__list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.6rem; }
.feature-band__list li { padding-inline-start: 1.5rem; position: relative; }
.feature-band__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--oak-2); }
.feature-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.feature-band__media { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .feature-band__inner { grid-template-columns: 1fr; } }

/* Tools teasers */
.teasers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.teaser { display: grid; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.teaser--vis { grid-template-rows: auto 1fr; }
.teaser__media { aspect-ratio: 16 / 7; }
.teaser__body { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 0.75rem; align-content: start; }
.teaser__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--linen); color: var(--oak-ink); }
.teaser__title { margin: 0; }
.teaser__body p { margin: 0; color: var(--muted); }
.teaser__body .btn { justify-self: start; }
.teaser__example { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.5rem 0; padding: 0.9rem; border-radius: var(--radius); background: var(--linen); font-size: var(--fs-xs); }
.teaser__example dt { color: var(--muted); }
.teaser__example dd { margin: 0; font-weight: 600; color: var(--forest); font-size: var(--fs-sm); }
@media (max-width: 860px) { .teasers { grid-template-columns: 1fr; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step__link { position: relative; display: grid; gap: 0.5rem; block-size: 100%; padding: 1.4rem 1.2rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); transition: border-color var(--dur), transform var(--dur) var(--ease); }
.step__link:hover { border-color: var(--oak); transform: translateY(-2px); }
.step__num { position: absolute; inset-block-start: 1rem; inset-inline-end: 1.1rem; font-family: var(--font-head); font-size: 2rem; color: var(--linen-2); line-height: 1; }
.step__icon { color: var(--oak-ink); }
.step__title { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--forest); }
.step__text { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Audiences */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.aud-card { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--forest-2); border: 1px solid rgba(255, 255, 255, 0.08); }
.aud-card__icon { color: #F1D9BC; }
.aud-card__title { margin: 0; font-size: var(--fs-xl); }
.aud-card p { margin: 0; font-size: var(--fs-sm); color: #C9D6CD; }
@media (max-width: 1000px) { .aud-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .aud-grid { grid-template-columns: 1fr; } }

/* FAQ split */
.faq-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.faq-split__guides { padding: 1.5rem; background: var(--linen); border-radius: var(--radius-lg); }
.guide-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.guide-list a { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--forest); text-decoration: none; line-height: 1.3; }
.guide-list a:hover { color: var(--oak-ink); }
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; } }

/* Lead band */
.lead-band { background: var(--linen); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); border-block-start: 1px solid var(--line); }
.lead-band__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.lead-band__title { font-size: var(--fs-3xl); font-weight: 400; }
.lead-band__list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: 0.5rem; }
.lead-band__list li { display: flex; gap: 0.5rem; align-items: center; }
.lead-band__list .icon { color: var(--oak); inline-size: 18px; block-size: 18px; }
.lead-band__form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .lead-band__inner { grid-template-columns: 1fr; } }

/* "Help me choose" band (tools teaser) */
.choose-band { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: center; margin-block-end: 1.5rem; padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); border-radius: var(--radius-lg); background: var(--forest); color: #E3EBE5; }
.choose-band__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--forest-2); color: #F1D9BC; }
.choose-band__title { margin: 0 0 0.25rem; color: #fff; font-size: var(--fs-xl); }
.choose-band__body p { margin: 0; font-size: var(--fs-sm); }
.choose-band__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choose-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.choose-band .btn--ghost:hover { background: #fff; color: var(--forest); }
@media (max-width: 860px) { .choose-band { grid-template-columns: auto 1fr; } .choose-band__actions { grid-column: 1 / -1; } }