/* ============================================================
   ExpanseFT private-labeled card programs, B2B landing page
   Sister page of expanseft.com/nexscard: same system, its own skin.

   Brand   ExpanseFT Quick Reference Brand Style Guide 10.14.22
           Berthold Akzidenz Grotesk · Helvetica Neue LT Condensed
   Colour  The approved mockup's teal (#1ca490, hue 171) on its
           near-black teal ground. The ExpanseFT guide itself is navy
           and light blue; teal is the private-label program's own
           colour, as approved in both the mockup and the deck.
   Type    Archivo in two roles. Condensed for display, standing in
           for Helvetica Neue Condensed; normal width for text,
           standing in for Akzidenz Grotesk. The NexsCard page sets
           its text in Avenir Next because that is NexsCard's face;
           this page belongs to ExpanseFT.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --teal:        #1ca490;   /* identity: large type, icons, rules */
  --teal-ui:     #0e7d6f;   /* buttons and links on light, 5.0:1 with white */
  --teal-ui-h:   #0a6559;
  --teal-bright: #3cc2ae;   /* accents on dark grounds */
  --teal-mid:    #16917f;   /* the lighter step inside the stat numbers, 3.2:1 on paper */
  --teal-deep:   #0b6a5e;   /* the offer band */

  /* grounds */
  --ink:    #031416;
  --deep:   #0b2225;
  --paper:  #eef5f4;
  --white:  #ffffff;

  /* text */
  --tx:      #10201f;
  --tx-mut:  #4f625f;
  --tx-on-d:      rgba(255,255,255,.92);
  --tx-on-d-mut:  rgba(255,255,255,.68);
  --rule:         rgba(255,255,255,.14);
  --rule-lt:      #d7e4e2;

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* space (4pt rhythm) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --gut: 20px;
  --max: 1200px;
  --r: 10px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--teal-ui); text-decoration:none; }
p{ margin:0 0 var(--s4); }
h1,h2,h3{ margin:0 0 var(--s4); }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

:focus-visible{ outline:3px solid var(--teal-bright); outline-offset:3px; border-radius:4px; }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--s4); top:-100px; z-index:200; background:var(--white);
       color:var(--tx); padding:var(--s3) var(--s5); border-radius:var(--r); font-weight:700;
       transition:top .16s var(--ease); }
.skip:focus{ top:var(--s4); }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
@media (min-width:640px){ :root{ --gut:32px; } }
@media (min-width:1024px){ :root{ --gut:48px; } }

/* ---------- type ----------
   Title case, the mockup's own treatment, where the NexsCard page runs capitals.
   Headings take no full stop: two sentences in a heading are two lines. */
.display,.h1,.h2{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 76;
  font-weight:780;
  letter-spacing:-.008em;
  line-height:.98;
}
.display{ font-size:clamp(2.55rem,9.4vw,3.7rem); margin-bottom:var(--s5); }   /* "Stronger Relationships" holds one line in the copy column */
.h1{ font-size:clamp(2.15rem,7vw,3.85rem); }
.h2{ font-size:clamp(1.95rem,5.8vw,3rem); }
.display em,.h1 em,.h2 em{ font-style:normal; color:var(--teal); }

h3{ font-size:1.0625rem; font-weight:700; letter-spacing:.002em; line-height:1.3; }

.lede{ font-size:1.0625rem; line-height:1.62; color:var(--tx-mut); max-width:52ch; }
.lede--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  font-family:var(--f-display); font-variation-settings:"wdth" 90; font-weight:700;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-ui); margin-bottom:var(--s4);
}
.eyebrow--center{ text-align:center; }
.sep{ display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor;
      vertical-align:middle; margin-inline:var(--s2); opacity:.5; }

/* ---------- icons ---------- */
.ic{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; }
.ic--lg{ width:28px; height:28px; }
.ic--xs{ width:15px; height:15px; stroke-width:1.8; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding:0 var(--s6);
  border-radius:var(--r);
  font-weight:700; font-size:1rem; letter-spacing:.005em; text-align:center;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ min-height:42px; padding:0 var(--s5); font-size:.9375rem; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--teal-ui); color:#fff; }
