/* =========================================================
   AGENCY 403
   GLOBAL DESIGN SYSTEM
   TILDA / ZERO BLOCK / ARTICLES / SPACES
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {

  /* COLORS */

  --403-bg: #F4F5F4;
  --403-bg-alt: #ECEEED;
  --403-white: #FFFFFF;

  --403-dark: #162128;
  --403-dark-2: #1D2C35;

  --403-text: #162128;
  --403-muted: #687378;

  --403-line: rgba(22, 33, 40, .16);
  --403-line-dark: rgba(255, 255, 255, .18);

  /* GRID */

  --403-grid: 1200px;
  --403-gutter: 20px;

  /* TYPE */

  --403-sans: Arial, Helvetica, sans-serif;

  /* MOTION */

  --403-ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   02. GLOBAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--403-bg);
  color: var(--403-text);
  font-family: var(--403-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* =========================================================
   03. TILDA CONTAINER
   ========================================================= */

.t-container {
  width: calc(100% - 40px) !important;
  max-width: var(--403-grid) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}


/* =========================================================
   04. TILDA 12-COLUMN GRID
   ========================================================= */

.t-col_1  { width: 8.333333% !important; }
.t-col_2  { width: 16.666667% !important; }
.t-col_3  { width: 25% !important; }
.t-col_4  { width: 33.333333% !important; }
.t-col_5  { width: 41.666667% !important; }
.t-col_6  { width: 50% !important; }
.t-col_7  { width: 58.333333% !important; }
.t-col_8  { width: 66.666667% !important; }
.t-col_9  { width: 75% !important; }
.t-col_10 { width: 83.333333% !important; }
.t-col_11 { width: 91.666667% !important; }
.t-col_12 { width: 100% !important; }


/* =========================================================
   05. GLOBAL TILDA TYPOGRAPHY
   ========================================================= */

.t-title,
.t-heading,
.t-name,
.t-text,
.t-descr,
.t-uptitle {
  text-align: left !important;
}

.t-title,
.t-heading,
.t-name {
  color: var(--403-text);
}

.t-text,
.t-descr {
  color: var(--403-text);
}


/* =========================================================
   06. EXPLICIT BACKGROUNDS
   ========================================================= */

.t-403-light {
  background: var(--403-bg) !important;
  color: var(--403-text);
}

.t-403-alt {
  background: var(--403-bg-alt) !important;
  color: var(--403-text);
}

.t-403-white {
  background: var(--403-white) !important;
  color: var(--403-text);
}

.t-403-dark {
  background: var(--403-dark) !important;
  color: #fff;
}

.t-403-dark-2 {
  background: var(--403-dark-2) !important;
  color: #fff;
}


/* =========================================================
   07. 403 ARTICLE GRID
   ========================================================= */

.t-403-grid {
  width: var(--403-grid);
  max-width: calc(100% - 40px);
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap: var(--403-gutter);

  box-sizing: border-box;
}

.t-403-grid > * {
  min-width: 0;
}


/* =========================================================
   08. ARTICLE GRID COLUMNS
   ========================================================= */

.t-403-col-1  { grid-column: span 1; }
.t-403-col-2  { grid-column: span 2; }
.t-403-col-3  { grid-column: span 3; }
.t-403-col-4  { grid-column: span 4; }
.t-403-col-5  { grid-column: span 5; }
.t-403-col-6  { grid-column: span 6; }
.t-403-col-7  { grid-column: span 7; }
.t-403-col-8  { grid-column: span 8; }
.t-403-col-9  { grid-column: span 9; }
.t-403-col-10 { grid-column: span 10; }
.t-403-col-11 { grid-column: span 11; }
.t-403-col-12 { grid-column: span 12; }


/* =========================================================
   09. ARTICLE WIDTHS
   ========================================================= */

.t-403-article {
  width: 66.666667%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.t-403-article-wide {
  width: 75%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.t-403-article-narrow {
  width: 58.333333%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


/* =========================================================
   10. HERO
   ========================================================= */

.t-403-hero {
  position: relative;

  min-height: 620px;

  padding: 90px 0;

  background: var(--403-dark);
  color: #fff;

  display: flex;
  align-items: flex-end;

  box-sizing: border-box;
}

.t-403-hero .t-403-grid {
  width: var(--403-grid);
}

.t-403-hero .t-403-title {
  margin: 0;

  max-width: 900px;

  font-size: clamp(48px, 6vw, 88px);
  line-height: .92;

  letter-spacing: -.055em;

  font-weight: 500;

  color: #fff;

  text-align: left;
}

.t-403-hero .t-403-lead {
  max-width: 700px;

  margin: 42px 0 0;

  font-size: 22px;
  line-height: 1.4;

  color: rgba(255,255,255,.78);
}

.t-403-meta {
  margin-bottom: 30px;

  font-size: 10px;
  line-height: 1.3;

  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--403-muted);
}

.t-403-hero .t-403-meta {
  color: rgba(255,255,255,.55);
}


/* =========================================================
   11. TAGS
   ========================================================= */

.t-403-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 24px;

  margin-top: 60px;
  padding-top: 20px;

  border-top: 1px solid var(--403-line-dark);
}

.t-403-tags span {
  font-size: 10px;
  line-height: 1.2;

  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.55);
}


/* =========================================================
   12. ARTICLE SECTIONS
   ========================================================= */

.t-403-section {
  width: 100%;

  padding: 110px 0;

  box-sizing: border-box;
}

.t-403-section-label {
  font-size: 10px;
  line-height: 1.2;

  letter-spacing: .12em;
  text-transform: uppercase;

  font-weight: 600;
}

.t-403-section-index {
  font-size: 54px;
  line-height: .9;

  letter-spacing: -.05em;

  margin-bottom: 25px;
}


/* =========================================================
   13. ARTICLE NAVIGATION
   ========================================================= */

.t-403-article-nav {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 25px;

  border-top: 1px solid var(--403-line);
  border-bottom: 1px solid var(--403-line);
}

.t-403-article-nav a {
  display: flex;
  align-items: center;

  gap: 15px;

  min-height: 64px;

  padding: 15px 20px 15px 0;

  color: var(--403-text);

  text-decoration: none;

  font-size: 13px;
  line-height: 1.3;

  border-right: 1px solid var(--403-line);

  transition:
    opacity .25s var(--403-ease);
}

.t-403-article-nav a:hover {
  opacity: .55;
}

.t-403-article-nav a:last-child {
  border-right: 0;
}

.t-403-article-nav .t-403-number {
  font-size: 11px;
  color: var(--403-muted);
}


/* =========================================================
   14. ARTICLE TYPOGRAPHY
   ========================================================= */

.t-403-heading-xl {
  margin: 0 0 45px;

  font-size: clamp(38px, 4vw, 62px);
  line-height: .96;

  letter-spacing: -.045em;

  font-weight: 500;

  color: inherit;

  text-align: left;
}

.t-403-section p {
  max-width: 720px;

  margin: 0 0 24px;

  font-size: 17px;
  line-height: 1.65;

  color: inherit;

  text-align: left;
}

.t-403-section .t-403-lead {
  max-width: 760px;

  margin-bottom: 35px;

  font-size: 23px;
  line-height: 1.4;

  letter-spacing: -.015em;
}

.t-403-side-note {
  padding-top: 10px;

  font-size: 10px;
  line-height: 1.4;

  text-transform: uppercase;
  letter-spacing: .1em;

  color: var(--403-muted);
}


/* =========================================================
   15. IMAGES
   ========================================================= */

.t-403-image-full,
.t-403-image-8 {
  margin: 60px 0 0;
}

.t-403-image-full img,
.t-403-image-8 img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
}

