:root {
  --accent: #001489;          /* Reflex Blue (before: navy #160e75, then #012eb8). See colors.html */
  --accent-inverse: #ffeb76;  /* 255 minus each channel of --accent: difference blending on white gives --accent */
  --ink: var(--accent);       /* all text on white is navy */
  --paper: #fff;
  --ph: #e6e6e6;
  --gutter: 20px;
  --side-col: 440px;          /* right-hand column shared by nav + hero list */
  --small: 12px;
  --large: clamp(24px, 3.05vw, 46px);
}

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


html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--small);
  line-height: 1.15;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a { transition: opacity .2s ease; }
a:hover { opacity: .55; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 12px var(--gutter);
  color: #fff;
  transition: background-color .3s ease, color .3s ease, opacity .8s ease 1s;
}
.header.is-solid { background: var(--paper); color: var(--ink); }
.header a:hover { opacity: 1; }

.header__logo {
  /* Geist Medium, uppercase, slightly open, in the same 16px as the menu */
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
/* the flower mark after the name: the brush-drawn flower head from flower-v3.svg (a filled ink
   drawing, wider than tall). 1em tall, turning one petal on hover.
   Its path has the id flower-shape, which the explosion in script.js reuses */
.header__logo-flower {
  flex: none;
  width: auto;
  height: 1em;
  margin: -.04em 0 0 .28em;
  overflow: visible;
  fill: currentColor;
  transform-origin: 48% 50%;
  transition: transform .8s cubic-bezier(.34, 1.4, .64, 1);
}
.header__logo:hover .header__logo-flower { transform: rotate(72deg); }
/* hidden for now (the user is still deciding on the mark). Delete this rule to bring the flower and
   its rain back; script.js skips the rain while the flower is not shown */
.header__logo-flower { display: none; }

/* wordmark v4 (images/flowerhaus-v4.svg: the v2 letters, optically re-spaced), cap height matches the 20px Geist it replaced */
.header__logo-mark { display: block; height: .85em; width: auto; flex: none; }
.header__clock {
  display: flex;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.header__nav {
  display: flex;
  justify-content: space-between;
  width: var(--side-col);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.header__nav a { position: relative; padding: 4px 0; }
.header__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.76, 0, .24, 1);
}
.header__nav a:hover::after,
.header__nav a[aria-current]::after { transform: scaleX(1); }
/* language switcher between the menu and the chat button: only the item for now, the site is not translated yet.
   Small caps like the clock; the language you are reading is full strength, the other one faded */
.header__lang { display: flex; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.header__lang a { opacity: .45; transition: opacity .2s ease; }   /* the other language is faded, the current one is full */
.header__lang a:hover { opacity: 1; }
@media (max-width: 359px) { .header__lang { display: none; } }   /* no room next to the logo, Chat and Menu on the smallest phones */

.header__menu {
  display: none;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #0b0a2b;
}
/* everything after the hero slides over it */
.hero ~ section, .footer {
  position: relative;
  z-index: 1;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--paper);   /* hides the sub-pixel seam where the hero would shine through */
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__tint { opacity: .62; }   /* the gradient lies over the reel, the film shows through */
/* the gradient: alone it is the placeholder, with .hero__tint it is the overlay on the reel */
.hero__media--ph {
  background:
    radial-gradient(60% 70% at 72% 38%, #5b6fd6 0%, transparent 60%),
    radial-gradient(50% 60% at 22% 70%, #c9b8a4 0%, transparent 65%),
    linear-gradient(160deg, #1d1a5c, #07061c);
}
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .1); }

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* lead and services sit up under the header, so the middle of the film is left free */
  align-self: flex-start;
  align-items: flex-start;
  margin-top: 96px;
  padding: 0 var(--gutter);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: opacity .8s ease 1s;
}
.hero__lead { max-width: 100%; }   /* small caps like the services list, around the large list */
.hero__makes {
  margin-left: -.04em;   /* the F starts on the gutter */
  padding: 10px 0 14px;
  font-size: max(3.4vw, 34px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -0.04em;
  text-transform: none;
}
.hero__values { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* services: a window of six rows, the track steps up one row at a time */
.hero__services {
  --row: calc(1.2em + 4px);
  width: var(--side-col);
  height: calc(var(--row) * 6 - 4px);
  overflow: hidden;
}
.hero__services-track { display: flex; flex-direction: column; gap: 4px; }
.hero__services-track li { transition: opacity .7s ease; }
.hero__services-track li:nth-child(n+7) { opacity: 0; }
.hero__services-track.is-stepping {
  transform: translateY(calc(var(--row) * -1));
  transition: transform .7s cubic-bezier(.76, 0, .24, 1);
}
.hero__services-track.is-stepping li:nth-child(1) { opacity: 0; }
.hero__services-track.is-stepping li:nth-child(7) { opacity: 1; }
.hero__services-track.is-resetting li { transition: none; }

.hero__title {
  position: absolute;
  /* two lines set flush right in the bottom right corner. The baseline of "Studio" sits on the same
     line as the bottom of the flower (.1083em = baseline to box bottom at line-height .92) */
  right: calc(var(--gutter) - .02em);
  bottom: calc(var(--gutter) - .1083em);
  z-index: 2;
  font-size: max(6vw, 38px);   /* 6vw, but never smaller than 38px on phones */
  font-weight: 400;
  line-height: .92;
  letter-spacing: -0.04em;
  text-align: right;
  color: #fff;   /* plain white on the reel (it used to blend as a difference) */
  pointer-events: none;
  transition: opacity .8s ease 1s, transform 1.1s cubic-bezier(.22, 1, .36, 1) 1s;
}
/* the flower: bottom-left, a 3D wireframe turning around its stem (script.js) */
.hero__flower {
  position: absolute;
  left: var(--gutter);   /* bottom left, the title has the right corner */
  bottom: var(--gutter);
  z-index: 2;
  width: clamp(56px, 6.5vw, 104px);
  pointer-events: none;                /* plain white, on the loading screen and on the hero */
  transition: transform 1.3s cubic-bezier(.76, 0, .24, 1);
}
.hero__flower svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: .03;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* brand-coloured cover the white flower sits on while loading */
.hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(.76, 0, .24, 1);
}

/* Loading state: html.is-loading is set inline in <head> and removed by script.js.
   The white flower spins in the middle of a brand-blue screen, then travels to its corner. */
.is-loading { overflow: hidden; }
.is-loading .hero__reveal { opacity: 1; }
.is-loading .hero__flower {
  transform:
    translate(calc(50vw - var(--gutter) - 50%), calc(-50vh + var(--gutter) + 50%))
    scale(2.2);
}
.is-loading .header,
.is-loading .hero__container,
.is-loading .hero__title { opacity: 0; }
.is-loading .hero__title { transform: translateY(30%); }
.is-loading .header,
.is-loading .hero__container,
.is-loading .hero__title,
.is-loading .hero__flower,
.is-loading .hero__reveal { transition: none; }

/* ---------- Services: what we do ---------- */

.services { padding: 120px var(--gutter) 60px; }
.services--page { padding-top: 132px; padding-bottom: 0; }   /* own page: clears the fixed header */
.services--page .statement__more { padding-top: 120px; }
.services__lead {
  max-width: 34em;
  padding: 24px 0 80px;
  font-size: var(--large);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px var(--gutter);
}
.service { padding-top: 12px; border-top: 1px solid var(--accent); }
.service__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: .45;
}
.service__name {
  margin: 0;
  padding: 28px 0 12px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.service__text { max-width: 22em; min-height: 4.05em; font-size: 16px; line-height: 1.35; letter-spacing: 0; }   /* three lines, so the lists line up */
.service__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 28px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.service__list li::before { content: "\21B3\00a0"; opacity: .45; }

/* ---------- Sub pages (work, studio): shared bits ---------- */

/* every sub page starts the same distance below the fixed header */
.subpage { padding: 132px var(--gutter) 0; }
.subpage--work .filters { padding-top: 36px; }
/* same size as the big text on the front page and the services page */
.subpage--work .subpage__lead { max-width: 34em; font-size: var(--large); line-height: 1.08; letter-spacing: -0.035em; }
.subpage--people { padding-top: 120px; }
.subpage--end { padding-top: 120px; }
.subpage--end .statement__more { padding-top: 0; }
.subpage__lead {
  margin: 0;
  max-width: 22em;
  font-size: clamp(32px, 4.6vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

/* ---------- Work page ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 72px 0 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.filters__btn {
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: .45;
  cursor: pointer;
  transition: opacity .2s ease;
}
.filters__btn:hover, .filters__btn[aria-pressed="true"] { opacity: 1; }

/* project grid, laid out like goodside.studio/work: three columns of almost square images with
   hairline gaps, and under each a small title in caps, a short description and the services.
   .grid.grid--large: two classes, so it beats the four column .grid further down */
.grid.grid--large { grid-template-columns: repeat(3, 1fr); gap: 52px 8px; }
.grid.grid--large .card__image { aspect-ratio: 465 / 451; }
.grid.grid--large .card[hidden] { display: none; }
.card__body { padding-top: 12px; }
/* three lines per project: name, a short description (max 60 characters), the services.
   All three share size, weight and line height; they differ only in caps, italic and tone */
.card__title, .card__text, .card__services { margin: 0; padding: 0; font-size: var(--small); font-weight: 400; line-height: 18px; letter-spacing: 0; }   /* 12px, as under the projects on the front page */
.card__title { letter-spacing: 0.02em; text-transform: uppercase; }
.card__text { font-style: italic; }       /* Geist Italic, a real italic cut that is only loaded on work.html */
.card__services { opacity: .5; }
.card__caption .card__services { padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }

/* ---------- Studio page ---------- */

.studio__text {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 72px 0 110px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.studio__text p:first-child { grid-column: 3; }
.studio__text p { grid-column: 4; }
.studio__facts .service__name { padding-top: 20px; font-size: 24px; }
.statement--values { padding-top: 40px; }
/* Studio: why Flowerhaus. The line across the first three columns, the two paragraphs below in the last two */
.studio__why { padding-top: 120px; }   /* after the people, before the client list */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding-top: 32px; align-items: start; }
.why__lead { grid-column: 1 / span 3; margin: 0; font-size: clamp(32px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -0.04em; }
.why__text { grid-row: 2; padding-top: 40px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.why__text:nth-of-type(2) { grid-column: 3; }
.why__text:nth-of-type(3) { grid-column: 4; }
/* Front page statement: the same layout, one paragraph across the last two columns */
.statement__intro { padding-top: 0; }
.statement__intro .why__text { grid-column: 3 / span 2; max-width: 34em; }
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr 1fr; }
  .why__lead { grid-column: 1 / span 2; }
  .why__text, .why__text:nth-of-type(2), .why__text:nth-of-type(3) { grid-row: auto; grid-column: auto; padding-top: 12px; }
  .statement__intro .why__text { grid-column: 1 / span 2; }
}
@media (max-width: 600px) {
  .why__text, .why__text:nth-of-type(2), .why__text:nth-of-type(3) { grid-column: 1 / span 2; }
}

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px var(--gutter); padding-top: 16px; }
.person__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.person__image--empty { display: flex; align-items: center; border: 1px solid var(--accent); color: var(--accent); }
.person__image--empty svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.person__image--empty path { vector-effect: non-scaling-stroke; }
.person__name { margin: 0; padding-top: 10px; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.person__role { font-size: 16px; letter-spacing: 0; opacity: .55; }
.person__mail { padding-top: 6px; font-size: 16px; letter-spacing: 0; }
.person__mail a { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

/* ---------- Garden page ---------- */

.garden__intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  align-items: end;
  padding: 4px 0 clamp(64px, 6vw, 104px);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.garden__plant { grid-column: 2; justify-self: end; width: clamp(130px, 14vw, 250px); margin-right: 12%; }
.garden__plant svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.garden__plant path { vector-effect: non-scaling-stroke; }
/* the two paragraphs start on the same line; the longer one ends level with the foot of the plant */
.garden__text { grid-column: 3 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.services--flat { padding-top: 0; padding-bottom: 110px; }
.services--flat .services__grid { padding-top: 16px; }
.step .value__flower { margin-bottom: 12px; }
.reasons .service__name { padding-top: 16px; font-size: 24px; }
.reasons .service__text { min-height: 0; }

/* references on the garden page: each product is shown as a small line drawing of its own screen */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--gutter); padding-top: 16px; }
.case__mock {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--accent);
  font-size: clamp(11px, .95vw, 14px);        /* the drawing scales with its frame */
  line-height: 1.35;
  letter-spacing: 0;
}
.case__mock:hover { opacity: 1; }
/* on hover the line drawing gives way to a screenshot of the real interface, wiped in from
   below inside the drawn browser window */
.mock__screen { position: relative; flex: 1; display: block; overflow: hidden; }
.mock__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .case__mock:hover .mock__shot { clip-path: inset(0); transform: none; }
}
.case__mock:focus-visible .mock__shot { clip-path: inset(0); transform: none; }
.mock__bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--accent); }
.mock__bar i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.mock__bar b { margin: 0 auto; padding-right: 31px; font-weight: 500; letter-spacing: 0.02em; }
.mock__body { display: flex; flex-direction: column; gap: .8em; padding: 1.6em clamp(16px, 5%, 48px); }
.mock__label { padding-top: 4px; font-size: .8em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; opacity: .5; }
.mock__text { max-width: 46em; font-size: 1.1em; }
.mock__row { display: flex; gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.mock__row b, .mock__item b { font-weight: 500; }
.mock__row b { display: block; }
.mock__face { flex: none; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; }
.mock__search, .mock__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.mock__search { margin-bottom: 4px; opacity: .6; }
.mock__item { grid-template-columns: minmax(0, 9em) 1fr auto; border-width: 0 0 1px; padding: 8px 2px; }
.mock__item span { opacity: .55; }
.mock__search em, .mock__item em { padding: 2px 7px; border: 1px solid currentColor; border-radius: 99px; font-size: .8em; font-style: normal; }
.mock__item em.is-eu { background: var(--accent); color: var(--paper); }
.case__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding-top: 12px; }
.case__story { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.35; letter-spacing: 0; }

/* ---------- Case pages (angst.html is the first) ---------- */

/* four facts on top, then a second row built the same way: a rule and a label over each block,
   so press and the story start on the same line */
.casepage__info .contact__grid { grid-template-columns: repeat(4, 1fr); }
.casepage__lower { padding-top: 56px; }
.casepage__press { grid-column: 1 / span 2; }
.casepage__text { grid-column: 3 / span 2; }
/* the four reviews spread across the whole block, stars under the paper they belong to */
/* as many columns as fit, each wide enough for the longest name (JydskeVestkysten) */
.press { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: 32px var(--gutter); padding-top: 12px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.press > li { display: flex; flex-direction: column; align-items: flex-start; }
.press a { display: inline-block; }
.press a > span { display: inline-block; transition: transform .25s ease; }
.press a:hover { opacity: 1; }
.press a:hover > span { transform: translateX(.2em); }
/* a short note under the links, in the size of the About text */
.casepage__press-note { max-width: 22em; padding-top: 24px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
/* the rating: six stars spread across the width of the name above, four in full brand blue */
/* the rating: six stars under the name, four in full brand blue */
.press__stars {
  display: flex;
  gap: 4px;
  padding-top: 8px;
  font-size: 20px;   /* same size as the name above */
  line-height: 1;
}
.press__stars i { font-style: normal; opacity: .18; }
.press__stars i.is-on { opacity: 1; }
.casepage__text > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding-top: 12px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.casepage__head { padding-bottom: 40px; }
/* same size as the headline on the studio page */
.casepage__title {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.6vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
/* the line under the case title */
.casepage__head .subpage__lead { max-width: none; font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; }
.casepage__hero { margin: 0; padding: 0 var(--gutter); }
.casepage__hero img, .casepage__hero video, .shot img, .shot video { display: block; width: 100%; height: auto; }
.casepage__hero video { background: #000; }
/* full-screen case film: edge to edge under the transparent header, the title follows below */
.casepage__hero--full { position: relative; height: 100vh; height: 100svh; padding: 0; background: #000; }
.casepage__hero--full video { height: 100%; object-fit: cover; }
.casepage__hero--full::before {   /* a soft shade at the top keeps the white header readable on light frames */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 140px;
  background: linear-gradient(rgba(0, 0, 0, .35), transparent);
  pointer-events: none;
}
.casepage__hero--full .sound-toggle { z-index: 2; bottom: 32px; }
/* the case title on the film: white, bottom left on the gutter, over a soft shade */
.casepage__head--on-film {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 160px var(--gutter) 32px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45));
}
.casepage__head--on-film .casepage__title,
.casepage__head--on-film .subpage__lead { color: inherit; }
/* the looping hero film: the whole film is the button, the label in the corner says what a click does */
.js-sound { position: relative; cursor: pointer; }
.sound-toggle {
  position: absolute;
  right: calc(var(--gutter) + 20px);
  bottom: 20px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 16px;   /* same size as the menu */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(0, 0, 0, .35);   /* stays readable on light frames */
}
/* a full-width row of three portrait photos, cropped to one shared ratio */
.shot-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shot-row img { aspect-ratio: 2 / 3; object-fit: cover; }
/* column widths follow the two aspect ratios (4957:1892 and 4:3), so both end at the same height */
.drawing-row { display: grid; grid-template-columns: 2.62fr 1.333fr; gap: 8px; margin-top: 16px; }
.shot--loop video { height: 100%; object-fit: cover; }
/* a titled chapter further down a case: a label and a short note over its own shots */
.casepage__section { padding-top: 88px; }
.casepage__section-head { padding: 0 var(--gutter) 16px; }
.casepage__note { max-width: 40em; padding-top: 12px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
/* a full film from Vimeo, same width as the shots */
.casepage__film { margin: 0; padding: 0 var(--gutter); }
.casepage__film iframe,
.casepage__film > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.casepage__shots--after-film { margin-top: 32px; }
/* film page (like jjfilm.com): the film edge to edge right under the fixed header, then the title */
.casepage__film--top { position: relative; padding: 0; }
.casepage__head--after-film { padding-top: 56px; }
.casepage__more .grid { padding: 0 var(--gutter); }
.casepage__shots.casepage__stills { gap: 0; }   /* film stills run into each other, like one strip of film */
.casepage__shots.casepage__stills.casepage__section { padding-top: 56px; }   /* a little air between a film and its stills */
/* a silent loop in front of a Vimeo film; a click fades it out and starts the film (script.js) */
.film-cover {
  position: absolute;
  inset: 0;
  z-index: 1;               /* under the shade for the header, over the film */
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  transition: opacity .6s ease, visibility .6s;
}
.film-cover video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-cover__label {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 20px;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 76px);   /* same size as the case titles: 76px on a large screen */
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.js-film-cover.is-playing .film-cover { opacity: 0; visibility: hidden; }
/* on a mouse: the pointer becomes a small white dot (script.js moves it), which grows over "Play film".
   Touch screens keep the plain cover and the label */
.film-cover__dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;               /* under the label */
  width: 12px;
  height: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.film-cover__dot span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.film-cover.is-on-label .film-cover__dot span { transform: scale(6); }
.film-cover.is-on-label .film-cover__label { color: var(--accent); }   /* blue on the white dot */
/* a film whose Vimeo link is not ready: the loop plays, nothing to click */
.js-film-cover.is-pending .film-cover { cursor: default; }
.js-film-cover.is-pending .film-cover__dot { display: none; }
.film-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a smaller gallery: three across (two on tablets, one on phones) */
.casepage__shots.shot-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .casepage__shots.shot-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .casepage__shots.shot-grid-3 { grid-template-columns: 1fr; } }
/* the line under a film on a page with more than one: number, title, what happens, length */
.film-caption { padding-top: 20px; }
.film-caption__text { grid-column: span 2; }
@media (max-width: 900px) { .film-caption__text { grid-column: 1 / -1; } }
/* a quote from the client, in the size of the case leads */
.casepage__quote { margin: 12px 0 0; }
.casepage__quote p { max-width: 34em; font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; }
.casepage__quote footer { padding-top: 16px; font-size: 14px; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .film-cover { cursor: none; }
  .film-cover.is-pointing .film-cover__dot { opacity: 1; }
}
.shot figcaption { padding-top: 6px; font-size: 12px; line-height: 1.3; }
.shot-row--two { grid-template-columns: repeat(2, 1fr); }
.shot-row--two img { aspect-ratio: auto; }
/* Grænseløs visual parts: fr = each clip's width / height (box, blue skies, strokes, storm) */
.shot-row--visuals { grid-template-columns: 1.511fr .744fr 1.538fr 1.65fr; align-items: start; }
/* Den Store Krig: fourteen actor portraits in one row, and a row of four set photos */
.shot-row--cast { grid-template-columns: repeat(7, 1fr); }
.shot-row--cast img { aspect-ratio: 600 / 1066; }
.shot-row--four { grid-template-columns: repeat(4, 1fr); }
.shot--crop video { aspect-ratio: 2 / 3; object-fit: cover; }
/* a looping teaser that plays the full film on click: the label sits top left and goes once it plays */
.js-play-full { position: relative; cursor: pointer; }
/* a square film beside two 2:3 photos: 1.5 times as wide, so all three share one height uncropped */
.shot-row--film { grid-template-columns: 1.5fr 1fr 1fr; }
/* Guldhornene BTS: a 4:3 photo and two 9:16 phone clips; widths follow the ratios, so all three share one height */
.shot-row--bts { grid-template-columns: 1.3333fr .5625fr .5625fr; align-items: start; }
.shot-row--bts img { aspect-ratio: 4 / 3; }
.shot-row--bts video { aspect-ratio: 9 / 16; }
/* an upright 2:3 photo beside a 3:2 one; widths follow the ratios, so both share one height uncropped */
.shot-row--mix { grid-template-columns: .6667fr 1.5fr; align-items: start; }
.shot-row--mix-r { grid-template-columns: 1.5fr .6667fr; align-items: start; }
.shot-row--mix img, .shot-row--mix-r img { aspect-ratio: auto; }
/* SPEKTRUM: a 9:16 phone clip, a 2:3 photo and a 16:9 still in one row */
.shot-row--ceiling { grid-template-columns: .5625fr .6667fr 1.7778fr; align-items: start; }
.shot-row--ceiling img { aspect-ratio: auto; }
/* SPEKTRUM: a 2:3 photo beside a 16:9 loop */
.shot-row--setup { grid-template-columns: .6667fr 1.7778fr; align-items: start; }
.shot-row--setup img { aspect-ratio: auto; }
/* Søfarer: a 3:2 photo beside the 16:9 spot; widths follow the ratios, so both share one height uncropped */
.shot-row--spot { grid-template-columns: 1.5fr 1.7778fr; align-items: start; }
.shot-row--spot img { aspect-ratio: auto; }
.shot-row--spot .sound-toggle { right: 20px; }
/* Søfarer: the globe film in a round mask next to a wide shot of guests; columns follow 1:1 and 16:9, so both cells are the same height */
.shot-row--globe { grid-template-columns: 1fr 1.7778fr; align-items: center; }
.shot--globe video { width: 88%; margin: 0 auto; aspect-ratio: 1 / 1; clip-path: circle(50%); }
.js-play-full .sound-toggle { top: 16px; right: auto; bottom: auto; left: 16px; }
.js-play-full.is-playing { cursor: auto; }
.js-play-full.is-playing .sound-toggle { display: none; }
.casepage__info { padding: 56px var(--gutter); }
.casepage__fact { padding-top: 12px; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.casepage__shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 var(--gutter);
}
.shot { margin: 0; overflow: hidden; }
.shot--wide { grid-column: 1 / -1; }
.casepage__drawing { padding-top: 88px; }
.shot--drawing { border: 1px solid var(--accent); }
.shot a:hover { opacity: 1; }   /* a linked image stays as it is on hover */
.press__source a { display: inline-block; }
.press__source span { display: inline-block; transition: transform .25s ease; }
.press__source a:hover { opacity: 1; }
.press__source a:hover span { transform: translateX(.2em); }
.casepage__credits { padding-top: 32px; }   /* sits close under the drawing, like a caption */
.casepage__credits .casepage__fact { font-size: 14px; line-height: 1.35; letter-spacing: -0.005em; }   /* quieter than the facts at the top */
.casepage__credits .contact__item { border-top: 0; }
.casepage__next { grid-column: -2; }   /* always the last column, whatever the column count */

/* ---------- Contact page ---------- */

.contact { padding: 132px var(--gutter) 0; }
.contact__lead {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: clamp(40px, 7.4vw, 124px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.contact__lead a { display: inline-block; }
.contact__lead .arrow-link__arrow { display: inline-block; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.contact__lead a:hover .arrow-link__arrow { transform: translateX(.18em); }

.contact__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 36px 0 110px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.contact__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; }
.contact__status.is-in .contact__dot { opacity: 1; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px var(--gutter);
}
.contact__item { padding-top: 12px; border-top: 1px solid var(--accent); }
.contact__lines { padding-bottom: 20px; font-size: 16px; line-height: 1.45; letter-spacing: 0; }
.contact__lines a { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.contact__role { opacity: .55; }
.contact__more { font-size: 16px; letter-spacing: 0; }

/* ---------- Work grid ---------- */

.work { padding: 60px var(--gutter) 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px var(--gutter);
}

.card a { display: block; }
.card__image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  display: block;
}
.card__caption { padding-top: 6px; }

/* hover: the image zooms in a little inside its frame (like goodside.studio); the other
   projects are left alone. Used on the front page and on the work page */
.card { transition: opacity .45s ease, transform .6s ease; }
.card a:hover { opacity: 1; }
.card__media { overflow: hidden; }
.card__media .card__image { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .card a:hover .card__media .card__image { transform: scale(1.05); }
}

/* reveal on scroll */
.card.is-hidden { opacity: 0; transform: translateY(12px); }

.work__more,
.statement__more {
  font-size: var(--large);
  letter-spacing: -0.035em;
}
.work__more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding-top: 70px;
}
.work__more a { grid-column: 4; justify-self: start; }   /* lines up with the last image */

.arrow-link {
  border-bottom: .06em solid currentColor;
  padding-bottom: .02em;
}
.arrow-link > span:last-child { display: inline-block; transition: transform .25s ease; }
.arrow-link:hover > span:last-child { transform: translateX(.2em); }

/* "Let us have coffee": the drink glitches into something else on hover (script.js) */
.coffee-link:hover { opacity: 1; }
.coffee-link__drink { display: inline-block; white-space: pre; }
.coffee-link__drink.is-glitching { animation: glitch .45s steps(2, jump-none) both; }
@keyframes glitch {
  0%   { transform: translate(0, 0) skewX(0deg);       text-shadow: .04em 0 #ff2e63, -.04em 0 #21e6c1; }
  25%  { transform: translate(-.03em, .02em) skewX(-8deg); text-shadow: -.05em 0 #ff2e63, .05em 0 #21e6c1; }
  50%  { transform: translate(.03em, -.02em) skewX(6deg);  text-shadow: .03em 0 #ff2e63, -.06em 0 #21e6c1; }
  75%  { transform: translate(-.02em, 0) skewX(-3deg);  text-shadow: -.03em 0 #ff2e63, .03em 0 #21e6c1; }
  100% { transform: none; text-shadow: none; }
}

/* ---------- Statement ---------- */

.statement {
  padding: 120px var(--gutter) 0;
  font-size: var(--large);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.statement p { max-width: 34em; }
.statement__more { padding-top: 1em; }

/* ---------- Values: eight flowers ---------- */

.values__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding-top: 80px; }
.section-title,
.values__title,
.values__hint {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.values {
  display: grid;
  grid-template-columns: repeat(8, 1fr);   /* all eight on one row */
  gap: 28px var(--gutter);
  padding: 16px 0 80px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.value__flower {
  overflow: hidden;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.value__flower svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.value__flower path { vector-effect: non-scaling-stroke; }
.values__hint { max-width: none; font-size: 14px; line-height: 1; opacity: .45; }

.value__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.value__flower { display: block; transition: background-color .45s ease, color .45s ease; }
@media (hover: hover) {
  .value__button:hover .value__flower { background: color-mix(in srgb, var(--accent) 7%, transparent); }
}
.value__label { display: block; padding-top: 8px; text-wrap: balance; }
.value__num { display: block; padding-bottom: 2px; opacity: .45; }

/* the chosen favorite: colours inverted */
.value.is-favorite .value__flower,
.value.is-favorite .value__button:hover .value__flower { background: var(--accent); color: var(--paper); }
.value.is-favorite .value__num { opacity: 1; }
.value.is-bursting .value__flower svg { animation: value-pop .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes value-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* flowers raining from the logo flower (script.js). The layer difference-blends with the page and
   the flowers carry the inverse of the brand colour, so they are cream over the dark hero and
   exactly brand blue over the white sections */
.fx-rain {
  position: fixed;
  inset: 0;
  z-index: 101;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: difference;
}
.fx-rain__flower {
  position: absolute;
  height: auto;
  overflow: visible;
  fill: var(--accent-inverse);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* the wild part (script.js): a wave that inverts the whole page, and flying petals */
.fx-wave {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--accent-inverse);   /* difference blending: white turns blue, blue turns yellow */
  mix-blend-mode: difference;
  pointer-events: none;
}
.fx-petal {
  position: fixed;
  z-index: 99;
  border: 1.6px solid var(--accent);
  border-radius: 80% 0 80% 0;
  pointer-events: none;
}
.fx-petal--solid { background: var(--accent); }

/* ---------- Index ---------- */

.index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 120px var(--gutter) 0;
}
.small-title { margin: 0; font-size: var(--small); font-weight: 400; }
.index__list {
  grid-column: 3 / span 2;
  font-size: 16px;
  line-height: 1.25;
}

/* ---------- Exhibitions list (work page): laid out like kinnstudio.dk/work, on our four columns ---------- */

.exlist { padding: 120px var(--gutter) 0; }
.exlist { --exlist-cols: 1fr 1.7fr 1.1fr .6fr; }   /* a wider title column keeps the long names on one line */
.exlist__head {
  display: grid;
  grid-template-columns: var(--exlist-cols);
  gap: 12px var(--gutter);
  align-items: baseline;
  padding-bottom: 40px;
}
.exlist__intro { grid-column: 2 / span 3; margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.exlist__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--accent); }
.exlist__row {
  display: grid;
  grid-template-columns: var(--exlist-cols);
  gap: 4px var(--gutter);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}
.exlist__list > li:first-child .exlist__row,
.exlist__list > li.exlist__row:first-child { border-top-color: var(--accent); }   /* a full line on top, like the fact rows */
.exlist__list > li:not(.exlist__row) { display: contents; }
.exlist__year, .exlist__where, .exlist__case { opacity: .45; }
.exlist__where { opacity: .6; }
.exlist__case { justify-self: end; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.exlist__case span { display: inline-block; transition: transform .25s ease; }
a.exlist__row:hover { opacity: 1; }
a.exlist__row:hover .exlist__title { text-decoration: underline 1px; text-underline-offset: 4px; }
a.exlist__row:hover .exlist__case { opacity: 1; }
a.exlist__row:hover .exlist__case span { transform: translateX(.2em); }
@media (max-width: 809px) {
  .exlist { padding-top: 80px; }
  .exlist__head { grid-template-columns: 1fr; padding-bottom: 28px; }
  .exlist__intro { grid-column: auto; font-size: 18px; }
  /* year in a narrow column, title with the place under it, the case link after them */
  .exlist__row { grid-template-columns: 56px 1fr; }
  .exlist__year { grid-row: 1 / span 3; }
  .exlist__title, .exlist__where, .exlist__case { grid-column: 2; }
  .exlist__case { justify-self: start; padding-top: 4px; }
}

/* ---------- Footer ---------- */

.footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 100px var(--gutter) var(--gutter);
}

/* ---------- Image placeholders (remove once real images are in) ---------- */

.ph { background: var(--ph); }
.ph--1 { background: linear-gradient(160deg, #d4dcf7, var(--accent)); }
.ph--2 { background: linear-gradient(200deg, #efe7dc, #b9a88f); }
.ph--3 { background: linear-gradient(140deg, #dfe8e2, #6f8a7a); }
.ph--4 { background: linear-gradient(180deg, #f4d9d0, #c9644a); }
.ph--5 { background: linear-gradient(150deg, #e9e9e9, #8d8d8d); }
.ph--6 { background: linear-gradient(210deg, #dbe6f3, #3e5f8a); }
.ph--7 { background: linear-gradient(170deg, #f3ecd2, #c2a53a); }
.ph--8 { background: linear-gradient(135deg, #e6dcec, #6b4a82); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .br-wide { display: none; }   /* let the text wrap by itself on phones */
}

@media (max-width: 900px) {
  .grid, .services__grid, .contact__grid, .people { grid-template-columns: repeat(2, 1fr); }
  .studio__text { grid-template-columns: 1fr 1fr; }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .casepage__shots, .shot-row { grid-template-columns: 1fr; }
  .shot-row--cast { grid-template-columns: repeat(4, 1fr); }
  .shot-row--four { grid-template-columns: repeat(2, 1fr); }
  .drawing-row { grid-template-columns: 1fr; }
  .casepage__info .contact__grid { grid-template-columns: repeat(2, 1fr); }
  .casepage__press, .casepage__text { grid-column: 1 / span 2; }
  .casepage__text > div { grid-template-columns: 1fr; }
  .case__mock { font-size: clamp(11px, 1.75vw, 15px); }   /* one column: the frame is twice as wide */
  .garden__intro { grid-template-columns: 1fr 1fr; padding-top: 32px; }
  .garden__plant { grid-column: 1 / span 2; justify-self: start; margin: 0 0 12px; }
  .garden__text { grid-column: 1 / span 2; }
  .studio__text p:first-child, .studio__text p { grid-column: auto; }
  .grid.grid--large { grid-template-columns: repeat(2, 1fr); }
  .work__more a { grid-column: 3 / span 2; }
  .index__list { grid-column: 1 / span 4; }
  .small-title { grid-column: 1 / span 4; }
  .footer { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}

@media (max-width: 809px) {
  .header__clock, .hero__services { display: none; }
  .header__menu { display: block; }
  .header__nav {
    position: absolute;
    inset: 52px 0 auto 0;
    width: auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px var(--gutter) 20px;
    background: var(--paper);
    color: var(--ink);
    font-size: 32px;
    letter-spacing: -0.03em;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s;
  }
  .header.is-open { background: var(--paper); color: var(--ink); }
  .header.is-open .header__nav { visibility: visible; opacity: 1; }
}

@media (max-width: 600px) {
  .services__grid, .contact__grid, .grid.grid--large, .studio__text, .garden__intro, .garden__text, .case__body { grid-template-columns: 1fr; }
  .case__mock { aspect-ratio: auto; }
  .garden__plant, .garden__text { grid-column: 1; }   /* after the 900px rule so it wins */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .arrow-link span, .card__media .card__image, .mock__shot { transition: none; }
  .coffee-link__drink.is-glitching, .contact__dot { animation: none !important; }
  .header, .hero__container, .hero__title, .hero__reveal, .hero__flower, .header__logo-flower,
  .hero__services-track.is-stepping, .hero__services-track li { transition: none; }
  .card.is-hidden { opacity: 1; transform: none; }
}

/* ---------- 404: a wilted flower, drawn like the values ---------- */

/* the line of the value flowers, free-standing */
.wilted { width: clamp(200px, 22vw, 320px); margin-bottom: 40px; color: var(--accent); }
.wilted svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wilted path { vector-effect: non-scaling-stroke; }

/* ---------- FLOW: content subscription (services page), set up as a small product of its own ---------- */

.flow { padding-top: 180px; }
/* the name big on the left, the pitch on the right, under one blue line */
.flow__head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  align-items: start;
  padding-top: 12px;
  border-top: 1px solid var(--accent);
}
.flow__head > div:first-child { grid-column: 1 / span 2; }
.flow__title {
  margin: 0;
  padding-top: 28px;
  font-size: clamp(88px, 14vw, 230px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -0.06em;
}
.flow__pitch { grid-column: 3 / span 2; padding-top: 40px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.flow__lead { padding-bottom: 20px; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; }
.flow__label { padding: 120px 0 16px; }
.flow__cards .service__name, .flow__why .service__name, .flow__steps .service__name { font-size: 24px; }
.flow__cards .service__text, .flow__why .service__text { min-height: 0; }
.flow__why .service__name { padding-top: 20px; }
.flow__why .flow__icon { margin-top: 20px; }
/* how it works: the process drawn on the left half, the four steps two by two on the right half */
.flow__how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px var(--gutter); align-items: center; padding-top: 32px; }   /* the steps sit centred beside the drawing */
.flow__process { grid-column: 1 / span 2; margin: 0; padding: 0 calc(var(--gutter) * 2) 0 0; color: var(--accent); }
.flow__process svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow__line { fill: none; stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.flow__thin { fill: none; stroke: currentColor; stroke-width: 0.8px; vector-effect: non-scaling-stroke; }
.flow__dots { fill: none; stroke: currentColor; stroke-width: 2.4px; stroke-dasharray: 0 8; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.flow__stops circle { fill: var(--paper); stroke: currentColor; stroke-width: 0.8px; vector-effect: non-scaling-stroke; }
.flow__labels text { fill: currentColor; font-family: inherit; font-size: 40px; letter-spacing: -0.01em; text-anchor: middle; dominant-baseline: central; }
.flow__letters text { font-size: 48px; }
.flow__small text { font-size: 30px; }
.flow__steps { grid-column: 3 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gutter); margin: 0; padding: 0; list-style: none; }
.flow__steps .service__text { min-height: 0; }
/* examples of FLOW content: four across and two rows, cropped 4:5 like posts in a feed */
.flow__examples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 8px; }
.flow__example { margin: 0; }
.flow__example video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ph); }
.flow__example figcaption { padding-top: 8px; font-size: var(--small); line-height: 18px; }
.flow__example figcaption span { opacity: .5; }
/* the (How it works) heading with "Ask Flora about FLOW" right beside it; the coffee link below stays the big call to action */
.flow__how-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
/* "Ask Flora about FLOW" looks like the Chat button in the header: a dot, a light blue field, the menu's type */
.flow__ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color .25s ease;
}
.flow__ask i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.flow__ask span { display: inline-block; transition: transform .25s ease; }
.flow__ask:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.flow__ask:hover span { transform: translateX(.2em); }
@media (max-width: 1024px) {
  .flow__head > div:first-child { grid-column: 1 / -1; }
  .flow__pitch { grid-column: 1 / -1; padding-top: 16px; }
  .flow__process { grid-column: 1 / -1; padding-right: 0; }
  .flow__steps { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .flow { padding-top: 120px; }
  .flow__lead { font-size: 22px; }
  .flow__label { padding-top: 80px; }
  .flow__process { display: none; }   /* the steps say the same in words */
  .flow__steps { grid-template-columns: 1fr; }
  .flow__examples { grid-template-columns: repeat(2, 1fr); }
}
/* hand-drawn line icons for the FLOW cards (originals in images/flow-icons), in the site's thin blue line: 1.6 in a 96 grid at 72px = 1.2px */
.flow__icon { display: block; width: 72px; height: 72px; margin-top: 24px; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 1.2px; stroke-linejoin: round; stroke-linecap: round; }
.flow__icon * { vector-effect: non-scaling-stroke; }
.flow__cards .service__name { padding-top: 20px; }