/* ==========================================================================
   Maryam Maralani — Portfolio
   One shared stylesheet. Mobile-first: base styles match the 390px mobile
   frames; the "Desktop" block (min-width: 1024px) matches the 1440px frames.

   Contents
   1. Design tokens (colours, fonts, type sizes, spacing)
   2. Base and reset
   3. Shared pieces: container, section label, arrow links, doodles
   4. Header (navigation)
   5. Footer (contact)
   6. Device mock-ups (laptop + phone picture, phones, photo print)
   7. Homepage
   8–11. About, photobook, case studies, MyMaria
   12. CV page
   ========================================================================== */


/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Colours (Figma variables) */
  --color-burgundy: #5C0E17;
  --color-burgundy-deep: #40080E;
  --color-espresso: #120E0E;        /* text */
  --color-ivory: #F5EDDE;
  --color-cream: #FBF6EC;           /* page background */
  --color-rose: #BA8F8F;            /* dusty rose accents */
  --color-taupe: #948A80;
  --color-taupe-text: #736B61;
  --color-line: #B8ADA1;
  --color-terracotta-soft: #E6C1AA; /* hero and footer backgrounds */
  --color-olive: #5E6440;           /* rules, dots and hand-drawn lines */
  --color-peach-light: #FBF1EA;
  --color-peach: #F2D6C5;           /* highlighted cards */
  --color-peach-deep: #E8BFA7;
  --gradient-peach: radial-gradient(closest-side, var(--color-peach-light) 0%, var(--color-peach) 55%, var(--color-peach-deep) 100%);
  --color-white: #FFFFFF;

  /* Fonts */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type sizes (Figma text styles) */
  --text-display-hero: 174px;
  --text-display-title: 96px;
  --text-h1: 72px;   /* line height 72 */
  --text-h2: 60px;   /* line height 62 */
  --text-h3: 48px;   /* line height 54 */
  --text-h4: 36px;   /* line height 40 */
  --text-h5: 30px;   /* line height 34 */
  --text-h6: 24px;   /* line height 30 */
  --text-quote-lg: 42px;   /* italic, line height 46 */
  --text-quote-md: 30px;   /* italic, line height 36 */
  --text-quote-sm: 22px;   /* italic, line height 27 */
  --text-body-xl: 20px;    /* line height 30 */
  --text-body-lg: 18px;    /* line height 28 */
  --text-body-md: 16px;    /* line height 26 */
  --text-body: 15px;       /* line height 23 */
  --text-body-sm: 14px;    /* line height 22 */
  --text-brand: 14px;      /* Meta/Brand, semibold */
  --text-cta: 13px;        /* Meta/CTA, semibold */
  --text-nav: 12px;        /* Meta/Nav, medium */
  --text-label: 12px;      /* Meta/Label, semibold */
  --text-eyebrow: 11px;    /* Meta/Eyebrow, semibold */

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-margin: 56px;   /* desktop page margin */
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 120px;
  --space-section-lg: 160px;
  --radius-sm: 4px;

  /* Layout */
  --page-margin: 20px;          /* mobile side margin (desktop: 56px) */
  --page-max: 1440px;
  --header-top: 56px;           /* where the header sits on mobile */
  --header-space: 126px;        /* room left for the header on mobile */
}

@media (min-width: 1024px) {
  :root {
    --page-margin: var(--space-margin);
    --header-top: 30px;
    --header-space: 116px;
  }
}


/* 2. Base and reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-espresso);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: absolute;
  left: var(--page-margin);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--color-ivory);
  color: var(--color-burgundy);
  font: 600 var(--text-cta)/1 var(--font-sans);
}
.skip-link:focus { top: 12px; }


/* 3. Shared pieces -------------------------------------------------------- */

/* Centres content at 1440px max and applies the page margin */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

/* Section label: "01 —— WHAT I BRING" */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-label);
  line-height: 1.2;
  white-space: nowrap;
}
.section-label__number { font-weight: 600; color: var(--color-burgundy); }
.section-label__rule { width: 36px; height: 1px; background: var(--color-olive); }
.section-label__text { font-weight: 500; color: var(--color-espresso); }

/* On dark backgrounds */
.section-label--light .section-label__number { color: var(--color-burgundy); }
.section-label--light .section-label__rule { width: 40px; background: var(--color-olive); }
.section-label--light .section-label__text { color: var(--color-espresso); }

/* Arrow links: "VIEW CASE STUDY ↗", "MORE ABOUT ME →" */
.link-arrow {
  display: inline-block;
  font-size: var(--text-cta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-burgundy);
  white-space: pre;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .25s ease;
}
.link-arrow:hover { background-size: 100% 1px; }

.link-small {
  font-size: var(--text-eyebrow);
  letter-spacing: 1.5px;
  color: var(--color-taupe-text);
}

/* Meta lines in capitals (client, role, year) */
.meta-list {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-taupe-text);
}

/* Hand-drawn doodles */
.doodle { display: block; pointer-events: none; }

/* A wavy rose underline beneath a word */
.squiggle {
  position: relative;
  display: inline-block;
}
.squiggle::after {
  content: '';
  position: absolute;
  left: 2%;
  right: 0;
  bottom: -0.02em;
  height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183 10' preserveAspectRatio='none'%3E%3Cpath d='M0.65 4.75C10.65 0.75 20.65 0.75 30.65 4.75C40.65 8.75 50.65 8.75 60.65 4.75C70.65 0.75 80.98 0.75 91.65 4.75C101.65 8.75 111.65 8.75 121.65 4.75C131.65 0.75 141.65 0.75 151.65 4.75C161.65 8.75 171.65 8.75 181.65 4.75' stroke='%235E6440' stroke-width='3.5' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


/* 4. Header --------------------------------------------------------------- */
/* Sits on top of each page's dark opening section.
   Mobile: two lines (name, then links). Desktop: one line, 52px tall. */
.site-header {
  position: absolute;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 10;
  color: var(--color-espresso);
}
.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.site-header__brand {
  font-size: var(--text-brand);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1.2;
}
.site-header a { transition: opacity .2s; }
.site-header a:hover { opacity: .7; }

@media (min-width: 1024px) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 52px;
  }
  .site-nav__list { gap: 30px; }
}


/* 5. Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-terracotta-soft);
  color: var(--color-espresso);
}
.site-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-block: 56px;
}
.site-footer__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}
.site-footer__text {
  max-width: 610px;
  font-size: var(--text-body-md);
  line-height: 25px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.2;
}
.site-footer__links a { white-space: pre; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--text-eyebrow);
  line-height: 1.2;
}
.site-footer__meta { color: var(--color-burgundy); white-space: pre; }
.site-footer__trail path,
.site-footer__plane path { stroke: var(--color-olive); }
.site-footer__top { font-weight: 600; white-space: pre; }
.site-footer__top:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Paper-airplane doodle: desktop only */
.site-footer__trail,
.site-footer__plane { display: none; }