.t-403-image-full {
  grid-column: span 12;
}

.t-403-image-8 {
  grid-column: span 8;
}

.t-403-image-full figcaption,
.t-403-image-8 figcaption {
  margin-top: 12px;

  font-size: 10px;
  line-height: 1.4;

  color: var(--403-muted);

  text-align: left;
}


/* =========================================================
   16. STATISTICS
   ========================================================= */

.t-403-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top: 80px;

  border-top: 1px solid var(--403-line);
  border-bottom: 1px solid var(--403-line);
}

.t-403-stat {
  min-height: 280px;

  padding: 30px 30px 30px 0;

  border-right: 1px solid var(--403-line);
}

.t-403-stat:not(:first-child) {
  padding-left: 30px;
}

.t-403-stat:last-child {
  border-right: 0;
}

.t-403-stat-number {
  margin-bottom: 35px;

  font-size: clamp(48px, 5vw, 76px);
  line-height: .9;

  letter-spacing: -.06em;

  font-weight: 500;
}

.t-403-stat-title {
  margin-bottom: 18px;

  font-size: 15px;
  line-height: 1.25;

  font-weight: 600;
}

.t-403-stat-text {
  max-width: 290px;

  font-size: 13px;
  line-height: 1.5;

  color: var(--403-muted);
}


