/* ==========================================================================
   Leonardo – stylesheet
   Every colour, spacing, radius, type size and grid value below mirrors the
   original site. Breakpoint "lg" = 64rem (1024px), same as the original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   The original uses TWK Lausanne (weltkern.com). Until the licensed files are in
   /fonts the page uses Inter (loaded from Google Fonts in index.html).
   The @font-face rules below are switched off while the files are missing, so
   no page load wastes requests on font files that are not there. When the files are in
   /fonts with these names: delete the line "FONT FILES MISSING – START" and the
   line "FONT FILES MISSING – END" below.
   -------------------------------------------------------------------------- */
/* FONT FILES MISSING – START
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-500.woff2") format("woff2"), url("fonts/TWKLausanne-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-500Italic.woff2") format("woff2"), url("fonts/TWKLausanne-500Italic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-700.woff2") format("woff2"), url("fonts/TWKLausanne-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-700Italic.woff2") format("woff2"), url("fonts/TWKLausanne-700Italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-750.woff2") format("woff2"), url("fonts/TWKLausanne-750.woff") format("woff"); font-weight: 750; font-style: normal; font-display: swap; }
@font-face { font-family: "TWKLausanne"; src: url("fonts/TWKLausanne-750Italic.woff2") format("woff2"), url("fonts/TWKLausanne-750Italic.woff") format("woff"); font-weight: 750; font-style: italic; font-display: swap; }
   STK Bureau Serif – commercial, not bundled.
   Drop the licensed files into /fonts with these names; until then Source Serif 4
   (Google Fonts, loaded in index.html) is used as fallback.
@font-face { font-family: "STK Bureau Serif"; src: url("fonts/STKBureauSerif-Regular.woff2") format("woff2"), url("fonts/STKBureauSerif-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
FONT FILES MISSING – END */
/* Metric-adjusted Arial, identical to the original's last-resort fallback */
@font-face { font-family: "TWKLausanne Fallback"; src: local("Arial"); ascent-override: 87.94%; descent-override: 19.32%; line-gap-override: 0%; size-adjust: 103.61%; }

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --color-white: #fafafa;
  --color-black: #0c0c0c;
  --color-lightgray: #eaeaea;
  --color-darkgray: #868686;   /* footer clock; was #909090, a shade darker so it is readable on the grey */
  --color-accent: #09FE51;   /* originalet: #FF350C (orange) */

  /* z-index scale */
  --z-loader: 9999;
  --z-grid: 8888;
  --z-header: 2222;
  --z-subnav: 1111;
  --z-modal: 999;
  --z-footer: 888;
  --z-inquire: 777;

  /* 12-column grid: 8px gutters, 8px outer padding */
  --grid-cols: 12;
  --grid-gap: 8px;
  --grid-px: 8px;
  --grid-col-unit: calc((100vw - (var(--grid-px) * 2) - ((var(--grid-cols) - 1) * var(--grid-gap))) / var(--grid-cols));
  --cols-1: calc(var(--grid-col-unit) * 1);
  --cols-2: calc(var(--grid-col-unit) * 2 + var(--grid-gap) * 1);
  --cols-3: calc(var(--grid-col-unit) * 3 + var(--grid-gap) * 2);
  --cols-4: calc(var(--grid-col-unit) * 4 + var(--grid-gap) * 3);
  --cols-5: calc(var(--grid-col-unit) * 5 + var(--grid-gap) * 4);
  --cols-6: calc(var(--grid-col-unit) * 6 + var(--grid-gap) * 5);
  --cols-7: calc(var(--grid-col-unit) * 7 + var(--grid-gap) * 6);
  --cols-8: calc(var(--grid-col-unit) * 8 + var(--grid-gap) * 7);
  --cols-10: calc(var(--grid-col-unit) * 10 + var(--grid-gap) * 9);

  /* vertical rhythm */
  --spacing-start: 200px;   /* top padding before first module */
  --spacing-big: 128px;     /* gap between modules (desktop) */
  --spacing-medium: 64px;   /* gap between modules (mobile) */

  --opacity-muted: 40%;
  --opacity-label: 60%;   /* grey labels, readable for everyone (WCAG 4.5:1); the original used 40% */
  --radius-xs: 2px;
  --radius-s: 4px;
  --blur-sm: 8px;

  /* type scale */
  --text-xs: 12px;  --text-xs--line-height: 12px;  --text-xs--letter-spacing: .015em;  --text-xs--font-weight: 500;
  --text-sm: 14px;  --text-sm--line-height: 16px;  --text-sm--letter-spacing: 0em;     --text-sm--font-weight: 500;
  --text-md: 18px;  --text-md--line-height: 18px;  --text-md--letter-spacing: 0em;     --text-md--font-weight: 700;
  --text-l: 28px;   --text-l--line-height: 28px;   --text-l--letter-spacing: -.015em;  --text-l--font-weight: 700;
  --text-xl: clamp(30px, 7.5vw, 78px); --text-xl--line-height: .9; --text-xl--letter-spacing: -.045em; --text-xl--font-weight: 750;

  --bezier-in-out-cubic: cubic-bezier(.75, 0, .25, 1);
  --ease-in-out: var(--bezier-in-out-cubic);

  --font-sans: "TWKLausanne", "Inter", "TWKLausanne Fallback", Arial, sans-serif;
  --font-serif: "STK Bureau Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   Reset / base (matches the original's Tailwind preflight + custom base)
   -------------------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; line-height: 1.5; font-variant-emoji: text; } /* iOS drew "↗" as an emoji; the HTML arrows also carry ︎ */
