/* "Family owned since 2017" options */
.fa-stars{display:inline-flex;gap:1px;color:var(--red);vertical-align:-.1em}
.fa-stars .ic{width:.85em;height:.85em}

/* ============================================================ A · family seal + story */
.fa-a{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);align-items:start;max-width:var(--max);margin:0 auto;padding:clamp(5rem,14vh,9.5rem) var(--gut)}
.fa-a__seal{position:sticky;top:calc(50vh - min(19vw,280px) + 2rem);width:min(100%,560px);justify-self:center;opacity:0;transform:scale(.9) rotate(-8deg);transition:opacity 1.2s var(--e-out),transform 1.6s var(--e-out)}
.fa-a__seal.is-in{opacity:1;transform:none}
.fa-a__seal::before{content:"";position:absolute;inset:1%;border-radius:50%;box-shadow:0 50px 90px -50px rgba(10,9,52,.7)}
.fa-a__seal svg{position:relative;width:100%;height:auto;overflow:visible}
.fa-a__disc{fill:var(--navy)}
.fa-a__hair{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1}
.fa-a__rot{transform-origin:200px 200px;transform:rotate(var(--r,0deg))}
.fa-a__ring{font-family:var(--f-sans);font-size:15.5px;font-weight:500;fill:#fff}
.fa-a__sep{fill:#ff5a60}
.fa-a__face{fill:#fff;stroke:var(--red);stroke-width:2}
.fa-a__est{font-family:var(--f-sans);font-size:12.5px;font-weight:600;letter-spacing:.32em;fill:var(--red);opacity:0;transition:opacity 1s .5s}
.fa-a__yr{font-family:var(--f-disp);font-size:108px;letter-spacing:-2px;fill:var(--navy);fill-opacity:0;stroke:var(--navy);stroke-width:1.1;stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.2,1) .35s,fill-opacity 1.3s ease 2s}
.fa-a__rule{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s var(--e-out) 1.6s}
.fa-a__fo{font-family:var(--f-it);font-style:italic;font-size:25px;fill:var(--navy);opacity:0;transition:opacity 1.2s 2.1s}
.fa-a__seal.is-in .fa-a__est,.fa-a__seal.is-in .fa-a__fo{opacity:1}
.fa-a__seal.is-in .fa-a__yr{stroke-dashoffset:0;fill-opacity:1}
.fa-a__seal.is-in .fa-a__rule{stroke-dashoffset:0}
.fa-a__copy .lbl{color:var(--red);display:block;margin-bottom:1.4rem}
.fa-a__big{font-family:var(--f-disp);font-size:clamp(1.35rem,1.9vw,1.95rem);line-height:1.25;color:var(--navy);margin:2.2rem 0 1.2rem;max-width:34ch}
.fa-a__p{color:var(--ink-70);max-width:50ch}
.fa-a__sign{position:relative;margin-top:2rem;display:inline-grid;justify-items:start}
.fa-a__name{font-family:var(--f-it);font-style:italic;font-size:clamp(2rem,3vw,2.9rem);line-height:1.1;color:var(--navy);letter-spacing:-.01em}
.fa-a__swash{width:min(260px,70vw);height:auto;margin:-.2rem 0 .5rem -.2rem;overflow:visible}
.fa-a__swash path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.2,1) .45s}
.fa-a__sign.is-in .fa-a__swash path{stroke-dashoffset:0}
.fa-a__sign small{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50)}
.fa-a__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.8rem}
.fa-a__stats li{border-top:1px solid var(--line);padding-top:1.1rem;position:relative}
.fa-a__stats li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--red)}
.fa-a__stats b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(3rem,4.6vw,4.8rem);line-height:.9;color:var(--navy);font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.fa-a__stats li>span{font-size:.84rem;line-height:1.4;color:var(--ink-70);display:block;max-width:19ch}

