/* ═══════════════════════════════════════════════════════════
   CASSIA PARTNERS
   Aesthetic: horological quiet luxury (guilloché engine-turning)
   Libre Caslon Display / Urbanist / Lekton
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1220;
  --ink-2:#121C2C;
  --ink-3:#1B2739;
  --bronze:#C9B182;
  --bronze-2:#A38F65;
  --bone:#EDE7DC;
  --bone-2:#E2DACC;
  --bone-3:#F6F2EA;
  --slate:#8A97A9;
  --hair:#D3C9B8;

  --f-display:"Libre Caslon Display",Georgia,serif;
  --f-body:"Urbanist",system-ui,sans-serif;
  --f-mono:"Lekton",ui-monospace,monospace;

  --s--1:clamp(.76rem,.73rem + .12vw,.83rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --s-1:clamp(1.1rem,1.02rem + .38vw,1.3rem);
  --s-2:clamp(1.3rem,1.12rem + .8vw,1.82rem);
  --s-3:clamp(1.7rem,1.34rem + 1.65vw,2.85rem);

  --gut:clamp(1.25rem,4.5vw,3.25rem);
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-body);font-size:var(--s-0);line-height:1.7;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,canvas,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.14;
  letter-spacing:-.006em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--bronze);color:var(--ink)}
:where(a,button,summary,[role=slider]):focus-visible{outline:2px solid var(--bronze);
  outline-offset:4px;border-radius:3px}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--bronze);color:var(--ink);padding:.8rem 1.2rem}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:800px}
.k{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-2)}
.h2{font-size:var(--s-3)}
.head{margin-bottom:clamp(2.2rem,4.5vw,3.6rem);max-width:60ch}
.head .h2{margin-block:.8rem .9rem}
.sub{color:var(--slate);font-size:var(--s-1);max-width:54ch}
.sect{padding-block:clamp(4.5rem,9vw,8rem);scroll-margin-top:5rem}

/* ═══ HEADER ═══════════════════════════════════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:1.5rem;padding:1.1rem var(--gut);
  transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease);
  border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(11,18,32,.86);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:rgba(201,177,130,.2);padding-block:.7rem}
.mark{display:flex;align-items:baseline;gap:.6rem;flex:none}
.mark__w{font-family:var(--f-display);font-size:1.1rem;letter-spacing:.28em;color:var(--bone)}
.mark__s{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-2)}
.nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.87rem}
.nav a{color:#9BA7B6;position:relative;padding:.3rem 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.05rem;height:1px;
  background:var(--bronze);transition:right .4s var(--ease)}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{right:0}
.burger{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.8rem 1.6rem;
  background:var(--bronze);color:var(--ink);
  font-family:var(--f-body);font-weight:600;font-size:.88rem;letter-spacing:.02em;
  border:1px solid var(--bronze);border-radius:1px;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:transparent;color:var(--bronze)}
.btn--ghost{background:transparent;color:var(--bone);border-color:rgba(201,177,130,.35)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--sm{min-height:38px;padding:.5rem 1.05rem;font-size:.8rem;flex:none}
.btn--full{width:100%;margin-top:1.4rem}

/* ═══ HERO — the dial ══════════════════════════════════ */
/* Two columns from lg: the engraved plate carries the instrument on the left,
   the narrative sits on quiet ground to the right. Centred-everything put the
   body copy straight onto the guilloché, where it could not be read. */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:7rem var(--gut) 4rem;position:relative;overflow:hidden;
}
.hero__field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__in{position:relative;z-index:1;width:100%;max-width:1240px;margin-inline:auto;
  display:grid;gap:clamp(2rem,5vh,3.2rem);justify-items:center;text-align:center}
.hero__plate{display:grid;place-items:center}
.hero__copy{display:grid;justify-items:center}
.hero__k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:1.5rem}

.dialwrap{position:relative}
.dial{
  position:relative;width:var(--d,clamp(16rem,42vh,24rem));aspect-ratio:1;
  display:grid;place-items:center;cursor:grab;touch-action:none;border-radius:50%;
  isolation:isolate;
}
.dial:active{cursor:grabbing}
/* the applied plate — an opaque disc so the wordmark is never fighting the
   engine-turning behind it, with a machined bezel and a lit upper edge */
