/* ==========================================================================
   Mozaic Digital
   Layout reconstructed 1:1 from the reference screenshot (1200 x 10599 canvas).
   1rem = 100 design px, so the page scales proportionally with the viewport
   and is pixel-faithful at 1200px wide.
   Brand tokens, mark and imagery: mozaic-digital.com
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts are gated behind consent (js/consent.js), so the real webfont may
   arrive late or never. This fallback face scales the local system grotesque
   to DM Sans' own metrics (measured: DM Sans is 6.3% narrower than Helvetica
   Neue, 5.9% narrower than Arial) so the swap barely moves the layout.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"DM Sans Fallback";
  src:local("Helvetica Neue"),local("HelveticaNeue"),local("Arial"),local("Liberation Sans");
  size-adjust:93.7%;
  ascent-override:105.9%;
  descent-override:33.1%;
  line-gap-override:0%;
}

:root{
  --black:#000; --dark:#111; --dark-mid:#1a1a1a; --grey:#2a2a2a; --grey-mid:#3a3a3a;
  --muted:#8a8a8a; --dim:#a0a0a0; --white:#fff; --off-white:#e8e8e8;
  --accent:#ff4d1c; --accent-hi:#ff6a3d;
}

html{
  font-size: calc(100vw / 12);      /* 1rem = 100 design px at 1200px wide */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:#fff; color:#000; overflow-x:hidden;
  font-family:"DM Sans","DM Sans Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.16rem;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:none; }
/* <picture> must not create a box of its own, so the absolutely
   positioned images inside keep behaving exactly as before. */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

section,header,footer,.mosaic{ position:relative; width:100%; }

:focus-visible{ outline:.02rem solid var(--accent); outline-offset:.03rem; }

.sr-only{
  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:-9999px; top:0; z-index:99;
  background:#fff; color:#000; padding:.12rem .2rem; font-size:.14rem; font-weight:700;
}
.skip:focus{ left:.1rem; top:.1rem; }