@media (min-width: 1024px) {
  .site-footer__inner {
    gap: 0;
    min-height: 620px;
    padding-top: 70px;
    padding-bottom: 42px;
  }
  .site-footer__headline {
    margin-top: 50px;
    max-width: 900px;
    font-size: clamp(56px, 5.97vw, 86px);
  }
  .site-footer__text { margin-top: 78px; font-size: var(--text-body-lg); line-height: 28px; }
  .site-footer__links { margin-top: 44px; }
  .site-footer__bottom { margin-top: auto; }

  .site-footer__trail,
  .site-footer__plane { position: absolute; pointer-events: none; }
  .site-footer__trail { left: 53.5%; top: 150px; width: 360px; height: auto; }
  .site-footer__plane { left: 51.4%; top: 325px; width: 36px; height: auto; }
}

/* The airplane doodle needs room beside the headline, so it appears from 1200px */
@media (min-width: 1200px) {
  .site-footer__trail,
  .site-footer__plane { display: block; }
}

/* Tablet widths: keep lines of text and the phones at a comfortable size */
@media (min-width: 600px) and (max-width: 1023px) {
  .hero__quote, .feature__text, .pov__text, .site-footer__text { max-width: 560px; }
  .phones { max-width: 560px; }
}


/* 6. Device mock-ups ------------------------------------------------------ */

/* 6a. Laptop + phone picture on a grey panel (homepage, Haglöfs).
   The whole panel is a link to the case study. */
.devices-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 16px;
  background: rgba(148, 138, 128, .28);
}
.devices-stage img {
  width: 100%;
  max-width: 1072px;
  transition: transform .4s ease;
}
.devices-stage:hover img { transform: translateY(-6px); }
.devices-stage:focus-visible { outline: 2px solid var(--color-burgundy); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .devices-stage img { transition: none; }
  .devices-stage:hover img { transform: none; }
}
@media (min-width: 1024px) {
  .devices-stage { aspect-ratio: 1328 / 850; padding: 46px 6%; }
  .devices-stage img { width: auto; max-height: 100%; }
}

/* 6b. Three phones side by side (720 × 520 design px) */
.phones {
  container-type: inline-size;
  width: 100%;
}
.phones__inner {
  --u: calc(100cqi / 720);
  position: relative;
  height: calc(520 * var(--u));
}
.phone {
  position: absolute;
  top: calc(67 * var(--u));
  width: calc(199 * var(--u));
  height: calc(414 * var(--u));
  padding: calc(5.5 * var(--u));
  background: #171414;
  border: calc(1.5 * var(--u)) solid #595454;
  border-radius: calc(32 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(64, 8, 14, .28);
  overflow: hidden;
}
.phone:nth-child(1) { left: calc(44 * var(--u)); }
.phone:nth-child(2) { left: calc(261 * var(--u)); top: calc(39 * var(--u)); }
.phone:nth-child(3) { left: calc(478 * var(--u)); }
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(25 * var(--u));
  background: #FFFAF2;
}
.phone::after {        /* Dynamic Island */
  content: '';
  position: absolute;
  left: 50%;
  top: calc(11.5 * var(--u));
  width: calc(56 * var(--u));
  height: calc(16 * var(--u));
  transform: translateX(-50%);
  border-radius: calc(8 * var(--u));
  background: #0D0D0D;
}

/* 6c. A photo print, slightly rotated */
.print {
  width: 304px;
  max-width: 100%;
  padding: 12px;
  background: #FFFDF9;
  transform: rotate(2deg);
  box-shadow: 0 2px 4px rgba(18, 14, 14, .08), 0 14px 32px rgba(18, 14, 14, .18);
}
.print img {
  width: 100%;
  aspect-ratio: 280 / 350;
  object-fit: cover;
}


/* 7. Homepage ------------------------------------------------------------- */

/* 7a. Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-terracotta-soft);
  color: var(--color-espresso);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--header-space);
  padding-bottom: 56px;
}
.hero__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: normal;
  letter-spacing: -1.47px;
}
.hero__portrait {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 430 / 610;
}
.hero__portrait { border-radius: 9999px; background: #C27344; overflow: hidden; } /* warm backing behind the 80%-opacity photo, matched to Figma */
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero__role {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
}
.hero__intro { display: contents; }
.hero__quote {
  order: 1;              /* mobile: quote comes after the skills list */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 28px;
  color: var(--color-burgundy-deep);
}
.hero__skills {
  font-size: var(--text-cta);
  line-height: 26px;
}
.hero__location {
  order: 2;
  font-size: var(--text-nav);
  line-height: 1.2;
  color: var(--color-burgundy);
  white-space: pre;
}
.hero__scroll {
  order: 3;
  font-size: var(--text-nav);
  line-height: 1.2;
}
.hero__scroll:hover { opacity: .7; }

@media (min-width: 1024px) {
  .hero__inner {
    display: block;
    position: relative;
    height: 960px;
    padding: 0;
  }
  .hero__inner > * { position: absolute; }
  .hero__name {
    z-index: 2;
    left: var(--page-margin);
    top: 116px;
    font-size: clamp(120px, 12.08vw, 174px);
    line-height: normal;
    letter-spacing: -0.023em;
  }
  .hero__portrait {
    z-index: 1;
    left: 50%;
    top: 210px;
    width: clamp(320px, 29.86vw, 430px);
    max-width: none;
    transform: translateX(-50%);
  }
  .hero__intro {
    display: block;
    left: var(--page-margin);
    top: 390px;
    width: min(430px, calc(50% - var(--page-margin) - clamp(160px, 14.93vw, 215px) - 20px));
  }
  .hero__quote {
    margin-top: 22px;
    font-size: clamp(32px, 2.92vw, 42px);
    line-height: 1.095;
  }
  .hero__skills { left: 74.3%; top: 420px; }
  .hero__location { left: var(--page-margin); bottom: 64px; }
  .hero__scroll { right: calc(var(--page-margin) + 29px); bottom: 64px; }
}

/* 7b. What I bring */
.bring { background: var(--color-ivory); }
.bring__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 42px;
}
.bring__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 34px;
}
.bring__title .squiggle::after { bottom: -0.12em; }
.bring__sparkles {            /* zero-width anchor at the end of "delights." */
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: top;
}
.bring__sparkles .doodle { max-width: none; }
.bring__sparkles .doodle--big { position: absolute; left: 0.3em; top: 0.12em; width: 0.8em; height: 0.8em; }
.bring__sparkles .doodle--small { position: absolute; left: 1.12em; top: -0.18em; width: 0.38em; height: 0.38em; }
.cards {
  display: grid;
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid var(--color-line);
}
.card__index { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-burgundy); }
.card__title { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: normal; }
.card__text { max-width: 270px; font-size: var(--text-body-sm); line-height: 21px; }