/* =========================================================
   17. INSIGHT
   ========================================================= */

.t-403-insight {
  margin-top: 100px;

  padding: 45px 50px;

  background: var(--403-white);

  border-top: 3px solid var(--403-dark);
}

.t-403-insight-label {
  margin-bottom: 35px;

  font-size: 10px;
  line-height: 1.2;

  letter-spacing: .13em;
  text-transform: uppercase;

  font-weight: 600;
}

.t-403-insight h3 {
  margin: 0 0 30px;

  font-size: 30px;
  line-height: 1;

  letter-spacing: -.03em;
}

.t-403-insight ul {
  max-width: 800px;

  margin: 0;

  padding-left: 20px;
}

.t-403-insight li {
  margin-bottom: 18px;

  font-size: 15px;
  line-height: 1.55;
}


/* =========================================================
   18. DARK SECTIONS
   ========================================================= */

.t-403-dark {
  background: var(--403-dark) !important;
  color: #fff;
}

.t-403-dark .t-403-section-label,
.t-403-dark .t-403-side-note {
  color: rgba(255,255,255,.5);
}

.t-403-dark p {
  color: rgba(255,255,255,.76);
}

.t-403-dark .t-403-lead {
  color: rgba(255,255,255,.88);
}

.t-403-dark .t-403-section-index {
  color: #fff;
}


/* =========================================================
   19. BIG STAT
   ========================================================= */

.t-403-big-stat {
  margin-top: 100px;

  padding: 70px 0;

  border-top: 1px solid var(--403-line-dark);
  border-bottom: 1px solid var(--403-line-dark);
}

.t-403-big-stat-number {
  margin-bottom: 55px;

  font-size: clamp(100px, 16vw, 220px);
  line-height: .75;

  letter-spacing: -.08em;

  font-weight: 500;

  color: #fff;
}

.t-403-big-stat-title {
  max-width: 650px;

  margin-bottom: 20px;

  font-size: 28px;
  line-height: 1.1;

  letter-spacing: -.025em;
}

.t-403-big-stat-text {
  max-width: 600px;

  font-size: 14px;
  line-height: 1.5;

  color: rgba(255,255,255,.55);
}


/* =========================================================
   20. NUMBER GRID
   ========================================================= */

.t-403-number-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top: 70px;

  border-top: 1px solid var(--403-line-dark);
}

.t-403-number-card {
  padding: 35px 30px 35px 0;

  border-right: 1px solid var(--403-line-dark);
}

.t-403-number-card:not(:first-child) {
  padding-left: 30px;
}

.t-403-number-card:last-child {
  border-right: 0;
}

.t-403-number-card span {
  display: block;

  margin-bottom: 18px;

  font-size: 52px;
  line-height: .9;

  letter-spacing: -.05em;
}

.t-403-number-card small {
  font-size: 10px;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: .1em;

  color: rgba(255,255,255,.5);
}


/* =========================================================
   21. QUOTE
   ========================================================= */

.t-403-quote {
  margin: 100px 0 20px;

  padding: 0 0 0 30px;

  border-left: 2px solid rgba(255,255,255,.5);

  font-size: 28px;
  line-height: 1.2;

  letter-spacing: -.025em;

  color: #fff;
}

.t-403-quote-author {
  margin-left: 32px;

  font-size: 10px;
  line-height: 1.3;

  letter-spacing: .1em;

  color: rgba(255,255,255,.45);
}


/* =========================================================
   22. TRENDS
   ========================================================= */

.t-403-trends {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top: 80px;

  border-top: 1px solid var(--403-line);
}

.t-403-trend {
  min-height: 300px;

  padding: 30px 30px 30px 0;

  border-right: 1px solid var(--403-line);
}