/* ============================================================ B · since-2017 timeline */
.fa-b{position:relative;height:250vh;background:var(--paper)}
.fa-b__stage{position:sticky;top:0;height:100vh;height:100svh;max-width:var(--max);margin:0 auto;padding:calc(var(--hdr) + 1.4rem) var(--gut) 2rem;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.6rem,5vh,3.6rem);overflow:hidden}
.fa-b__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:2rem;align-items:end}
.fa-b__head .lbl{color:var(--red);display:block;margin-bottom:1.1rem}
.fa-b__lede{color:var(--ink-70);max-width:44ch;margin:0}
.fa-b__track{--row:clamp(150px,26vh,250px);position:relative;height:calc(var(--row) * 2 + 30px)}
.fa-b__line{position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:50%;height:1px;background:rgba(16,15,75,.16)}
.fa-b__line i{position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.fa-b__stops{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:clamp(.6rem,1.2vw,1.2rem);height:100%;list-style:none;margin:0;padding:0}
.fa-b__stop{position:relative;grid-column:var(--c);grid-row:1}
.fa-b__dot{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(16,15,75,.35);transform:scale(.7);transition:transform .6s var(--e-out),background .4s,box-shadow .4s}
.fa-b__stop.is-on .fa-b__dot{transform:scale(1);background:var(--red);box-shadow:inset 0 0 0 1px var(--red),0 0 0 5px rgba(194,13,21,.12)}
.fa-b__box{position:absolute;left:0;right:0;height:var(--row);display:flex;flex-direction:column;gap:.55rem}
.fa-b__stop--up .fa-b__box{bottom:calc(50% + 20px);justify-content:flex-end}
.fa-b__stop--down .fa-b__box{top:calc(50% + 20px)}
.fa-b__ph{flex:1 1 auto;min-height:0;margin:0;overflow:hidden;border-radius:3px;background:var(--sky)}
.fa-b__ph>span{display:block;height:100%;transform:translate3d(0,102%,0);transition:transform 1.1s var(--e-out)}
.fa-b__stop--down .fa-b__ph>span{transform:translate3d(0,-102%,0)}
.fa-b__stop.is-on .fa-b__ph>span{transform:none}
.fa-b__ph img{width:100%;height:100%;object-fit:cover;transform:translate3d(calc(clamp(-1, (var(--p,0) - var(--at,0)) * 2, 1) * -18px),0,0) scale(1.26)}
.fa-b__cap{flex:none;opacity:0;transform:translate3d(0,12px,0);transition:opacity .7s var(--e-out) .15s,transform .9s var(--e-out) .15s}
.fa-b__stop.is-on .fa-b__cap{opacity:1;transform:none}
.fa-b__cap b{display:block;font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(.9rem,1.05vw,1.1rem);line-height:1.1;color:var(--navy);margin:0 0 .25rem}
.fa-b__cap>span{display:block;font-size:.76rem;line-height:1.35;color:var(--ink-70)}
.fa-b__cap--big small{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.fa-b__cap--big b{font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:.9;margin:.3rem 0 .5rem;text-transform:none}
.fa-b__cap--big>span{max-width:20ch}
.fa-b__stop:last-child .fa-b__box{left:auto;right:0;width:max-content;max-width:150%;text-align:right;align-items:flex-end}

/* ============================================================ C · flag panel */
.fa-c{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(5rem,14vh,9.5rem) var(--gut)}
.fa-c__media{position:relative;aspect-ratio:4/4.7;overflow:hidden;border-radius:4px;background:var(--sky)}
.fa-c__frame{position:absolute;inset:0}
.fa-c__frame img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.16);will-change:transform}
.fa-c__stripes{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.fa-c__stripes i{flex:1;background:var(--red);transform-origin:100% 50%;transition:transform 1.15s cubic-bezier(.7,0,.2,1);transition-delay:calc(.25s + var(--k) * .085s)}
.fa-c__stripes i:nth-child(even){background:#fff}
.fa-c__media.is-in .fa-c__stripes i{transform:scaleX(0)}
.fa-c__canton{position:absolute;left:0;top:0;width:42%;height:calc(100% / 7 * 4);background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.7,0,.2,1) 1.1s}
.fa-c__media.is-in .fa-c__canton{transform:scale(.6)}
.fa-c__canton span{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#ff5a60}
.fa-c__canton b{font-family:var(--f-disp);font-weight:400;font-size:clamp(3rem,5.6vw,5.8rem);line-height:.9;letter-spacing:-.02em}
.fa-c__cstars{display:flex;gap:4px;color:#fff;margin-top:.4rem}
.fa-c__cstars .ic{width:14px;height:14px}
.fa-c__tag{position:absolute;right:1rem;bottom:1rem;background:rgba(255,255,255,.94);color:var(--navy);font-size:.74rem;padding:.4em .85em;border-radius:999px;opacity:0;transform:translate3d(0,8px,0);transition:opacity .8s 1.8s,transform .9s var(--e-out) 1.8s}
.fa-c__media.is-in .fa-c__tag{opacity:1;transform:none}
.fa-c__copy .lbl{color:var(--red);display:block;margin-bottom:1.4rem}
.fa-c__copy .lede{margin-top:2rem}
.fa-c__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.6rem;margin-top:2.6rem}
.fa-c__tiles li{position:relative;padding:1.3rem 0 1.4rem;border-top:1px solid var(--line)}
.fa-c__tiles li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e-out);transition-delay:calc(var(--k,0) * .1s)}
.fa-c__tiles li:nth-child(1){--k:0}.fa-c__tiles li:nth-child(2){--k:1}.fa-c__tiles li:nth-child(3){--k:2}.fa-c__tiles li:nth-child(4){--k:3}
.fa-c__tiles li.is-in::before{transform:scaleX(.18)}
.fa-c__n{display:flex;font-family:var(--f-disp);font-weight:400;font-size:clamp(3rem,4.8vw,5rem);line-height:1;color:var(--navy);letter-spacing:-.02em;margin-bottom:.55rem}
.fa-roll{position:relative;display:block;height:1em;overflow:hidden}
.fa-roll-w{display:block;visibility:hidden}
.fa-roll-s{position:absolute;left:-50%;right:-50%;top:0;text-align:center;display:block;transform:translate3d(0,calc(var(--y,0) * -1em),0);transition:transform 1.5s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--k,0) * .12s + var(--j,0) * .08s)}
.fa-roll i{display:block;height:1em;font-style:normal}
.is-in .fa-roll-s{--y:var(--d)}
.fa-roll-c{display:block;opacity:0;transition:opacity .8s .6s}
.is-in .fa-roll-c{opacity:1}
.fa-c__tiles li>span{display:block;font-weight:500;color:var(--navy);font-size:.95rem}
.fa-c__tiles small{display:block;font-size:.76rem;color:var(--ink-50);margin-top:.15rem}