.btn--primary:hover{ background:var(--teal-ui-h); }
.btn--ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--onteal{ background:#fff; color:var(--teal-deep); }
.btn--onteal:hover{ background:var(--paper); }

/* ============================================================
   SHOW BAR
   ============================================================ */
.showbar{ background:var(--teal-ui-h); color:#fff; font-size:.75rem; }
.showbar__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
              gap:var(--s1) var(--s5); padding-block:var(--s3); text-align:center; }
.showbar__txt{ margin:0; letter-spacing:.02em; }
.showbar__city{ display:none; }
@media (min-width:420px){ .showbar{ font-size:.8125rem; } .showbar__city{ display:inline; } }
.showbar__txt b{ font-weight:700; }
.showbar__cta{ display:inline-flex; align-items:center; gap:var(--s2); min-height:40px;
               color:#fff; font-weight:700; }
.showbar__cta span{ border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:1px; }
.showbar__cta:hover span{ border-color:#fff; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:sticky; top:0; z-index:100; background:var(--ink); border-bottom:1px solid var(--rule); }
.nav__in{ display:flex; align-items:center; gap:var(--s5); min-height:68px; }
.nav__logo{ display:block; flex:none; }
.nav__logo img{ width:139px; height:auto; }   /* the card's YOUR LOGO HERE, 7.3:1, 19px tall */
.nav__links{ display:none; }
.nav__cta{ display:none; }

.nav__toggle{ margin-left:auto; width:48px; height:48px; display:grid; place-items:center; cursor:pointer; }
.nav__bars,.nav__bars::before,.nav__bars::after{
  content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .22s var(--ease), opacity .16s var(--ease);
}
.nav__bars::before{ transform:translateY(-7px); }
.nav__bars::after{ transform:translateY(5px); }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-2px) rotate(-45deg); }

.nav__links.is-open{
  display:flex; flex-direction:column;
  position:absolute; left:0; right:0; top:100%;
  background:var(--ink); border-bottom:1px solid var(--rule);
  padding:var(--s3) var(--gut) var(--s6);
}
.nav__links a{ color:var(--tx-on-d); font-weight:600; padding:var(--s4) 0;
               border-bottom:1px solid rgba(255,255,255,.08); }
.nav__links a:hover{ color:#fff; }

@media (min-width:900px){
  .nav__toggle{ display:none; }
  .nav__links{ display:flex; align-items:center; gap:var(--s6); margin-left:auto; }
  .nav__links a{ color:var(--tx-on-d-mut); font-size:.9375rem; font-weight:600;
                 padding:0; border:0; letter-spacing:.005em; }
  .nav__links a:hover{ color:#fff; }
  .nav__cta{ display:inline-flex; }
  .nav__logo img{ width:161px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; isolation:isolate; overflow:hidden;
       background:var(--ink) url("assets/bg-hero-tall.webp") center/cover no-repeat; color:var(--tx-on-d);
       padding-block:var(--s7) var(--s8); }
.hero__in{ position:relative; display:grid; gap:var(--s7); }
.hero__copy{ max-width:620px; }
.hero .eyebrow{ color:var(--teal-bright); }
.hero .display{ color:#fff; }
.hero .display em{ color:var(--teal-bright); }
.hero .lede{ color:var(--tx-on-d); max-width:44ch; }
.hero__cta{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s6); }
.hero__note{ margin:var(--s5) 0 0; font-size:.8125rem; letter-spacing:.03em;
             text-transform:uppercase; color:var(--tx-on-d-mut);
             font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:600; }

/* the fan: one card in four finishes, dealt out from behind the front one */
.fan{ position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1.47; }
.fan picture{ display:contents; }
.fan__card{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); max-width:none; height:auto;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));
  transition:transform 1s var(--ease), opacity .7s var(--ease);
  transition-delay:calc(160ms + var(--k) * 130ms);
}
.fan__card--1{ --k:0; --x:0%;  --y:13%;  --w:72%;   z-index:4; }
.fan__card--2{ --k:1; --x:12%; --y:8.7%; --w:68.5%; z-index:3; }
.fan__card--3{ --k:2; --x:24%; --y:4.4%; --w:65%;   z-index:2; }
.fan__card--4{ --k:3; --x:36%; --y:0%;   --w:61.5%; z-index:1; }

.has-js .fan:not(.is-in) .fan__card{ opacity:0; }
.has-js .fan:not(.is-in) .fan__card--1{ transform:translateY(14px); }
.has-js .fan:not(.is-in) .fan__card--2{ transform:translate(-17%, 7%); }   /* its offset over its own width: */
.has-js .fan:not(.is-in) .fan__card--3{ transform:translate(-37%, 14%); }  /* each starts square behind the */
.has-js .fan:not(.is-in) .fan__card--4{ transform:translate(-58%, 21%); }  /* front card and slides out    */

@media (min-width:560px){
  .hero__cta{ flex-direction:row; flex-wrap:wrap; }
}
@media (min-width:1000px){
  .hero{ padding-block:var(--s9) var(--s10); }
  .hero__in{ grid-template-columns:1.06fr 1fr; align-items:center; gap:var(--s6); }
  .fan{ max-width:none; }
}

/* ============================================================
   VALUE STRIP
   ============================================================ */
.strip{ background:var(--deep); color:var(--tx-on-d); padding-block:var(--s7); }
.strip__list{ display:grid; gap:var(--s6) var(--s5); }
.strip__list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4); align-items:start; }
.strip__list .ic{ width:28px; height:28px; color:var(--teal-bright); grid-row:span 2; margin-top:1px; }
.strip__list h3{ margin:0; color:#fff; }
.strip__list p{ margin:0; font-size:.9375rem; line-height:1.5; color:var(--tx-on-d-mut); }

@media (min-width:640px){ .strip__list{ grid-template-columns:1fr 1fr; gap:var(--s6) var(--s7); } }
@media (min-width:1080px){
  .strip__list{ grid-template-columns:repeat(4,1fr); gap:0; }
  .strip__list li{ padding-inline:var(--s6); border-left:1px solid var(--rule); }
  .strip__list li:first-child{ padding-left:0; border-left:0; }
  .strip__list li:last-child{ padding-right:0; }
}

/* ============================================================
   PROGRAM
   ============================================================ */
.program{ background:var(--white); padding-block:var(--s8); }
.program__in{ display:grid; gap:var(--s7); }
.program__head .lede{ margin-bottom:0; }

.feats{ display:grid; }
.feats h3{ margin:0; }
.feats p{ margin:0; font-size:.9375rem; line-height:1.5; color:var(--tx-mut); }
.feats .ic{ color:var(--teal); }
.feats sup{ line-height:0; }
.feats sup a{ padding:0 3px; color:var(--teal-ui); font-weight:700; }

/* phones: a compact list, not eight tall tiles */
@media (max-width:559px){
  .feats li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4);
             padding:var(--s4) 0; border-top:1px solid var(--rule-lt); }
  .feats li:first-child{ border-top:0; padding-top:0; }
  .feats .ic{ grid-row:span 2; margin-top:1px; }
}
@media (min-width:560px){
  .feats{ grid-template-columns:1fr 1fr; gap:var(--s3); }
  .feats li{ padding:var(--s5); background:var(--paper); border:1px solid transparent; border-radius:12px;
             transition:border-color .2s var(--ease), background-color .2s var(--ease); }
  .feats li:hover{ background:#e7f1ef; border-color:#cde0dc; }
  .feats .ic{ margin:0 0 var(--s4); }
  .feats h3{ margin-bottom:var(--s2); }
}
@media (min-width:900px){ .feats{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px){ .program{ padding-block:var(--s10); } }
/* the mockup's arrangement: the argument on the left, the eight pieces on the right */
@media (min-width:1200px){
  .program__in{ grid-template-columns:340px 1fr; gap:var(--s7); align-items:center; }
  .program__head .h2{ font-size:2.5rem; }
  .feats li{ padding:var(--s6) var(--s4) var(--s5); text-align:center; }
  .feats .ic{ margin-inline:auto; }
}

/* ============================================================
   YOU OWN / WE POWER — signature section
   ============================================================ */
.own{ position:relative; isolation:isolate; overflow:hidden;
      background:var(--ink) url("assets/bg-own-tall.webp") center/cover no-repeat; color:var(--tx-on-d);
      padding-block:var(--s9); }
.own__head{ max-width:920px; margin-inline:auto; text-align:center; }
.own .eyebrow{ color:var(--teal-bright); }
.own__title{ color:#fff; }
.own__title em{ color:var(--teal-bright); }
.own .lede{ color:var(--tx-on-d-mut); max-width:50ch; }

.own__stage{ display:grid; gap:var(--s7); margin-top:var(--s8);
             grid-template-areas:"card" "you" "we"; }
.own__card{ grid-area:card; margin:0; display:grid; place-items:center; }
.own__card picture{ display:contents; }
.own__card img{ width:min(400px,92%); filter:drop-shadow(0 28px 40px rgba(0,0,0,.62)); }
.own__side--you{ grid-area:you; }
.own__side--we{ grid-area:we; }

.own__label{ font-family:var(--f-display); font-variation-settings:"wdth" 90; font-weight:700;
             font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-bright);
             margin:0 0 var(--s5); padding-bottom:var(--s3); border-bottom:1px solid var(--rule); }

/* yours: three lines, big, in order */
.own__steps li{ font-family:var(--f-display); font-variation-settings:"wdth" 80; font-weight:720;
                font-size:clamp(1.55rem,5.6vw,2.05rem); line-height:1.06; color:#fff; text-wrap:balance; }
.own__steps li + li::before{
  content:""; display:block; width:11px; height:11px; margin:var(--s3) 0 var(--s4) 5px;
  border-right:2px solid var(--teal-bright); border-bottom:2px solid var(--teal-bright);
  transform:rotate(45deg);
}

/* ours: everything it takes to run the program, small and dense */
.own__powers{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5); }
.own__powers li{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0;
                 border-bottom:1px solid rgba(255,255,255,.08);
                 font-size:.9375rem; line-height:1.35; color:var(--tx-on-d); }
.own__powers li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%;
                         background:var(--teal-bright); }

.own__statement{ max-width:36ch; margin:var(--s8) auto 0; text-align:center; text-wrap:balance;
                 font-family:var(--f-display); font-variation-settings:"wdth" 90; font-weight:600;
                 font-size:clamp(1.2rem,3.4vw,1.55rem); line-height:1.32; color:#fff; }

@media (min-width:700px){
  .own__stage{ grid-template-columns:1fr 1fr; grid-template-areas:"card card" "you we";
               gap:var(--s7) var(--s8); }
}
@media (min-width:1100px){
  .own{ padding-block:var(--s10); }
  .own__stage{ grid-template-columns:1fr minmax(380px,440px) 1fr; grid-template-areas:"you card we";
               align-items:start; gap:var(--s7); margin-top:var(--s9); }
  /* the card's top meets the first row of both lists: label + its rule + gap above them */
  .own__card{ padding-top:56px; }
  .own__card img{ width:100%; }
  .own__side--you{ text-align:right; }
  .own__side--you .own__steps li + li::before{ margin-left:auto; margin-right:5px; }
  .own__powers{ grid-template-columns:1fr; }
}

/* ============================================================
   PROOF
   ============================================================ */
.proof{ background:var(--paper); padding-block:var(--s8); }
.proof__in{ display:grid; gap:var(--s7); }
.proof__copy .lede{ margin-bottom:0; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
        margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--rule-lt); }
.stats dt{ font-family:var(--f-display); font-variation-settings:"wdth" 78; font-weight:800;
           font-size:clamp(2.1rem,7vw,3.1rem); line-height:1; color:var(--teal-ui); }
.stats dt span{ color:var(--teal-mid); }   /* "M" in 2M+ is information, not ornament: it has to pass */
.stats dd{ margin:var(--s2) 0 0; font-size:.8125rem; line-height:1.35;
           letter-spacing:.04em; text-transform:uppercase; color:var(--tx-mut); }

.quote{ position:relative; margin:0; padding:var(--s8) var(--s6) var(--s6);
        background:var(--white); border:1px solid var(--rule-lt); border-radius:16px;
        box-shadow:0 30px 60px -36px rgba(6,48,44,.35); }
.quote::before{ content:"\201C"; position:absolute; left:var(--s6); top:var(--s3);
                font-family:var(--f-display); font-variation-settings:"wdth" 80; font-weight:800;
                font-size:4.5rem; line-height:1; color:var(--teal); }
.quote blockquote{ margin:0; }
.quote p{ font-family:var(--f-display); font-variation-settings:"wdth" 92; font-weight:600;
          font-size:clamp(1.25rem,3vw,1.5rem); line-height:1.34; color:var(--tx);
          margin:0 0 var(--s5); text-wrap:pretty; }
.quote figcaption{ display:flex; align-items:center; gap:var(--s3); font-size:.8125rem; font-weight:600;
                   letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mut); }