@media (min-width: 1024px) {
  .bring__inner { gap: 34px; min-height: 640px; padding-block: 76px; }
  .bring__title { max-width: 900px; min-height: 150px; font-size: 62px; line-height: 62px; }
  .bring__sparkles .doodle--big { left: 0.26em; top: 0.06em; width: 0.55em; height: 0.55em; }
  .bring__sparkles .doodle--small { left: 0.84em; top: -0.13em; width: 0.26em; height: 0.26em; }
  .bring__title .squiggle::after { bottom: -0.08em; height: 0.1em; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { min-height: 230px; }
  .card__title { font-size: 30px; }
}

/* 7c. Case study 01 — Haglöfs */
.feature { background: var(--color-cream); }
.feature__inner {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding-block: 50px;
}
.feature__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: normal;
}
.feature__subtitle {
  margin-top: 12px;
  font-size: var(--text-body-md);
  font-weight: 600;
  line-height: 1.24;
  color: var(--color-burgundy);
}
.feature__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.feature__text { font-size: var(--text-body-md); line-height: 25px; }

@media (min-width: 1024px) {
  .feature__inner { gap: 32px; padding-block: 90px; }
  .feature__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 180px;
  }
  .feature__title { font-size: 76px; }
  .feature__subtitle { font-size: var(--text-body-lg); }
  .feature__header .meta-list { width: 280px; flex: none; }
  .feature__summary {
    flex-direction: row;
    justify-content: space-between;
    min-height: 150px;
  }
  .feature__text { max-width: 690px; font-size: var(--text-body-lg); line-height: 28px; }
}

/* 7d. Case study 02 — MyMaria */
.feature--alt { background: var(--color-ivory); }
.feature--alt .feature__inner { gap: 22px; }
.split {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.split__index { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-burgundy); }
.split__title { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: normal; }

@media (min-width: 1024px) {
  .feature--alt .feature__inner { gap: 36px; }
  .split {
    display: grid;
    grid-template-columns: minmax(0, 720fr) minmax(0, 520fr);
    align-items: center;
    gap: 56px;
    min-height: 560px;
    padding-right: 2.4%;          /* the design leaves 32px free on the right */
  }
  .split__copy { min-height: 430px; }
  .split__title { min-height: 90px; }
  .split__copy .feature__text { min-height: 125px; }
  .split__title { font-size: 58px; }
  .split__copy .feature__text { max-width: 480px; }
}

/* 7e. About — point of view */
.pov { background: var(--color-cream); }
.pov__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-block: 56px;
}
.pov__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 40px;
}
.pov__sun {
  position: absolute;
  top: 40px;
  right: var(--page-margin);
  width: 44px;
  height: 44px;
}
.pov__text { font-size: var(--text-body-md); line-height: 26px; }
.pov__left, .pov__right { display: contents; }
.pov__more { order: 1; }
.pov__book { order: 2; }

@media (min-width: 1024px) {
  .pov__inner {
    display: grid;
    grid-template-columns: minmax(0, 769fr) minmax(0, 559fr);
    align-items: start;
    gap: 0;
    min-height: 820px;
    padding-top: 72px;
    padding-bottom: 60px;
  }
  .pov__left, .pov__right { display: block; }
  .pov__title {
    position: relative;
    margin-top: 48px;
    max-width: 760px;
    font-size: clamp(56px, 5vw, 72px);
    line-height: 1;
  }
  .pov__sun { position: static; display: inline-block; width: 55px; height: 55px; margin-left: 0.25em; vertical-align: top; margin-top: 0.08em; }
  .pov__more { display: inline-block; margin-top: 49px; }
  .pov__right { padding-top: 103px; }
  .pov__text { max-width: 520px; font-size: var(--text-body-lg); line-height: 29px; }
  .pov__print { margin-top: 53px; margin-left: -6px; }
  .pov__book { display: inline-block; margin-top: 24px; margin-left: 12px; }
}


/* 8. About page ----------------------------------------------------------- */

/* Shared building blocks for inner pages */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-terracotta-soft);
  color: var(--color-espresso);
}
.page-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--header-space);
  padding-bottom: 56px;
}
.page-hero__eyebrow {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-burgundy);
}
.page-hero__meta {
  font-size: var(--text-nav);
  line-height: 1.4;
  color: var(--color-burgundy);
  white-space: pre-wrap;
}

.section { padding-block: 66px; }
.section--ivory { background: var(--color-ivory); }
.section--cream { background: var(--color-cream); }
.section--rose  { background: var(--color-rose); }
.section--gradient { background: var(--color-peach-deep) var(--gradient-peach); }
.section__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 40px;
}
.section__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--text-body-md);
  line-height: 25px;
}
.two-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-section); }
  .section__title { font-size: clamp(56px, 5vw, 72px); line-height: 1; }
  .section__body { font-size: var(--text-body-lg); line-height: 28px; }
  .two-col {
    display: grid;
    grid-template-columns: minmax(0, 696fr) minmax(0, 608fr);
    gap: 24px;
  }
}

/* 8a. About hero */
.about-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 54px;
  letter-spacing: -1px;
}
.about-hero__title em { font-style: normal; }   /* mobile: one plain sentence, as in the mobile frame */
.about-hero__underline { width: 100%; max-width: 352px; height: auto; }
.about-hero__underline--desktop { display: none; }
.about-hero__portrait {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 430 / 520;
}
.about-hero__portrait { border-radius: 9999px; background: #C27344; overflow: hidden; }
.about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__underline path { stroke: var(--color-olive); }
.about-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.about-hero__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 28px;
}
.about-hero__text { font-size: var(--text-body-md); line-height: 25px; }