.t-403-trend:not(:first-child) {
  padding-left: 30px;
}

.t-403-trend:last-child {
  border-right: 0;
}

.t-403-trend-number {
  margin-bottom: 55px;

  font-size: 12px;

  color: var(--403-muted);
}

.t-403-trend h3 {
  max-width: 300px;

  margin: 0 0 20px;

  font-size: 22px;
  line-height: 1.05;

  letter-spacing: -.025em;
}

.t-403-trend p {
  max-width: 300px;

  font-size: 13px;
  line-height: 1.5;

  color: var(--403-muted);
}


/* =========================================================
   23. SOURCES
   ========================================================= */

.t-403-sources {
  margin-top: 70px;
}

.t-403-source-block {
  padding: 30px 0;

  border-top: 1px solid var(--403-line);
}

.t-403-source-block h3 {
  margin: 0 0 25px;

  font-size: 13px;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: .1em;
}

.t-403-source-block ol {
  max-width: 700px;

  margin: 0;

  padding-left: 20px;
}

.t-403-source-block li {
  margin-bottom: 12px;

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   24. BUTTONS
   ========================================================= */

.t-403-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 0 28px;
  margin-top: 20px;

  border: 1px solid currentColor;

  color: var(--403-text);

  text-decoration: none;

  font-size: 11px;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: .1em;

  transition:
    background .25s var(--403-ease),
    color .25s var(--403-ease),
    opacity .25s var(--403-ease);
}

.t-403-button:hover {
  opacity: .65;
}

.t-403-button-light {
  color: #fff;
}


/* =========================================================
   25. FOOTER
   ========================================================= */

.t-403-footer {
  padding: 120px 0;

  background: var(--403-dark);

  color: #fff;
}

.t-403-footer .t-403-heading-xl {
  max-width: 650px;
}


/* =========================================================
   26. ZERO BLOCK HELPERS
   ========================================================= */

.403-col-12 {
  width: 100%;
}

.403-col-10 {
  width: 83.333333%;
}

.403-col-9 {
  width: 75%;
}

.403-col-8 {
  width: 66.666667%;
}

.403-col-7 {
  width: 58.333333%;
}

.403-col-6 {
  width: 50%;
}

.403-col-4 {
  width: 33.333333%;
}

.403-col-3 {
  width: 25%;
}


/* ZERO BLOCK TYPOGRAPHY */

.403-title {
  color: var(--403-text);

  font-size: clamp(48px, 6vw, 88px);
  line-height: .92;

  letter-spacing: -.055em;

  font-weight: 500;

  text-align: left;
}

.403-text {
  color: var(--403-text);

  font-size: 17px;
  line-height: 1.6;

  text-align: left;
}

.403-label {
  color: var(--403-muted);

  font-size: 10px;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: .12em;

  text-align: left;
}


/* =========================================================
   27. SPACING HELPERS
   ========================================================= */

.t-403-mt-0  { margin-top: 0 !important; }
.t-403-mt-20 { margin-top: 20px !important; }
.t-403-mt-40 { margin-top: 40px !important; }
.t-403-mt-60 { margin-top: 60px !important; }
.t-403-mt-80 { margin-top: 80px !important; }
.t-403-mt-100 { margin-top: 100px !important; }

.t-403-mb-0  { margin-bottom: 0 !important; }
.t-403-mb-20 { margin-bottom: 20px !important; }
.t-403-mb-40 { margin-bottom: 40px !important; }
.t-403-mb-60 { margin-bottom: 60px !important; }
.t-403-mb-80 { margin-bottom: 80px !important; }


/* =========================================================
   28. LISTS
   ========================================================= */

.t-403-section ul,
.t-403-section ol {
  text-align: left;
}

.t-403-section li {
  text-align: left;
}


/* =========================================================
   29. LINKS
   ========================================================= */

.t-403-section a {
  color: inherit;
}

.t-403-section a:not(.t-403-button) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* =========================================================
   30. TABLE
   ========================================================= */

.t-403-table {
  width: 100%;

  margin: 60px 0;

  border-collapse: collapse;

  font-size: 13px;

  text-align: left;
}

.t-403-table th,
.t-403-table td {
  padding: 15px 15px 15px 0;

  border-top: 1px solid var(--403-line);

  vertical-align: top;
}