html, body { overscroll-behavior: none; max-width: 100%; background-color: var(--color-white); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  letter-spacing: var(--text-sm--letter-spacing);
  font-weight: var(--text-sm--font-weight);
  color: var(--color-black);
}
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background-color: rgb(12 12 12 / 0.25); background-color: color-mix(in oklab, var(--color-black) 25%, transparent); color: var(--color-white); }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border-width: 0; }

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  letter-spacing: var(--text-xl--letter-spacing);
  font-weight: var(--text-xl--font-weight);
}
.label { opacity: var(--opacity-label); }
.mb-8 { margin-bottom: 8px; }
.line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Links */
.link { transition: all .1s linear; }
.pt-link { opacity: var(--opacity-label); transition: all .1s linear; }
@media (hover: hover) {
  .link:hover { opacity: var(--opacity-muted); }
  .pt-link:hover { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Intro loader: green screen with the black leonardo logo across the bottom
   (same place as on the About page). main.js copies the logo from the header,
   lets it rise in letter by letter, then lifts the green away.
   -------------------------------------------------------------------------- */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  height: 100dvh;
  background-color: var(--color-accent);
}
.js .loader { display: block; }
.loader__logo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: calc(100% - 16px);
  height: auto;
  overflow: hidden;   /* the letters are hidden below the baseline until they rise */
  fill: var(--color-black);
}

/* --------------------------------------------------------------------------
   Header + pill navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  padding: 8px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-header > :not(:last-child) { margin-inline-end: 4px; }

.pill {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
  border-radius: var(--radius-s);
  background-color: rgb(12 12 12 / 0.6); /* fallback for browsers without color-mix(); 60% so white text is readable (original 25%) */
  background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
}
/* Active-item highlight; sized and positioned by main.js */
.pill__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--radius-xs);
}
.pill__indicator--white { background-color: var(--color-white); }
.pill__indicator--accent { background-color: var(--color-accent); }

.pill__list {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  padding: 4px;
}
.pill__list > li { flex-shrink: 0; -webkit-user-select: none; user-select: none; }
.pill__list > li:not(:last-child) { margin-inline-end: 2px; }

.pill__link {
  display: block;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  color: var(--color-white);
  cursor: pointer;
  transition: color .1s linear, background-color .1s linear, border-color .1s linear, text-decoration-color .1s linear, fill .1s linear, stroke .1s linear;
}
.pill__link.is-active { color: var(--color-black); }

/* Logo in the first menu item: 10px tall = the cap height of the 14px menu text.
   Change the height here to scale the logo; the width follows automatically. */
.pill__logo {
  display: block;
  height: 10px;
  width: auto;
  margin: 3px 0; /* 10px + 3px + 3px = the 16px line height of the text links */
  fill: currentColor;
}
@media (hover: hover) {
  .pill__link:not(.is-active):hover { color: rgb(250 250 250 / 0.4); color: color-mix(in oklab, var(--color-white) var(--opacity-muted), transparent); }
}
@media (min-width: 64rem) {
  .pill__link { padding: 8px 10px; }
}