@media (min-width: 1024px) {
  .about-hero .page-hero__inner {
    display: block;
    height: 960px;
    padding: 0;
  }
  .about-hero .page-hero__inner > * { position: absolute; }
  .about-hero .page-hero__eyebrow { left: var(--page-margin); top: 140px; }
  .about-hero__title {
    z-index: 2;
    left: calc(var(--page-margin) - 4px);
    top: 168px;
    font-size: clamp(80px, 7.78vw, 112px);
    line-height: 0.964;
    letter-spacing: -2px;
    white-space: nowrap;
  }
  .about-hero__title em { font-style: italic; color: var(--color-burgundy); }
  .about-hero__underline--mobile { display: none; }
  .about-hero__underline--desktop {
    display: block;
    left: calc(var(--page-margin) + 6px);
    top: 380px;
    width: clamp(470px, 45.6vw, 659px);
    max-width: none;
  }
  .about-hero__portrait {
    right: var(--page-margin);
    top: 392px;
    width: clamp(320px, 29.86vw, 430px);
    max-width: none;
  }
  .about-hero__intro {
    left: var(--page-margin);
    top: 430px;
    width: min(620px, 50%);
    gap: 28px;
  }
  .about-hero__quote { font-size: clamp(34px, 2.92vw, 42px); line-height: 1.095; }
  .about-hero__text { font-size: var(--text-body-lg); line-height: 28px; }
  .about-hero .page-hero__meta { left: var(--page-margin); top: 900px; white-space: pre; }
}

/* 8b. My story + timeline */
.story { display: flex; flex-direction: column; gap: 43px; }
.timeline { position: relative; }
.timeline__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
}
.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
}
.timeline__date { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-burgundy); }
.timeline__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 25px;
}
.timeline__text { font-size: var(--text-body-sm); line-height: 22px; color: var(--color-taupe-text); }
.timeline__icon { display: none; flex: none; height: auto; }
.timeline__line { display: none; }

@media (min-width: 1024px) {
  .story { gap: 72px; }
  .timeline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .timeline__title { font-size: 30px; line-height: 34px; }
  .timeline__icon { display: block; }
  .timeline__item::before {           /* milestone dot */
    content: '';
    position: absolute;
    left: -0.5px;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.6px solid var(--color-olive);
    background: var(--color-ivory);
  }
  .timeline__item:last-child::before { background: var(--color-olive); }
  .timeline__line {
    display: block;
    position: absolute;
    left: 4.5px;
    top: -37px;
    width: calc(75% + 18px);
    height: 44px;
    pointer-events: none;
  }
}

/* 8c. How I work (habit cards reuse .cards / .card) */
.habits { display: flex; flex-direction: column; gap: 29px; }
.habits__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 35px;
}
.habits .cards { gap: 16px; }
.habits .card { padding: 25px 23px 28px; }
.habits .card__title { line-height: 25px; }
.habits .card__text { max-width: none; }

@media (min-width: 1024px) {
  .habits { gap: 48px; }
  .habits__title { font-size: clamp(48px, 4.17vw, 60px); line-height: 1.033; }
  .habits .cards { gap: 18px; }
  .habits .card { min-height: 0; }
  .habits .card__title { line-height: 34px; }
}

/* 8d. Off-screen / photography */
.offscreen { display: flex; flex-direction: column; gap: 34px; }
@media (min-width: 1024px) { .offscreen .two-col { align-items: end; } }  /* desktop only: on mobile the columns stack */
.offscreen .section-label__number,
.offscreen .section-label__rule { background: var(--color-olive); }

@media (min-width: 1024px) {
  .offscreen { gap: 56px; }
}

/* 8e. Details */
.details { display: flex; flex-direction: column; gap: 29px; }
.details__cols {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.details__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--color-line);
}
.details__label { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-burgundy); }
.details__big { font-size: var(--text-body-md); line-height: 26px; }
.details__list { font-size: var(--text-body-md); line-height: 26px; }
.details__note { font-size: var(--text-body-md); line-height: 26px; color: var(--color-taupe-text); }

@media (min-width: 1024px) {
  .details { gap: 48px; }
  .details__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}


/* 9. Photobook (About page) ----------------------------------------------- */
/* From code/photobook.html. An open two-page book; one 3D page-turn.
   Sizes inside the book use cqi (1% of the book's width) so it scales. */
.mm-photobook {
  --mm-paper: var(--color-cream);
  --mm-ink: var(--color-espresso);
  --mm-burgundy: var(--color-burgundy);
  --mm-muted: #73695F;
  --mm-line: #E4DACB;
  color: var(--mm-ink);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-block: 8px;
}
.mm-book {
  position: relative;
  width: min(100%, 1040px);
  aspect-ratio: 8 / 5;
  perspective: 2600px;
  container-type: inline-size;
  isolation: isolate;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.mm-book::before {               /* soft shadow under the book */
  content: '';
  position: absolute;
  inset: 3% 1.5% -2.5% 1.5%;
  background: rgba(18, 14, 14, .30);
  filter: blur(22px);
  border-radius: 6px;
  z-index: -1;
}
.mm-book:focus-visible { outline: 2px solid var(--mm-burgundy); outline-offset: 8px; }

.mm-page, .mm-face {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--mm-paper);
  overflow: hidden;
}
.mm-page { width: 50%; }
.mm-page--left  { left: 0;   border-radius: 3px 0 0 3px; }
.mm-page--right { left: 50%; border-radius: 0 3px 3px 0; }

.mm-leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.65, .05, .36, 1);
  cursor: pointer;
}
.mm-leaf.is-turned { transform: rotateY(-180deg); }

.mm-face { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-face--front { border-radius: 0 3px 3px 0; }
.mm-face--back  { transform: rotateY(180deg); border-radius: 3px 0 0 3px; }

/* Gutter shading: the fold in the middle of the book */
.mm-page--right::after, .mm-face--front::after,
.mm-page--left::after,  .mm-face--back::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mm-page--right::after, .mm-face--front::after {
  background: linear-gradient(to right, rgba(18,14,14,.18), rgba(18,14,14,.04) 6%, rgba(18,14,14,0) 12%);
}
.mm-page--left::after, .mm-face--back::after {
  background: linear-gradient(to left, rgba(18,14,14,.18), rgba(18,14,14,.04) 6%, rgba(18,14,14,0) 12%);
}

/* A small lift at the page corner on hover, inviting the turn */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mm-leaf.is-next:hover { transform: rotateY(-6deg); }
  .mm-leaf.is-prev:hover { transform: rotateY(-174deg); }
}

.mm-inner {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 5.5cqi 4.5cqi 4cqi;
  display: flex;
  flex-direction: column;
  gap: 1.8cqi;
}
.mm-photo {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--mm-line);
}
.mm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
.mm-ph {                          /* shown only if a photo file is missing */
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  padding: 2cqi;
  background: linear-gradient(160deg, #EBD7CF, #C9A29C);
  color: var(--mm-burgundy);
  font: 600 max(9px, 1.15cqi)/1.2 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mm-photo.is-missing img { display: none; }
.mm-photo.is-missing .mm-ph { display: flex; }

.mm-meta {
  display: flex;
  justify-content: space-between;
  font: 500 max(9px, 1.15cqi)/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-muted);
  font-variant-numeric: tabular-nums;
}

.mm-text { justify-content: center; padding: 6cqi; gap: 2.4cqi; }
.mm-eyebrow {
  margin: 0;
  font: 600 max(9px, 1.15cqi)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-burgundy);
}
.mm-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 6cqi;
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.mm-title em { color: var(--mm-burgundy); }
.mm-quote { font-size: 3.6cqi; line-height: 1.1; }
.mm-body {
  margin: 0;
  max-width: 30ch;
  font-size: max(10px, 1.45cqi);
  line-height: 1.6;
  color: var(--mm-muted);
}