.quote figcaption::before{ content:""; width:24px; height:2px; background:var(--teal); }

@media (min-width:1000px){
  .proof{ padding-block:var(--s10); }
  .proof__in{ grid-template-columns:1fr 1fr; gap:var(--s9); align-items:center; }
  .quote{ padding:var(--s9) var(--s7) var(--s7); }
  .quote::before{ left:var(--s7); top:var(--s5); font-size:5.5rem; }
}

/* ============================================================
   BOOK  (the show offer)
   ============================================================ */
.book{ background:var(--teal-deep); color:#fff; padding-block:var(--s8); }
.book__in{ max-width:980px; margin-inline:auto; text-align:center; }
.book__when{ color:rgba(255,255,255,.92); margin-bottom:var(--s5); }
.book__title{ color:#fff; }
.book__title em{ color:#b9f0e5; }
.book .lede{ color:rgba(255,255,255,.95); max-width:54ch; }
.book__cta{ margin-top:var(--s6); }
.book__small{ max-width:54ch; margin:var(--s5) auto 0; font-size:.9375rem; line-height:1.55;
              color:rgba(255,255,255,.86); }

@media (min-width:1024px){ .book{ padding-block:var(--s10); } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--tx-on-d-mut); padding-block:var(--s8) var(--s7);
       font-size:.875rem; }
.foot__in{ display:grid; gap:var(--s6); padding-bottom:var(--s6);
           background:linear-gradient(var(--rule), var(--rule)) center bottom / calc(100% - 2 * var(--gut)) 1px no-repeat; }
.foot__logo{ width:153px; height:auto; }
.foot__links{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); }
.foot__links a{ color:var(--tx-on-d-mut); display:inline-flex; align-items:center; min-height:36px; }
.foot__links a:hover{ color:#fff; }

.foot__legal{ padding-top:var(--s6); font-size:.75rem; line-height:1.6; color:rgba(255,255,255,.56); }
.foot__legal p{ margin:0 0 var(--s3); max-width:96ch; }
.foot__copy{ margin:var(--s5) 0 0; }

@media (min-width:768px){
  .foot__in{ grid-template-columns:auto 1fr; align-items:center; }
  .foot__links{ justify-content:flex-end; }
}

/* ============================================================
   MOBILE DOCK
   ============================================================ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(3,20,22,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.dock.is-in{ transform:none; }
.dock .btn{ max-width:520px; margin-inline:auto; }
.dock p{ margin:var(--s2) 0 0; text-align:center; font-size:.75rem; letter-spacing:.06em;
         text-transform:uppercase; color:var(--tx-on-d-mut); }
@media (min-width:900px){ .dock{ display:none; } }

/* ---------- crops ----------
   After the section rules on purpose: those set `background` as a shorthand,
   and a shorthand resets background-image whatever a media query said before it.
   Three per section, switching where its own layout changes shape; see
   tools/make_backgrounds.py for why one tall crop could not serve tablets too. */
@media (min-width:560px){  .hero{ background-image:url("assets/bg-hero-mid.webp"); } }
@media (min-width:700px){  .own { background-image:url("assets/bg-own-mid.webp"); } }
@media (min-width:1000px){ .hero{ background-image:url("assets/bg-hero.webp"); } }
@media (min-width:1100px){ .own { background-image:url("assets/bg-own.webp"); } }

/* ============================================================
   REVEAL
   ============================================================ */
.has-js .reveal{ opacity:0; transform:translateY(18px); }
.has-js .reveal.is-in{ opacity:1; transform:none;
                       transition:opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .has-js .reveal,.has-js .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .has-js .fan .fan__card{ opacity:1; transform:none; transition:none; }
  .dock{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}