/* ============================================================
   F³ Loved — site-specific layer on top of the shared design system.
   Hero gradient (no photo), brand wordmark, five-pillar grid,
   native FAQ accordion. Colors all flow from the recolored tokens.
   ============================================================ */

/* ---------- Hero: gradient field instead of a photo ---------- */
#hero .hero__media{
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(110,158,132,.30), transparent 58%),
    radial-gradient(90% 70% at 0% 110%, rgba(110,158,132,.14), transparent 55%),
    var(--grad-floor);
}
#hero .hero__media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 120%, rgba(0,0,0,.28), transparent 70%);
}

/* ---------- Brand wordmark ---------- */
.brand__mark{height:40px;width:auto;flex:0 0 auto;display:block}
.brand__sub{white-space:nowrap}

/* ---------- Five pillars ---------- */
.pillars{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px;
}
.pillar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.pillar__ico{
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--cream-200),#fff);
  border:1px solid var(--line);color:var(--navy-700);font-size:1.3rem;margin-bottom:16px;
}
.pillar h3{font-size:1.18rem;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:.95rem;line-height:1.5}
.pillar__n{
  font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-700);display:block;margin-bottom:14px;
}
@media(max-width:1000px){.pillars{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.pillars{grid-template-columns:1fr}}

/* ---------- FAQ accordion (native <details>) ---------- */
.faq{max-width:840px;margin:8px auto 0;display:grid;gap:14px}
.faq details{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2px 24px;box-shadow:var(--shadow-sm);transition:border-color .3s var(--ease)
}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--navy-800);
  padding:22px 0;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;font-family:var(--body);
  font-size:1.5rem;color:var(--gold-700);transition:transform .3s var(--ease);line-height:1
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__a{color:var(--muted);line-height:1.65;padding:0 0 22px;max-width:70ch}
.faq__a a{color:var(--navy-700);text-decoration:underline;text-underline-offset:2px}

/* ---------- Mission pull statement ---------- */
.statement{max-width:60ch}
.statement p{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.4;color:var(--navy-800);font-weight:500}
.statement .sig{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--gold-700);margin-top:22px;display:block}

/* ---------- Image / photo slots ---------- */
#hero .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:4px 0 6px}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);display:block;border:1px solid var(--line)}
@media(max-width:680px){.shots{grid-template-columns:1fr}}
.why__band{margin:6px 0 10px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.why__band img{width:100%;max-height:300px;object-fit:cover;display:block}
.bnb__visual{position:relative;overflow:hidden}
.bnb__visual .bnb__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bnb__visual > :not(.bnb__bg){position:relative;z-index:1}
.cta{position:relative;overflow:hidden}
.cta .cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.cta .cta__halo,.cta .cta__in{position:relative;z-index:1}

/* model-card photos: bleed to the card's top edge (card has 40px 34px padding, overflow:hidden) */
.feature__img{margin:-40px -34px 24px;aspect-ratio:16/10;overflow:hidden;background:var(--cream-200)}
.feature__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Model cards: compact + always 3-across (except small phones) ---------- */
#model .deals{grid-template-columns:repeat(3,1fr);gap:20px}
#model .deal{height:330px}
#model .deal__media{height:200px}
#model .deal:hover .deal__media,#model .deal:focus-within .deal__media{height:108px}
#model .deal__body{padding:18px 20px 20px}
#model .deal__title{font-size:1.18rem}
#model .deal__loc{font-size:.56rem}
#model .deal__desc{font-size:.9rem;line-height:1.55}
@media (max-width:520px){ #model .deals{grid-template-columns:1fr} #model .deal{height:340px} #model .deal__media{height:210px} }