.mm-controls { position: relative; display: flex; align-items: center; gap: 20px; }
.mm-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mm-burgundy);
  background: transparent;
  color: var(--mm-burgundy);
  font: 400 18px/1 var(--font-sans);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.mm-btn:hover:not(:disabled) { background: var(--mm-burgundy); color: var(--mm-paper); }
.mm-btn:disabled { opacity: .35; cursor: default; }
.mm-btn:focus-visible { outline: 2px solid var(--mm-burgundy); outline-offset: 4px; }
.mm-count {
  min-width: 56px;
  text-align: center;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--mm-burgundy);
  font-variant-numeric: tabular-nums;
}
.mm-hint { margin: 0; font: 500 12px/1.4 var(--font-sans); color: var(--mm-ink); opacity: .7; text-align: center; }

/* Hand-written "turn the page" note beside the next button (desktop) */
.mm-note { display: none; }
@media (min-width: 1024px) {
  .mm-note {
    display: block;
    position: absolute;
    left: calc(100% + 3px);
    top: -30px;
    width: 210px;
    height: 60px;
    pointer-events: none;
    color: var(--color-burgundy);
  }
  .mm-note svg { position: absolute; left: 0; top: 22px; width: 70px; height: auto; }
  .mm-note span {
    position: absolute;
    left: 85px;
    top: 0;
    font-family: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
    font-size: 26px;
    line-height: 1.2;
    white-space: nowrap;
    transform: rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-leaf { transition: none; }
}

/* Line breaks that only apply on desktop */
br.desktop-only { display: none; }
@media (min-width: 1024px) { br.desktop-only { display: inline; } }


/* 10. Case study pages ---------------------------------------------------- */
/* Shared by haglofs.html and mymaria.html.
   Mobile: 20px margins, 45px section padding, headings 34px.
   Desktop: 56px margins, 82px section padding, headings 60px. */

/* 10a. Hero */
.cs-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--header-space);
  padding-bottom: 56px;
}
.cs-hero__crumb {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-burgundy);
  white-space: pre;
}
.cs-hero__client { font-size: var(--text-body); font-weight: 600; line-height: 1.2; }
.cs-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 47px;
}
.cs-hero__intro { font-size: 17px; line-height: 26px; }
.cs-facts { display: flex; flex-direction: column; gap: 16px; }
.cs-facts__label { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-espresso); }
.cs-facts__list { display: flex; flex-direction: column; gap: 16px; }
.cs-facts li { font-size: var(--text-body-md); line-height: 26px; }
.cs-hero__roles { font-size: var(--text-eyebrow); line-height: 1.4; color: var(--color-burgundy); white-space: pre-wrap; }
.cs-hero__logo { display: none; }

/* Device image under the hero, still on the dark background */
.cs-visual { background: var(--color-terracotta-soft); padding-bottom: 50px; }
.cs-visual img { width: 100%; max-width: 1122px; margin-inline: auto; }

@media (min-width: 1024px) {
  .cs-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 954fr) minmax(0, 374fr);
    grid-template-areas:
      "crumb  crumb"
      "client facts"
      "title  facts"
      "intro  logo"
      "roles  logo";
    column-gap: 0;
    row-gap: 0;
    min-height: 820px;
    padding-top: 100px;
    padding-bottom: 98px;
  }
  .cs-hero__crumb  { grid-area: crumb; }
  .cs-hero__client { grid-area: client; margin-top: 35px; }
  .cs-hero__title  {
    grid-area: title;
    margin-top: 22px;
    font-size: clamp(72px, 6.67vw, 96px);
    line-height: 0.98;
  }
  .cs-hero__intro  { grid-area: intro; max-width: 640px; margin-top: 60px; font-size: var(--text-body-xl); line-height: 30px; }
  .cs-facts        { grid-area: facts; margin-top: 105px; margin-left: 0; }
  .cs-hero__roles  { grid-area: roles; align-self: end; margin-top: 39px; }
  .cs-hero__logo   { grid-area: logo; display: block; align-self: end; justify-self: start; margin-left: 57px; width: 169px; height: auto; }
  .cs-visual { padding-bottom: 110px; }
}

/* 10b. Sections */
.cs-section { padding-block: 45px; }
.cs-section--ivory { background: var(--color-ivory); }
.cs-section--cream { background: var(--color-cream); }
.cs-section--rose  { background: var(--color-rose); }
.cs-section--gradient { background: var(--color-peach-deep) var(--gradient-peach); }
.cs-section__inner { display: flex; flex-direction: column; gap: 18px; }
.cs-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 35px;
  max-width: 1000px;
}
.cs-lead { font-size: var(--text-body-md); line-height: 25px; max-width: 870px; }
.cs-label { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--color-burgundy); }
.cs-label--sm { font-size: var(--text-eyebrow); }
.cs-block { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.cs-small { font-size: var(--text-body-sm); line-height: 22px; }
.cs-body15 { font-size: var(--text-body); line-height: 23px; }

/* Grids: one column on mobile, 2/3/4 on desktop */
.cs-grid { display: grid; gap: 18px; }
.cs-grid--2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .cs-section { padding-block: 82px; }
  .cs-section__inner { gap: 30px; }
  .cs-h2 { font-size: clamp(48px, 4.17vw, 60px); line-height: 1.033; }
  .cs-lead { font-size: var(--text-body-lg); line-height: 28px; }
  .cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .cs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .cs-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* At a glance */
.glance { display: flex; flex-direction: column; gap: 29px; }
.glance__item { display: flex; flex-direction: column; gap: 14px; }
.glance__text { font-size: var(--text-body-md); line-height: 26px; }
.cs-page--mymaria .glance__text { font-size: var(--text-body-lg); line-height: 28px; }
@media (min-width: 1024px) {
  .glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .glance__text { font-size: var(--text-body-lg); line-height: 28px; }
  .cs-page--mymaria .glance__text { font-size: var(--text-body-xl); line-height: 30px; }
  .cs-glance { padding-block: 80px; }
}

/* Boxes: bordered or filled cards */
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid #C2BAB0;
}
.box--filled { background: var(--color-rose); border-color: var(--color-rose); }
.box--peach { background: var(--color-peach); border-color: var(--color-peach); }
.box--olive-line { border-color: var(--color-olive); }
/* Four AI options: prices in taupe, the recommended one in burgundy */
.options .cs-label { color: var(--color-taupe-text); }
.options .box__title--md { color: var(--color-taupe-text); }
.options .box--pick .cs-label { color: #000; }
.options .box--pick .box__title--md { color: var(--color-burgundy); }
@media (min-width: 1024px) { .options .box__title--md { font-size: var(--text-h6); line-height: 30px; } }
.box--paper  { background: var(--color-cream); border-color: var(--color-cream); padding: 20px; gap: 8px; }
.box__title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 27px; }
.box__title--sm { font-size: 19px; line-height: 24px; }
.box__title--md { font-size: 22px; line-height: 25px; }
@media (min-width: 1024px) {
  .box { padding: 28px 28px 30px; }
  .box__title { font-size: var(--text-h4); line-height: 40px; }
  .box__title--sm { font-size: var(--text-h6); line-height: 30px; }
  .box__title--md { font-size: var(--text-h5); line-height: 34px; }
  .box--paper { padding: 20px 20px 22px; }
}

