/* ──────────────────────────────────────────────────────────
   HERO  — pixel-perfect from Figma node 163:663 (1440×879)
   All absolute positions are getBBox() values from SVG export.
─────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: white;
  margin: 0;
}

/* ── Nav Bar (1440 × 88 px) ─────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 1440px;
  height: 88px;
  background: #000;
  flex-shrink: 0;
}

.site-nav__brand,
.site-nav__link {
  position: absolute;
  top: 37px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #FDFAF4;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.site-nav__brand:hover,
.site-nav__link:hover {
  opacity: 0.6;
}

.site-nav__brand { left: 97px; }

/* About me: x≈901 */
.site-nav__link:nth-child(2) { left: 901px; }

/* Experience: x≈1067 */
.site-nav__link:nth-child(3) { left: 1067px; }

/* Projects: x≈1251 */
.site-nav__link:nth-child(4) { left: 1251px; }

/* ── Hero container ─────────────────────────────────────── */
.hero {
  position: relative;
  width: 1440px;
  height: 879px;
  background-color: white;
  overflow: hidden;
}

/* paper texture at 50% opacity (matches SVG fill-opacity="0.5") */
.hero__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ── Brand label ────────────────────────────────────────── */
/* getBBox: x=97, y=190, w=171, h=18 */
.hero__brand {
  position: absolute;
  top: 190px;
  left: 97px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
}

/* ── Headline ───────────────────────────────────────────── */
/* getBBox "I make": y=243, h=57 — with line-height 1.4 (101px box),
   leading-top = (101-57)/2 = 22px → CSS top = 243-22 = 221 */
.hero__title {
  position: absolute;
  top: 221px;
  left: 96px;
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
  z-index: 1;
}

.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}

/* ── Body copy ──────────────────────────────────────────── */
/* getBBox: x=97, y=537, w=508, h=79 */
.hero__body {
  position: absolute;
  top: 537px;
  left: 97px;
  width: 508px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
  z-index: 1;
}

/* ── CTAs ───────────────────────────────────────────────── */
/* Rects from SVG: primary x=96,y=642,w=167,h=52,rx=26
                   outline x=279.75,y=642.75,w=119.5,h=50.5,rx=25.25 */
.hero__cta {
  position: absolute;
  top: 642px;
  left: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.hero__btn-primary,
.hero__btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.hero__btn-primary {
  width: 167px;
  height: 52px;
  border-radius: 26px;
  background: #1A1A1A;
  color: #F2F0E8;
  border: none;
}

.hero__btn-outline {
  width: 120px;
  height: 51px;
  border-radius: 25px;
  background: transparent;
  color: #1A1A1A;
  border: 1.5px solid #1A1A1A;
}

/* ── Decorative SVG line ────────────────────────────────── */
.hero__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1448px;
  pointer-events: none;
  z-index: 0;
}

/* ──────────────────────────────────────────────────────────
   ABOUT ME  (Figma node 163:687 — 1440 × 879 px)
─────────────────────────────────────────────────────────── */
.about {
  position: relative;
  width: 1440px;
  height: 879px;
  background-color: white;
  overflow: hidden;
}

.about__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* decorative line PNG (Frame 8) — x=755, w=325, h=879, transparent bg */
.about__white-col {
  position: absolute;
  top: 0;
  left: 755px;
  width: 325px;
  height: 879px;
  z-index: 4;
  pointer-events: none;
}

/* teal rectangle — x=934, y=170, w=485, h=396 */
.about__teal {
  position: absolute;
  top: 170px;
  left: 934px;
  width: 485px;
  height: 396px;
  background: #BBD5D7;
  z-index: 1;
}

/* photo — x=1020, y=318, w=314, h=360 */
.about__photo {
  position: absolute;
  top: 318px;
  left: 1020px;
  width: 314px;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  z-index: 3;
}

/* "ABOUT ME:" label — getBBox x=94, y=228, w=112, h=16 */
/* font-size 22px: cap height = 22×0.72 = 15.8 ≈ 16px ✓ */
.about__label {
  position: absolute;
  top: 228px;
  left: 94px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
}

/* Heading — getBBox x=96, y=276, w=528, h=100 */
/* font-size 50px, line-height 1 → 2 lines = 100px ✓ */
.about__heading {
  position: absolute;
  top: 265px;
  left: 96px;
  width: 560px;
  font-family: var(--font-serif);
  font-size: 50px;
  font-weight: 400;
  line-height: 1.0;
  color: var(--color-text);
  margin: 0;
  z-index: 1;
}

/* Body — getBBox x=95, y=414, w=490, h=239 */
.about__body {
  position: absolute;
  top: 410px;
  left: 95px;
  width: 490px;
  z-index: 1;
}

