/* Meridian Digital: shared styles for every page */
:root{
  --paper:   #F4F3EF;
  --paper-2: #EAE9E4;
  --white:   #FFFFFF;
  --ink:     #0B0B0C;
  --ink-2:   #2A2A2D;
  --grey:    #66666C;
  --rule:    rgba(11,11,12,.12);
  --accent:  #FF4D1A;
  --accent-ink: #C4380C;

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Public Sans", ui-sans-serif, system-ui, sans-serif;

  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.is-loading{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--white); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--display);
  font-variation-settings:"wdth" 100;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grey);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin:0;
}
.eyebrow::before{
  content:"";
  width:.5rem; height:.5rem;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.h-xl{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:750;
  font-size:clamp(2.5rem, 6.4vw, 6.75rem);
  line-height:.94;
  letter-spacing:-.045em;
  margin:0;
  text-wrap:balance;
}
.h-xl em{ font-style:normal; color:var(--grey); }


/* ---------- pill button ---------- */
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 104;
  font-weight:700;
  font-size:clamp(1rem, 1.6vw, 1.3rem);
  background:var(--paper);
  color:var(--ink);
  border-radius:999px;
  padding:1.15rem 1.4rem 1.15rem 2rem;
  transition:background-color .35s ease, color .35s ease, transform .6s var(--ease);
  word-break:break-word;
}
.btn-pill i{
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  flex:none;
  transition:transform .5s var(--ease);
}
.btn-pill i svg{ width:1rem; height:1rem; }
.btn-pill:hover{ background:var(--accent); color:#fff; }
.btn-pill:hover i{ background:#fff; color:var(--accent); transform:rotate(-45deg); }

/* ---------- cursor + grain ---------- */
.cursor{ display:none; }
.has-cursor, .has-cursor *{ cursor:none !important; }
.has-cursor .cursor{
  display:block;
  position:fixed;
  left:0; top:0;
  z-index:95;
  pointer-events:none;
  mix-blend-mode:difference;
}
.cursor__dot, .cursor__ring{
  position:absolute;
  left:0; top:0;
  border-radius:50%;
  will-change:transform;
}
.cursor__dot{
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  background:#fff;
}
.cursor__ring{
  width:38px; height:38px;
  margin:-19px 0 0 -19px;
  border:1px solid #fff;
  transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s ease, opacity .3s ease;
}
.cursor.is-hover .cursor__ring{
  width:84px; height:84px;
  margin:-42px 0 0 -42px;
  background:#fff;
}
.cursor.is-hidden{ opacity:0; }

.grain{
  position:fixed;
  inset:0;
  z-index:94;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  mix-blend-mode:difference;
  color:#fff;
}
.nav__inner{
  max-width:1440px;
  margin:0 auto;
  padding:1.4rem var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.brand{
  font-family:var(--display);
  font-variation-settings:"wdth" 108;
  font-weight:800;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  text-transform:uppercase;
  display:flex;
  align-items:baseline;
  gap:.6rem;
  white-space:nowrap;
}
.brand small{
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.22em;
  opacity:.6;
  font-variation-settings:"wdth" 100;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(1.25rem, 2.4vw, 2.5rem);
  font-family:var(--display);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.nav__links a{ position:relative; padding:.25rem 0; }
.nav__links a:not(.pill)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:not(.pill):hover::after{ transform:scaleX(1); transform-origin:left; }
.pill{
  display:inline-block;
  border:1px solid currentColor;
  border-radius:999px;
  padding:.7rem 1.25rem !important;
  transition:background-color .3s ease, color .3s ease, transform .5s var(--ease);
}
.pill:hover{ background:#fff; color:#000; }

.burger{
  display:none;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:.45rem;
  width:2.75rem; height:2.75rem;
  padding:0;
  margin-right:-.35rem;
  border:0;
  background:transparent;
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  background:#fff;
  transition:transform .5s var(--ease), width .5s var(--ease);
}
.burger span:nth-child(1){ width:1.75rem; }
.burger span:nth-child(2){ width:1.1rem; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width:1.75rem; transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width:820px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
}

.menu{
  position:fixed;
  inset:0;
  z-index:55;
  background:var(--ink);
  color:var(--paper);
  padding:calc(7rem + env(safe-area-inset-top)) var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  clip-path:circle(0% at calc(100% - 2.5rem) 2.5rem);
  transition:clip-path .8s var(--ease-io);
  visibility:hidden;
}
.menu.is-open{ clip-path:circle(150% at calc(100% - 2.5rem) 2.5rem); visibility:visible; }
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  font-family:var(--display);
  font-variation-settings:"wdth" 115;
  font-weight:750;
  font-size:clamp(2.4rem, 11vw, 3.5rem);
  letter-spacing:-.04em;
  line-height:1;
  padding:1rem 0;
  border-bottom:1px solid rgba(244,243,239,.14);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.menu__nav a small{
  font-size:.75rem;
  letter-spacing:.2em;
  font-weight:600;
  color:var(--accent);
  font-variation-settings:"wdth" 100;
}
.menu__foot a{
  font-family:var(--display);
  font-weight:700;
  font-size:1.125rem;
  border-bottom:2px solid var(--accent);
  padding-bottom:.2rem;
}
body.menu-open{ overflow:hidden; }


/* ---------- footer ---------- */
.foot{
  background:var(--ink);
  color:rgba(244,243,239,.55);
  padding:clamp(3rem, 8vh, 5rem) 0 2rem;
  overflow:hidden;
}
.foot__mark{
  font-family:var(--display);
  font-variation-settings:"wdth" 125;
  font-weight:800;
  font-size:14.4vw;
  line-height:.78;
  letter-spacing:-.055em;
  color:var(--paper);
  white-space:nowrap;
  margin:0 0 clamp(2rem, 5vh, 3rem);
  padding-inline:calc(var(--pad) * .5);
  user-select:none;
}
.foot__mark span{ color:var(--accent); }
.foot__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem 2rem;
  border-top:1px solid rgba(244,243,239,.14);
  padding-top:1.75rem;
  font-family:var(--display);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; }
.foot__links a{ transition:color .25s ease; }
.foot__links a:hover{ color:var(--paper); }

/* ---------- reveals ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s ease, transform 1.2s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

[data-magnetic]{ transition:transform .6s var(--ease); }


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