/* ============================================================ phone */
@media (max-width:899px){
  .fa-a{grid-template-columns:1fr;padding:4.5rem 1rem 4rem;gap:2.6rem}
  .fa-a__seal{position:relative;top:auto;width:min(84vw,400px)}
  .fa-a__big{margin-top:1.6rem}
  .fa-a__stats{gap:.9rem}
  .fa-a__stats b{font-size:2.7rem}
  .fa-a__stats li>span{font-size:.74rem}

  .fa-b{height:auto}
  .fa-b__stage{position:relative;height:auto;padding:4.5rem 1rem 4rem;overflow:visible;gap:2.4rem}
  .fa-b__head{grid-template-columns:1fr;gap:1.2rem}
  .fa-b__track{height:auto;--row:auto}
  .fa-b__line{left:6px;right:auto;top:8px;bottom:3rem;width:1px;height:auto}
  .fa-b__line i{left:-.5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .fa-b__stops{display:block;height:auto}
  .fa-b__stop{padding:0 0 2.4rem 2.2rem}
  .fa-b__dot{left:6px;top:8px}
  .fa-b__box,.fa-b__stop:last-child .fa-b__box{position:relative;inset:auto;height:auto;width:auto;max-width:none;text-align:left;align-items:stretch}
  .fa-b__ph{flex:none;aspect-ratio:4/3}
  .fa-b__stop--down .fa-b__ph>span{transform:translate3d(0,102%,0)}
  .fa-b__stop.is-on .fa-b__ph>span{transform:none}
  .fa-b__cap b{font-size:1.2rem}
  .fa-b__cap>span{font-size:.86rem}
  .fa-b__cap--big b{font-size:3.4rem}

  .fa-c{grid-template-columns:1fr;padding:4.5rem 1rem 4rem;gap:2.4rem}
  .fa-c__media{aspect-ratio:4/4.4}
  .fa-c__tiles{gap:0 1rem}
  .fa-c__n{font-size:2.9rem}
}

@media (prefers-reduced-motion:reduce){
  .fa-a__seal,.fa-a__est,.fa-a__fo{opacity:1;transform:none}
  .fa-a__yr{stroke-dashoffset:0;fill-opacity:1}
  .fa-a__rule,.fa-a__swash path{stroke-dashoffset:0}
  .fa-b__ph>span,.fa-b__cap{transform:none!important;opacity:1}
  .fa-c__stripes{display:none}
  .fa-roll-s{--y:var(--d)}
  .fa-roll-c{opacity:1}
}

/* the call to action lives inside the panel, under the four facts */
.fa-c__cta{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.fa-c__cta p{margin:0 0 1.1rem;max-width:44ch;color:var(--ink-70)}
.fa-c__cta p b{color:var(--navy);font-weight:600}
.fa-c__btns{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:899px){.fa-c__btns .btn{flex:1 1 auto;justify-content:center}}