.about__body p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

.about__body p + p {
  margin-top: 16px;
}

/* ──────────────────────────────────────────────────────────
   TOOLS  (Figma node 163:593 — 1440 × 236 px)
─────────────────────────────────────────────────────────── */
.tools {
  position: relative;
  width: 1440px;
  height: 236px;
  background-color: white;
  overflow: hidden;
}

.tools__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.tools__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 236px;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   EXPERIENCE  (Figma node 163:719 — 1440 × 927 px)
─────────────────────────────────────────────────────────── */
.experience {
  position: relative;
  width: 1440px;
  height: 927px;
  background: white;
  overflow: hidden;
}

.experience__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* decorative knot PNG — 235×927 px clipped to x=628 */
.experience__deco {
  position: absolute;
  top: 0;
  left: 628px;
  width: 235px;
  height: 927px;
  z-index: 1;
}

/* "EXPERIENCE:" — getBBox x=97 y=222 w=285 h=35
   48px Inter: cap-height = 48×0.727 = 34.9 ≈ 35px ✓
   leading above cap = (48−35)/2 = 6.5px → top = 222−6.5 ≈ 215px */
.experience__label {
  position: absolute;
  top: 215px;
  left: 97px;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* "See full CV →" — rect x=94 y=291 w=154 h=52 rx=26 fill=#CF0800
   text getBBox y=311 h=12 → 16px Inter (cap=11.6px ✓) */
.experience__cta {
  position: absolute;
  top: 291px;
  left: 94px;
  width: 154px;
  height: 52px;
  border-radius: 26px;
  background: #CF0800;
  color: #F2F0E8;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 2;
}

/* ── Right panel: shared styles ─────────────────────────── */
/* Job titles — getBBox h=31
   "Product Designer" w=249 / 16 chars at 34px Playfair → avg=0.46 ✓
   cap+descender of "g" at 34px: 0.72×34+0.20×34 = 24.5+6.8 = 31.3 ✓ */
.experience__title {
  position: absolute;
  left: 888px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  z-index: 2;
}

/* Company name — getBBox h≈17 ("Freelance", no descenders)
   Inter 22px: cap-height = 22×0.727 = 16px, h=17 with slight metrics ✓ */
.experience__co {
  position: absolute;
  left: 889px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* Date range — getBBox h=12 → Inter 16px (cap=11.6px ✓) */
.experience__date {
  position: absolute;
  left: 889px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* Teal divider — stroke=#BBD5D7 from x=887 to x=1346 (w=459) */
.experience__rule {
  position: absolute;
  left: 887px;
  width: 459px;
  height: 1px;
  background: #BBD5D7;
  z-index: 2;
}

/* ── Per-entry Y positions (from getBBox) ───────────────── */
.experience__title--1 { top: 228px; }
.experience__co--1    { top: 278px; }
.experience__date--1  { top: 323px; }
.experience__rule--1  { top: 373px; }

.experience__title--2 { top: 409px; }
.experience__co--2    { top: 459px; }
.experience__date--2  { top: 504px; }
.experience__rule--2  { top: 554px; }

.experience__title--3 { top: 590px; }
.experience__co--3    { top: 640px; }
.experience__date--3  { top: 685px; }

/* ──────────────────────────────────────────────────────────
   SKILLS  (Figma node 163:743 — 1440 × 392 px)
   Infinite horizontal pill carousel
─────────────────────────────────────────────────────────── */
.skills {
  position: relative;
  width: 1440px;
  height: 392px;
  background: white;
  overflow: hidden;
}

.skills__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Decorative lines — two paths with clip masks
   Sits behind the pill carousel (Figma "Frame 70") */
.skills__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 392px;
  pointer-events: none;
  z-index: 0;
}

/* "SKILLS:" label
   getBBox: x=96, y=233, w=162, h=35
   font-size 48px → cap-height = 48×0.727 ≈ 35px ✓
   CSS top = 233 − (48−35)/2 = 226.5 */
.skills__label {
  position: absolute;
  top: 227px;
  left: 96px;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}

/* Carousel strip — aligns with pill row y=220, h=62 */
.skills__carousel {
  position: absolute;
  top: 220px;
  left: 532px;
  width: 908px; /* 1440 − 532 */
  height: 62px;
  overflow: hidden;
  z-index: 1;
}

.skills__track {
  display: flex;
  animation: skills-scroll 28s linear infinite;
  width: max-content;
}

/* Each set has padding-right equal to the gap so -50% is exact */
.skills__set {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  padding-right: 18px;
}

/* pill — h=62, rx=31, fill=#BBD5D7 at 20% opacity
   pill widths from Figma: 133 / 244 / 163 / 175 / 142
   padding = (133−90text)/2 ≈ 22px */
.skills__pill {
  display: inline-flex;
  align-items: center;
  height: 62px;
  padding: 0 22px;
  border-radius: 31px;
  background: rgba(187, 213, 215, 0.2);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes skills-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────────────────
   PROJECTS  (Figma node 163:767 — 1440 × 1618 px)
   3 project cards (612 × 597 each), hover = pre-selection state
─────────────────────────────────────────────────────────── */
.projects {
  position: relative;
  width: 1440px;
  height: 1618px;
  background: white;
  overflow: hidden;
}

.projects__texture {
  position: absolute;
  inset: 0;
  background: url('../assets/images/paper-texture.jpeg') center / cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.projects__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1618px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* "Projects" label — getBBox x=95.6 y=116.1 w=111.2 h=16.1, 22px Inter 500
   CSS top = 116.1 − (22−16.1)/2 ≈ 113 */
.projects__label {
  position: absolute;
  top: 113px;
  left: 96px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

.projects__card {
  position: absolute;
  width: 612px;
  height: 597px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  z-index: 2;
}

.projects__card img {
  display: block;
  width: 612px;
  height: 597px;
}

.projects__card--1 { top: 170px; left: 94px; }
.projects__card--2 { top: 170px; left: 733px; }
.projects__card--3 { top: 799px; left: 94px; }

/* Text overlaid on the bottom of each card image (baked into the dark gradient) */
.projects__content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.projects__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: var(--color-text-inv);
  margin: 0 0 14px;
}

.projects__title strong {
  font-weight: 800;
}

.projects__title--tefi {
  font-size: 52px;
}

.projects__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(242, 240, 232, 0.85);
  max-width: 480px;
  margin: 0 0 18px;
}

.projects__desc--tefi {
  max-width: 380px;
}

.projects__tags {
  display: flex;
  gap: 8px;
}

.projects__tag {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-inv);
  background: rgba(242, 240, 232, 0.12);
  border: 1px solid rgba(242, 240, 232, 0.3);
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Hover pre-selection state */
.projects__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 20, 16, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.projects__overlay-text {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-inv);
  border: 1px solid var(--color-text-inv);
  border-radius: 26px;
  padding: 14px 28px;
  white-space: nowrap;
}

.projects__card:hover .projects__overlay,
.projects__card:focus-visible .projects__overlay {
  opacity: 1;
}

/* ── Footer  (Figma — 1440 × 438 px, shared across all pages)
   Coordinates from getBBox() on Footer.svg export.
   Left heading:  x=95, y=142, w=382, h=70   → font ≈ 60px Playfair
   Left subline:  x=94, y=258, w=426, h=43   → font ≈ 14px Inter
   Right col:     x=1099 (labels + LinkedIn)
─────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  width: 1440px;
  height: 438px;
  background: #000;
  overflow: hidden;
}

/* getBBox: x=95, y=142.2, w=382.5, h=70.5 */
.site-footer__heading {
  position: absolute;
  left: 95px;
  top: 142px;
  margin: 0;
  width: 480px;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  line-height: 0.96;
  color: #FCFAF5;
  letter-spacing: -0.5px;
}

/* getBBox: x=94.1, y=258.8, w=426.7, h=43.5 */
.site-footer__subline {
  position: absolute;
  left: 94px;
  top: 259px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #FDFAF4;
  max-width: 427px;
}

.site-footer__right {
  position: absolute;
  left: 1099px;
  top: 0;
}

/* getBBox y values from SVG: 133, 175, 231, 273 */
.site-footer__label--email {
  position: absolute;
  top: 133px;
}

.site-footer__email {
  position: absolute;
  top: 175px;
}

.site-footer__label--follow {
  position: absolute;
  top: 231px;
}

.site-footer__linkedin {
  position: absolute;
  top: 273px;
  display: block;
  width: 35px;
  height: 35px;
  line-height: 0;
  text-decoration: none;
}

.site-footer__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.site-footer__email {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — mobile  (≤ 768 px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Reset fixed widths ─────────────────────────────── */
  .site-nav,
  .hero,
  .about,
  .tools,
  .experience,
  .skills,
  .projects,
  .site-footer {
    width: 100%;
  }

  /* ── Nav ────────────────────────────────────────────── */
  .site-nav {
    height: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
  }

  .site-nav__brand,
  .site-nav__link {
    position: static;
    top: auto;
    left: auto;
    font-size: 12px;
  }

  .site-nav__brand {
    font-size: 13px;
  }

  .site-nav__links-row {
    display: flex;
    gap: 20px;
  }

  /* The links are direct children of nav, so we use flex on nav itself */
  .site-nav {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  /* ── Hero ───────────────────────────────────────────── */
  .hero {
    height: auto;
    overflow: visible;
    padding: 60px 24px 60px;
    box-sizing: border-box;
  }

  .hero__brand {
    position: static;
    display: block;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .hero__title {
    position: static;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 24px;
  }

  .hero__body {
    position: static;
    width: 100%;
    font-size: 15px;
    margin: 0 0 32px;
  }

  .hero__cta {
    position: static;
    flex-wrap: wrap;
  }

  .hero__deco {
    display: none;
  }

  /* ── About ──────────────────────────────────────────── */
  .about {
    height: auto;
    overflow: visible;
    padding: 60px 24px;
    box-sizing: border-box;
  }

  .about__white-col,
  .about__teal {
    display: none;
  }

  .about__photo {
    position: static;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 32px;
  }

  .about__label {
    position: static;
    display: block;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .about__heading {
    position: static;
    width: 100%;
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 20px;
  }

  .about__body {
    position: static;
    width: 100%;
  }

  /* ── Tools ──────────────────────────────────────────── */
  .tools {
    height: auto;
    overflow: hidden;
    padding: 32px 0;
    box-sizing: border-box;
  }

  .tools__svg {
    position: static;
    width: 100%;
    height: auto;
  }

  /* ── Experience ─────────────────────────────────────── */
  .experience {
    height: auto;
    overflow: visible;
    padding: 60px 24px;
    box-sizing: border-box;
  }

  .experience__deco {
    display: none;
  }

  .experience__label {
    position: static;
    display: block;
    font-size: 32px;
    margin-bottom: 16px;
  }

  .experience__cta {
    position: static;
    display: inline-flex;
    margin-bottom: 40px;
    width: auto;
  }

  /* Stack the 3 experience entries */
  .experience__title,
  .experience__co,
  .experience__date,
  .experience__rule {
    position: static;
    display: block;
    left: auto;
    top: auto;
    white-space: normal;
  }

  .experience__title {
    font-size: 24px;
    margin: 0 0 8px;
  }

  .experience__co {
    font-size: 17px;
    margin: 0 0 6px;
  }

  .experience__date {
    font-size: 14px;
    margin: 0 0 16px;
  }

  .experience__rule {
    width: 100%;
    margin: 0 0 28px;
  }

  /* ── Skills ─────────────────────────────────────────── */
  .skills {
    height: auto;
    overflow: hidden;
    padding: 48px 0 48px;
    box-sizing: border-box;
  }

  .skills__deco {
    display: none;
  }

  .skills__label {
    position: static;
    display: block;
    font-size: 32px;
    padding: 0 24px;
    margin-bottom: 24px;
  }

  .skills__carousel {
    position: static;
    width: 100%;
    height: auto;
    padding: 4px 0;
    overflow: hidden;
  }

  .skills__pill {
    font-size: 16px;
    height: 46px;
    padding: 0 16px;
    border-radius: 23px;
  }

  /* ── Projects ───────────────────────────────────────── */
  .projects {
    height: auto;
    overflow: visible;
    padding: 60px 24px;
    box-sizing: border-box;
  }

  .projects__label {
    position: static;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .projects__card {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    top: auto;
    left: auto;
  }

  .projects__card img {
    width: 100%;
    height: auto;
  }

  .projects__title {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .projects__title--tefi {
    font-size: 34px;
  }

  .projects__desc {
    font-size: 14px;
    max-width: 100%;
  }

  .projects__deco {
    display: none;
  }

  /* ── Footer ─────────────────────────────────────────── */
  .site-footer {
    height: auto;
    overflow: visible;
    padding: 60px 24px;
    box-sizing: border-box;
  }

  .site-footer__heading {
    position: static;
    display: block;
    font-size: 32px;
    width: 100%;
    margin: 0 0 16px;
    line-height: 1.15;
  }

  .site-footer__subline {
    position: static;
    display: block;
    max-width: 100%;
    margin: 0 0 40px;
  }

  .site-footer__right {
    position: static;
    left: auto;
    top: auto;
  }

  .site-footer__label--email,
  .site-footer__email,
  .site-footer__label--follow,
  .site-footer__linkedin {
    position: static;
    display: block;
    top: auto;
  }

  .site-footer__label--email { margin-bottom: 8px; }
  .site-footer__email { margin-bottom: 28px; }
  .site-footer__label--follow { margin-bottom: 12px; }
  .site-footer__linkedin { margin-top: 0; }

}