/* Desktop "Enquire" pill (in the header) */
.pill--enquire { display: none; }
/* Mobile "Enquire" pill (fixed bottom right) */
.pill--enquire-mobile {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-inquire);
}
@media (min-width: 64rem) {
  .pill--enquire { display: block; }
  .pill--enquire-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   Page wrapper / modules
   -------------------------------------------------------------------------- */
.wrapper { min-height: 100dvh; }
main { min-height: 100dvh; }

.modules { padding-top: var(--spacing-start); }
.modules > :not(:last-child) { margin-bottom: var(--spacing-medium); }
@media (min-width: 64rem) {
  .modules > :not(:last-child) { margin-bottom: var(--spacing-big); }
}

.module--text {
  padding-inline: 8px;
  transition: all .3s var(--ease-in-out);
}
.module--white { background-color: var(--color-white); color: var(--color-black); }
.module--accent { background-color: var(--color-accent); color: var(--color-black); }
.module--services { padding-block: 256px; }

.module__inner {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 64rem) {
  .module__inner { max-width: var(--cols-10); }
}
/* Intro statement on the home page: smaller than the other big texts so the
   long studio text fits on a few lines and the projects show sooner.
   Change the last value (52px) to make it bigger or smaller on desktop. */
.module--intro .text-xl { font-size: clamp(24px, 4vw, 52px); }

/* --------------------------------------------------------------------------
   Project mosaic
   -------------------------------------------------------------------------- */
.mosaic { padding-inline: 8px; }
.mosaic > :not(:last-child) { margin-bottom: 8px; }
@media (min-width: 64rem) {
  .mosaic { display: flex; flex-direction: row; flex-wrap: wrap; }
  .mosaic__item--5 { width: var(--cols-5); }
  .mosaic__item--7 { width: var(--cols-7); }
  .mosaic__item--8 { width: var(--cols-8); }
  .mosaic__item--center { margin-inline: auto; }
  .mosaic__item--mr { margin-right: 8px; }
}

/* Card */
.card { overflow: hidden; }
.card__body { position: relative; }
.card__media { position: relative; isolation: isolate; }
.card__aspect {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: var(--radius-s);
  border-top-right-radius: var(--radius-s);
  background-color: var(--color-lightgray); /* placeholder until an image is added */
}
.card__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  color: transparent; /* hides alt text, as in the original */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Tags in the lower-left corner of the media */
.card__tags {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  padding: 8px;
}
.card__tags > :not(:last-child) { margin-inline-end: 4px; }
/* Serif typeface (STK Bureau Serif) on the card title, client name and description.
   Date, "See project" and the tags keep the sans typeface at the normal 14px size. */
.card__meta {
  font-family: var(--font-serif);
  font-weight: 400;
}
.card__meta .label {
  font-family: var(--font-sans);
  font-weight: var(--text-sm--font-weight);
}
.card__desc {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 12px;     /* smaller description text */
  line-height: 16px;   /* keeps the two lines aligned with date/title */
}
/* Serif also on the "Services" label */
.module--services .label {
  font-family: var(--font-serif);
  font-weight: 400;
}
.tag {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent);
}
.tag--truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag--nowrap { flex-shrink: 0; white-space: nowrap; }

/* Grey meta bar under the media */
.card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  background-color: var(--color-lightgray);
  border-bottom-left-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
}
.card__col { flex-shrink: 0; padding-right: 16px; }
.card__desc { grid-column: span 2 / span 2; flex: 1; }
@media (min-width: 64rem) {
  .card__meta { display: flex; flex-direction: row; }
  .card__meta > :not(:last-child) { margin-inline-end: 8px; }
  .card__col { padding-right: 32px; }
}

