.hfd { padding: 88px 0; background: #fff; scroll-margin-top: 80px; }
.hfd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.hfd-copy { min-width: 0; }
.hfd h2 { margin: 0 0 22px; font-size: 48px; line-height: 1.18; font-weight: 600; letter-spacing: 0; }
.hfd h3 { margin: 0 0 30px; font-size: 32px; line-height: 1.55; font-weight: 500; letter-spacing: 0; }
.hfd-description { margin: 0 0 32px; max-width: 450px; font-size: 17px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.hfd-media { margin: 0; min-width: 0; display: grid; place-items: center; }
.hfd-media--g3 { height: 620px; position: relative; }
.hfd-media img { width: 100%; height: 100%; object-fit: contain; }
.hfd-media--g3 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hfd--opti { background: #f5f6f7; padding: 112px 0; }
.hfd--opti .hfd-copy { grid-column: 2; grid-row: 1; }
.hfd--opti .hfd-media { grid-column: 1; grid-row: 1; }
.hfd-media--opti { aspect-ratio: 3 / 2; }
.hfd-media--opti img { mix-blend-mode: multiply; transition: transform 800ms cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .hfd-media--opti:hover img { transform: scale(1.025); } }
.hfd-link { display: inline-flex; gap: 22px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--teal-dark); color: var(--teal-dark); font-size: 15px; font-weight: 600; }
.hfd-link span { transition: transform 250ms ease; }
.hfd-link:hover span, .hfd-link:focus-visible span { transform: translateX(5px); }
.hfd-highlight { background: linear-gradient(var(--teal),var(--teal)) no-repeat 0 90% / 100% 22%; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 550ms cubic-bezier(.2,.7,.2,1); }
.hfd-highlight:hover, .hfd-highlight:focus-visible { background-size: 100% 90%; }
.hfd :focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 6px; }
/* Only armed, offscreen sections are hidden; failed or disabled JS keeps content readable. */
.hfd.is-armed:not(.is-visible) .hfd-media { opacity: 0; transform: translateY(42px) scale(.96); }
.hfd.is-armed:not(.is-visible) .hfd-step { opacity: 0; transform: translateY(18px); }
.hfd.is-armed:not(.is-visible) .hfd-highlight { background-size: 0% 22%; }
.hfd.is-armed .hfd-media { transition: opacity 1000ms ease, transform 1400ms cubic-bezier(.16,1,.3,1); }
.hfd.is-armed .hfd-step { transition: opacity 750ms ease, transform 1000ms cubic-bezier(.16,1,.3,1); transition-delay: var(--hfd-delay, 160ms); }
.hfd.is-visible .hfd-highlight { animation: hfd-mark 850ms cubic-bezier(.16,1,.3,1) 500ms backwards; }
@keyframes hfd-mark { from { background-size: 0% 22%; } to { background-size: 100% 22%; } }
@media (max-width: 1050px) { .hfd-layout { gap: 40px; } .hfd h2 { font-size: 38px; } .hfd h3 { font-size: 27px; } .hfd-media--g3 { height: 540px; } }
@media (max-width: 700px) {
  .hfd, .hfd--opti { padding: 64px 0; }
  .hfd-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .hfd h2 { font-size: 34px; margin-bottom: 18px; }
  .hfd h3 { font-size: 25px; margin-bottom: 22px; }
  .hfd-description { font-size: 16px; margin-bottom: 22px; }
  .hfd--opti .hfd-copy, .hfd--opti .hfd-media { grid-column: auto; grid-row: auto; }
  .hfd-media--g3 { height: 430px; }
  .hfd-media--opti { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hfd .hfd-media, .hfd .hfd-step, .hfd .hfd-media img, .hfd .hfd-highlight, .hfd .hfd-link span { transition: none; animation: none; transform: none; }
}