/* Section-specific cards reuse .card from the homepage */
.cs-cards .card { gap: 14px; }
.cs-cards .card__text { max-width: none; line-height: 22px; }
@media (min-width: 1024px) {
  .cs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-cards .card { min-height: 203px; }
}
.cards--2 .card { min-height: 0; }
@media (min-width: 1024px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reference images with caption (premium brands) */
.ref { display: flex; flex-direction: column; gap: 10px; }
.ref img { width: 100%; aspect-ratio: 317 / 220; object-fit: cover; }
.ref__name { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 25px; }
@media (min-width: 1024px) { .ref__name { font-size: var(--text-h5); line-height: 34px; } }

/* Big italic takeaway line */
.takeaway {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 28px;
  color: var(--color-burgundy);
}
@media (min-width: 1024px) { .takeaway { font-size: var(--text-quote-lg); line-height: 46px; } }

/* "Recommended" pill */
.pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 10px;
  background: var(--color-ivory);
  color: var(--color-burgundy);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}
.box__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Columns with a short rule on top */
.ruled { padding-top: 18px; border-top: 1px solid var(--color-espresso); display: flex; flex-direction: column; gap: 10px; }
.ruled--burgundy { border-color: var(--color-burgundy); padding-top: 22px; gap: 12px; }

/* Before/after image pairs */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pair img { width: 100%; aspect-ratio: 290 / 362; object-fit: cover; }
.pair__img--rose { border: 5px solid var(--color-rose); }   /* same rose frame as the “Proposed” screenshot */
.pair__arrow { font-family: var(--font-serif); font-size: 20px; color: var(--color-burgundy); }
@media (min-width: 1024px) { .pair__arrow { font-size: 26px; } }
.figure-col { display: flex; flex-direction: column; gap: 12px; }

/* Bar callout: a burgundy bar beside text */
.callout {
  display: flex;
  gap: 24px;
  padding-left: 0;
  margin-top: 16px;
}
.callout::before { content: ''; flex: none; width: 3px; background: var(--color-burgundy); }
.callout__text { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 25px; color: var(--color-burgundy); max-width: 1000px; }
@media (min-width: 1024px) { .callout__text { font-size: var(--text-h5); line-height: 34px; } }

/* Quotes from testing */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.quote { display: flex; gap: 22px; }
.quote::before { content: ''; flex: none; width: 3px; background: var(--color-burgundy); }
.quote p { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 26px; }
@media (min-width: 1024px) {
  .quotes { gap: 32px; }
  .quote p { font-size: var(--text-quote-md); line-height: 36px; }
}

/* Rounded result pill */
.result-pill {
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid #C4B8B2;
  border-radius: 18px;
  background: var(--color-ivory);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-burgundy);
  white-space: pre;
}

/* Tall screenshots of web pages */
.shot { display: flex; flex-direction: column; gap: 14px; }
.shot__frame { border: 1px solid #C2BAB0; background: var(--color-cream); }
.shot__frame--rose { border: 5px solid var(--color-rose); }
/* On phones the rose frames are thinner (3px), so they don't overpower the small images */
@media (max-width: 1023px) {
  .shot__frame--rose,
  .pair__img--rose { border-width: 3px; }
}
.shot__frame img { width: 100%; }

/* Numbered markers ("What I changed") */
.marker-row { display: flex; gap: 16px; }
.marker {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-rose);
  color: var(--color-burgundy);
  font-size: var(--text-body-sm);
  font-weight: 600;
}
.marker-row > div { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .changes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }

/* AI label example */
.ai-example {
  display: flex;
  flex-direction: column;
  gap: 29px;
  padding: 28px 20px;
  background: var(--color-ivory);
}
.ai-example img { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; object-fit: cover; }
.ai-example__text { display: flex; flex-direction: column; gap: 14px; }
.ai-example__caption { font-size: 13px; line-height: 20px; opacity: .7; }
@media (min-width: 1024px) {
  .ai-example { flex-direction: row; align-items: center; gap: 48px; padding: 28px; }
  .ai-example img { flex: 0 1 560px; }
}

/* Process steps with arrows */
.flow { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.flow__step { display: flex; flex-direction: column; gap: 10px; }
.flow__title { font-size: var(--text-cta); font-weight: 600; line-height: 1.2; }
.flow__text { font-size: var(--text-body-sm); line-height: 22px; opacity: .8; }
.flow__arrow { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--color-burgundy); transform: rotate(90deg); align-self: flex-start; }
@media (min-width: 1024px) {
  .flow { flex-direction: row; justify-content: space-between; gap: 20px; margin-top: 20px; }
  .flow__step { flex: 0 1 190px; }
  .flow__arrow { transform: none; font-size: 34px; margin-top: -4px; }
}

/* Outcome */
.outcome { display: flex; flex-direction: column; gap: 24px; }
.outcome__learned { font-size: var(--text-body-md); line-height: 26px; color: var(--color-burgundy); }
.outcome__learned strong { display: block; font-weight: 500; }
@media (min-width: 1024px) {
  .cs-outcome { padding-top: 82px; padding-bottom: 96px; }
  .outcome { gap: 0; }
  .outcome .cs-h2 { margin-top: 48px; max-width: 980px; }
  .outcome__row { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 504fr); gap: 64px; margin-top: 67px; }
  .outcome__row .cs-lead { font-size: var(--text-body-lg); line-height: 28px; }
}
@media (max-width: 1023px) { .outcome__row { display: flex; flex-direction: column; gap: 24px; } }

/* Footer extra on case studies: "Next case study" */
.site-footer__next {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.2;
  white-space: pre;
}
.site-footer__next:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (min-width: 1024px) {
  .site-footer__next { position: absolute; right: var(--page-margin); top: 477px; font-size: 28px; }
}