.t-403-table th {
  font-weight: 600;
}

.t-403-table td {
  color: var(--403-muted);
}


/* =========================================================
   31. MOBILE / TABLET
   ========================================================= */

@media screen and (max-width: 960px) {

  .t-container {
    width: calc(100% - 32px) !important;
  }

  .t-403-grid {
    width: 100%;
    max-width: calc(100% - 32px);

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    column-gap: 16px;
  }


  /* 6 COLUMN TABLET */

  .t-403-col-1,
  .t-403-col-2,
  .t-403-col-3,
  .t-403-col-4,
  .t-403-col-5,
  .t-403-col-6 {
    grid-column: span 6;
  }

  .t-403-col-7,
  .t-403-col-8,
  .t-403-col-9,
  .t-403-col-10,
  .t-403-col-11,
  .t-403-col-12 {
    grid-column: span 6;
  }


  /* SECTION */

  .t-403-section {
    padding: 75px 0;
  }


  /* HERO */

  .t-403-hero {
    min-height: 600px;

    padding: 70px 0;
  }


  /* STATS */

  .t-403-stat-grid,
  .t-403-number-grid,
  .t-403-trends {
    grid-template-columns: 1fr;
  }

  .t-403-stat,
  .t-403-number-card,
  .t-403-trend {

    min-height: auto;

    padding: 30px 0 !important;

    border-right: 0;

    border-bottom: 1px solid var(--403-line);
  }

  .t-403-dark .t-403-number-card,
  .t-403-dark .t-403-trend {
    border-bottom-color: var(--403-line-dark);
  }

  .t-403-stat:last-child,
  .t-403-number-card:last-child,
  .t-403-trend:last-child {
    border-bottom: 0;
  }


  /* NAV */

  .t-403-article-nav {
    grid-template-columns: 1fr 1fr;
  }

  .t-403-article-nav a:nth-child(2) {
    border-right: 0;
  }

  .t-403-article-nav a:nth-child(3),
  .t-403-article-nav a:nth-child(4) {
    border-top: 1px solid var(--403-line);
  }


  /* IMAGE */

  .t-403-image-8 {
    grid-column: span 6;
  }
}


/* =========================================================
   32. MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

  .t-container {
    width: calc(100% - 24px) !important;
  }

  .t-403-grid {
    width: 100%;
    max-width: calc(100% - 24px);

    display: grid;

    grid-template-columns: 1fr;

    column-gap: 0;
  }


  /* EVERYTHING = ONE COLUMN */

  .t-403-grid > * {
    grid-column: 1 !important;
  }


  /* SECTIONS */

  .t-403-section {
    padding: 60px 0;
  }


  /* HERO */

  .t-403-hero {
    min-height: 520px;

    padding: 60px 0;
  }

  .t-403-hero .t-403-title {
    font-size: 45px;
  }

  .t-403-hero .t-403-lead {
    font-size: 18px;
  }


  /* TYPOGRAPHY */

  .t-403-heading-xl {
    font-size: 38px;

    margin-bottom: 30px;
  }

  .t-403-section p {
    font-size: 16px;
  }

  .t-403-section .t-403-lead {
    font-size: 20px;
  }


  /* NAVIGATION */

  .t-403-article-nav {
    grid-template-columns: 1fr;
  }

  .t-403-article-nav a {
    border-right: 0 !important;

    border-bottom: 1px solid var(--403-line);
  }

  .t-403-article-nav a:last-child {
    border-bottom: 0;
  }


  /* BIG STAT */

  .t-403-big-stat {
    padding: 55px 0;

    margin-top: 60px;
  }

  .t-403-big-stat-number {
    font-size: 110px;
  }

  .t-403-big-stat-title {
    font-size: 23px;
  }


  /* INSIGHT */

  .t-403-insight {
    padding: 30px 25px;

    margin-top: 60px;
  }


  /* QUOTE */

  .t-403-quote {
    margin-top: 60px;

    font-size: 23px;
  }


  /* IMAGES */

  .t-403-image-full,
  .t-403-image-8 {
    margin-top: 40px;
  }


  /* FOOTER */

  .t-403-footer {
    padding: 80px 0;
  }

}


/* =========================================================
   33. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    transition: none !important;
  }
}