/* ═══════════════════════════════════════════════
   ЗАЩО FEMORA — the flower
   Rebuilt from the Shopify Custom Liquid block:
   Liquid templating stripped out, palette and type
   swapped for the site's real brand tokens, the
   49px eyebrow bug fixed, and touch targets enlarged
   for mobile.
   ═══════════════════════════════════════════════ */

:root{--amber:#e0965c}  /* the hero room's amber light, reused here for cross-page cohesion */

body.why-page{background:var(--cream); color:var(--ink)}

/* ── intro ── */
.why-intro{
  padding:clamp(120px,18vh,180px) 20px clamp(20px,4vh,40px);
  text-align:center;
}
.why-eyebrow{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase; color:var(--wine);
}
.why-heading{
  margin:0 0 16px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,4.6vw,54px); color:var(--wine);
}
.why-subheading{
  max-width:56ch; margin:0 auto; color:var(--ink-soft);
  font-size:clamp(14px,1.4vw,16px); line-height:1.65;
}

/* ── the flower + panel ── */
.why-flower{padding:clamp(20px,4vh,50px) 20px clamp(60px,10vh,110px)}
.ff-stage{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(260px,380px);
  gap:clamp(24px,4vw,64px);
  align-items:center; max-width:1080px; margin:0 auto;
}
@media (max-width:760px){
  .ff-stage{grid-template-columns:1fr}
}

.ff-flower-wrap{
  position:relative; width:100%; aspect-ratio:1/1;
  max-width:560px; margin:0 auto;
}
.ff-svg{width:100%; height:100%; display:block; overflow:visible}

/* the invisible, larger hit-shape behind each petal — precise tapping on a
   thin curved petal is hard, especially on a phone, so the tappable area is
   bigger than the visible artwork. Widened less than lengthened: six petals
   only 60° apart already nearly touch at the base by design, so growing the
   width much would overlap into the neighbouring petal's hit area. */
.ff-petal-hit{
  fill:#000; opacity:0; pointer-events:fill; cursor:pointer;
  transform-box:fill-box; transform-origin:50% 100%;
  transform:scale(var(--hit-sx,1.08), var(--hit-sy,1.22));
}
@media (max-width:760px){
  .ff-petal-hit{--hit-sx:1.18; --hit-sy:1.4}
}

.ff-petal{
  cursor:pointer; transform-box:fill-box; transform-origin:50% 100%;
  transition:transform 450ms var(--ease), filter 350ms ease, opacity 350ms ease;
  filter:drop-shadow(0 6px 16px rgba(136,1,42,.16));
}
.ff-petal-g{transition:opacity 350ms ease}
.why-flower.has-active .ff-petal-g:not(.is-active){opacity:.35}
.ff-petal-g.is-active .ff-petal{
  transform:scale(1.18);
  filter:drop-shadow(0 14px 26px rgba(136,1,42,.30));
}

.ff-center{transition:transform 600ms ease; transform-box:fill-box; transform-origin:50% 50%}

@keyframes ff-sway{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
@keyframes ff-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
.ff-petal-g .ff-petal{animation:ff-sway 6s ease-in-out infinite}
.ff-petal-g:nth-child(1) .ff-petal{animation-delay:0s}
.ff-petal-g:nth-child(2) .ff-petal{animation-delay:-1s}
.ff-petal-g:nth-child(3) .ff-petal{animation-delay:-2s}
.ff-petal-g:nth-child(4) .ff-petal{animation-delay:-3s}
.ff-petal-g:nth-child(5) .ff-petal{animation-delay:-4s}
.ff-petal-g:nth-child(6) .ff-petal{animation-delay:-5s}
.ff-center{animation:ff-pulse 4s ease-in-out infinite}
.ff-petal-g.is-active .ff-petal,
.why-flower.has-active .ff-center{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .ff-petal,.ff-center{animation:none !important}
  .ff-petal{transition:transform 200ms ease, filter 200ms ease}
}

.ff-panel{
  background:linear-gradient(165deg, rgba(255,255,255,.78), rgba(204,158,152,.30));
  border:1px solid rgba(136,1,42,.08);
  border-radius:16px; padding:28px 26px;
  text-align:left; min-height:220px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform 350ms ease, opacity 350ms ease;
}
.ff-panel-eyebrow{
  margin:0 0 10px; font:600 11px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--wine);
}
.ff-panel-title{
  margin:0 0 12px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.4vw,30px); line-height:1.25; color:var(--wine);
}
.ff-panel-text{
  margin:0; font-size:clamp(13.5px,1.1vw,15px); line-height:1.65; color:var(--ink-soft);
}
.ff-panel.is-swap{opacity:0; transform:translateY(6px)}

@media (max-width:760px){
  .ff-panel{min-height:0}
}

/* ── back to home ── */
.why-cta{text-align:center; padding:0 20px clamp(60px,10vh,100px)}
.why-cta__link{
  color:var(--wine); text-decoration:none;
  font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  border-bottom:1px solid rgba(136,1,42,.3); padding-bottom:4px;
  transition:color .3s, border-color .3s;
}
.why-cta__link:hover{color:var(--wine); border-color:var(--wine)}