/* 11. MyMaria page -------------------------------------------------------- */

/* Big decorative "M" in the hero (desktop) */
.cs-hero__mark { display: none; }
@media (min-width: 1024px) {
  .cs-hero__mark {
    display: block;
    grid-area: logo;
    align-self: start;
    justify-self: start;
    margin-top: -20px;
    margin-left: -10px;
    font-family: var(--font-serif);
    font-size: 320px;
    line-height: 1;
    color: var(--color-taupe);
  }
  .cs-hero--mymaria .cs-hero__inner { min-height: 750px; padding-bottom: 50px; }
  .cs-hero--mymaria .cs-hero__intro { max-width: 760px; margin-top: 36px; }
  .cs-hero--mymaria .cs-hero__roles { margin-top: 6px; align-self: start; }
}
.cs-visual--phones img { max-width: 1328px; }

/* Overview: two columns */
.overview { display: flex; flex-direction: column; gap: 32px; }
.overview__main, .overview__side { display: flex; flex-direction: column; gap: 18px; }
.hmw {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: var(--color-burgundy);
}
.plain-list { font-size: var(--text-body); line-height: 23px; }
@media (min-width: 1024px) {
  .overview { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 430fr); gap: 90px; }
  .overview__main .cs-lead { max-width: 660px; }
  .overview__side { max-width: 390px; }
  .hmw { font-size: var(--text-body-xl); line-height: 30px; max-width: 660px; }
}

/* Contribution: photo beside a stack of cards */
.contrib { display: flex; flex-direction: column; gap: 23px; }
.contrib__photo img { width: 100%; aspect-ratio: 540 / 566; object-fit: cover; }
.contrib__cards { display: flex; flex-direction: column; gap: 14px; }
.contrib__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  border: 1px solid #C2B5B0;
}
.contrib__card .box__title { line-height: 1.25; }
.owner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid #C4B8B2;
}
@media (min-width: 1024px) {
  .cs-h2--48 { font-size: clamp(40px, 3.33vw, 48px); line-height: 1.125; }
  .contrib { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 750fr); gap: 38px; }
  .contrib__cards { justify-content: space-between; }
  .contrib__card { flex: 1; justify-content: center; }
  .contrib__card .box__title { font-size: var(--text-h5); }
  .owner { display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 28px; }
  .owner .box__title { font-size: var(--text-h5); line-height: 34px; }
}

/* Evidence panels */
.panel { display: flex; flex-direction: column; gap: 22px; padding: 20px; background: var(--color-cream); }
.panel--rose { background: var(--color-rose); }
.panel--gradient { background: var(--color-peach-deep) var(--gradient-peach); }
.panel__title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 27px; }
.panel__big { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 34px; }
.stats { display: grid; gap: 19px; }
.stat__num { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 40px; }
.stat__big { display: block; font-size: 72px; line-height: 1; }   /* the large number */
.stat__sub { font-size: var(--text-body-md); line-height: 26px; }
.fine { font-size: var(--text-nav); line-height: 18px; }
@media (min-width: 1024px) {
  .panel { padding: 32px; }
  .panel__title { font-size: var(--text-h4); line-height: 40px; }
  .panel__big { font-size: var(--text-h3); line-height: 54px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .stat__num { font-size: var(--text-h3); line-height: 54px; }
  .stat__big { font-size: var(--text-display-numeral, 128px); }
}

/* Expert quotes */
.xquotes { display: grid; gap: 18px; }
.xquote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 22px;
  background: var(--color-cream);
  border: 1px solid #C4B8B2;
}
.xquote p { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 27px; }
.xquote footer { font-size: var(--text-eyebrow); font-weight: 600; color: var(--color-burgundy); }
@media (min-width: 1024px) {
  .xquotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xquote { justify-content: flex-start; min-height: 250px; }
  .xquote p { font-size: var(--text-quote-md); line-height: 36px; }
}

/* Journey map: paper photo beside the intro (desktop) */
.journey-intro { position: relative; display: flex; flex-direction: column; gap: 18px; }
.journey-paper { display: flex; flex-direction: column; gap: 14px; max-width: 314px; }
.journey-paper figcaption { font-size: var(--text-nav); line-height: 17px; color: #73695F; }
@media (min-width: 1024px) {
  .journey-paper { position: absolute; right: 0; top: -50px; }
  .journey-intro .cs-lead { max-width: 960px; }
  .journey-intro .cs-h2 { max-width: 960px; }
}

/* Journey highlights: 5 stage columns. Rows line up across columns (subgrid). */
.journey { margin-top: 28px; }
.journey__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.journey__head .cs-label { color: var(--color-taupe-text); }
.journey__curve { display: none; }
.stages { display: flex; flex-direction: column; gap: 24px; }
.stage {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  padding: 0 20px 20px;
}
.stage__head { padding: 20px 0 16px; border-bottom: 1px solid var(--color-espresso); }
.stage__mood {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--color-burgundy);
}
.stage__name { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 30px; margin-top: 10px; }
.stage__row { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 24px; border-bottom: 1px solid var(--color-line); }
.stage__row .cs-label { color: var(--color-taupe-text); }
.stage__feel { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 27px; }
.stage__opp { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 24px 20px 28px; background: var(--color-peach); }

@media (min-width: 1024px) {
  .journey { margin-top: 72px; }
  .journey__head { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 0; padding-bottom: 40px; }
  .journey__curve { display: block; position: relative; height: 176px; }
  .journey__curve svg { position: absolute; left: 9.26%; right: 9.26%; top: 60px; width: 81.48%; height: 98px; }
  .journey__points {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }
  .journey__point { position: relative; }
  .journey__point span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 27px;
    color: var(--color-burgundy);
  }
  .journey__point::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid var(--color-burgundy);
    background: var(--color-ivory);
  }
  .journey__point:nth-child(1) span { top: 116px; } .journey__point:nth-child(1)::after { top: 149px; }
  .journey__point:nth-child(2) span { top: 92px; }  .journey__point:nth-child(2)::after { top: 125px; }
  .journey__point:nth-child(3) span { top: 68px; }  .journey__point:nth-child(3)::after { top: 101px; }
  .journey__point:nth-child(4) span { top: 44px; }  .journey__point:nth-child(4)::after { top: 77px; }
  .journey__point:nth-child(5) span { top: 20px; }  .journey__point:nth-child(5)::after { top: 53px; }
  .stage__mood { display: none; }

  .stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 24px;
    row-gap: 0;
    padding-top: 24px;
  }
  .stage {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    border: 0;
    padding: 0;
  }
  .stage__head { padding: 20px 0 24px; border-bottom: 0; border-top: 1px solid var(--color-espresso); }
  .stage__name { font-size: var(--text-h5); line-height: 34px; }
  .stage__row { border-bottom: 0; border-top: 1px solid var(--color-line); padding: 20px 0 28px; }
  .stage__opp { margin-top: 0; }
}