/* "↗ See project" – stretched so the whole card is clickable */
.card__link {
  cursor: pointer;
  transition: all .1s linear;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
/* Hovering or clicking a card makes "↗ See project" solid black (the original turns it orange) */
@media (hover: hover) {
  .card:hover .card__link { color: var(--color-black) !important; opacity: 1 !important; }
}
.card:active .card__link,
.card__link:focus-visible { color: var(--color-black); opacity: 1; }

/* "Coming soon" card (.card--soon, no project page yet): hovering – or a click/tap,
   which main.js turns into .is-soon instead of opening the page – blurs the media
   (without zooming it) and shows a white dial with a wedge that sweeps
   in and a "Coming soon" tag. With .card--blur the media stays blurred and the dial
   stays visible all the time; only the "Coming soon" tag comes and goes */
@property --soon-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.soon {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  container-type: size;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-in-out), background-color .4s var(--ease-in-out);
}
.card--blur .soon,
.card--blur .soon__dial { opacity: 1; }
.card--blur .soon__dial::after { --soon-sweep: 45deg; }
.soon__dial {
  --d: min(76cqw, 76cqh, 100cqh - 88px); /* leaves room for the tags on small cards */
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  opacity: 0;
  transition: opacity .4s var(--ease-in-out);
}
/* the ring */
.soon__dial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--d) * .024 - 1px), #000 calc(100% - var(--d) * .024));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--d) * .024 - 1px), #000 calc(100% - var(--d) * .024));
}
/* the wedge, one eighth of the dial counter-clockwise from twelve o'clock */
.soon__dial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--soon-sweep) * -1), var(--color-white) 0 var(--soon-sweep), transparent 0);
  transition: --soon-sweep .9s cubic-bezier(.2, .7, .2, 1) .15s;
}
/* "Coming soon" is a .tag (same size, type and corners as the green tags), only dark */
.soon__label {
  position: relative;
  z-index: 1;
  background-color: rgba(12, 12, 12, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0;
  transition: opacity .4s var(--ease-in-out);
}
@media (hover: hover) {
  .card--soon:hover .soon { opacity: 1; background-color: rgba(12, 12, 12, .3); }
  .card--soon:hover .soon__dial,
  .card--soon:hover .soon__label { opacity: 1; }
  .card--soon:hover .soon__dial::after { --soon-sweep: 45deg; }
}
.card--soon.is-soon .soon { opacity: 1; background-color: rgba(12, 12, 12, .3); }
.card--soon.is-soon .soon__dial,
.card--soon.is-soon .soon__label { opacity: 1; }
.card--soon.is-soon .soon__dial::after { --soon-sweep: 45deg; }

/* --------------------------------------------------------------------------
   Work page (work.html): four columns,
   cards identical to the home page
   -------------------------------------------------------------------------- */
.work {
  padding: 128px 0;          /* same top/bottom spacing as the original's Work page */
}
.work__grid {
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* four columns, 350px wide at 1440px */
  column-gap: 8px;
  align-items: start;
}
.work__col > :not(:last-child) { margin-bottom: 8px; }
/* Narrow cards: description on its own line under date/title (the original's narrow-card layout) */
.work .card__meta {
  display: grid;
  /* two equal halves, but a long title may take more room so it never wraps */
  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
  gap: 8px;
}
.work .card__meta > :not(:last-child) { margin-inline-end: 0; }
.work .card__col { padding-right: 16px; }
/* Service sub-navigation (Identity / Campaign / Digital), fixed under the main menu */
.subnav {
  position: fixed;
  top: 36px;
  left: 0;
  z-index: var(--z-subnav);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  padding: 8px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.subnav .pill__indicator {
  transition: transform .4s var(--ease-in-out), width .4s var(--ease-in-out), opacity .2s linear;
}
@media (min-width: 64rem) {
  .subnav { top: 44px; }
}

/* Industry filter tags (#Technology, #Fashion, …) */
.industry-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 32px;
  margin-bottom: 64px;
}
.industry-filter__tag {
  margin: 2px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: rgb(12 12 12 / 0.6);
  background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
  color: var(--color-white);
  cursor: pointer;
  transition: color .1s linear, background-color .1s linear;
}
.industry-filter__tag.is-active {
  background-color: var(--color-accent);
  color: var(--color-black);
}
.work__empty {
  padding: 64px 8px;
  text-align: center;
}

/* Date, title, "See project" and client sit in the grey bar (like the home page);
   the description sits under the box on the page background. */
.work .card__desc { padding-top: 4px; }
.work .work__col > :not(:last-child) { margin-bottom: 24px; }

@media (max-width: 63.99rem) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .work__col:not(:last-child) { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Project pages (projects/*.html): big image, text cards and images,
   in the site's own light colours.
   For a dark look use: bg #000, text rgb(226 230 227),
   card rgb(225 229 226 / 0.1), muted rgb(225 229 226 / 0.5).
   -------------------------------------------------------------------------- */
.project {
  --project-bg: var(--color-white);
  --project-text: var(--color-black);
  --project-card: var(--color-lightgray);
  --project-muted: rgb(12 12 12 / 0.6);   /* same as the site's grey labels (--opacity-label) */
  /* Reference column width (page width minus a 354.667px + 2.7778vw side
     area, at most 408px). The blocks are stretched to full width but keep
     the heights they get from this column. */
  --project-col: calc(100vw - 16px - min(408px, 354.667px + 2.7778vw));
  padding: 56px 8px 8px;          /* starts just under the menu */
  background-color: var(--project-bg);
  color: var(--project-text);
  font-size: 14px;
  line-height: 17.5px;
}
.project__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Image / video blocks */
.project__media {
  position: relative;
  grid-column: 1 / -1;                                /* full width */
  height: calc(var(--project-col) * 2 / 3);           /* 3:2 of the reference column */
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--project-card);
}
.project__media--half {
  grid-column: span 1;                                /* half width */
  height: calc((var(--project-col) - 8px) * 2 / 3);   /* 3:4 of the reference column */
}
.project__media img,
.project__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Real project media keep their own format (set inline as aspect-ratio), so nothing is cropped away */
.project__media--fit { height: auto; }
/* Two (or more) media side by side; widths follow flex-grow set inline */
.project__row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.project__row > .project__media { flex: 1 1 0; min-width: 0; }

/* Text cards */
.project__card {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--project-card);
}
.project__card--featured {
  min-height: 450px;
  padding: 24px;
}
/* Services as big green tags (same green and corners as the small tags on the cards) */
.project__services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.project__tag {
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent);
  color: var(--color-black);
}
.project__label {
  margin-bottom: 8px;
  color: var(--project-muted);
}
/* Texts in the project boxes: bold, 18px on phones and 28px from 64rem
   (the --text-md / --text-l values) */
