/* Motion layer: keeps the FDM palette, typography and layout intact. */
:root { --fdm-motion-ease: cubic-bezier(.65,.05,0,1); }
.reveal, .reveal.visible { opacity: 1; transform: none; }
.fdm-media-motion { overflow: hidden; transform-origin: center; }
.fdm-media-motion > img {
  transform-origin: center;
  transition: none;
}
.fdm-motion-active .hero > img { animation: none; }
.hero > img {
  /* Keep the face on the right and crop the decorative strip at the bottom. */
  height: 104%;
  top: 0;
  object-position: 100% 25%;
}
@media (max-width: 850px) {
  .hero > img { object-position: 88% 25%; }
}
.button span, .line-link span {
  display: inline-block;
  transition: transform .65s var(--fdm-motion-ease);
}
.button:is(:hover,:focus-visible) span { transform: translate(3px,-3px); }
.line-link:is(:hover,:focus-visible) span { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .hero > img { animation: none; }
  .fdm-media-motion, .fdm-media-motion > img { transform: none !important; clip-path: none !important; }
  .button span, .line-link span { transition: none; transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* Dark editorial hero: concentrated contrast behind copy, clear portrait. */
.hero { color: #fffaf2; background: var(--graphite); }
.hero-shade {
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(29,23,19,.95) 0%, rgba(29,23,19,.9) 38%, rgba(29,23,19,.76) 52%, rgba(29,23,19,.24) 70%, rgba(29,23,19,.08) 100%), linear-gradient(0deg, rgba(29,23,19,.48), transparent 36%);
}
.hero-content { width: min(580px, 48vw); padding-top: 75px; }
.hero h1 { font-size: clamp(2.9rem, 4.5vw, 4.25rem); line-height: 1.14; letter-spacing: -.025em; text-wrap: balance; }
.hero h1 em { color: #e0cc9d; }
.hero .eyebrow { color: #e0cc9d; letter-spacing: .14em; line-height: 1.6; }
.hero .lead { max-width: 460px; color: #f3eee3; font-size: 18px; line-height: 1.75; margin: 28px 0 34px; }
.hero .hero-actions .text-link { color: #fffaf2; border-color: #e0cc9d; }
.hero .hero-actions { flex-wrap: wrap; gap: 22px; }
.hero .scroll-cue { color: #f3eee3; }
.hero .scroll-cue i { background: #e0cc9d; }
.hero .trust { color: #fffaf2; }
.hero .trust small { color: #f3eee3; }

@media (max-width: 850px) {
  .hero { display: block; height: auto; min-height: 100svh; background: var(--graphite); padding-bottom: 1px; }
  .hero > img { height: 460px; object-position: 88% 20%; clip-path: inset(0 0 5% 0); }
  .hero-shade {
    background: linear-gradient(180deg, rgba(64,58,52,.06) 0px, rgba(64,58,52,.08) 220px, rgba(64,58,52,.85) 370px, var(--graphite) 435px);
  }
  .hero-content { width: auto; margin: 0 24px; padding-top: 420px; padding-bottom: 38px; align-self: auto; }
  .hero h1 { font-size: clamp(2.55rem, 7vw, 3.7rem); }
  .hero .lead { max-width: 520px; font-size: 16px; line-height: 1.75; margin: 24px 0 28px; }
  .hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero .trust { position: relative; left: auto; right: auto; bottom: auto; margin: 0 24px 28px; max-width: none; }
}
@media (max-width: 390px) {
  .hero-content { margin-inline: 18px; }
  .hero .trust { margin-inline: 18px; }
}

/* SVG arrows on mobile; inherit the color of each link or control. */
.fdm-arrow { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.fdm-arrow .fdm-arrow-icon { display: none; width: 1.15em; height: 1.15em; flex-shrink: 0; }
@media (max-width: 850px) {
  .fdm-arrow .fdm-arrow-glyph { display: none; }
  .fdm-arrow .fdm-arrow-icon { display: block; }
  .slider-controls .fdm-arrow-icon { width: 20px; height: 20px; }
}

/* Mobile-only portrait background. Desktop hero rules remain unchanged. */
@media (max-width: 850px) {
  .hero {
    background: #ebe4df url("fdm-hero-mobile-003.png?v=mobile-photo-23") center top / 100% auto no-repeat;
    color: var(--ink);
  }
  .hero > img { display: none; }
  .hero-shade {
    background: linear-gradient(180deg, transparent 0, transparent 82vw, rgba(235,228,223,.65) 103vw, #ebe4df 122vw);
  }
  .hero-content { padding-top: 112vw; padding-bottom: 38px; }
  .hero h1 em { color: #775722; }
  .hero .eyebrow { color: var(--graphite); }
  .hero .lead { color: var(--ink); }
  .hero .hero-actions .text-link { color: var(--ink); border-color: #75685e; }
}

/* Center the mobile hero's heading, copy and actions. */
@media (max-width: 850px) {
  .hero-content { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .hero-actions { align-items: center; justify-content: center; }
}

/* Keep the portrait below the floating mobile menu and shorten the gap. */
@media (max-width: 850px) {
  .hero { background-position: center 72px; }
  .hero-shade {
    background: linear-gradient(180deg, transparent 0, transparent calc(72px + 70vw), rgba(235,228,223,.55) calc(72px + 82vw), #ebe4df calc(72px + 94vw));
  }
  .hero-content { padding-top: calc(72px + 87vw); }
}

/* Refined menu control, with a clear open/close state. */
@media (max-width: 850px) {
  .nav .menu {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(224,204,157,.35);
    border-radius: 12px;
    background: rgba(248,241,232,.05);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
  }
  .nav .menu span {
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fffaf2;
    transition: transform .3s ease, width .3s ease;
  }
  .nav .menu span:first-child { transform: translateY(-4px); }
  .nav .menu span:last-child { width: 16px; transform: translate(3px,4px); }
  .nav .menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .nav .menu[aria-expanded="true"] span:last-child { width: 22px; transform: rotate(-45deg); }
  .nav .menu:hover, .nav .menu[aria-expanded="true"] { background: rgba(224,204,157,.12); border-color: #e0cc9d; }
  .nav .menu:focus-visible { outline: 2px solid #e0cc9d; outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .nav .menu, .nav .menu span { transition: none; } }

/* Premium mobile heading using the existing FDM serif family, without italics. */
@media (max-width: 850px) {
  .hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  .hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; }
}