/* ── footer ── */
.why-foot{
  text-align:center; padding:28px 20px 40px; color:var(--ink-soft);
  border-top:1px solid rgba(136,1,42,.10);
}
.why-foot .wordmark{
  display:inline-block; margin-bottom:8px; color:var(--wine);
  font-size:16px;
}
.why-foot p{margin:0; font-size:11px; letter-spacing:.05em}

/* ═══════════════════════════════════════════════
   CERTIFICATES
   Content ported from Femora_custom_liquid.docx —
   that doc had no accompanying styles, so this is
   built fresh against the site's tokens.
   ═══════════════════════════════════════════════ */
.certs{
  padding:clamp(50px,8vh,90px) 20px clamp(70px,11vh,120px);
  border-top:1px solid rgba(136,1,42,.10);
}
.certs-intro{max-width:640px; margin:0 auto; text-align:center}
.certs-eyebrow{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase; color:var(--wine);
}
.certs-heading{
  margin:0 0 16px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(28px,4vw,46px); line-height:1.18; color:var(--wine);
}
.certs-subheading{
  margin:0; color:var(--ink-soft); font-size:clamp(14px,1.4vw,16px); line-height:1.65;
}

/* ── stats ── */
.certs-stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0; max-width:720px; margin:clamp(36px,5vh,54px) auto 0;
}
.certs-stat{
  flex:1 1 140px; text-align:center; padding:0 18px;
  border-left:1px solid rgba(136,1,42,.12);
}
.certs-stat:first-child{border-left:0}
.certs-stat__num{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,3vw,36px); color:var(--wine);
}
.certs-stat__label{
  display:block; margin-top:4px; font:600 11px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:600px){
  .certs-stat{flex:1 1 45%; padding:10px 12px; border-left:0; border-top:1px solid rgba(136,1,42,.12)}
  .certs-stat:nth-child(1),.certs-stat:nth-child(2){border-top:0}
}

/* ── category tabs ──
   A horizontal scroll rail below 760px: the same swipe pattern already
   used for the portal picker, so the interaction is familiar site-wide. */
.certs-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:900px; margin:clamp(36px,5vh,54px) auto 0;
}
.certs-tab{
  appearance:none; cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.55); color:var(--ink-soft);
  border:1px solid rgba(136,1,42,.16); border-radius:999px;
  padding:9px 16px; font:600 11px/1 var(--sans);
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s;
}
.certs-tab i{margin-left:5px; font-style:normal; opacity:.6}
.certs-tab:hover{border-color:rgba(136,1,42,.32); color:var(--wine)}
.certs-tab.is-active{background:var(--wine); border-color:var(--wine); color:#fdf3f0}
.certs-tab.is-active i{opacity:.8}

@media (max-width:640px){
  .certs-tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    /* bleed exactly to the edge: .certs is padded 20px, so pull back 20px —
       the old 6vw overshot that and scrolled the whole page sideways */
    scrollbar-width:none; padding:0 20px; margin-left:-20px; margin-right:-20px;
    max-width:none;
  }
  .certs-tabs::-webkit-scrollbar{display:none}
  .certs-tab{scroll-snap-align:start}
}

.certs-empty{
  max-width:640px; margin:40px auto 0; text-align:center;
  color:var(--ink-soft); font-size:14px;
}

/* ── card grid ── */
.certs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1080px; margin:clamp(30px,4vh,44px) auto 0;
}
@media (max-width:900px){.certs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.certs-grid{grid-template-columns:1fr}}

.cert-card{
  background:linear-gradient(165deg, rgba(255,255,255,.8), rgba(204,158,152,.20));
  border:1px solid rgba(136,1,42,.08); border-radius:16px;
  padding:24px 22px; text-align:left;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .25s, filter .25s;
}
.cert-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(136,1,42,.10);
}
/* drawn icons, not glyphs — one stroke weight across the whole set */
.cert-card__icon{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px;
  border-radius:50%; color:#fdf3f0;
  background:radial-gradient(ellipse at 35% 30%, var(--rose), var(--wine-soft));
}
.cert-card__icon svg{width:22px; height:22px; display:block}
.cert-card__tag{
  margin:0 0 8px; font:600 11px/1 var(--sans);
  letter-spacing:.12em; text-transform:uppercase; color:var(--wine);
}
.cert-card__name{
  margin:0 0 10px; font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:17px; line-height:1.3; color:var(--wine);
}
.cert-card__desc{
  margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-soft);
}
.cert-card__issuer{
  margin:0; padding-top:12px; border-top:1px solid rgba(136,1,42,.10);
  font-size:11px; letter-spacing:.03em; color:var(--ink-soft); opacity:.8;
}

/* filtered-out cards collapse rather than just hide, so the grid reflows */
.cert-card[hidden]{display:none}