/* ===========================================================================
   About page — layout, leadership accent, hover-flip team cards, scroll reveals
   ---------------------------------------------------------------------------
   Linked from src/html/about.head.html (after the compiled Tailwind base).
   Hand-written because the prebuilt Tailwind sheet has NO 3D-transform utilities,
   no JIT, and inline <script> is stripped by set:html. Everything here is
   CSS-only and degrades gracefully (touch + reduced-motion).
   =========================================================================== */

:root {
  --dc-gradient: linear-gradient(90deg, #22d2a2 0%, #1892e5 50%, #0b44cf 100%);
}

/* --- Page container: narrower than the site default for generous side gutters,
       plus responsive inner padding. Keeps the border-x hairline frame. --- */
.dc-about-wrap {
  width: 100%;
  max-width: 84rem; /* ~1344px — narrower than the 108rem site default */
  margin-inline: auto;
}
.dc-about-pad {
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .dc-about-pad { padding-inline: 3rem; }
}
@media (min-width: 1280px) {
  .dc-about-pad { padding-inline: 4.5rem; }
}

/* --- Hero: headline left, mission right; team photo band below. --- */
.dc-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .dc-hero-grid { grid-template-columns: 1.7fr 1fr; gap: 3rem; }
}
.dc-hero-media {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.dc-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* Generous top space under the nav + breathing room before the photo. */
.dc-hero-pad { padding-top: 3rem; padding-bottom: 2.5rem; }
@media (min-width: 768px)  { .dc-hero-pad { padding-top: 6rem;   padding-bottom: 3.5rem; } }
@media (min-width: 1024px) { .dc-hero-pad { padding-top: 8.5rem; padding-bottom: 4.5rem; } }

/* --- Hero entrance (on load) ------------------------------
   Masked per-line rise for the headline + staggered fade-ups (ported from
   landing-3.css, which the About page doesn't link), plus a fresh clip/scale
   wipe for the team photo. Cascade: eyebrow -> line 1 -> line 2 -> mission
   -> photo. Reset under reduced-motion below. --- */
.dc-ae-line { display: block; overflow: hidden; padding-block: 0.14em; margin-block: -0.14em; }
.dc-ae-line > span { display: block; transform: translateY(112%); animation: dc-ae-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dc-ae-line:nth-child(1) > span { animation-delay: 0.12s; }
.dc-ae-line:nth-child(2) > span { animation-delay: 0.24s; }
.dc-ae-up { animation: dc-ae-fadeup 0.7s ease both; }
@keyframes dc-ae-rise   { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes dc-ae-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dc-hero-img { animation: dc-hero-img-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.5s; }
@keyframes dc-hero-img-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.05); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-ae-line > span, .dc-ae-up, .dc-hero-img {
    animation: none; transform: none; opacity: 1; clip-path: none;
  }
}

/* --- Card grids (hand-rolled so we don't depend on prefixed Tailwind cols). --- */
.dc-leader-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px)  { .dc-leader-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dc-leader-grid { grid-template-columns: repeat(5, 1fr); } }

/* Leadership card — built so its height CANNOT depend on intrinsic sizing.
   Some Safari builds sized this grid's row far taller than any card's content: the
   cards rendered about twice as tall and spilled over the section below. That is the
   known failure mode when a grid item's height comes from `aspect-ratio` (plus an
   img at height:100%) which the engine has to resolve while it is still working out
   the track sizes.

   So the square is made with `padding-top:100%` instead. A percentage padding always
   resolves against the element's own WIDTH, so the box height is fully determined
   before intrinsic sizing is involved, and the absolutely-positioned img is out of
   flow and contributes nothing to the row at all. The row can only ever be as tall
   as the text block plus that square. No aspect-ratio, no percentage heights. */
.dc-leader-card { display: flex; flex-direction: column; }
.dc-leader-shot {
  position: relative;
  width: 100%;
  padding-top: 100%;            /* the square, resolved off our own width */
  overflow: hidden;
  background: var(--color-surface-brand-tertiary, #e7edfb);
}
/* Fills the square: the photo, or the initials tile when a headshot is missing.
   Deliberately no `display` here — the initials tile is a flex box that centres its
   letters, and forcing block would break it. */
.dc-leader-shot > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dc-leader-shot > img { display: block; object-fit: cover; }
.dc-leader-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }

/* ===========================================================================
   Team carousel — draggable polaroid strip
   ---------------------------------------------------------------------------
   Interaction model measured off exa.ai/about and rebuilt here: the JS engine
   (src/pages/about.astro) absolutely positions every .dc-pol each frame with
   inline width / transform / opacity / z-index; this sheet only supplies the
   static skin. The wrapper's ::before/::after gradients are the wide edge
   "overlays" that dissolve the strip into the section on both sides (dropped
   on mobile, where the strip runs full-bleed instead).
   =========================================================================== */