/* Seven questions + annotated homepage */
.teacch { display: flex; flex-direction: column; gap: 28px; }
.feature-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px;
  background: var(--color-cream);
}
.feature-panel__img { align-self: center; width: 100%; max-width: 420px; }
.questions { display: flex; flex-direction: column; gap: 18px; }
.questions li { display: flex; align-items: flex-start; gap: 18px; }
.questions .marker { margin-top: 3px; }
.questions p { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 30px; }
@media (min-width: 1024px) {
  .feature-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    padding: 40px 64px;
  }
  .feature-panel--q { padding: 40px 48px; gap: 88px; }
  .questions { gap: 25px; flex: 1; max-width: 650px; }
  .questions p { font-size: var(--text-h5); line-height: 34px; }
}

/* Phone with a walkthrough (GIF when available, still image otherwise) */
.flow-phone {
  flex: none;
  align-self: center;
  width: min(100%, 350px);
  aspect-ratio: 350 / 719;
  padding: 14px;                  /* bezel (fixed: a % here would be measured from the section width) */
  background: #1A1A1A;
  border-radius: 40px;
  position: relative;
}
.flow-phone::before {             /* notch */
  content: '';
  position: absolute;
  left: 50%;
  top: 1.37%;
  width: 21%;
  height: 2.4%;
  transform: translateX(-50%);
  border-radius: 10px;
  background: #1A1A1A;
  z-index: 1;
}
.flow-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  background: #FFFFFF;
}
.feature-text { display: flex; flex-direction: column; gap: 24px; }
.feature-text .cs-h2 { font-size: 30px; line-height: 34px; }
.feature-text .cs-label { color: var(--color-espresso); font-weight: 500; }
@media (min-width: 1024px) {
  .feature-text { flex: 0 1 700px; }
  .feature-text .cs-h2 { font-size: clamp(40px, 3.33vw, 48px); line-height: 1.125; max-width: 650px; }
  .feature-text .cs-lead { max-width: 650px; }
}
/* On mobile the reminders block shows the phone first, like the others */
@media (max-width: 1023px) { .feature-panel--reverse .flow-phone { order: -1; } }

/* Before / after */
.ba { display: grid; gap: 16px; }
.ba__card { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--color-cream); }
.ba__label { font-size: 13px; line-height: 18px; }
.ba__text { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 27px; }
@media (min-width: 1024px) {
  .ba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ba__text { font-size: var(--text-h6); line-height: 30px; }
}
.revised { display: flex; flex-direction: column; gap: 32px; padding-block: 24px; }
.revised__caption { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .revised { flex-direction: row; align-items: center; gap: 80px; }
  .revised .flow-phone { align-self: auto; }
  .revised__caption { max-width: 480px; }
}
@media (min-width: 1024px) {
  .cs-page--mymaria .cs-section { padding-block: 64px; }
  .cs-page--mymaria .cs-glance { padding-block: 80px; }
  .cs-page--mymaria .cs-outcome { padding-top: 82px; padding-bottom: 96px; }
}


/* 12. CV page ------------------------------------------------------------- */

/* 12a. Hero */
.cv-hero__inner { gap: 16px; }
.cv-hero__role {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-burgundy);
}
.cv-hero__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
  padding-block: 23px;          /* mobile: the design gives the name a 94px-tall line */
}
.cv-hero__rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-olive);
}
.cv-hero__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.cv-hero__details {
  font-size: var(--text-body-sm);
  line-height: 24px;
}
.cv-hero__details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv-hero .link-arrow { color: var(--color-espresso); }

@media (min-width: 1024px) {
  .cv-hero__inner { gap: 20px; padding-top: 202px; padding-bottom: 96px; }
  .cv-hero__name { padding-block: 0; font-size: var(--text-display-title); line-height: 94px; }
  .cv-hero__contact { flex-direction: row; align-items: center; justify-content: space-between; }
  .cv-hero__details { display: flex; line-height: 22px; }
  .cv-hero__details li + li::before { content: '·'; padding-inline: 13px; }  /* "Stockholm · email · LinkedIn" on one line */
}

/* 12b. Body: one row per section — label on the left, content on the right */
.cv-body { padding-top: 48px; padding-bottom: 64px; }
.cv-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 32px;
  border-top: 1px solid var(--color-line);
}
.cv-row--first { padding-top: 0; border-top: 0; }
.cv-row__label { margin: 0; }
.cv-row__label .section-label__rule { width: 40px; }
.cv-row__content { min-width: 0; }

.cv-profile {
  font-size: var(--text-body-lg);
  line-height: 28px;
}

.cv-entries { display: flex; flex-direction: column; gap: 28px; }
.cv-entries--tight { gap: 16px; }
.cv-entry { display: flex; flex-direction: column; gap: 12px; }
.cv-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.cv-entry__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
}
.cv-entry__title--lg { font-size: 26px; line-height: 29px; }
.cv-entry__title a:hover { color: var(--color-burgundy); }
.cv-entry__meta {
  font-size: var(--text-body-sm);
  line-height: 22px;
  color: var(--color-taupe-text);
  white-space: pre-wrap;
}
.cv-entry__list {
  padding-left: 24px;
  list-style: disc;
  font-size: var(--text-body-md);
  line-height: 25px;
}

.cv-details { display: flex; flex-direction: column; gap: 28px; }
.cv-details__col { display: flex; flex-direction: column; gap: 12px; }
.cv-details__title {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-burgundy);
}
.cv-details__text { font-size: var(--text-body-md); line-height: 26px; }

@media (min-width: 1024px) {
  .cv-body { padding-top: 96px; padding-bottom: 120px; }
  .cv-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
    padding-block: 48px;
  }
  .cv-row--first { padding-top: 0; }
  .cv-row__label { flex: 0 0 min(320px, 24%); padding-top: 10px; }
  .cv-row__content { flex: 1; }
  .cv-profile { font-size: var(--text-body-xl); line-height: 30px; }
  .cv-entries { gap: 40px; }
  .cv-entries--tight { gap: 24px; }
  .cv-entry__title { font-size: var(--text-h6); line-height: 30px; }
  .cv-entry__title--lg { font-size: var(--text-h4); line-height: 40px; }
  .cv-entry__list { padding-left: 27px; font-size: var(--text-body-lg); line-height: 28px; }
  .cv-details { flex-direction: row; gap: 48px; }
  .cv-details__col { flex: 1 1 0; }
}