.dial::before{
  content:"";position:absolute;inset:-9%;border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(24,34,52,.97) 0 40%,rgba(11,18,32,.93) 58%,
      rgba(9,15,26,.72) 74%,rgba(9,15,26,0) 88%);
}
/* bezel: a hairline ring lit from above, as a turned steel edge catches light */
.dial::after{
  content:"";position:absolute;inset:-9%;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 200deg,
    rgba(201,177,130,.05),rgba(201,177,130,.5) 42%,rgba(238,222,188,.75) 50%,
    rgba(201,177,130,.42) 58%,rgba(201,177,130,.05) 88%,rgba(201,177,130,.05));
  -webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 1.2px),#000 calc(50% - 1.2px) 50%,transparent 50%);
  mask:radial-gradient(circle,transparent 0 calc(50% - 1.2px),#000 calc(50% - 1.2px) 50%,transparent 50%);
  opacity:.85;
}
.dial__ring{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.dial__hand{
  position:absolute;inset:0;border-radius:50%;
  transform:rotate(var(--a,0deg));transition:transform .12s linear;
  pointer-events:none;z-index:2;
}
/* the hand: a tapered bronze pointer, its lozenge tip, and a counterweight
   tail through the pivot — the detail that separates an instrument from a pie chart */
.dial__hand::before{
  content:"";position:absolute;left:50%;top:2.5%;width:2px;height:15%;
  transform:translateX(-50%);background:linear-gradient(var(--bronze),#EEDEBC);
  box-shadow:0 0 14px rgba(201,177,130,.85);
}
.dial__hand::after{
  content:"";position:absolute;left:50%;top:calc(2.5% + 15%);width:10px;height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#EEDEBC;box-shadow:0 0 12px rgba(238,222,188,.6);
}
/* No pivot cap: the bronze marker indexes around a fixed plate rather than
   sweeping from a centre, so a hub would be a hand that isn't there — and it
   would land squarely on the wordmark. */
.dial__core{display:grid;gap:.55rem;place-items:center;pointer-events:none;padding:1rem;
  position:relative;z-index:3}
.dial__mark span{display:block;font-family:var(--f-display);
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem);letter-spacing:.24em;
  text-indent:.24em;color:var(--bone)}
.dial__mark em{display:block;font-style:normal;font-family:var(--f-mono);
  font-size:.62rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--bronze-2);margin-top:.45rem}
.dial__yr{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin-top:.7rem}
.dial__yr b{font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);
  color:var(--bronze);line-height:1;font-variant-numeric:tabular-nums}