/* ---- shared bits ------------------------------------------------------- */
.rule{ position:absolute; display:block; height:.01rem; background:#000; }

mark{ background:var(--accent); color:#fff; }

.btn{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border:.01rem solid #000; color:#000;
  font-size:.11rem; font-weight:700; letter-spacing:.011rem; text-transform:uppercase;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.light{ border-color:#fff; color:#fff; }
.btn.light:hover{ background:var(--accent); border-color:var(--accent); }
.btn.grey{ border-color:#c0c0c0; background:#c0c0c0; color:#3a3a3a; }
.btn.grey:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.btn-solid{
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff;
  font-size:.11rem; font-weight:700; letter-spacing:.011rem; text-transform:uppercase;
  transition:background .18s ease,color .18s ease;
}
.btn-solid:hover{ background:var(--accent); }
.btn-solid.white{ background:#fff; color:#000; }
.btn-solid.white:hover{ background:var(--accent); color:#fff; }

.num{
  position:absolute; font-size:.11rem; font-weight:500; color:var(--muted);
  line-height:.11rem; letter-spacing:.005rem;
}

/* ---- brand lockup ------------------------------------------------------ */
.brand,.f-logo{ position:absolute; width:.62rem; color:#fff; }
.brand-mark{ width:.62rem; height:.31rem; display:block; }
/* The wordmark is drawn as DM Sans outlines rather than set as live text, so
   the logo is identical for every visitor even before the webfont is allowed
   to load. It costs no request and cannot be affected by the consent choice. */
.brand-word{
  display:block; margin-top:.048rem;
  width:.4626rem; height:.209rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ height:8.28rem; background:#000; color:#fff; }
.brand{ left:.6667rem; top:.33rem; }

.nav{
  position:absolute; right:.6667rem; top:.305rem;
  display:flex; flex-direction:column; align-items:flex-end;
  font-size:.12rem; font-weight:700; line-height:.15rem;
  text-transform:uppercase; letter-spacing:.0045rem;
}
.nav a{ transition:color .18s ease; }
.nav a:hover{ color:var(--accent); }

.donate-top{
  position:absolute; right:.6667rem; top:1.30rem;
  height:.23rem; padding:0 .12rem;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000;
  font-size:.115rem; font-weight:700; text-transform:uppercase; letter-spacing:.0045rem;
  transition:background .18s ease,color .18s ease;
}
.donate-top:hover{ background:var(--accent); color:#fff; }

.hero .rule{ left:.6667rem; right:0; width:auto; background:var(--grey); }
.hero .r1{ top:2.6667rem; } .hero .r2{ top:4.00rem; } .hero .r3{ top:5.3333rem; }

.h-coral { position:absolute; left:2.00rem;   top:.50rem;    width:1.3333rem; height:2.1667rem; object-fit:cover; }
.h-circle{ position:absolute; left:1.6667rem; top:4.00rem;   width:1.3333rem; height:1.3333rem; border-radius:50%; object-fit:cover; }
.h-half  { position:absolute; left:6.6667rem; top:2.6667rem; width:1.3333rem; height:2.6667rem;
           border-radius:0 1.3333rem 1.3333rem 0; object-fit:cover; }

.hero-title{
  position:absolute; left:0; top:1.10rem; width:100%;
  font-size:1.30rem; line-height:1.3333rem; font-weight:700; letter-spacing:-.018rem;
}
.hero-title > span{ display:block; }
.hero-title .l1{ margin-left:4.00rem; }
.hero-title .l2{ margin-left:.6667rem; }
.hero-title .l3{ margin-left:3.3333rem; }
.hero-title .l4{ margin-left:1.3333rem; }

.hero-cta{ position:absolute; left:6.19rem; top:6.80rem; width:1.00rem; height:1.00rem; }
.hero-cta svg{ width:100%; height:100%; }
.hero-cta:hover path{ stroke:var(--accent); }

.hero-sub{
  position:absolute; left:7.53rem; top:6.845rem;
  font-size:.20rem; line-height:.31rem; font-weight:700;
}
.dim{ color:var(--muted); }

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.partner{ height:8.75rem; }
.partner h2{
  position:absolute; left:.6667rem; top:1.80rem;
  font-size:.66rem; line-height:.668rem; font-weight:700; letter-spacing:-.012rem;
}
.partner p{
  position:absolute; left:6.6667rem; top:5.28rem; width:4.30rem;
  font-size:.30rem; line-height:.407rem; font-weight:400; letter-spacing:-.004rem;
}

/* ==========================================================================
   MOSAIC BANDS
   ========================================================================== */
.mosaic img{ width:100%; height:auto; }
.mosaic-a{ height:8.07rem; }
.mosaic-b{ height:8.20rem; }
.oib-card{ position:absolute; left:.6667rem; top:2.91rem; width:10.6667rem; height:5.29rem; background:#fff; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.projects{ height:28.69rem; }
.projects-title{
  position:absolute; left:0; top:-1.04rem; width:100%;
  font-size:1.30rem; line-height:1.3333rem; font-weight:700; letter-spacing:-.018rem;
}
.projects-title > span{ display:block; }
.projects-title .l1{ margin-left:2.00rem; }
.projects-title .l2{ margin-left:3.3333rem; }

.projects h3 mark{ white-space:nowrap; }
.projects h3{
  position:absolute; width:3.40rem;
  font-size:.345rem; line-height:.3333rem; font-weight:700; letter-spacing:-.006rem;
}

.p1-img { position:absolute; left:.6667rem; top:3.04rem;  width:6.6667rem; height:5.00rem; object-fit:cover; }
.p1-rule{ left:8.00rem; top:3.04rem;  width:3.3333rem; }
.p1-num { left:8.00rem; top:3.27rem; }
.p1-head{ left:8.00rem; top:3.61rem; }
.p1-btn { left:8.00rem; top:5.067rem; width:1.50rem; height:.44rem; }

.p2-img { position:absolute; left:4.6667rem; top:9.36rem; width:6.6667rem; height:5.00rem; object-fit:cover; }
.p2-rule{ left:.6667rem; top:9.36rem;  width:3.3333rem; }
.p2-num { left:.6667rem; top:9.59rem; }
.p2-head{ left:.6667rem; top:9.93rem; }
.p2-btn { left:.6667rem; top:11.38rem; width:1.50rem; height:.46rem; }

.p3-img { position:absolute; left:.6667rem; top:15.54rem; width:6.6667rem; height:5.28rem; object-fit:cover; }
.p3-rule{ left:8.00rem; top:15.69rem;  width:3.3333rem; }
.p3-num { left:8.00rem; top:15.92rem; }
.p3-head{ left:8.00rem; top:16.25rem; }
.p3-btn1{ left:7.98rem; top:18.05rem; width:1.50rem; height:.47rem; }
.p3-btn2{ left:9.66rem; top:18.05rem; width:1.53rem; height:.47rem; }

.all-projects{ left:4.6667rem; top:21.68rem; width:2.6667rem; height:.68rem; }

/* ==========================================================================
   DIGITAL PRODUCTS
   ========================================================================== */
.chasing{ height:9.46rem; background:#000; color:#fff; }
.cc-img{ position:absolute; left:.6667rem; top:-3.01rem; width:10.6667rem; height:6.08rem; object-fit:cover; }
.cc-title{
  position:absolute; left:.6667rem; top:2.08rem;
  font-size:1.30rem; line-height:1.3333rem; font-weight:700; letter-spacing:-.018rem;
}
.cc-play{ position:absolute; left:6.523rem; top:3.41rem; width:1.334rem; height:1.334rem; }
.cc-play svg{ width:100%; height:100%; }
.cc-play:hover path{ stroke:var(--accent); }

.cc-watch{
  position:absolute; left:8.183rem; top:3.90rem;
  font-size:.116rem; line-height:.15rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.004rem;
}
.cc-body{
  position:absolute; left:2.947rem; top:5.13rem; width:3.40rem;
  font-size:.13rem; line-height:.185rem; font-weight:400; color:#fff;
}
.cc-body b{ font-weight:700; }
.cc-body .dim{ color:var(--dim); }
.cc-btn{ left:2.947rem; top:6.843rem; width:1.50rem; height:.467rem; }

.cc-wordmark{
  position:absolute; left:6.90rem; top:5.92rem; width:4.43rem;
  font-size:1.12rem; line-height:1.20rem; font-weight:700;
  letter-spacing:-.035rem; color:var(--dark-mid); text-align:center;
}

/* ==========================================================================
   DISCIPLINES
   ========================================================================== */
.oib-title{
  position:absolute; left:0; top:0; width:100%;
  font-size:1.30rem; line-height:1.3333rem; font-weight:700; letter-spacing:-.018rem; color:#000;
}
.oib-title > span{ position:absolute; }
.oib-title .o1 { left:3.3333rem; top:4.17rem; }
.oib-title .o2 { left:2.00rem;   top:5.503rem; }
.oib-title .o2d{ left:7.90rem;   top:5.503rem; }
.oib-title .o3d{ left:3.30rem;   top:6.836rem; }
.oib-title .o3 { left:5.3333rem; top:6.836rem; }

.bank{ height:6.72rem; }
.bank-sub{
  position:absolute; left:5.51rem; top:.66rem; width:1.55rem;
  font-size:.11rem; line-height:.14rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.003rem;
}
.bank-nav{ position:absolute; left:7.92rem; top:.75rem; display:flex; gap:.28rem; z-index:2; }
.bank-nav .arr{
  width:.26rem; height:.40rem; padding:0; border:0; background:none;
  color:#000; cursor:pointer; transition:color .18s ease;
}
.bank-nav .arr svg{ width:100%; height:100%; display:block; }
.bank-nav .arr:hover:not(:disabled){ color:var(--accent); }
.bank-nav .arr:disabled{ color:#d2d2d2; cursor:default; }

.card-viewport{ position:absolute; left:0; top:1.80rem; width:100%; height:3.30rem; overflow:hidden; z-index:1; }
.card-track{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transition:transform .55s cubic-bezier(.5,.05,.2,1);
}
.card{ position:absolute; top:.12rem; width:3.3333rem; }
/* Service icons are inline SVG: no request, crisp at any size, and the panel
   controls the colour via currentColor. */

.card-track .card:nth-child(1){ left:.6667rem; }
.card-track .card:nth-child(2){ left:4.3333rem; }
.card-track .card:nth-child(3){ left:8.00rem; }
.card-track .card:nth-child(4){ left:11.6667rem; }
.card-track .card:nth-child(5){ left:15.3333rem; }
.card img{ width:3.3333rem; height:2.32rem; object-fit:cover; }
.card figcaption{
  position:absolute; left:0; top:2.50rem; width:3.3333rem;
  font-size:.258rem; line-height:.26rem; font-weight:700; letter-spacing:-.005rem; white-space:nowrap;
}
.card figcaption b{
  display:block; margin-top:.075rem;
  font-size:.13rem; line-height:.13rem; font-weight:400; color:var(--grey-mid);
}

/* ==========================================================================
   WEBSITE PACKAGES
   Boxes removed: each tier is held by a single rule and its own whitespace.
   The middle tier is the intended choice, so it carries the accent rule, a
   tonal ground and the solid CTA. The outer tiers frame it rather than
   compete. No struck-through prices or countdowns: both are actionable
   under Swiss UWG Art. 3 and German UWG §5.
   ========================================================================== */
.pricing{ height:10.10rem; }

.kicker-p{
  position:absolute; left:.6667rem; top:.62rem;
  font-size:.11rem; line-height:.11rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.008rem; color:var(--accent);
}
.pricing-title{
  position:absolute; left:.6667rem; top:.86rem;
  font-size:1.30rem; line-height:1.3333rem; font-weight:700; letter-spacing:-.018rem;
}
.pricing-sub{
  position:absolute; left:6.6667rem; top:1.28rem; width:4.40rem;
  font-size:.165rem; line-height:.27rem; font-weight:400; color:var(--grey-mid);
}

.tier{
  position:absolute; top:2.90rem; width:3.3333rem; height:5.00rem;
  padding:.30rem .26rem 0 0;
  display:flex; flex-direction:column;
  border-top:.01rem solid #000;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.t1{ left:.6667rem; } .t2{ left:4.3333rem; } .t3{ left:8.00rem; }

/* the rule that draws in on hover */
.tier::before{
  content:""; position:absolute; left:0; top:-.01rem; right:0; height:.02rem;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.tier:hover{ transform:translateY(-.08rem); }
.tier:hover::before{ transform:scaleX(1); }

/* the intended choice */
.tier.is-featured{
  top:2.66rem; height:5.24rem;
  padding:.30rem .26rem 0 .26rem; margin-left:-.26rem;
  background:#f4f2ee; border-top-color:var(--accent);
}
.tier.is-featured::before{ transform:scaleX(1); }

.tier-flag{
  position:absolute; right:.26rem; top:.28rem;
  font-size:.10rem; line-height:.12rem; font-weight:700;
  letter-spacing:.008rem; text-transform:uppercase; color:var(--accent);
}
.tier-name{
  font-size:.11rem; line-height:.11rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.008rem; color:var(--muted);
}

/* Price hierarchy: the numeral carries the weight, the currency sits beside it.
   Thousands separators are omitted, a longer string reads as a larger number. */
.tier-price{ margin-top:.26rem; color:#000; }
.tier-price .pre{
  display:block; margin-bottom:.04rem;
  font-size:.105rem; line-height:.12rem; font-weight:500;
  letter-spacing:.008rem; color:var(--muted); text-transform:uppercase;
}
.tier-price .cur{
  display:inline-block; vertical-align:baseline;
  font-size:.15rem; line-height:1; font-weight:500;
  color:var(--muted); margin-right:.07rem;
}
.tier-price .amt{
  display:inline-block; vertical-align:baseline;
  font-size:.52rem; line-height:1.02; font-weight:700; letter-spacing:-.016rem;
  transition:letter-spacing .45s cubic-bezier(.16,1,.3,1);
}
.tier:hover .tier-price .amt{ letter-spacing:-.008rem; }

.tier-for{
  margin-top:.22rem; padding-bottom:.24rem; border-bottom:.01rem solid #e4e4e4;
  font-size:.135rem; line-height:.20rem; color:var(--grey-mid);
}
.tier.is-featured .tier-for{ border-bottom-color:#dcd9d2; }

.tier-list{ margin-top:.22rem; flex:1 1 auto; }
.tier-list li{
  position:relative; padding-left:.20rem; margin-bottom:.125rem;
  font-size:.135rem; line-height:.19rem;
}
.tier-list li::before{
  content:""; position:absolute; left:0; top:.072rem;
  width:.06rem; height:.06rem; background:var(--accent);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.tier:hover .tier-list li::before{ transform:rotate(45deg); }

/* CTA: hairline that fills, with the arrow travelling on hover */
.tier-cta{
  position:static; flex:0 0 auto; width:100%; height:.46rem; margin-bottom:.30rem;
  display:flex; align-items:center; justify-content:center; gap:.08rem;
  border:.01rem solid #000; background:transparent; color:#000;
  font-size:.11rem; font-weight:700; letter-spacing:.011rem; text-transform:uppercase;
  overflow:hidden;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.tier-cta::after{
  content:"\2192"; display:inline-block; font-size:.13rem; letter-spacing:0;
  transform:translateX(-.04rem);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.tier-cta:hover{ background:#000; color:#fff; border-color:#000; }
.tier-cta:hover::after{ transform:translateX(.04rem); }
.tier.is-featured .tier-cta{ background:#000; color:#fff; }
.tier.is-featured .tier-cta:hover{ background:var(--accent); border-color:var(--accent); }

.pricing-note{
  position:absolute; left:.6667rem; top:8.42rem; width:6.60rem;
  font-size:.135rem; line-height:.21rem; color:var(--muted);
}

@media (max-width:820px){
  .pricing{ height:auto !important; padding:28px 22px 48px; }
  .kicker-p,.pricing-title,.pricing-sub,.pricing-note{
    position:static; left:auto; top:auto; width:auto;
  }
  .kicker-p{ font-size:12px; margin-bottom:12px; }
  .pricing-title{ font-size:clamp(38px,10.5vw,64px); line-height:1.02;
                  letter-spacing:-.02em; margin-bottom:16px; }
  .pricing-sub{ font-size:16px; line-height:25px; margin-bottom:34px; }
  .pricing-sub br{ display:none; }
  .tier{
    position:static; width:auto; height:auto; margin:0 0 30px;
    padding:22px 0 0; transform:none !important;
  }
  /* .tier.is-featured is more specific than .tier, so the desktop height and
     offset have to be undone by name or the card collapses to ~84px and
     crushes its own CTA. */
  .tier.is-featured{
    top:auto; height:auto; padding:22px 18px 0; margin-left:0;
  }
  .tier-flag{ position:static; display:inline-block; margin-bottom:10px;
              font-size:12px; line-height:16px; }
  .tier-name{ font-size:12px; line-height:16px; }
  .tier-price{ margin-top:18px; }
  .tier-price .pre{ font-size:12px; line-height:16px; }
  .tier-price .cur{ font-size:17px; margin-right:6px; }
  .tier-price .amt{ font-size:52px; line-height:54px; }
  .tier-for{ font-size:15px; line-height:23px; margin-top:16px; padding-bottom:20px; }
  .tier-list{ margin-top:20px; }
  .tier-list li{ font-size:15px; line-height:22px; padding-left:20px; margin-bottom:11px; }
  .tier-list li::before{ width:7px; height:7px; top:8px; }
  .tier-cta{ flex:0 0 auto; height:54px; margin:20px 0 0; font-size:12px; }
  /* the arrow is sized in rem for the desktop canvas; restate it or it lands
     at ~2px against the 16px mobile root */
  .tier-cta::after{ font-size:15px; transform:translateX(-2px); }
  .tier-cta:hover::after{ transform:translateX(2px); }
  .pricing-note{ font-size:14px; line-height:22px; margin-top:18px; }
}

/* ==========================================================================
   APPROACH
   ========================================================================== */
.unique{ height:9.62rem; }
.unique > h2{
  position:absolute; left:.6667rem; top:-.09rem;
  font-size:.345rem; line-height:.3333rem; font-weight:700; letter-spacing:-.006rem;
}
.u-rule1{ left:.6667rem; top:2.90rem; width:10.6667rem; }
.u-rule2{ left:.6667rem; top:7.58rem; width:10.6667rem; }

.uc{ position:absolute; top:4.12rem; width:.82rem; height:.82rem; border-radius:50%; object-fit:cover; }
.uc1{ left:1.86rem; } .uc2{ left:2.8233rem; } .uc3{ left:3.7867rem; }

.working{
  position:absolute; right:.6667rem; top:3.47rem; text-align:right;
  font-size:1.62rem; line-height:1.66rem; font-weight:400; letter-spacing:-.030rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.brands{ height:5.45rem; }
.kicker{
  position:absolute; left:0; top:-.03rem; width:100%; text-align:center;
  font-size:.11rem; line-height:.11rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.008rem;
}
.brands-title{
  position:absolute; left:0; top:.17rem; width:100%; text-align:center;
  font-size:.70rem; line-height:.725rem; font-weight:700; letter-spacing:-.014rem;
}

.faq-grid{
  position:absolute; left:.6667rem; top:1.62rem; width:10.6667rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.52rem .44rem;
}
.faq-grid dt{
  font-size:.20rem; line-height:.24rem; font-weight:700; letter-spacing:-.004rem;
  padding-top:.16rem; border-top:.01rem solid #000;
}
.faq-grid dd{ margin-top:.11rem; font-size:.145rem; line-height:.21rem; color:var(--grey-mid); }

/* ==========================================================================
   CONTACT / FOOTER
   ========================================================================== */
.footer{ height:9.15rem; background:#000; color:#fff; }
.f-pattern{ position:absolute; left:0; top:0; width:3.40rem; height:9.15rem; object-fit:cover; object-position:top left; }
.f-logo{ left:4.6667rem; top:1.34rem; }

.f-links{
  position:absolute; left:4.6667rem; top:2.64rem;
  font-size:.16rem; line-height:.214rem; font-weight:500;
}
.f-links a{ transition:color .18s ease; }
.f-links a:hover{ color:var(--accent); }

.f-head{
  position:absolute; left:7.00rem; top:1.27rem;
  font-size:.36rem; line-height:.334rem; font-weight:700; letter-spacing:-.006rem;
}
.f-body{
  position:absolute; left:7.00rem; top:2.62rem;
  font-size:.14rem; line-height:.165rem; font-weight:400; color:#c9c9c9;
}
.f-donate{ left:7.01rem; top:3.48rem; width:1.55rem; height:.47rem; }

.f-list{
  position:absolute; left:4.6667rem; top:4.87rem;
  font-size:.36rem; line-height:.377rem; font-weight:700; letter-spacing:-.006rem;
}

.f-form{ position:absolute; left:4.6667rem; top:5.55rem; width:6.00rem; height:.59rem; }
.f-form input{
  width:100%; height:100%; background:transparent; border:.01rem solid #fff;
  color:#fff; padding:0 .55rem 0 .18rem;
  font-family:inherit; font-size:.165rem; font-weight:400;
}
.f-form input::placeholder{ color:var(--muted); }
.f-form button{
  position:absolute; right:.16rem; top:50%; transform:translateY(-50%);
  width:.40rem; height:.24rem; background:none; border:0; cursor:pointer;
}
.f-form button svg{ width:100%; height:100%; }
.f-form button:hover path{ stroke:var(--accent); }

.f-copy{
  position:absolute; left:4.6667rem; top:7.05rem;
  font-size:.12rem; line-height:.14rem; font-weight:400; color:var(--muted);
}
.f-copy a:hover{ color:var(--accent); }

.f-social{ position:absolute; left:7.78rem; top:7.18rem; display:flex; gap:.45rem; align-items:center; }
.f-social svg{ width:.18rem; height:.18rem; fill:#fff; transition:fill .18s ease; }
.f-social a:hover svg{ fill:var(--accent); }

.f-terms{
  position:absolute; left:4.6667rem; top:7.70rem;
  font-size:.12rem; line-height:.14rem; font-weight:400; color:#c9c9c9;
}
.f-credit{
  position:absolute; right:.6667rem; top:7.70rem;
  font-size:.12rem; line-height:.14rem; font-weight:400; color:#c9c9c9;
}
.f-terms a:hover,.f-credit a:hover{ color:var(--accent); }

/* ==========================================================================
   MOBILE / TABLET
   Below 820px the fixed 1200px canvas is unreadable, so the page reflows to a
   single column. Same type scale, palette and rhythm — normal document flow.
   ========================================================================== */
@media (max-width:820px){
  html{ font-size:16px; }
  body{ font-size:16px; }

  section,header,footer,.mosaic{ height:auto !important; }

  .hero,.partner,.projects,.chasing,.bank,.unique,.brands,.footer{
    padding:28px 22px 48px;
  }
  .hero{ padding-top:120px; }

  /* every absolutely-placed element returns to flow */
  .brand,.nav,.donate-top,.hero-title,.hero-cta,.hero-sub,
  .partner h2,.partner p,.projects-title,.projects h3,.num,.rule,
  .p1-img,.p2-img,.p3-img,.btn,.btn-solid,
  .cc-img,.cc-title,.cc-play,.cc-watch,.cc-body,.cc-wordmark,
  .oib-title,.oib-title span,.oib-card,.bank-sub,.card,.card figcaption,
  .unique>h2,.uc,.working,.kicker,.brands-title,.faq-grid,
  .f-pattern,.f-logo,.f-links,.f-head,.f-body,.f-list,.f-form,
  .f-copy,.f-social,.f-terms,.f-credit,
  .bank-nav,.card-viewport,.card-track{
    position:static; left:auto; right:auto; top:auto; bottom:auto;
    width:auto; height:auto; margin-left:0; transform:none; text-align:left;
  }

  .h-coral,.h-circle,.h-half,.f-pattern,.bank-nav,.cc-wordmark{ display:none; }

  .brand{ position:absolute; top:22px; left:22px; width:96px; }
  .brand-mark{ width:66px; height:33px; }
  /* wordmark is an SVG now, so it scales by box size, not font-size.
     66 x 0.746 keeps the exact desktop mark-to-wordmark proportion. */
  .brand-word{ width:49.2px; height:22.2px; margin-top:7px; }

  .nav{ flex-direction:row; flex-wrap:wrap; gap:2px 18px; font-size:12px; line-height:1.2;
        margin:0 0 26px; justify-content:flex-start; }
  /* 44px minimum touch height without visually changing the row */
  .nav a{ display:inline-flex; align-items:center; min-height:44px; }
  .donate-top{ display:inline-flex; height:42px; padding:0 20px; font-size:12px; margin-bottom:40px; }

  .hero .rule{ display:none; }
  .hero-title{ font-size:clamp(38px,10.5vw,64px); line-height:1.02; letter-spacing:-.02em; margin-bottom:28px; }
  .hero-title .l1,.hero-title .l2,.hero-title .l3,.hero-title .l4{ margin-left:0; }
  .hero-cta{ width:56px; height:56px; margin-bottom:16px; display:block; }
  .hero-sub{ font-size:17px; line-height:26px; margin-bottom:8px; }

  .partner h2{ font-size:clamp(30px,7.4vw,44px); line-height:1.04; letter-spacing:-.02em; margin-bottom:24px; }
  .partner p{ font-size:19px; line-height:28px; }

  .projects-title,.cc-title,.oib-title{ font-size:clamp(38px,10.5vw,64px); line-height:1.02; letter-spacing:-.02em; }
  .projects-title .l1,.projects-title .l2,
  .oib-title .o1,.oib-title .o2,.oib-title .o3{ margin-left:0; display:block; }
  .oib-title{ color:#fff; margin-top:-6px; }
  .mosaic-b{ background:#000; padding-bottom:36px; }
  .oib-title .o2d,.oib-title .o3d{ display:none; }

  .projects-title{ margin-bottom:40px; }
  .p1-img,.p2-img,.p3-img{ width:100%; height:auto; aspect-ratio:4/3; margin-bottom:20px; }
  .projects .rule{ position:static; display:block; height:1px; width:100%; margin-bottom:14px; }
  .num{ display:block; margin-bottom:10px; }
  .projects h3{ font-size:24px; line-height:28px; margin-bottom:22px; }
  /* These live in rem for the desktop canvas, where 1rem = 100 design px.
     On mobile the root drops to 16px, so every one of them must be restated
     or the text renders at ~1.8px and the buttons look empty. */
  .btn,.btn-solid{
    display:inline-flex; height:48px; padding:0 22px; margin:0 10px 40px 0;
    font-size:12px; line-height:1; letter-spacing:1.1px;
  }
  .num{ font-size:12px; line-height:16px; letter-spacing:.6px; }
  .skip{ font-size:14px; padding:12px 18px; }
  .cc-watch{ font-size:12px; line-height:16px; letter-spacing:.6px; }

  /* The disciplines band had no padding, so the heading sat flush against the
     screen edge, and a -6px nudge made it overlap the mosaic above it. */
  .mosaic-b{ background:#000; padding:0 22px 40px; }
  .mosaic-b img{ width:calc(100% + 44px); margin:0 -22px 26px; }
  .oib-title{ color:#fff; margin-top:0; }

  /* Touch targets: inline links were 14-20px tall. 44px is the minimum both
     Apple and Google publish, and it is what Lighthouse checks for. */
  .f-links a{ display:inline-flex; align-items:center; min-height:44px; }
  .f-terms a,.f-copy a,.mz-consent-links a{ display:inline-flex; align-items:center; min-height:44px; }
  .f-cookiebtn{ display:inline-flex; align-items:center; min-height:44px; }
  .f-social a{ display:inline-flex; align-items:center; justify-content:center;
               width:44px; height:44px; margin:-12px; }
  .lbody a{ padding:2px 0; }
  .all-projects{ width:100%; }

  .chasing{ padding-top:0; }
  .cc-img{ width:calc(100% + 44px); margin:0 -22px 26px; height:auto; aspect-ratio:16/9; }
  .cc-title{ margin-bottom:20px; }
  .cc-play{ width:56px; height:56px; margin-bottom:10px; display:block; }
  .cc-watch{ font-size:12px; line-height:16px; margin-bottom:24px; }
  .cc-body{ font-size:16px; line-height:24px; margin-bottom:26px; }

  .bank-sub{ font-size:12px; line-height:17px; margin-bottom:26px; }
  .card-viewport,.card-track{ position:static; width:auto; height:auto; overflow:visible; transform:none !important; }
  .card{ margin-bottom:30px; }
  .card img{ width:100%; height:auto; aspect-ratio:3/2; }
  .card figcaption{ font-size:22px; line-height:26px; margin-top:12px; white-space:normal; }
  .card figcaption b{ font-size:15px; margin-top:6px; }

  .unique>h2{ font-size:24px; line-height:29px; margin-bottom:30px; }
  .u-rule1,.u-rule2{ position:static; display:block; width:100%; height:1px; margin:26px 0; }
  .uc{ display:inline-block; width:52px; height:52px; margin:0 8px 14px 0; }
  .working{ font-size:clamp(40px,11.5vw,68px); line-height:1.0; letter-spacing:-.02em; }

  .kicker{ font-size:12px; margin-bottom:12px; }
  .brands-title{ font-size:clamp(36px,10vw,58px); line-height:1.05; margin-bottom:34px; }
  .faq-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
  .faq-grid dt{ font-size:18px; line-height:23px; }
  .faq-grid dd{ font-size:15px; line-height:23px; }

  .f-logo{ display:block; width:96px; margin-bottom:30px; }
  .f-links{ display:flex; flex-wrap:wrap; gap:12px 22px; font-size:15px; margin-bottom:38px; }
  .f-head{ font-size:clamp(30px,8vw,42px); line-height:1.06; margin-bottom:18px; }
  .f-body{ font-size:15px; line-height:23px; margin-bottom:26px; }
  .f-body br{ display:none; }
  .f-donate{ margin-bottom:44px; }
  .f-list{ font-size:clamp(28px,7.4vw,38px); margin-bottom:18px; }
  .f-form{ display:flex; width:100%; height:56px; margin-bottom:34px; position:relative; }
  .f-form input{ font-size:16px; padding:0 52px 0 16px; }
  .f-form button{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  }
  .f-form button svg{ width:30px; height:18px; }
  .f-copy{ font-size:13px; line-height:19px; margin-bottom:22px; }
  .f-social{ display:flex; gap:22px; margin-bottom:22px; }
  .f-social svg{ width:20px; height:20px; }
  .f-terms{ font-size:13px; margin-bottom:8px; }
  .f-credit{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}


/* ==========================================================================
   LEGAL PAGES (privacy / terms / cookies)
   Flow-based: content length varies, so these use the same unit, type scale
   and rules as the home page without the fixed canvas.
   ========================================================================== */
.lhead{ height:4.72rem; background:#000; color:#fff; }
.lhead .rule{ left:.6667rem; right:0; width:auto; background:var(--grey); }
.lhead .lr1{ top:2.00rem; }

.crumbs{
  position:absolute; left:.6667rem; top:1.86rem;
  font-size:.115rem; line-height:.16rem; color:var(--muted);
}
.crumbs ol{ display:flex; gap:.06rem; list-style:none; flex-wrap:wrap; }
.crumbs a{ color:var(--dim); }
.crumbs a:hover{ color:var(--accent); }
.crumbs [aria-current]{ color:#fff; }

.kicker-l{
  position:absolute; left:.6667rem; top:2.28rem;
  font-size:.11rem; line-height:.11rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.008rem; color:var(--accent);
}
.lhead-title{
  position:absolute; left:.6667rem; top:2.58rem;
  font-size:.96rem; line-height:.95rem; font-weight:700; letter-spacing:-.016rem;
}
.lmeta{
  position:absolute; left:.6667rem; top:3.92rem;
  font-size:.14rem; line-height:.20rem; font-weight:400; color:var(--muted);
}

.legal{ padding:.90rem 0 .80rem; }
.llead{
  width:10.6667rem; max-width:none; margin:0 auto .90rem;
  font-size:.30rem; line-height:.40rem; font-weight:700; letter-spacing:-.005rem;
}
.lsec{
  display:grid; grid-template-columns:2.60rem 1fr; gap:0 .60rem;
  width:10.6667rem; margin:0 auto .60rem; padding-top:.26rem;
  border-top:.01rem solid #000;
}
.lsec h2{
  font-size:.11rem; line-height:.16rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.008rem;
}
.lbody{ max-width:6.60rem; }
.lbody p{ font-size:.165rem; line-height:.27rem; font-weight:400; }
.lbody p + p{ margin-top:.20rem; }
.lbody b{ font-weight:700; }
.lbody a{ text-decoration:underline; text-underline-offset:.035rem; }
.lbody a:hover{ color:var(--accent); }

.ltable-wrap{ margin:.26rem 0; overflow-x:auto; }
.ltable{ width:100%; border-collapse:collapse; font-size:.145rem; line-height:.23rem; }
.ltable caption{
  text-align:left; padding-bottom:.12rem;
  font-size:.11rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.008rem; color:var(--grey-mid);
}
.ltable th,.ltable td{
  text-align:left; vertical-align:top; padding:.14rem .18rem .14rem 0;
  border-top:.01rem solid #d8d8d8;
}
.ltable thead th{
  font-size:.11rem; text-transform:uppercase; letter-spacing:.006rem;
  border-top:.01rem solid #000; white-space:nowrap;
}
.ltable tbody th{ font-weight:700; white-space:nowrap; }

.mosaic-strip{ height:1.90rem; overflow:hidden; }
.mosaic-strip img{ width:100%; height:auto; margin-top:-.30rem; }

@media (max-width:820px){
  .lhead{ height:auto !important; padding:118px 22px 44px; }
  .lhead .rule{ display:none; }
  .crumbs,.kicker-l,.lhead-title,.lmeta{
    position:static; left:auto; top:auto; width:auto;
  }
  .crumbs{ font-size:13px; line-height:18px; margin-bottom:18px; }
  .crumbs a{ display:inline-flex; align-items:center; min-height:44px; }
  .crumbs{
  position:absolute; left:.6667rem; top:1.86rem;
  font-size:.115rem; line-height:.16rem; color:var(--muted);
}
.crumbs ol{ display:flex; gap:.06rem; list-style:none; flex-wrap:wrap; }
.crumbs a{ color:var(--dim); }
.crumbs a:hover{ color:var(--accent); }
.crumbs [aria-current]{ color:#fff; }

.kicker-l{ font-size:12px; margin-bottom:14px; }
  .lhead-title{ font-size:clamp(34px,9.4vw,56px); line-height:1.04; letter-spacing:-.02em; margin-bottom:16px; }
  .lmeta{ font-size:14px; }

  .legal{ padding:34px 22px 10px; }
  .llead{ width:auto; font-size:19px; line-height:28px; margin:0 0 30px; }
  .lsec{
    grid-template-columns:1fr; gap:10px; width:auto;
    margin:0 0 30px; padding-top:20px;
  }
  .lsec h2{ font-size:12px; line-height:16px; }
  .lbody{ max-width:none; }
  .lbody p{ font-size:16px; line-height:25px; }
  .lbody p + p{ margin-top:16px; }
  .ltable{ font-size:14px; line-height:21px; }
  .ltable th,.ltable td{ padding:12px 14px 12px 0; }
  .ltable caption,.ltable thead th{ font-size:12px; }
  .mosaic-strip{ height:auto; }
  .mosaic-strip img{ margin-top:0; }
}


/* ==========================================================================
   CONSENT BANNER
   Accept and Decline are deliberately identical in weight and size. Nothing
   non-essential loads until one of them is pressed.
   ========================================================================== */
.mz-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:#000; color:#fff;
  border-top:.02rem solid var(--accent);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .22s ease;
}
.mz-consent.is-in{ transform:translateY(0); }
.mz-consent.is-gone{ transform:translateY(100%); opacity:0; }

.mz-consent-in{
  max-width:11.3333rem; margin:0 auto; padding:.30rem .6667rem;
  display:flex; align-items:center; gap:.60rem;
}
.mz-consent-copy{ flex:1 1 auto; }
.mz-consent h2{
  font-size:.13rem; line-height:.13rem; font-weight:700;
  letter-spacing:.008rem; text-transform:uppercase; color:var(--accent);
  margin-bottom:.10rem;
}
.mz-consent p{ font-size:.135rem; line-height:.205rem; color:#d2d2d2; max-width:7.40rem; }
.mz-consent-links{ margin-top:.08rem; }
.mz-consent-links a{ color:#fff; text-decoration:underline; text-underline-offset:.03rem; margin-right:.16rem; }
.mz-consent-links a:hover{ color:var(--accent); }

.mz-consent-btns{ flex:0 0 auto; display:flex; gap:.12rem; }
.mz-consent-btns button{
  font-family:inherit; font-size:.11rem; font-weight:700;
  letter-spacing:.011rem; text-transform:uppercase;
  padding:0 .24rem; height:.44rem; min-width:1.30rem;
  border:.01rem solid #fff; background:transparent; color:#fff; cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.mz-consent-btns button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.f-cookiebtn{
  font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
}
.f-cookiebtn:hover{ color:var(--accent); }

@media (max-width:820px){
  .mz-consent-in{ max-width:none; padding:20px 22px; flex-direction:column; align-items:stretch; gap:16px; }
  .mz-consent h2{ font-size:12px; line-height:16px; letter-spacing:.8px; margin-bottom:8px; }
  .mz-consent p{ font-size:14px; line-height:21px; max-width:none; }
  .mz-consent-links{ margin-top:8px; }
  .mz-consent-links a{ margin-right:16px; }
  .mz-consent-btns{ gap:10px; }
  .mz-consent-btns button{ flex:1 1 0; height:48px; font-size:12px; letter-spacing:1.1px; padding:0 12px; min-width:0; }
}



/* ==========================================================================
   INTRO EFFECTS
   Two behaviours only:
     Fade Up       rise 40px into place, expo ease-out.
     Letter Reveal per-character lift, staggered left to right.
   The hidden state exists only while .reveal-on is on <html>, which
   js/reveal.js adds in <head>. No JS or reduced-motion means nothing hides.
   ========================================================================== */

/* ---- shared hidden state (both effects start from here) ---- */
.reveal-on :is(.hero-sub, .hero-cta, .brand, .nav, .donate-top, .partner p,.projects h3, .projects .num, .projects .rule,.p1-img, .p2-img, .p3-img, .btn, .btn-solid,.cc-play, .cc-watch, .cc-body, .cc-img, .cc-wordmark,.bank-sub, .bank-nav, .card,.unique > h2, .uc, .unique .rule,.kicker, .kicker-p, .pricing-sub, .tier, .pricing-note, .faq-grid > div,.f-logo, .f-links li, .f-body, .f-form, .f-copy, .f-social li, .f-terms,.kicker-l, .lmeta, .llead, .lsec),
.reveal-on :is(.hero-title > span, .projects-title > span, .cc-title, .oib-title > span,.working, .brands-title, .lhead-title, .f-head, .f-list, .partner h2, .pricing-title){
  opacity:0;
  transform:translate3d(0,40px,0);
}

/* ---- Fade Up ---- */
.reveal-on :is(.hero-sub, .hero-cta, .brand, .nav, .donate-top, .partner p,.projects h3, .projects .num, .projects .rule,.p1-img, .p2-img, .p3-img, .btn, .btn-solid,.cc-play, .cc-watch, .cc-body, .cc-img, .cc-wordmark,.bank-sub, .bank-nav, .card,.unique > h2, .uc, .unique .rule,.kicker, .kicker-p, .pricing-sub, .tier, .pricing-note, .faq-grid > div,.f-logo, .f-links li, .f-body, .f-form, .f-copy, .f-social li, .f-terms,.kicker-l, .lmeta, .llead, .lsec){
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform .95s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal-on :is(.hero-sub, .hero-cta, .brand, .nav, .donate-top, .partner p,.projects h3, .projects .num, .projects .rule,.p1-img, .p2-img, .p3-img, .btn, .btn-solid,.cc-play, .cc-watch, .cc-body, .cc-img, .cc-wordmark,.bank-sub, .bank-nav, .card,.unique > h2, .uc, .unique .rule,.kicker, .kicker-p, .pricing-sub, .tier, .pricing-note, .faq-grid > div,.f-logo, .f-links li, .f-body, .f-form, .f-copy, .f-social li, .f-terms,.kicker-l, .lmeta, .llead, .lsec).is-in{
  opacity:1; transform:none; will-change:auto;
}

/* Rules sweep in from the left instead of rising. */
.reveal-on :is(.projects .rule,.unique .rule){
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s ease-out;
}
.reveal-on :is(.projects .rule,.unique .rule).is-in{ transform:scaleX(1); }

/* The three circles pop rather than rise. */
.reveal-on .uc{ transform:translate3d(0,40px,0) scale(.62); }
.reveal-on .uc.is-in{ transform:none; }

/* ---- Letter Reveal ---- */
/* The splitter generates .ln / .wd inside these headings. They must never be
   caught by the hidden-state rule above, which is why the heading selectors
   use a direct-child combinator. This is the explicit backstop. */
.reveal-on .lr .ln,
.reveal-on .lr .wd{ opacity:1; transform:none; transition:none; }
/* Headings carry their own layout rules (.oib-title spans are absolutely
   positioned, others are blocks). Those must never reach the generated spans,
   or every letter lands on the same origin. Direct-child selectors above do
   the work; this is the guarantee. */
.lr .ln{ position:static; display:block; }
.lr .wd{ position:static; display:inline-block; white-space:nowrap; }
.lr .ch{ position:static; display:inline-block; }

/* Once split, the heading itself is shown and its characters carry the motion. */
.reveal-on :is(.hero-title > span, .projects-title > span, .cc-title, .oib-title > span,.working, .brands-title, .lhead-title, .f-head, .f-list, .partner h2, .pricing-title).lr{
  opacity:1; transform:none;
}
.reveal-on .lr .ln{ display:block; }
.reveal-on .lr .wd{ display:inline-block; white-space:nowrap; }
.reveal-on .lr .ch{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,.22em,0);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),
             transform .62s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal-on .lr.is-in .ch{
  opacity:1; transform:none; will-change:auto;
}

@media (prefers-reduced-motion:reduce){
  .reveal-on :is(.hero-sub, .hero-cta, .brand, .nav, .donate-top, .partner p,.projects h3, .projects .num, .projects .rule,.p1-img, .p2-img, .p3-img, .btn, .btn-solid,.cc-play, .cc-watch, .cc-body, .cc-img, .cc-wordmark,.bank-sub, .bank-nav, .card,.unique > h2, .uc, .unique .rule,.kicker, .kicker-p, .pricing-sub, .tier, .pricing-note, .faq-grid > div,.f-logo, .f-links li, .f-body, .f-form, .f-copy, .f-social li, .f-terms,.kicker-l, .lmeta, .llead, .lsec),
  .reveal-on :is(.hero-title > span, .projects-title > span, .cc-title, .oib-title > span,.working, .brands-title, .lhead-title, .f-head, .f-list, .partner h2, .pricing-title),
  .reveal-on .lr .ch{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ==========================================================================
   HOVER MOTION
   Restrained: a nudge, a rule, a scale. Everything eases on the same curve.
   ========================================================================== */
.card{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.card:hover{ transform:translateY(-.06rem); }
.card .ic-wrap,.card picture{ display:block; overflow:hidden; }
.card img{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
.card:hover img{ transform:scale(1.04); }

.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.03rem; height:.01rem;
  background:currentColor; transform:scaleX(0); transform-origin:right center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left center; }

.faq-grid dt{ transition:color .3s ease; }
.faq-grid > div:hover dt{ color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .card,.card img,.tier,.tier-cta::after,.tier-price .amt,
  .tier::before,.tier-list li::before,.nav a::after{
    transition:none !important; transform:none !important;
  }
}