.project__big,
.project__info-text,
.project__credits p {
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
  letter-spacing: var(--text-md--letter-spacing);
  font-weight: var(--text-md--font-weight);
}
@media (min-width: 64rem) {
  .project__big,
  .project__info-text,
  .project__credits p {
    font-size: var(--text-l);
    line-height: var(--text-l--line-height);
    letter-spacing: var(--text-l--letter-spacing);
    font-weight: var(--text-l--font-weight);
  }
}

/* Project information + credits */
.project__info {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  align-items: start;
  margin-top: 8px;
}
.project__info-text { padding-right: 10%; }
.project__info-text p:not(:last-child) { margin-bottom: 1em; }
.project__credits .project__label { margin-bottom: 16px; }
.project__credits p:not(:last-child) { margin-bottom: 1em; }
.project__credits span { color: var(--project-muted); }
/* Credits utan projekttext bredvid: stannar i högra kolumnen */
.project__credits--solo { grid-column: 2; }

/* "Next project" at the bottom of each case: one big link card to the next case.
   Hovering turns "↗ See project" solid, like on the project cards (no zoom). */
.project__next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--project-card);
  color: inherit;
}
.project__next-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px;
}
.project__next-line { color: var(--project-muted); }
.project__next-cta {
  margin-top: auto;
  padding-top: 24px;
  transition: opacity .1s linear;
}
.project__next-media {
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: 4px;
}
.project__next-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .project__next:hover .project__next-cta { opacity: 1; }
}
.project__next:focus-visible .project__next-cta { opacity: 1; }

@media (max-width: 63.99rem) {
  .project__row { flex-direction: column; }
  .project__row > .project__media { width: 100%; flex: none; }
  .project__grid,
  .project__info { grid-template-columns: minmax(0, 1fr); }
  .project__credits--solo { grid-column: auto; }
  .project__next { grid-template-columns: minmax(0, 1fr); }
  .project__media { height: auto; aspect-ratio: 3 / 2; }
  .project__media--half { grid-column: 1 / -1; aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   Phone mockup (.phone-scene): app screens in a phone lying on a table in
   window light, top-down. Everything is sized from the block's height (cqh),
   so the phone keeps its place in the scene at any width. The screens are
   switched by main.js (section 7).
   -------------------------------------------------------------------------- */
.phone-scene {
  /* Ändra här: bordets färg, fönsterljuset och telefonens storlek.
     Bordet har sajtens ljusgrå färg (#eaeaea, samma som korten). Det bruna bordet från
     referensvideon: --scene-dark #1f1011, --scene-mid #483428, --scene-light #524033,
     --scene-sun rgb(255 230 205 / .18), --scene-shade #42302a,
     --scene-vignette rgb(16 5 5 / .62), --scene-contact rgb(10 4 3 / .75) */
  --scene-dark: #dcdcdc;                  /* skuggsidan (vänster) */
  --scene-mid: #e5e5e5;
  --scene-light: #eaeaea;                 /* ljussidan (höger) */
  --scene-sun: rgb(255 255 255 / .55);    /* ränderna av fönsterljus */
  --scene-shade: #d3d3d3;                 /* skuggan som telefonen kastar */
  --scene-vignette: rgb(0 0 0 / .06);     /* mörkare hörn */
  --scene-contact: rgb(0 0 0 / .3);       /* mörk kant där telefonen ligger mot bordet */
  --phone-size: 62.3;                     /* telefonens höjd i procent av blockets höjd. Bara siffran: 62 eller 62.5, inte 62% eller 62,5 (då blir hela blocket svart) */
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  height: auto;
  container-type: size;
  isolation: isolate;
  background-color: var(--scene-mid);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 120% at 78% 30%, transparent 28%, var(--scene-vignette) 100%),
    linear-gradient(100deg, var(--scene-dark) 0%, var(--scene-mid) 35%, var(--scene-light) 100%);
  background-blend-mode: overlay, normal, normal;   /* grain keeps the table's colour */
}
/* Window light falling across the table, brightest on the right. The bands
   are measured from the reference video. */
.phone-scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -15%;
  background: linear-gradient(158deg,
    transparent 23%, var(--scene-sun) 26.5% 27.8%, transparent 28.8% 33.6%,
    var(--scene-sun) 34.8% 35.6%, transparent 39.5% 43.2%,
    var(--scene-sun) 46% 50.2%, transparent 51.6% 53.8%,
    var(--scene-sun) 55.6% 58.8%, transparent 62.6% 65%,
    var(--scene-sun) 69% 73.5%, transparent 75.6% 77.2%,
    var(--scene-sun) 78.6% 81.6%, transparent 86.5%);
  filter: blur(1cqh);
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), #000 70%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .35), #000 70%);
  pointer-events: none;
}

