/* ==========================================================================
   Marine Armor Shield — site stylesheet
   1. Web fonts (self-hosted)
   2. Design tokens
   3. Base
   4. Components (button, eyebrow, section header, info card, badge)
   5. Header / navigation (responsive)
   6. Hero, marquee, images
   7. Hover states
   8. Scroll-reveal animation
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Web fonts
   -------------------------------------------------------------------------- */

/* Barlow — static, one file per weight */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* JetBrains Mono — variable font, weights 400–500 */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-greek.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Oswald — variable font, weights 400–700 */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/oswald-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/oswald-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/oswald-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/oswald-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/oswald-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* typefaces */
  --font-display: Oswald, "Arial Narrow", Helvetica, sans-serif;
  --font-text: Barlow, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* core palette — sampled from the vehicle wrap */
  --hull-navy: #001a3a;
  --deep-marine: #00618f;
  --wake-cyan: #0090c0;
  --shallow-aqua: #a8d8f0;
  --chrome-steel: #c6d0d8;
  /* accents */
  --thermal-orange: #d94f10;
  --warranty-gold: #f2c200;
  --nontoxic-green: #3f7d2e;
  /* neutrals */
  --salt-white: #f4f7f9;
  --ink: #0d2038;
  --white: #ffffff;
  --slate-70: #3c5470;
  --slate-50: #5d7085;
  --mist-30: #dae2e8;
  --mist-20: #e6ecf1;
  --mist-10: #eef3f7;
  --aqua-mist: #d8eef8;
  --aqua-dim: #7fb6d6;

  /* site accent — the single knob for the orange call-to-action colour
     (alternatives: Deep marine #00618f, Warranty gold #f2c200) */
  --site-accent: #d94f10;

  /* semantic — surfaces */
  --surface-page: var(--salt-white);
  --surface-card: var(--white);
  --surface-dark: var(--hull-navy);
  --surface-dark-alt: var(--deep-marine);
  --surface-hatch: repeating-linear-gradient(45deg, #e3eaf0 0 10px, #eef3f7 10px 20px);
  /* semantic — text */
  --text-body: var(--slate-70);
  --text-strong: var(--ink);
  --text-muted: var(--slate-50);
  --text-on-dark: var(--aqua-mist);
  --text-on-dark-strong: var(--white);
  --text-eyebrow: var(--deep-marine);
  --text-eyebrow-on-dark: var(--aqua-dim);
  --text-link: var(--wake-cyan);
  --text-link-hover: var(--shallow-aqua);
  /* semantic — lines */
  --rule-heavy: var(--ink);
  --rule-light: var(--mist-20);
  --border-accent: var(--deep-marine);
  --border-warn: var(--thermal-orange);
  --border-control: var(--wake-cyan);
  /* gradients */
  --depth-gradient: linear-gradient(180deg, #001a3a 0%, #00618f 60%, #0090c0 100%);
  --depth-gradient-tight: linear-gradient(180deg, #001a3a 0%, #00618f 55%, #0090c0 100%);
  --chrome-bevel: linear-gradient(180deg, #eef3f7 0%, #c6d0d8 48%, #8fa2b0 52%, #e8eef2 100%);
  --navy-scrim: linear-gradient(180deg, rgba(0,26,58,0) 0%, rgba(0,26,58,.78) 100%);

  /* type scale */
  --size-hero: 76px; --size-h1: 52px; --size-h2: 34px; --size-h3: 28px; --size-h4: 20px; --size-label: 16px;
  --size-body-lg: 19px; --size-body: 18px; --size-body-sm: 15px; --size-mono: 12px; --size-mono-sm: 11px;
  --lh-hero: 0.95; --lh-h2: 1.1; --lh-tight: 1.05; --lh-body: 1.55; --lh-body-loose: 1.6;
  --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --track-display: 0.01em; --track-heading: 0.03em; --track-button: 0.06em; --track-eyebrow: 0.2em; --track-eyebrow-wide: 0.22em; --track-mono: 0.18em;
  /* type roles */
  --type-hero: var(--weight-bold) var(--size-hero)/var(--lh-hero) var(--font-display);
  --type-h1: var(--weight-bold) var(--size-h1)/var(--lh-hero) var(--font-display);
  --type-h2: var(--weight-semibold) var(--size-h2)/var(--lh-h2) var(--font-display);
  --type-h3: var(--weight-semibold) var(--size-h3)/var(--lh-h2) var(--font-display);
  --type-label: var(--weight-semibold) var(--size-label)/1.2 var(--font-display);
  --type-button: var(--weight-semibold) 17px/1 var(--font-display);
  --type-body: var(--weight-body) var(--size-body)/var(--lh-body) var(--font-text);
  --type-body-sm: var(--weight-body) var(--size-body-sm)/var(--lh-body) var(--font-text);
  --type-eyebrow: var(--weight-body) var(--size-mono)/1.4 var(--font-mono);
  --type-caption: var(--weight-body) var(--size-mono-sm)/1.5 var(--font-mono);

  /* spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 14px; --space-6: 16px; --space-7: 18px; --space-8: 20px;
  --space-9: 24px; --space-10: 28px; --space-11: 32px; --space-12: 36px; --space-13: 40px; --space-14: 48px; --space-15: 64px; --space-16: 72px; --space-17: 96px;
  --gutter: 24px; --gutter-lg: 32px;
  --page-max: 1240px; --page-pad-x: 72px; --section-gap: 72px; --measure: 620px; --measure-wide: 820px;
  --pad-card: 22px; --pad-card-lg: 28px; --pad-panel: 32px; --pad-button-y: 15px; --pad-button-x: 30px;
  --radius: 0px;

  /* lines, motion, focus */
  --border-width-control: 2px; --border-width-accent: 3px; --border-width-rule: 2px; --border-width-hairline: 1px;
  --rule-section: 2px solid var(--rule-heavy);
  --accent-top: 3px solid var(--border-accent);
  --accent-top-warn: 3px solid var(--border-warn);
  --shadow-none: none; --shadow-panel: 0 2px 0 rgba(0,26,58,.06);
  --duration-fast: 120ms; --duration: 180ms; --ease: cubic-bezier(.2,0,0,1);
  --hover-lighten: #0074a8; --hover-orange: #f05e18; --press-shift: 1px;
  --focus-ring: 2px solid var(--wake-cyan); --focus-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { margin: 0; background: #f4f7f9; -webkit-font-smoothing: antialiased; }
a { color: #0090c0; text-decoration: none; }
a:hover { color: #00618f; }
summary::-webkit-details-marker { display: none; }

.mas-page {
  font-family: 'Barlow', system-ui, sans-serif;
  color: #3c5470;
  overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   4. Components (design-system pieces)
   -------------------------------------------------------------------------- */

/* Button */
.mas-btn {
  font: var(--type-button);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
  padding: var(--pad-button-y) var(--pad-button-x);
  background: var(--thermal-orange);
  color: var(--white);
  border: none;
}
.mas-btn:hover { color: var(--white); }
.mas-btn--outline {
  padding: 14px 29px;
  background: transparent;
  color: var(--shallow-aqua);
  border: var(--border-width-control) solid var(--wake-cyan);
}
.mas-btn--outline:hover { color: var(--shallow-aqua); }

/* Eyebrow */
.mas-eyebrow {
  font: var(--type-caption);
  font-size: var(--size-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mas-eyebrow--dark { color: var(--text-eyebrow-on-dark); }

/* Section header */
.mas-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  border-bottom: var(--rule-section);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-11);
}
.mas-section-header__num {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-eyebrow);
}
.mas-section-header__title {
  font: var(--type-h3);
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
}
/* dark-surface variant (used on navy sections) */
.mas-section-header--on-dark {
  --text-strong: #ffffff;
  --text-eyebrow: #7fb6d6;
  --rule-section: 2px solid rgba(168,216,240,.35);
}

/* Info card */
.mas-card {
  background: var(--surface-card);
  padding: var(--pad-card-lg);
  border-top: var(--accent-top);
  border-radius: var(--radius);
}
.mas-card--warn { border-top: var(--accent-top-warn); }
.mas-card__body {
  font: var(--type-body-sm);
  color: var(--text-body);
}

/* Badge */
.mas-badge {
  display: inline-block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: none;
}
.mas-badge--warranty { background: var(--warranty-gold); color: var(--ink); }
.mas-badge--eco { background: var(--nontoxic-green); color: var(--white); }


/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.mas-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #001a3a;
  border-bottom: 1px solid rgba(168,216,240,.18);
}
.mas-header__bar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mas-logo-link { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mas-logo-link img { display: block; width: clamp(132px, 18vw, 178px); height: auto; }

/* burger button — only shown on narrow screens */
.mas-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 2px solid #0090c0;
  border-radius: 0;
  cursor: pointer;
  padding: 0 12px;
  flex-shrink: 0;
}
.mas-burger span { display: block; height: 2px; background: #a8d8f0; }

/* desktop nav */
.mas-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mas-nav__link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a8d8f0;
}
.mas-nav__link:hover { color: #ffffff; }

/* mobile menu (collapsed by default) */
.mas-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(168,216,240,.18);
  padding: 8px 20px 20px;
}
.mas-menu__link {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  padding: 16px 0;
  border-bottom: 1px solid rgba(168,216,240,.14);
  min-height: 48px;
  box-sizing: border-box;
}
.mas-menu__link:hover { color: #fff; }
.mas-menu__phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .18em;
  color: #a8d8f0;
  padding: 18px 0 14px;
}
.mas-menu__phone:hover { color: #a8d8f0; }

/* < 580px: hide inline nav, show burger; menu opens via .is-open (site.js) */
@media (max-width: 579.98px) {
  .mas-nav { display: none; }
  .mas-burger { display: flex; }
  .mas-menu.is-open { display: flex; }
}


/* --------------------------------------------------------------------------
   6. Hero, marquee, images
   -------------------------------------------------------------------------- */

/* Photo that fills its wrapper. Fills the box when the wrapper has a
   definite height (hero, stretched grid cell); falls back to a 3:2 ratio
   when the wrapper's height is only a min-height (process photo). */
.mas-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@keyframes mas-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mas-marquee {
  background: #0d2038;
  border-bottom: 1px solid rgba(168,216,240,.14);
  overflow: hidden;
  padding: 16px 0;
}
.mas-marquee__track {
  display: flex;
  width: max-content;
  animation: mas-marquee 34s linear infinite;
}
.mas-marquee__group {
  display: flex;
  gap: 56px;
  padding-right: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7fb6d6;
}


/* --------------------------------------------------------------------------
   7. Hover states for inline-styled links
   (colour is set inline on these links; the hover needs !important to win)
   -------------------------------------------------------------------------- */

.hover-white:hover { color: #ffffff !important; }
.hover-aqua:hover  { color: #a8d8f0 !important; }


/* --------------------------------------------------------------------------
   8. Scroll-reveal animation
   site.js adds .js-reveal to <html> when it takes over; elements start
   hidden only in that case, so the page is fully visible without JS or
   when the user prefers reduced motion.
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms cubic-bezier(.2,0,0,1), transform 620ms cubic-bezier(.2,0,0,1);
}
.js-reveal [data-reveal="2"] { transition-delay: 90ms; }
.js-reveal [data-reveal="3"] { transition-delay: 180ms; }
.js-reveal [data-reveal="4"] { transition-delay: 270ms; }
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}