.dial__yr i{font-style:normal;font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.dial__hint{
  position:absolute;bottom:-2.1rem;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap;
  animation:breathe 3.4s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.dial.is-touched .dial__hint{opacity:0;animation:none;transition:opacity .4s}

.horizon{position:relative;width:min(52ch,100%);min-height:13rem}
.hz{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.hz.is-on{opacity:1;transform:none;pointer-events:auto;position:relative}
.hz__k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:.85rem}
.hz h2{font-size:var(--s-2);margin-bottom:.75rem}
.hz p{color:#93A0B1}
.no-js .hz{position:static;opacity:1;transform:none;margin-bottom:2rem}
.no-js .horizon{min-height:0}

.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem}

/* ═══ LIGHT SECTIONS ═══════════════════════════════════ */
.sect--bone{background:var(--bone);color:var(--ink)}
.sect--bone .k{color:var(--bronze-2)}
.sect--bone .sub{color:#5C6675}
.sect--dark{background:var(--ink-2)}

/* stance — reads as a schedule of undertakings: index, the undertaking, the
   detail. Three columns from md so the statement and its reasoning sit side by
   side instead of stacking into the left 60% and leaving the rest empty. */
.stance{display:grid;gap:0;border-top:1px solid var(--hair)}
.stance li{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.3rem;
  padding:1.6rem 0;border-bottom:1px solid var(--hair);align-items:start;
  transition:background .4s var(--ease)}
.stance li:hover{background:rgba(201,177,130,.07)}
.stance span{grid-column:1;grid-row:1/span 2;font-family:var(--f-display);
  font-size:1.5rem;color:var(--bronze-2);line-height:1.1}
.stance h3{grid-column:2;font-size:var(--s-1);margin-bottom:.4rem}
.stance p{grid-column:2;color:#5C6675;max-width:60ch}

/* mandates */
.mandates{display:grid;gap:1px;background:rgba(201,177,130,.18);
  border:1px solid rgba(201,177,130,.18)}
.md{background:var(--ink);padding:clamp(1.5rem,3vw,2.1rem);
  transition:background .4s var(--ease)}
.md:hover{background:var(--ink-3)}
.md__n{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.16em;color:var(--bronze);
  padding-bottom:.5rem;border-bottom:1px solid rgba(201,177,130,.28);display:inline-block}
.md h3{font-size:var(--s-2);margin:.7rem 0 .6rem;color:var(--bone)}
.md p{color:#96A2B2;max-width:52ch}

/* fees */
.fees{font-size:.96rem}
.fees th{text-align:left;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7C8898;font-weight:400;
  padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--ink)}
.fees td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--hair);color:#414B59}
.fees td:first-child{color:var(--ink)}
.fees td:not(:first-child){font-family:var(--f-mono);font-size:.9rem;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.fees tfoot td{border-bottom:0;border-top:1px solid var(--ink);padding-top:1rem;
  background:rgba(201,177,130,.14)}
.fees tfoot td b{font-weight:700}
.fees__grid{display:grid;gap:2rem;margin-top:2.6rem}
.fees__grid h3{font-size:var(--s-1);margin-bottom:.9rem}
.fees__grid li{position:relative;padding:.3rem 0 .3rem 1.3rem;color:#5C6675;font-size:.93rem}
.fees__grid li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:1px;
  background:var(--bronze-2)}
.fees__note{margin-top:2.2rem;padding:1.2rem 1.4rem;background:var(--bone-3);
  border-left:2px solid var(--bronze);color:#5C6675;font-size:.94rem;max-width:66ch}

/* custody */
.custody{display:grid;gap:1px;background:rgba(201,177,130,.16);
  border:1px solid rgba(201,177,130,.16)}
.custody div{background:var(--ink-2);padding:clamp(1.3rem,2.6vw,1.8rem)}
.custody dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:.5rem}
.custody dd{margin:0;color:#AFBAC8;font-size:.94rem}

/* people */
.people{display:grid;gap:1px;background:rgba(201,177,130,.16);
  border:1px solid rgba(201,177,130,.16)}
.prs{background:var(--ink);padding:clamp(1.4rem,2.8vw,1.9rem);
  transition:background .4s var(--ease)}
.prs:hover{background:var(--ink-3)}
.prs__m{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(201,177,130,.55);
  background:radial-gradient(circle at 34% 28%,#26354C,#0B1220 72%);
  box-shadow:inset 0 1px 0 rgba(238,222,188,.22),0 0 22px rgba(201,177,130,.1);
  color:var(--bronze);font-family:var(--f-display);font-size:1.05rem;letter-spacing:.1em;
  margin-bottom:1.1rem}
.prs h3{font-size:var(--s-1);color:var(--bone)}
.prs__r{color:var(--bronze);font-size:.9rem;margin-top:.2rem}
.prs__c{font-family:var(--f-mono);font-size:.68rem;color:var(--slate);margin-top:.7rem;
  line-height:1.75}

/* faq */
.faq details{border-bottom:1px solid var(--hair)}
.faq details:first-child{border-top:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--f-display);font-size:var(--s-1);transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  border-right:1px solid #7C8898;border-bottom:1px solid #7C8898;
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary{color:var(--bronze-2)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--bronze-2)}
.faq p{padding:0 2.5rem 1.4rem 0;color:#5C6675;max-width:64ch}

/* contact */
.contact{padding-block:clamp(4.5rem,9vw,8rem);background:var(--ink);
  border-top:1px solid rgba(201,177,130,.18)}
.contact__grid{display:grid;gap:2.6rem}
.contact > .wrap > div > p{color:var(--slate);margin-top:1.1rem;max-width:46ch}
.contact__pts{margin-top:1.7rem;display:grid;gap:.55rem}
.contact__pts li{position:relative;padding-left:1.5rem;color:var(--slate);font-size:.93rem}
.contact__pts li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;
  background:var(--bronze)}
.ccard{background:var(--ink-2);border:1px solid rgba(201,177,130,.22);
  padding:clamp(1.4rem,3vw,1.9rem)}
.ccard__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-2)}
.ccard__big{display:block;font-family:var(--f-display);color:var(--bone);
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2.05rem);letter-spacing:.01em;margin:.5rem 0 .3rem}
.ccard__big:hover{color:var(--bronze)}
.ccard__mail{color:var(--slate);font-size:.92rem;border-bottom:1px solid rgba(201,177,130,.3)}
.ccard__mail:hover{color:var(--bronze);border-color:var(--bronze)}
.ccard hr{border:0;border-top:1px solid rgba(201,177,130,.18);margin:1.3rem 0}
.ccard address{font-style:normal;color:var(--slate);font-size:.92rem;line-height:1.8}
.ccard__hrs{margin-top:1.1rem;font-size:.88rem;color:var(--slate);line-height:1.85}
.ccard__hrs b{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze-2);display:block;margin-top:.55rem;font-weight:400}

/* footer */
.ftr{background:var(--ink-2);color:var(--slate);padding-block:3rem 2.4rem;
  border-top:1px solid rgba(201,177,130,.14)}
.ftr__grid{display:grid;gap:1.8rem}
.mark__w--ftr{font-size:1.15rem}
.ftr__tag{margin-top:.5rem;font-size:.86rem}
.ftr__nav{display:flex;flex-wrap:wrap;gap:1.3rem;font-size:.88rem}
.ftr__nav a:hover{color:var(--bronze)}
.ftr__fine{font-family:var(--f-mono);font-size:.64rem;line-height:1.95;color:#5A6675}

/* ═══ REVEAL ═══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-visible{opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.no-js .reveal{opacity:1;transform:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js .reveal{opacity:1;transform:none;animation:rise linear both;
      animation-timeline:view();animation-range:entry 3% cover 20%}
    .js .reveal.is-visible{transition:none}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ═══ RESPONSIVE ═══════════════════════════════════════ */
@media (min-width:1040px){
  /* instrument left, narrative right — the copy leaves the engraving entirely */
  .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    align-items:center;gap:clamp(3rem,6vw,6rem);text-align:left;justify-items:stretch}
  .hero__copy{justify-items:start;position:relative}
  /* The scrim is full-bleed on the section, not a box around the copy — a box
     leaves a visible rectangular edge wherever the gradient is clipped. This
     is one wash across the whole hero, so it can only ever read as falling
     light. It paints above the canvas (later in tree order, same z-index) and
     below the content. */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(100deg,
      rgba(7,12,21,0) 34%,rgba(7,12,21,.55) 48%,rgba(7,12,21,.9) 62%,rgba(7,12,21,.96) 100%);
  }
  .hero__cta{justify-content:flex-start}
  .dial{--d:clamp(20rem,40vw,27rem)}
}
@media (min-width:900px){
  .mandates{grid-template-columns:1fr 1fr}
  .md:first-child{grid-column:1/-1}
  .custody{grid-template-columns:repeat(3,1fr)}
  .people{grid-template-columns:repeat(3,1fr)}
  .fees__grid{grid-template-columns:1fr 1fr;gap:3rem}
  .contact__grid{grid-template-columns:1fr .78fr;align-items:start;gap:3.5rem}
  .ftr__grid{grid-template-columns:1fr auto;align-items:end}
  .ftr__fine{grid-column:1/-1;padding-top:1.6rem;border-top:1px solid rgba(201,177,130,.14)}
  .stance li{grid-template-columns:3.4rem minmax(0,21ch) minmax(0,1fr);
    gap:2.6rem;align-items:baseline;padding-block:1.9rem}
  .stance span{grid-row:1}
  .stance h3{grid-column:2;margin-bottom:0}
  .stance p{grid-column:3;max-width:none}
  /* the lead mandate is set as a two-up so the widest cell is never half air */
  .md:first-child{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows:min-content auto;
    gap:clamp(2rem,4vw,3.4rem);align-items:start}
  /* grid blockifies inline-block, which would stretch the numeral's rule the
     full column width; justify-self:start shrinks it back to the glyph */
  .md:first-child .md__n{grid-column:1;grid-row:1;justify-self:start}
  .md:first-child h3{grid-column:1;grid-row:2;font-size:var(--s-3);margin-top:.5rem}
  .md:first-child p{grid-column:2;grid-row:1/span 2;max-width:46ch;font-size:var(--s-1);
    color:#9AA6B6}
}
@media (max-width:899px){
  .horizon{min-height:16rem;text-align:left}
  .hero{padding-top:5.5rem}
  .dial{--d:min(62vw,17rem)}
  .custody{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .nav{position:fixed;inset:0;z-index:65;background:var(--ink);flex-direction:column;
    justify-content:center;align-items:flex-start;gap:.2rem;padding:2rem var(--gut);margin:0;
    font-family:var(--f-display);font-size:1.6rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease)}
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{padding:.55rem 0;color:var(--bone)}
  .nav a::after{display:none}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-left:auto;background:none;border:0;cursor:pointer;
    padding:0;z-index:70;position:relative}
  .burger span{display:block;width:22px;height:1px;background:var(--bone);margin-inline:auto;
    transition:transform .35s var(--ease)}
  .burger.is-open span:first-child{transform:translateY(3px) rotate(45deg)}
  .burger.is-open span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .hdr .btn--sm{display:none}
  .fees{font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}