.dc-carousel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Escape the section's inner padding so the strip runs frame to frame.
     Negative margins mirror .dc-about-pad's responsive padding-inline. */
  margin-inline: -1.5rem;
}
@media (min-width: 768px)  { .dc-carousel { margin-inline: -3rem; } }
@media (min-width: 1280px) { .dc-carousel { margin-inline: -4.5rem; } }

/* Edge overlays: the strip dissolves under a wide section-coloured gradient on
   both sides (the exa "white overlay" — ours is the section's pale blue).
   Overlay elements rather than a mask so the fade sits ABOVE the cards
   (z 1200 > the engine's max z 1000) and can be made properly pronounced.
   Dropped on mobile, where the strip runs full-bleed edge to edge. */
.dc-carousel::before,
.dc-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(70px, 11vw, 190px);
  z-index: 1200;
  pointer-events: none;
}
.dc-carousel::before {
  left: 0;
  background: linear-gradient(to right, #f1f6fd 12%, rgba(241, 246, 253, 0.65) 45%, rgba(241, 246, 253, 0) 100%);
}
.dc-carousel::after {
  right: 0;
  background: linear-gradient(to left, #f1f6fd 12%, rgba(241, 246, 253, 0.65) 45%, rgba(241, 246, 253, 0) 100%);
}
@media (max-width: 767px) {
  .dc-carousel::before,
  .dc-carousel::after { display: none; }
}

.dc-carousel__track {
  position: relative;
  width: 100%;
  /* Two strips stack in this section, so the row is only as tall as a centred
     card needs (photo square + copy) — the old single-strip 34vw left a band of
     dead space that read as a gap between the rows. */
  height: clamp(340px, 28vw, 460px);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* horizontal drag is ours; vertical stays with the page */
  outline: none;
}
.dc-carousel__track:active { cursor: grabbing; }
.dc-carousel__track:focus-visible { box-shadow: inset 0 0 0 2px #1892e5; }
@media (max-width: 767px) {
  .dc-carousel__track { height: clamp(350px, 95vw, 400px); }
}

/* Second strip: the section's flex gap is sized for headline-to-content, which
   is too airy between two rows of the same wall. Pull it back up. */
.dc-carousel--row2 { margin-top: -1.25rem; }
@media (max-width: 767px) { .dc-carousel--row2 { margin-top: -0.75rem; } }

/* The polaroid. Geometry mirrors the reference; surfaces/type are brand. The
   parked transform keeps unlaid cards off-canvas so nothing flashes at load. */
.dc-pol {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 280px; /* JS overrides per viewport */
  padding: clamp(9px, 1vw, 14px) clamp(9px, 1vw, 14px) clamp(12px, 1.3vw, 17px);
  background: #fff; /* quiet white polaroid on the pale-blue section */
  border: 1px solid rgba(1, 28, 70, 0.08);
  border-radius: 2px;
  /* translate3d keeps the card on the compositor. Deliberately NO will-change here:
     the roster is 46 cards, and promoting every one (most of them parked at opacity 0
     off-strip) cost ~46 layers of GPU memory and was the main reason the strip stuttered
     on phones. The 3D transform promotes the handful that are actually moving. */
  transform: translate3d(-9999px, -50%, 0);
  transform-origin: center center;
  box-shadow: 0 0.5px 1px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.dc-pol__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eef0f4; /* cool-gray frame so white-cutout headshots read intentional */
  border-radius: 1px;
  pointer-events: none; /* never intercepts the drag, never ghost-drags */
}
.dc-pol__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--dc-gradient);
}
.dc-pol__initials span {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
/* The engine hard-cuts copy opacity at 2.5 slots; this transition (exa's
   PolaroidCopy) is what turns that into the visible 200ms fade. */
.dc-pol__copy { display: flex; flex-direction: column; margin-top: clamp(7px, 0.85vw, 10px); transition: opacity 200ms ease; }
.dc-pol__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.8vw, 0.85rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: rgba(1, 28, 70, 0.78);
  margin-top: clamp(3px, 0.35vw, 5px);
}
.dc-pol__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dc-pol__name {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.15vw, 1.15rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #011c46;
}
/* LinkedIn chip, downsized from the leadership cards' .dc-li-btn for the
   compact polaroid. */
.dc-pol__li {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
}
.dc-pol__li svg { width: 0.85rem; height: 0.85rem; }
.dc-pol__bio {
  font-family: var(--font-main);
  font-size: clamp(0.66rem, 0.78vw, 0.78rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(1, 28, 70, 0.62);
  margin-top: clamp(5px, 0.6vw, 8px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-team-hint { display: inline-flex; align-items: center; gap: 0.4rem; }
.dc-team-hint span { color: #1892e5; }

/* --- Impact: divided columns — icon top-left, title bottom, the
       description reveals on hover/focus (grid-rows 0fr->1fr). The first column
       is expanded while the row is idle. --- */
.dc-impact-row {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid rgba(8, 42, 87, 0.14);
}
@media (min-width: 768px) { .dc-impact-row { grid-template-columns: repeat(3, 1fr); } }

.dc-impact-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 260px; padding: 1.75rem; outline: none;
  border-top: 1px solid rgba(8, 42, 87, 0.14);
  transition: background-color 0.3s ease;
}
.dc-impact-card:first-child { border-top: 0; }
@media (min-width: 768px) {
  .dc-impact-card { min-height: 340px; border-top: 0; border-left: 1px solid rgba(8, 42, 87, 0.14); }
  .dc-impact-card:first-child { border-left: 0; }
}
.dc-impact-ico { margin-bottom: auto; display: inline-flex; transition: transform 0.3s ease; }
.dc-impact-ico img { width: 44px; height: 44px; display: block; }
.dc-impact-body { display: flex; flex-direction: column; gap: 0.6rem; }

.dc-impact-desc-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dc-impact-desc { overflow: hidden; opacity: 0; transition: opacity 0.4s ease; }

/* active = the idle-state first column, OR the hovered / focused column */
.dc-impact-row:not(:hover) .dc-impact-card:first-child .dc-impact-desc-wrap,
.dc-impact-card:hover .dc-impact-desc-wrap,
.dc-impact-card:focus-within .dc-impact-desc-wrap { grid-template-rows: 1fr; }
.dc-impact-row:not(:hover) .dc-impact-card:first-child .dc-impact-desc,
.dc-impact-card:hover .dc-impact-desc,
.dc-impact-card:focus-within .dc-impact-desc { opacity: 1; }

.dc-impact-row:not(:hover) .dc-impact-card:first-child,
.dc-impact-card:hover,
.dc-impact-card:focus-within { background: rgba(24, 146, 229, 0.05); }
.dc-impact-card:hover .dc-impact-ico { transform: translateY(-2px); }

/* touch / no-hover: always show all descriptions */
@media (hover: none), (max-width: 767px) {
  .dc-impact-desc-wrap { grid-template-rows: 1fr; }
  .dc-impact-desc { opacity: 1; }
}
/* reduced motion: reveal instantly */
@media (prefers-reduced-motion: reduce) {
  .dc-impact-desc-wrap, .dc-impact-desc, .dc-impact-ico { transition: none; }
}

/* Gradient accent bar above each leadership name (echoes the deck). */
.dc-accent-bar {
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--dc-gradient);
}

/* --- Worldview + facts: one light band with a Brand-Book pixel wash + a few
       floating accent squares (mirrors the homepage "streams" treatment).
       The backdrop is clipped to the bordered content column (.dc-facts-col),
       so the page's side gutters stay plain. --- */
.dc-facts-col { position: relative; isolation: isolate; }
.dc-band-pad { padding-block: 4.5rem; }
@media (min-width: 768px)  { .dc-band-pad { padding-block: 7rem; } }
@media (min-width: 1024px) { .dc-band-pad { padding-block: 8.5rem; } }
.dc-facts-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #f5f8fd 0%, #eef2fb 55%, #f7f9fe 100%),
    url('/images/backdrops/streams-pixel-light.png') center / cover no-repeat;
  background-image:
    linear-gradient(180deg, #f5f8fd 0%, #eef2fb 55%, #f7f9fe 100%),
    image-set(url('/images/backdrops/streams-pixel-light.avif') type('image/avif'), url('/images/backdrops/streams-pixel-light.webp') type('image/webp'), url('/images/backdrops/streams-pixel-light.png') type('image/png'));
  background-blend-mode: multiply, normal;
}
.dc-facts-bg::after { /* soft teal->blue glow along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(180deg, rgba(34,210,162,0) 0%, rgba(34,210,162,.06) 40%, rgba(24,146,229,.10) 78%, rgba(11,68,207,.12) 100%);
}
.dc-facts-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dc-sq {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  border-radius: 3px; opacity: 0.9; box-shadow: 0 8px 20px -10px rgba(8, 42, 87, 0.35);
  animation: dc-sq-bob 9s ease-in-out infinite;
}
.dc-sq--mint { background: #22d2a2; } .dc-sq--tufts { background: #1892e5; } .dc-sq--light { background: #6fc0f5; }
.dc-sq--pink { background: #fe9dbe; } .dc-sq--yellow { background: #ffd23f; }
.dc-sq:nth-child(2n) { animation-duration: 11s; animation-delay: -2s; }
.dc-sq:nth-child(3n) { animation-duration: 13s; animation-delay: -4s; }
@keyframes dc-sq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.dc-facts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem;
  padding-top: 2.5rem; border-top: 1px solid rgba(8, 42, 87, 0.14);
}
@media (min-width: 768px) { .dc-facts-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
@media (min-width: 768px) { .dc-facts-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.dc-fact { display: flex; flex-direction: column; gap: 0.4rem; }

/* --- Leadership card footer: role + LinkedIn button --- */
.dc-leader-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dc-li-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  color: #1892e5; background: rgba(24, 146, 229, 0.1);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dc-li-btn svg { width: 1.05rem; height: 1.05rem; }
.dc-li-btn:hover { background: #1892e5; color: #fff; transform: translateY(-1px); }

/* --- Impact: 5 always-visible cards (icon + bold title + body copy) --- */
.dc-impact-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .dc-impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dc-impact-grid { grid-template-columns: repeat(3, 1fr); } }
.dc-impact-item {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.6rem; border: 1px solid rgba(8, 42, 87, 0.14); border-radius: 14px;
  background: #fff; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dc-impact-item:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(11, 68, 207, 0.4); }
.dc-impact-item .dc-impact-ico { margin-bottom: 0; }
.dc-impact-item .dc-impact-ico img { width: 40px; height: 40px; display: block; }
.dc-impact-item h3 { color: #011c46; }
.dc-impact-item p { line-height: 1.6; }

/* --- Certifications / recognition logo strip (white chips normalise mixed logo backgrounds) --- */
.dc-cert-strip { display: flex; flex-direction: column; gap: 1.15rem; }
.dc-cert-strip__label { margin: 0; }
.dc-cert-strip__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.dc-cert-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 76px; padding: 0.55rem 1.1rem;
  background: #fff; border: 1px solid rgba(8, 42, 87, 0.12); border-radius: 12px;
  box-shadow: 0 10px 24px -18px rgba(11, 68, 207, 0.35);
}
.dc-cert-chip img { max-height: 50px; width: auto; max-width: 150px; object-fit: contain; display: block; }

@media (max-width: 767px) { .dc-sq { opacity: 0.5; box-shadow: none; } .dc-sq--m-hide { display: none; } }
@media (prefers-reduced-motion: reduce) { .dc-sq { animation: none; } }

/* --- Closing CTA: the standard grainy brand band + gradient button, matching every
       other page (ported from landing-2/3, which About doesn't load). --- */
.dc-cta-band {
  position: relative; overflow: hidden; width: 100%; isolation: isolate;
  padding: 2.5rem 1rem 4rem;
  background: #0b44cf;
  background-image: linear-gradient(90deg, #0b44cf 0%, #1892e5 52%, #22d2a2 100%);
  color: #fff;
}
@media (min-width: 768px) { .dc-cta-band { padding: 2.5rem 2.5rem 5rem; } }
.dc-cta-band__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; background-repeat: repeat;
  mix-blend-mode: overlay; opacity: 0.7;
}
.dc-cta-band__row {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem;
}
@media (min-width: 768px) {
  .dc-cta-band__row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; }
}
.dc-cta-band__copy { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; }
.dc-cta-band__title { margin: 0; font-family: var(--font-main); font-weight: 600; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.14; letter-spacing: -0.01em; color: #fff; }
.dc-cta-band__body { margin: 0; font-family: var(--font-main); font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); max-width: 40rem; }
/* gradient pill button (identical to the homepage) + elevation so it reads on the same-gradient band */
.dc-gradient { background-image: var(--dc-gradient); }
.dc-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border-radius: 0.375rem; color: #fff;
  font-family: var(--font-main); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.dc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dc-cta svg { width: 1em; height: 1em; }
.dc-cta-band .dc-cta { align-self: flex-start; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5), 0 14px 30px -12px rgba(2, 16, 43, 0.6); }
@media (min-width: 768px) { .dc-cta-band .dc-cta { align-self: flex-end; } }
.dc-cta-band .dc-cta:hover { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 18px 34px -12px rgba(2, 16, 43, 0.65); }

/* --- Scroll reveal: gentle fade + rise as elements enter view.
       One-shot IntersectionObserver + transition (armed by Shell.astro, which puts
       `dc-io` on <html>) rather than a `view()` scroll timeline — see the longer note
       in landing-3.css. Keeps the reveal off the scroll path, and means the hidden
       state only ever exists when the JS that clears it is present. --- */
@media (prefers-reduced-motion: no-preference) {
  html.dc-io .dc-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.dc-io .dc-reveal.is-in { opacity: 1; transform: none; }
}