/* The phone (iPhone proportions), a little above the centre as in the
   reference. It must not get z-index, transform, filter or opacity: its
   shadow (::before) has to blend with the window light under it. */
.phone {
  --ph: calc(var(--phone-size) * 1cqh);
  --pw: calc(var(--ph) * .48);
  position: absolute;
  inset: 0 0 1.25%;
  width: var(--pw);
  height: var(--ph);
  margin: auto;
  border: calc(var(--pw) * .011) solid transparent;   /* polished metal frame, lit from the upper right */
  border-radius: calc(var(--pw) * .158);
  background:
    linear-gradient(#050505, #050505) padding-box,
    conic-gradient(#6e6d6b 0deg 16deg, #d4d3d1 30deg, #e6e5e3 60deg 120deg, #bfbebc 146deg, #1e1d1c 162deg 198deg, #31302e 214deg 326deg, #6e6d6b 344deg) border-box;
  box-shadow: calc(var(--pw) * -.12) calc(var(--pw) * .04) calc(var(--pw) * .12) calc(var(--pw) * -.01) var(--scene-contact);   /* dark edge where it touches the table */
}
/* Shadow cast to the lower left: the phone outline, turned a little, which
   only takes away the window light (darken) */
.phone::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--pw) * -.011);   /* = minus the frame width */
  border-radius: inherit;
  background-color: var(--scene-shade);
  mix-blend-mode: darken;
  translate: calc(var(--pw) * -.505) calc(var(--pw) * .104);
  rotate: -5deg;
  filter: blur(calc(var(--pw) * .01));
  pointer-events: none;
}
/* Side buttons just outside the frame: action + volume on the left, power on the right */
.phone::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pw) * -.018);
  right: calc(var(--pw) * -.018);
  background:
    linear-gradient(#3a3836, #3a3836) left 0 top calc(var(--ph) * .2) / calc(var(--pw) * .007) calc(var(--ph) * .03) no-repeat,
    linear-gradient(#3a3836, #3a3836) left 0 top calc(var(--ph) * .275) / calc(var(--pw) * .007) calc(var(--ph) * .062) no-repeat,
    linear-gradient(#3a3836, #3a3836) left 0 top calc(var(--ph) * .368) / calc(var(--pw) * .007) calc(var(--ph) * .062) no-repeat,
    linear-gradient(#a9a59f, #a9a59f) right 0 top calc(var(--ph) * .324) / calc(var(--pw) * .007) calc(var(--ph) * .111) no-repeat;
  pointer-events: none;
}
.phone__screen {
  position: absolute;
  inset: calc(var(--pw) * .027);   /* black border around the display */
  overflow: hidden;
  border-radius: calc(var(--pw) * .128);
  background-color: #000;
  isolation: isolate;
}
/* One <img> or <video> per screen. Before main.js starts only the first shows. */
.phone__screen > img,
.phone__screen > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  visibility: hidden;
}
.phone__screen > :first-child { visibility: visible; }
.phone__screen[data-ready] > img,
.phone__screen[data-ready] > video { visibility: hidden; }
.phone__screen[data-ready] > .is-shown { visibility: visible; }
/* Screenshots taller than the phone keep their height and scroll (main.js) */
.phone__screen > .is-tall { bottom: auto; height: auto; }
/* Glass reflection + Dynamic Island on top of the screens */
.phone__screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 38%);
  pointer-events: none;
}
.phone__screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: calc(var(--pw) * .022);
  left: 34%;
  width: 32%;
  height: calc(var(--pw) * .086);
  border-radius: 999px;
  background-color: #000;
}
/* The "finger" that taps before a screen change (data-tap) */
.phone__tap {
  position: absolute;
  z-index: 5;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgb(255 255 255 / .35);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 2px 10px rgb(0 0 0 / .18);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Portrait phones and tablets get a taller block; in landscape it stays 16:9 so the whole phone fits on screen */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .phone-scene { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   About page (about.html): green hero with the wordmark, intro, image with
   lists, approach and process. Black with white text, the site's own type
   and green accent. Client logos, awards, clients and press are left out;
   the page has one large image at the top and one image beside the lists.
   -------------------------------------------------------------------------- */
/* Black page with white text */
html.about-page,
html.about-page body { background-color: var(--color-black); }
html.about-page .pill { background-color: rgb(40 40 40 / 0.6); }   /* readable over the green hero and the black page */

.about {
  padding: 8px 8px 256px;
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Hero: one image filling the first screen, wordmark across the bottom */
.about__hero {
  position: relative;
  height: calc(100vh - 16px);
  overflow: hidden;
  border-radius: var(--radius-s);
  background-color: var(--color-accent);      /* green; an image added here covers it */
}
.about__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__tagline {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--color-black);
  color: var(--color-white);
  white-space: nowrap;
}
.about__wordmark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  width: calc(100% - 16px);
  height: auto;
  fill: var(--color-black);
}

/* 404 page (404.html): only the green hero, with links back under the tagline */
.notfound { padding-bottom: 8px; }
.notfound__links {
  position: absolute;
  top: calc(30% + 32px);
  left: 50%;
  z-index: 1;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.notfound__link {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
  color: var(--color-black);
  transition: background-color .1s linear;
}
.notfound__link:hover,
.notfound__link:focus-visible { background-color: var(--color-black); color: var(--color-white); }

/* Big text: 30px, in the heavy weight of the home page headline */
.about__intro,
.about__text,
.about__list {
  font-size: 30px;
  line-height: 31.5px;
  letter-spacing: -.03em;
  font-weight: var(--text-xl--font-weight);   /* 750, same as the home page headline */
}
/* The lists shrink with their column instead of cutting words off with "…"
   (the longest item, "Interactive Prototypes", is about 11.4 times the font size wide) */
.about__lists > div { container-type: inline-size; }
.about__list { font-size: min(30px, 8.5cqi); line-height: 1.05; }
.about__intro p:not(:last-child),
.about__text p:not(:last-child) { margin-bottom: 30px; }

/* Sections and two-line labels ("Introduction" in grey, "Foundation" below) */
.about__section { margin-top: 128px; }
.about__label { margin-bottom: 8px; }

/* One image on the left, four lists on the right that stay in view (sticky) */
.about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  align-items: start;
}
.about__figure {
  position: relative;
  aspect-ratio: 708 / 1012;
  overflow: hidden;
  border-radius: var(--radius-s);
  background-color: rgb(250 250 250 / 0.1);   /* placeholder until an image is added */
}
.about__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__lists {
  position: sticky;
  top: 128px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 64px;
}
/* Contact takes the full width so the e-mail address is not cut off */
.about__lists > .about__group--wide { grid-column: 1 / -1; }
.about__group--wide .about__list > li { white-space: normal; }
/* Until the image exists (.about__grid--no-figure): the lists use the full width, four across */
.about__grid--no-figure { grid-template-columns: minmax(0, 1fr); }
.about__grid--no-figure .about__lists { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about__grid--no-figure .about__lists > .about__group--wide { grid-column: span 2; }
.about__list > li {
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Process and collaboration texts in the left half */
.about__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 64px;
}
.about__more > div { grid-column: 1; }
.about__more .about__text { padding-right: 64px; }

@media (max-width: 63.99rem) {
  .about__grid, .about__more { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .about__lists { position: static; }
  .about__grid--no-figure .about__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid--no-figure .about__lists > .about__group--wide { grid-column: 1 / -1; }
  .about__more .about__text { padding-right: 0; }
}
/* Phones: one list per row, so the words stay big */
@media (max-width: 39.99rem) {
  .about__lists,
  .about__grid--no-figure .about__lists { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Contact panel – opened by "Enquire". Swings in from the right over a dimmed
   page. Built by main.js.
   -------------------------------------------------------------------------- */
.contact {
  position: fixed;
  inset: 0;
  z-index: 5000;                 /* above header and sub-navigation */
  visibility: hidden;
  pointer-events: none;
  perspective: 1600px;
  transition: visibility 0s .7s;   /* stays visible while it swings out */
}
.contact.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; }
@media (prefers-reduced-motion: reduce) {
  .contact__panel, .contact__overlay { transition-duration: .01s; }
  .contact { transition-delay: 0s; }
}
.contact__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(12 12 12 / 0.4);
  opacity: 0;
  transition: opacity .5s var(--ease-in-out);
}
.contact.is-open .contact__overlay { opacity: 1; }

.contact__panel {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: var(--cols-7);
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--radius-s);
  background-color: var(--color-white);
  color: var(--color-black);
  transform-origin: 100% 50%;
  transform: translateX(calc(100% + 16px)) rotateY(-35deg);
  transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}
.contact.is-open .contact__panel { transform: none; }

.contact__close {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: var(--opacity-label);
  cursor: pointer;
  transition: opacity .1s linear;
}
@media (hover: hover) { .contact__close:hover { opacity: 1; } }

.contact__body {
  padding: 184px 0 64px 96px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.contact__tag {
  display: inline-block;
  margin-bottom: 32px;
  padding: 4px 4px 5px;
  border: 1px solid rgb(12 12 12 / 0.1);
  border-radius: var(--radius-s);
  font-size: 16px;
  line-height: 16px;
}
.contact__intro {
  max-width: 320px;
  text-indent: 96px;
  margin-bottom: 80px;
}
.contact__heading { margin-bottom: 20px; }
.contact__value { padding-left: 91px; }   /* lines up with the intro's indent */

/* E-mail: grey, turns black on hover with a "Click to copy" label beside it */
.contact__email-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 85px;
}
.contact__email {
  padding: 4px 5px 5px;
  border-radius: var(--radius-xs);
  color: rgb(12 12 12 / 0.4);
  font-weight: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .1s linear, background-color .1s linear;
}
.contact__copy {
  padding: 4px 5px 5px;
  border-radius: var(--radius-xs);
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity .1s linear;
  pointer-events: none;
}
.contact__copy.is-copied { background-color: var(--color-accent); color: var(--color-black); }
@media (hover: hover) {
  .contact__email:hover { color: var(--color-black); background-color: rgb(12 12 12 / 0.05); }
  .contact__email:hover + .contact__copy { opacity: 1; }
}
.contact__email:focus-visible { color: var(--color-black); background-color: rgb(12 12 12 / 0.05); }
.contact__email:focus-visible + .contact__copy,
.contact__copy.is-copied { opacity: 1; }

/* Channels: grey links, black on hover */
.contact__channels { padding-left: 96px; }
.contact__channels li:not(:last-child) { margin-bottom: 14px; }
.contact__channels a {
  color: rgb(12 12 12 / 0.4);
  transition: color .1s linear;
}
@media (hover: hover) { .contact__channels a:hover { color: var(--color-black); } }

html.contact-open { overflow: hidden; }   /* page stays still behind the panel */

@media (max-width: 63.99rem) {
  .contact__panel { left: 8px; width: auto; }
  .contact__body { padding: 96px 0 32px 0; }
  /* long e-mail address: no indent and allow wrapping so it fits on phones */
  .contact__value { padding-left: 0; }
  .contact__email-row { flex-wrap: wrap; }
  .contact__email { text-align: left; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; }

/* Grey clock panel – sticky, full viewport height; the green panel slides over it */
.footer__clock-panel {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-top: 28px;
  /* keeps the clock centred in the grey area above the green panel (main.js sets
     --footer-panel-h); capped so at least 64px stay free for the clock */
  padding-bottom: min(var(--footer-panel-h, 50vh), calc(100vh - 28px - 64px));
  background-color: var(--color-lightgray);
}
.footer__clock {
  /* shrinks when the grey area above the green panel is low (short laptop windows) */
  font-size: clamp(14px, min(7.5vw, (100vh - 84px - var(--footer-panel-h, 50vh)) / 3.1), 78px);
  color: var(--color-darkgray);
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-height: 30rem) {
  .footer__clock-panel { padding-bottom: 0; }
  .footer__clock { font-size: var(--text-xl); }
}

/* Green panel: a big tilted logo, and copyright + contact in the bottom-right corner */
.footer__panel {
  position: relative;
  z-index: var(--z-footer);
  /* the logo and the text share one grid cell on wide screens, so the panel
     grows with the text instead of cutting it off */
  display: grid;
  overflow: hidden;
  padding: 8px;
  background-color: var(--color-accent);
  color: var(--color-black);
  box-shadow: 0px -8px 6px 0px rgb(12 12 12 / 0.05);
}
.footer__mark {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}
.footer__mark--mobile { display: none; }
.footer__mark--desktop,
.footer__info { grid-area: 1 / 1; }
.footer__info {
  align-self: end;
  justify-self: end;
  width: 344px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
.footer__info p:not(:last-child) { margin-bottom: 16px; }
.footer__info a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
/* Narrower screens: the text moves under the logo so they never overlap,
   as three short columns side by side so the panel stays low */
@media (max-width: 74.99rem) {
  .footer__info {
    grid-area: auto;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
    width: auto;
    margin-top: 32px;
  }
  .footer__info p:not(:last-child) { margin-bottom: 0; }
}
@media (max-width: 47.99rem) {
  .footer__mark--desktop { display: none; }
  .footer__mark--mobile { display: block; }
  .footer__info { display: block; max-width: 344px; }
  .footer__info p:not(:last-child) { margin-bottom: 16px; }
}