/* ==========================================================
   Silvia — portfolio
   Desktop build from Figma "Silvia" frame (84:393), 1441px.
   Fluid: sections stretch with the browser; art-directed
   sections keep Figma's absolute coordinates.
   ========================================================== */

/* ---------- Fonts (self-hosted) ----------
   The Latin sets of the four Google Fonts the site uses, served from this
   site (assets/fonts) instead of Google: no extra connections before text
   can render. All four are under the SIL Open Font License (see
   assets/fonts/README.md). Bricolage Grotesque is one variable file
   covering weights 400–800 (and its optical sizes). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Infant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-infant-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Infant";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-infant-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cabin";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/cabin-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ms Madi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ms-madi-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #050505;
  --white: #ffffff;
  --off-white: #f0f0f0;
  --light-bg: #e6e6e6;
  --dim: rgba(255, 255, 255, 0.6);
  --grey: #9b9b9b;
  --card-dark: #121212;
  --cta-bg: #141414;
  --red: #d82a21;
  --blush: #e5c1c1;

  --gutter: 60px;
  --section-y: 120px;

  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --font-serif: "Cormorant Infant", Georgia, serif;
}

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

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

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-width: 1200px;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-variation-settings: "opsz" 14, "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: none; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; padding: 0; background: none; cursor: pointer; }

.dim { color: var(--dim); }
.grey { color: var(--grey); }

.section-pad { padding: var(--section-y) var(--gutter); }

/* Shared 72px section heading */
.h2 {
  font-size: 72px;
  font-weight: 600;
  line-height: 1.2;
}
.h2 > span { display: block; }

/* Shared white pill button */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 18px;
  border-radius: 99px;
  background: var(--white);
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.48px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover (midu.design "BtnBlur"): the arrow turns 45° and the label
   blurs for 0.4s, then settles sharp. JS toggles .is-blur → .is-hover. */
.pill-btn img,
.btn-label {
  display: block;
  transition: rotate 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.pill-btn.is-blur img,
.pill-btn.is-hover img { rotate: 45deg; opacity: 0.8; }
.is-blur .btn-label { filter: blur(4px); }
.pill-btn.is-hover { background: #ececec; color: #383838; }

/* ==================== HERO ==================== */
/* Figma "Hero" 86:10796 (1441 × 1130.58): header at 60px, then a centred
   row of headline + image, then the big "silvia" 109px below. */
.hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

/* Fixed on every section (was absolute inside the hero). Over a light
   section script.js adds .is-light: the logo and the menu button go dark. */
.site-header {
  position: fixed;
  top: 60px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.548px;
}
.brand-mark {
  position: relative;
  display: block;
  width: 48.663px;
  height: 60.033px;
}
.brand-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
.brand-mark-dark { opacity: 0; }
.site-header.is-light .brand-mark-dark { opacity: 1; }
.site-header.is-light .brand-mark img:first-child { opacity: 0; }
.brand { color: var(--white); transition: color 0.3s ease; }
.site-header.is-light .brand { color: var(--bg); }
.brand > span:last-child {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3.92px;
  line-height: normal;
  /* tracking adds trailing space after the last letter in Figma too */
}

/* Menu (rakibulhrocky.com): .menu-panel is the button's round off-white
   surface; script.js grows it into a 320px frosted panel (the same glass as
   the "View Case Study" pill) behind the button and the links. */
.site-nav {
  position: relative;
  width: 60px;
  height: 60px;
}
.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: var(--off-white);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.menu-btn {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* the two lines of the Figma menu icon (24 × 2.67, 6.67 apart) */
.menu-line {
  width: 24px;
  height: 2.667px;
  border-radius: 2px;
  background: #222;
}
.site-nav:not(.is-open) .menu-panel,
.site-nav:not(.is-open) .menu-line { transition: background-color 0.3s ease; }
.site-header.is-light .menu-panel { background: var(--bg); }
.site-header.is-light .menu-line { background: var(--off-white); }
.menu-list {
  position: absolute;
  z-index: 1;
  top: -20px;
  right: -20px;
  width: 320px;
  padding: 92px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  visibility: hidden;
}
.site-nav.is-open .menu-list { visibility: visible; }
.menu-label {
  position: absolute;
  top: 41px;
  left: 32px;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
}
.menu-link {
  position: relative;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.72px;
  color: var(--white);
  transition: color 0.3s;
}
/* hover: the label turns red and a red line draws under it */
.menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s;
}
.menu-link:hover,
.menu-link:focus-visible { color: #e2261e; }
.menu-link:hover::after,
.menu-link:focus-visible::after { width: 100%; }

/* Parallax layer: moves at 60% of scroll speed (midu.design hero) */
.hero-inner {
  position: relative;
  padding-top: 221.58px; /* 60 top + 81.58 header + 80 gap */
  will-change: transform;
}

/* Headline + image row, centred, 81px gap (Figma) */
.hero-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 81px;
}

.hero-copy { position: relative; flex: none; }
.hero-title {
  width: 630px; /* fits the longest swap word, "Tools" */
  font-size: 80px;
  font-weight: 600;
  line-height: 1.2;
}
/* Each line is a mask its text slides up through (romemichal.pl);
   the padding/negative margin keeps descenders from being clipped.
   It clips top and bottom only, so the first line's selection highlight
   can reach a little past the text on the left. */
.hero-title .line {
  display: block;
  clip-path: inset(0 -100vw);
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
.hero-title .line-inner { display: block; white-space: nowrap; }
.hero-title-sub { margin-top: 7px; }

/* ---------- Text-style toolbar on "Pretty is" (orionix.framer.website) ----------
   Hovering the headline selects its first line (a soft highlight) and pops
   a small editor toolbar above it: Turn into (H1/H2/H3), Bold / Italic /
   Underline (one at a time) and Text style (four site colours). In the
   site's style: dark toolbar, light tooltips, Cormorant italic, red underline. */
.hl {
  --lvl: 1;
  display: inline-block;
  vertical-align: top; /* keeps the line exactly 96px, like before */
  padding: 0 12px;
  margin-left: -12px;
  border-radius: 12px;
  font-size: calc(var(--lvl) * 1em);
  transition: background-color 0.3s ease, color 0.35s ease, font-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-copy.is-editing .hl { background: rgba(255, 255, 255, 0.08); }
.hl[data-level="2"] { --lvl: 0.9; }   /* 72px */
.hl[data-level="3"] { --lvl: 0.8; }   /* 64px */
.hl[data-style="bold"] { font-weight: 800; }
.hl[data-style="italic"] {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: normal;
  font-size: calc(var(--lvl) * 1.12em); /* Cormorant runs small next to Bricolage */
  letter-spacing: -0.01em;
}
.hl[data-style="underline"] {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.hl[data-color="red"] { color: #e2261e; }
.hl[data-color="salmon"] { color: #f57468; }
.hl[data-color="blush"] { color: var(--blush); }

.text-bar {
  position: absolute;
  left: -12px;
  bottom: calc(100% + 14px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cta-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  scale: 0.5;
  transform-origin: 12% 100%;
  pointer-events: none;
  /* orionix: spring in (bounce .2, .4s) */
  transition: opacity 0.25s ease, scale 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.hero-copy.is-editing .text-bar { opacity: 1; scale: 1; pointer-events: auto; }

.tb-group { position: relative; }
.tb-div { width: 1px; height: 16px; margin: 0 3px; background: rgba(255, 255, 255, 0.1); }
.text-bar button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 6px;
  color: inherit;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.text-bar button:hover,
.text-bar button:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.tb-btn { width: 28px; color: rgba(255, 255, 255, 0.55) !important; font-size: 15px; }
.tb-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--white) !important; }
.tb-btn b { font-weight: 800; }
.tb-btn i { font-family: var(--font-serif); font-variation-settings: normal; font-size: 18px; }
.tb-drop { gap: 2px; padding: 0 4px 0 9px; }
.tb-chev { color: rgba(255, 255, 255, 0.5); }
.tb-a { font-size: 16px; font-weight: 700; }

/* Dropdown menus */
.tb-menu {
  position: absolute;
  left: -4px;
  top: calc(100% + 10px);
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  background: var(--cta-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s 0.2s;
}
.tb-menu.is-open { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.2s ease, translate 0.2s ease; }
.tb-menu-title { padding: 4px 8px 6px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.45); }
.tb-menu > button { justify-content: flex-start; gap: 10px; padding: 0 8px; width: 100%; white-space: nowrap; }
.tb-menu > button[aria-checked="true"] { background: rgba(255, 255, 255, 0.08); }
.tb-h { width: 18px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.tb-swatches { min-width: 0; }
.tb-swatch-row { display: flex; gap: 4px; }
.tb-swatch-row button { width: 32px; height: 32px; border-radius: 8px; font-size: 17px; font-weight: 700; }
.tb-swatch-row button[aria-checked="true"] { background: rgba(255, 255, 255, 0.12); }
.tb-swatch-row [data-color="white"] { color: var(--white); }
.tb-swatch-row [data-color="red"] { color: #e2261e; }
.tb-swatch-row [data-color="salmon"] { color: #f57468; }
.tb-swatch-row [data-color="blush"] { color: var(--blush); }

/* Tooltips (light, above each control) */
.text-bar [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  translate: -50% 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--light-bg);
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, translate 0.15s ease;
}
.text-bar [data-tip]:hover::after { opacity: 1; translate: -50% 0; }
.text-bar [aria-expanded="true"]::after { opacity: 0 !important; }

/* Rotating word: a clipped slot sized by its longest word */
.swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.swap-sizer { display: block; visibility: hidden; white-space: nowrap; }
.swap-word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}
.swap-word + .swap-word { transform: translateY(110%); } /* only the first shows before JS */

.hero-shot {
  position: relative;
  flex: none;
  width: 530px;
  height: 295px; /* the headline's Figma height; fixed so restyling it doesn't resize the image */
  align-self: flex-start;
}
.hero-shot-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-shot-layer {
  position: absolute;
  inset: 0;
}
.hero-shot-layer + .hero-shot-layer { transform: translateY(100%); } /* first shows before JS */

/* Figma kept the old crop percentages when the frame grew to 295px tall,
   which stretches the image ~19% vertically. We fill the frame without
   distortion instead, starting near the same point (8% from the top). */
.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 31%;
}

/* Red wave shader behind "silvia" (drawn by script.js).
   Sized like midu.design's: 820px tall, anchored to the hero bottom. */
.hero-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 820px;
  display: block;
}

/* The name container must NOT create a stacking context (no transform,
   opacity or z-index), or the blend modes below can't see the wave. */
.hero-name {
  position: relative;
  margin-top: 109px;
  height: 505px;
  font-family: var(--font-serif);
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 505.17px;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}
.hero-name > span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
/* midu.design "MiduLogoBlend": pink radial fill, color-dodge over the wave */
.hero-name-dodge {
  background-image: radial-gradient(56% 156% at 47.1% 1.9%, rgba(255, 255, 255, 0) 0%, rgb(217, 182, 182) 100%);
  mix-blend-mode: color-dodge;
}
/* midu.design "MiduLogoMain": faint warm tint so the letters read over black */
.hero-name-tint {
  background-image: linear-gradient(rgba(143, 143, 143, 0) 0%, rgba(176, 125, 125, 0.33) 100%);
}

/* ==================== ABOUT ==================== */
/* Sits above the hero so it slides over the parallaxing hero content */
.about {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.about-title { width: 948px; }
.about-title-1 { margin-left: 150px; }
.about-title .dim { margin-top: 6.6px; }

.about-body {
  position: relative;
  margin-top: 89px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.about-copy {
  width: 57.4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 47px;
}
.about-text {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
}

.about-photo {
  position: relative;
  width: 40.02%;
  aspect-ratio: 528.613 / 495;
  margin-top: 118px;
  overflow: clip;
  isolation: isolate;
}
/* Both images stay on their own GPU layers (will-change) so the browser
   doesn't switch them in and out of compositing at the start and end of
   each hover, which made the corners flicker */
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: scale 0.9s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Hover: the painting photo fades in over the portrait and settles from a
   subtle zoom (same ease as the hero word swap); reverses on mouse-out.
   Toned down on request (2026-10-15): was 1.12 in / portrait 1.06. */
.about-photo-hover {
  opacity: 0;
  scale: 1.04;
}
.about-photo:hover img:first-child { scale: 1.02; }
.about-photo:hover .about-photo-hover {
  opacity: 1;
  scale: 1.01; /* a hair over 100%: its edges never land between pixels, so
                  no line of the portrait blinks through at the corners */
}

/* ==================== WORK ==================== */
.work-title {
  width: 962px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.work-title-1 { white-space: nowrap; }
.work-title .dim { width: 100%; }

.work-list {
  margin-top: 99px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.work-card {
  width: 55%; /* 726 / 1320 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.work-card.is-right { align-self: flex-end; }

.work-img {
  position: relative;
  width: 100%;
  aspect-ratio: 726 / 440; /* Figma 726 × 561, made shorter on request */
  overflow: hidden;
}
/* Image parallax (nacreous cards): the image layer is 120% of the frame
   height (the reference's 359/299). script.js slides it well past that
   overscan, so the card collapses from the top as it leaves the screen. */
.work-shift {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 120%;
}
.work-shift > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.44, 0, 0.56, 1);
}
/* Hover: image zooms to 1.04 (midu.design project cards) */
.work-card:hover .work-shift > img { scale: 1.04; }

/* Hover: a frosted "View Case Study" pill grows in and follows the mouse.
   script.js moves .case-follow (x/y); .case-btn does the CSS grow-in, so
   the two never fight over transforms. Before JS it sits on the image. */
.work-card { position: relative; }
.case-follow {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  pointer-events: none;
}
.case-btn {
  /* a pill centred on the pointer (its size follows the label) */
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  height: 52px;
  padding: 0 22px;
  white-space: nowrap;
  border-radius: 999px;
  /* frosted glass: a dark tint keeps the white label readable on light
     and dark screenshots alike */
  background: rgba(5, 5, 5, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.18);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  text-align: center;
  opacity: 0;
  scale: 0.5;
  pointer-events: none;
  transition: scale 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.case-btn img { width: 10px; height: 10px; filter: invert(1); } /* black icon → white */
.work-card:hover .case-btn,
.work-card:focus-visible .case-btn { opacity: 1; scale: 1; }
/* Figma crops the top ~8% off this screenshot; keep it hidden even at
   the far end of the parallax slide */
.work-shift > img.crop-rla {
  top: -9%;
  height: 109%;
}

.work-card h3 {
  width: 91.46%; /* 664 / 726 */
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.work-card h3.full { width: 100%; }
.work-card h3.nowrap { width: auto; white-space: nowrap; }

/* ==================== SERVICES ==================== */
.services {
  background: var(--light-bg);
  color: #000;
  display: flex;
  justify-content: center;
}
.services-inner {
  width: 870px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 87px;
}

.services-title { width: 802px; }
.services-title-1 { text-align: right; }
.services-title .dim { color: rgba(0, 0, 0, 0.6); }

.services-grid {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}
.services-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.services-col.is-offset { padding-top: 80px; }

/* Hover (midu.design "Our tools & your brand" cards): the outer card takes
   the hover and the inner body shrinks to 0.96 (0.35s tween, ease
   .12,.23,.5,1), so the edge never flickers under the pointer. The corner
   arrow turns 45° and grows 10 → 14px on a light spring (0.4s, bounce .2). */
.svc-card { width: 418px; }
.svc-card-body {
  position: relative;
  min-height: 261px;
  padding: 40px;
  background: #fff;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.05));
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: scale 0.35s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.svc-card:hover .svc-card-body { scale: 0.96; }

.svc-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: #e6e6e6;
  display: grid;
  place-items: center;
}
.svc-arrow img {
  width: 10px;
  height: 10px;
  transition: rotate 0.4s cubic-bezier(0.3, 1.35, 0.5, 1),
              scale 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.svc-card:hover .svc-arrow img { rotate: 45deg; scale: 1.4; }
/* Corner arrows hidden for now (2026-10-15); delete this line to bring them back */
.svc-arrow { display: none; }
.svc-card h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #cfcfcf;
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1.2px;
}
.svc-card p {
  font-size: 20px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.8);
}

/* ==================== PROCESS ==================== */
/* After the title, the section pins full-screen and gives each step one
   screen of scroll (orionix.framer.website): the stage (glow + ring) sticks
   while the steps, each 100vh tall, scroll through it one at a time. */
.process {
  position: relative;
  overflow: clip; /* not hidden: that would stop the stage from sticking */
}

.process-title {
  position: relative;
  z-index: 1;
  width: 962px;
  margin-left: var(--gutter);
  padding-top: var(--section-y);
}

.process-pin { position: relative; }
.process-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh; /* the steps scroll over the stage, not after it */
  pointer-events: none;
}

/* Red glow: Figma image rotated -90° and flipped vertically,
   anchored to the right edge, centred on the pinned screen */
.process-glow {
  position: absolute;
  top: calc(50% - 837.572px);
  right: -138px;
  width: 800px;
  height: 1675.144px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Breathing: the light slowly swells and brightens, then eases back,
     in place (no drifting), so it feels alive */
  transform-origin: 100% 50%;
  animation: glow-breathe 5s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
  from { scale: 1;    opacity: 0.75; }
  to   { scale: 1.06; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .process-glow { animation: none; }
}
.process-glow img {
  flex: none;
  width: 1675.144px;
  height: 800px;
  object-fit: cover;
  rotate: -90deg;
  scale: 1 -1;
}

/* Process ring: 800px circle centred on the left edge of the pinned screen.
   script.js rotates it 30° per step to bring the active number to 3 o'clock. */
.ring {
  position: absolute;
  left: -400.11px;
  top: calc(50% - 400px);
  width: 800px;
  height: 800px;
  rotate: -64.28deg; /* Figma's still pose (shown without JS / reduced motion) */
}
.ring-line {
  position: absolute;
  inset: 0;
  border: 1px solid #fff;
  border-radius: 50%;
}
.ring-label {
  position: absolute;
  left: 0;
  top: 382px;
  width: 800px;
  height: 36px;
}
.ring-num {
  position: absolute;
  left: 815px;
  top: 0;
  font-size: 32px;
  line-height: 36px;
  white-space: nowrap;
}
.ring-num.tight { letter-spacing: -1.28px; }
.ring-dot {
  position: absolute;
  left: 791px;
  top: 9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.ring-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: var(--red);
  box-shadow: 0 2px 5px rgba(255, 0, 0, 0.2);
}
.ring-dot { transition: opacity 0.5s ease, scale 0.5s ease; }
.ring-label:not(:last-child) .ring-dot { opacity: 0; } /* Figma: dot on 04 */

/* Live states (script.js adds .is-live and moves .is-active): the active
   number is white with the red dot, the others dim; the active step card is
   full strength and the rest sit at 50% (as on orionix). */
.process.is-live .ring-dot { opacity: 0; scale: 0.3; }
.process.is-live .ring-label.is-active .ring-dot { opacity: 1; scale: 1; }
.process.is-live .ring-num { color: rgba(255, 255, 255, 0.4); transition: color 0.5s ease; }
.process.is-live .ring-label.is-active .ring-num { color: var(--white); }
.process.is-live .step-card { opacity: 0.5; transition: opacity 0.5s ease; }
.process.is-live .step-card.is-active { opacity: 1; }

.process-steps { position: relative; }
.process-step {
  height: 100vh;
  display: flex;
  align-items: center;
}
/* Step cards in orionix's "Brand Identity & Strategy" style: an open text
   block (no box), a big title, muted copy, then a row of pill tags.
   Their sizes, recoloured for the dark section: title 64/68 −0.04em,
   copy 16/24, tags 14/20 with 6×12 padding, gaps 16 / 32 / 8. */
.step-card {
  margin-left: calc(50% - 186px); /* Figma x 534 in a 1440 frame */
  width: 540px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.step-text { display: flex; flex-direction: column; gap: 16px; }
.step-card h3 {
  font-size: 64px;
  font-weight: 400;
  line-height: 68px;
  letter-spacing: -2.56px;
  white-space: nowrap;
}
.step-num { color: rgba(255, 255, 255, 0.4); }
.step-card p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: rgba(255, 255, 255, 0.6);
}
.step-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.step-tags li {
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: rgba(255, 255, 255, 0.85);
}

/* ==================== PURPOSE ==================== */
/* kononenkogroup.com "Refined & Bold Essential": the section is two screens
   tall and its stage pins full-screen. Halfway through, script.js adds
   .is-dark: background and text flip in 0.3s (their ease), the rays swap to
   Figma's dark version and the title swaps line by line. */
.purpose {
  position: relative;
  height: 200vh;
  background: var(--light-bg);
  color: #000;
  transition: background-color 0.3s cubic-bezier(0.17, 0.84, 0.44, 1),
              color 0.3s cubic-bezier(0.17, 0.84, 0.44, 1);
}
.purpose.is-dark { background: var(--bg); color: var(--white); }

.purpose-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}
/* The rays block is 871px plus its numbers (~943px tall). On short screens
   it shrinks to fit 92% of the height: tan(atan2(a, b)) is CSS for a ÷ b. */
.rays {
  position: relative;
  width: 871px;
  height: 871px;
  scale: min(1, tan(atan2(92vh, 943px)));
}
.rays-art,
.rays-svg { position: absolute; inset: 0; }
.rays-svg { transition: opacity 0.3s cubic-bezier(0.17, 0.84, 0.44, 1); }
.rays-svg-dark,
.purpose.is-dark .rays-svg { opacity: 0; }
.purpose.is-dark .rays-svg-dark { opacity: 1; }

/* Live rays (script.js): they replace the static Figma images, turn with
   the scroll and bend with its speed. Colour follows the section's text
   colour; 35% → 50% in the dark state, as on kononenko. */
.rays-live { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.purpose.rays-on .rays-live { display: block; }
.purpose.rays-on .rays-svg { display: none; }
.rays-lines { opacity: 0.35; transition: opacity 0.3s cubic-bezier(0.17, 0.84, 0.44, 1); }
.purpose.is-dark .rays-lines { opacity: 0.5; }
/* Fills the rays box, so the numbers' positions (Figma px, or the circle
   script.js moves them round) are measured from it even while the fade-in
   gives this layer a transform */
.rays-nums { position: absolute; inset: 0; }
.rays-nums span {
  position: absolute;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: normal;
  font-size: 13.825px;
  line-height: 20.738px;
  letter-spacing: -0.3687px;
  white-space: nowrap;
}
.rays-title {
  position: absolute;
  top: 363px;
  left: 180px;
  right: 180px;
  text-align: center;
}
/* The second title waits below its line masks; hidden until script.js
   has split it (and for reduced motion, where the swap doesn't run) */
.rays-title-alt { visibility: hidden; }
.purpose.is-live .rays-title-alt { visibility: visible; }

/* ==================== ART STRIP ==================== */
/* kononenkogroup.com "People & Process": one strip of artworks moved by
   script.js through three formations: arc → ring → half-ring. Each image is
   laid out at its base size and placed/scaled/rotated with one transform.
   Like their WebGL canvas it sits behind the content: the strip is layer 0
   and the content around it (the Purpose section above, the titles, the
   Experiences copy, the Brands section below) is layer 1. */
.art-strip {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}
.art-strip.is-visible { visibility: visible; }
.strip-img {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--strip-size, 283px);
  height: var(--strip-size, 283px);
  will-change: transform;
}
.strip-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the landing page each of the first 12 turns into for Experiences
   (script.js crossfades it in) */
.strip-img .strip-work { opacity: 0; }
.strip-img .crop-04a3c { object-position: 47.7% 50%; }
/* With the strip running, the static Figma tiles step aside (they stay as
   the layout and the reduced-motion version) */
.strip-on .arc-tiles,
.strip-on .ring-tile,
.strip-on .exp-photos { visibility: hidden; }

/* Experiences list (their stats): each entry is dim until it's the one at
   the screen centre, then full strength (0.3s) */
.strip-on .exp-item { opacity: 0.2; transition: opacity 0.3s; }
.strip-on .exp-item.is-active { opacity: 1; }

/* In front of the strip */
.purpose,
.ring-of-art-title,
.exp-copy,
.brands { position: relative; z-index: 1; }

/* ==================== ART ARC ==================== */
.art-arc {
  position: relative;
  height: 1067px;
  overflow: hidden;
}
.art-arc-title {
  position: absolute;
  top: var(--section-y);
  left: 59px;
  z-index: 1;
  white-space: nowrap;
}

.arc-tile,
.ring-tile,
.exp-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arc-tile img,
.ring-tile img,
.exp-tile img {
  flex: none;
  object-fit: cover;
  rotate: var(--r);
}
.arc-tile img { width: 400px; height: 400px; }

/* Tiles whose Figma fill is cropped: a rotated, clipped face */
.arc-tile .face {
  position: relative;
  flex: none;
  width: 400px;
  height: 400px;
  overflow: hidden;
  rotate: var(--r);
}
.arc-tile .face img { position: absolute; rotate: none; object-fit: fill; }
.face img.crop-2a594 { left: 1.15%; top: -14.15%; width: 100%; height: 133.33%; }
.face img.crop-b20b4 { left: -1.68%; top: -0.67%; width: 103.13%; height: 103.13%; }

/* ==================== ART RING ==================== */
.art-ring {
  padding: var(--section-y) 0;
  display: flex;
  justify-content: center;
}
.ring-of-art {
  position: relative;
  width: 1103.53px;
  height: 1107.38px;
}
.ring-tile img {
  width: 150px;
  height: 150px;
  border-radius: 4px;
}
.ring-of-art-title {
  position: absolute;
  left: 183px;
  top: 414px;
  width: 737px;
  text-align: center;
}

/* ==================== EXPERIENCE ==================== */
/* 180px bottom padding: the turning half-circle of landing pages reaches
   ~85px below the photo block, so this leaves them ~200px clear of the
   Brands title, close to the site's usual 240px between sections */
.experience {
  padding: var(--section-y) var(--gutter) 180px 0;
  display: flex;
  align-items: center;
  /* 164px in Figma; shrinks on laptops so the copy never gets pushed off-screen */
  gap: clamp(48px, calc(100% - 1221px), 164px);
}
.exp-photos {
  position: relative;
  flex: none;
  width: 556.29px;
  height: 1110px;
}
.exp-tile img {
  width: 193.005px;
  height: 193.005px;
  border-radius: 4.541px;
}
.exp-tile img.crop-04a3c { object-position: 47.7% 50%; }

.exp-copy {
  flex: 0 1 665px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 90px;
  font-weight: 600;
}
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  font-size: 54px;
  line-height: 1.2;
}
.exp-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.exp-date { line-height: 1.16; }

/* ==================== BRANDS ==================== */
.brands {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.brands-title { width: 560px; }

.brand-grid {
  width: 713.563px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
.brand-grid li {
  padding: 20px;
  border: 1px solid rgba(240, 240, 240, 0.12);
  border-radius: 8px;
  background: rgba(240, 240, 240, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-text {
  font-family: "Cabin", sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 43.871px;
  line-height: 1.16;
  white-space: nowrap;
}

/* ==================== SHOWCASE ==================== */
.showcase { position: relative; aspect-ratio: 1441 / 1191; overflow: hidden; }
.showcase-photo { width: 100%; height: 100%; object-fit: cover; }

/* The monitor's display: a 1440×900 screen that script.js maps onto the
   photo's screen corners with a perspective matrix. Hidden until then, so
   without JS the photo's own screenshot shows. */
.showcase-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #fff;
  visibility: hidden;
}
.showcase.is-live .showcase-screen { visibility: visible; }
.screen-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
/* Always fills the display: full width, and never shorter than the screen
   (a short page is scaled up to cover it, anchored at its top) */
.screen-page img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ==================== FOOTER ==================== */
.footer {
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}

.cta-card {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  padding: 80px 64px 60px;
  border-radius: 32px;
  background: var(--cta-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.cta-card > :not(.cta-glow) { position: relative; z-index: 1; }

/* Red gradient beam across the top of the card (Figma 84:887, updated
   2026-10-15): turned −176.79° so it glows down from the top edge. As in
   Figma it sits over the content, which tints the heading pink; it fades
   out above the button. Its width scales with the card (Figma: x −331 and
   1741.821 wide in a 1321px card), so wide screens stay covered edge to edge. */
.cta-glow {
  position: absolute;
  z-index: 2;
  top: -590.96px;
  left: -25.057%;
  width: 131.857%;
  height: 942.472px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cta-glow > div {
  flex: none;
  width: 97.424%; /* 1696.945 / 1741.821 */
  height: 848.758px;
  opacity: 0.92;
  rotate: -176.79deg;
  background: linear-gradient(180deg,
    rgba(255, 0, 34, 0) 0%,
    rgba(255, 0, 34, 0.68) 60%,
    rgba(255, 41, 48, 0.76) 66.25%,
    rgba(255, 74, 60, 0.84) 72.5%,
    rgba(255, 102, 70, 0.92) 78.75%,
    rgb(255, 125, 78) 85%);
}

.cta-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
}
.eyebrow-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 4px red;
}
.cta-title {
  margin-top: -8px; /* eyebrow → title gap is 24px; column gap is 32px */
  font-variation-settings: "opsz" 14, "wdth" 100; /* Figma now sets opsz 14 here too */
  font-size: 64px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.cta-bottom {
  display: flex;
  flex-direction: column;
  gap: 31px;
}
/* 10% white in the colour itself: its fade-in animates opacity to 1 */
.cta-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.socials {
  display: flex;
  gap: 20px;
}
.socials a {
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--off-white);
  border-radius: 100px;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(240, 240, 240, 0.9); /* text at 90% opacity, border solid */
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.socials a.is-hover { background: rgba(240, 240, 240, 0.1); color: #c4c4c4; }

.workspace { position: relative; width: 100%; }
.workspace-art { display: block; width: 100%; height: auto; }

/* The desk lamp's bulb, lit like a tube light. It lives inside the inlined
   illustration (g.bulb-light: a soft glow plus the drawn bulb circles), so
   the lampshade lines are drawn over it and the light mixes in beneath
   them; the glow uses screen blending so lines under it stay visible.
   script.js: .is-live keeps it off until the lamp is in view, .is-on then
   plays the start-up flicker after a short pause, and from then on it hums
   with a visible flicker burst every 7s, for as long as the page is open. */
.bulb-glow { mix-blend-mode: screen; }
.workspace.is-live .bulb-light { opacity: 0.15; }
.workspace.is-on .bulb-light {
  animation: bulb-start 1.8s linear 0.6s both, bulb-flicker 7s linear 2.4s infinite;
}
@keyframes bulb-start {
  0% { opacity: 0.15; }
  10% { opacity: 0.9; }
  16% { opacity: 0.15; }
  30% { opacity: 1; }
  38% { opacity: 0.25; }
  46% { opacity: 0.85; }
  52% { opacity: 0.15; }
  70%, 100% { opacity: 1; }
}
@keyframes bulb-flicker {
  0%, 30%, 60%, 76%, 100% { opacity: 1; }
  15% { opacity: 0.94; }
  45% { opacity: 0.96; }
  78% { opacity: 0.2; }
  79.5% { opacity: 1; }
  81% { opacity: 0.15; }
  82.5% { opacity: 0.9; }
  84% { opacity: 0.3; }
  86% { opacity: 1; }
  92% { opacity: 0.95; }
}

/* ==================== LOADER ==================== */
/* A design-tool canvas in the site's own look: dot grid on near-black,
   dark panels with a faint ring (like the hero toolbar), red as the
   selection colour, Bricolage UI text and a handwritten "silvia" (Ms Madi).
   Shown on every page load when JS runs (see the <head> gate). */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background-color: #0b0b0b;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px);
  background-size: 24px 24px;
  color: var(--white);
  overflow: hidden;
}
/* shown while JS runs it (it removes the loader itself, after the fade) */
.js .loader { display: block; }
html.is-loading,
html.is-loading body { overflow: hidden; }

/* top toolbar: tools in the middle, Present on the right */
.ld-tools {
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cta-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ld-tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: rgba(255, 255, 255, 0.55); }
.ld-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ld-tool.is-active { background: var(--red); color: var(--white); }
.ld-present {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 99px;
  background: var(--white);
  color: #000;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.45px;
  transition: background-color 0.15s ease;
}
.ld-present svg { width: 10px; height: 10px; fill: currentColor; }
.ld-present.is-pressed { background: #d9d9d9; }

/* layers panel */
.ld-layers {
  position: absolute;
  top: 20px;
  left: 24px;
  width: 220px;
  padding: 16px;
  border-radius: 12px;
  background: var(--cta-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ld-file { font-size: 14px; font-weight: 600; }
.ld-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ld-eyebrow span { width: 4px; height: 4px; border-radius: 999px; background: var(--red); box-shadow: 0 0 4px red; }
.ld-layers ul { display: flex; flex-direction: column; gap: 2px; }
.ld-layers li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease, background-color 0.3s ease;
}
.ld-layers li i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.25); }
.ld-layers li.is-done { color: var(--white); }
.ld-layers li.is-done i { color: var(--red); }
.ld-layers li.is-current { background: rgba(255, 255, 255, 0.06); }
.ld-progress { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ld-progress b { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ld-progress b i { display: block; height: 100%; width: 0; background: var(--red); }

/* the frame on the canvas */
.ld-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.ld-frame {
  position: relative;
  width: min(56vw, calc((100vh - 240px) * 1.6));
  aspect-ratio: 1440 / 900;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--red);
  transform-origin: 50% 50%;
}
.ld-label { position: absolute; bottom: calc(100% + 8px); left: 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.ld-size {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--red);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.ld-handle { position: absolute; width: 8px; height: 8px; background: var(--white); box-shadow: 0 0 0 1px var(--red); translate: -50% -50%; }
.ld-handle.tl { left: 0; top: 0; } .ld-handle.tr { left: 100%; top: 0; }
.ld-handle.bl { left: 0; top: 100%; } .ld-handle.br { left: 100%; top: 100%; }
.ld-sign { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the signature: Ms Madi, a handwritten script */
.ld-sign text {
  font-family: "Ms Madi", cursive;
  font-weight: 400;
  font-size: 400px;
  fill: var(--red);
  fill-opacity: 0;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-dasharray: 5200;
  stroke-dashoffset: 5200;
}
.ld-anchors rect { fill: var(--white); stroke: var(--red); stroke-width: 3; opacity: 0; }
.ld-anchors line { stroke: var(--red); stroke-width: 2.5; opacity: 0; }
.ld-anchors circle { fill: var(--red); opacity: 0; }

/* the multiplayer-style cursor (the site-wide "Me" cursor shares its look) */
.ld-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; }
.ld-cursor svg,
.me-cursor svg { width: 18px; height: 20px; fill: var(--red); stroke: var(--white); stroke-width: 1.2; stroke-linejoin: round; }
.ld-cursor span,
.me-cursor span {
  margin: 14px 0 0 -2px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--red);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

/* narrow screens: just the frame and the signature */
@media (max-width: 900px) { .ld-layers, .ld-tools { display: none; } }

/* reduced motion: the finished frame, then a simple fade */
@media (prefers-reduced-motion: reduce) {
  .ld-sign text { stroke-dashoffset: 0; fill-opacity: 1; }
}

/* ==================== CASE STUDY PAGES ====================
   One template for every case study, laid out like midu.design/kiwebank
   (1440 wide): centred title, meta and two lead lines; the cover image,
   inset 108px, growing from 90% as it scrolls in; then a sticky info
   card on the left (350px there, 380px here for the longer copy) while
   the project images scroll past on the right (16px apart, 16px corners);
   then two homepage work cards, and the homepage CTA and footer. */
.page-case .site-header { top: 30px; }

.cs {
  position: relative;
  /* clip, not hidden: hidden would stop the card from sticking */
  overflow-x: clip;
}
/* Light rays at the top (script.js draws them, as on midu.design/kiwebank):
   full width, one screen tall, behind the title */
.cs-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(100vh, 760px);
  display: block;
  pointer-events: none;
}
.cs > :not(.cs-rays) { position: relative; z-index: 1; }

/* Title, meta and lead: title 240px from the top, meta 24px under it,
   the two lead lines 175px under that, 784px apart edge to edge */
.cs-intro {
  padding: 230px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs-title {
  font-size: 82px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cs-meta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--dim);
}
.cs-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 4px red;
}
.cs-lead {
  margin-top: 160px;
  width: 784px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 64px;
  text-align: left;
}
.cs-lead p {
  width: 320px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--dim);
}

/* Cover: 120px under the lead, 108px in from each side (60 + 48) */
.cs-cover {
  margin: 120px calc(var(--gutter) + 48px) 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--card-dark);
}
.cs-cover img,
.cs-shot img {
  width: 100%;
  height: auto;
}

/* Sticky card + scrolling images, 200px under the cover */
.cs-body {
  margin-top: 200px;
  padding: 0 var(--gutter) 200px;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
/* script.js sets --cs-top: the card centred on screen, or, if it's taller
   than the screen, pinned by its bottom edge so all of it can be read */
.cs-aside {
  position: sticky;
  top: var(--cs-top, 130px);
}
.cs-card {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.cs-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  color: var(--dim);
}
.cs-card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--dim);
}
.cs-card-title {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}
.cs-facts {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.cs-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.3;
}
.cs-facts > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cs-facts dt { color: var(--dim); }
.cs-facts dd { margin: 0; text-align: right; }

/* Right column: groups 80px apart, images 16px apart */
.cs-gallery {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.cs-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-group-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* Every image the same height (930 × 575 there): cropped to fit, never
   squeezed. style="--pos: top" (or bottom, 30% etc.) picks which part shows. */
/* a little more air between the images themselves: 16 + 16 = 32px
   (the group title keeps its 16px) */
.cs-shot + .cs-shot { margin-top: 16px; }
.cs-shot {
  aspect-ratio: 930 / 575;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-dark);
}
.cs-shot img {
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

/* More work: two homepage work cards side by side */
.cs-next { padding: 0 var(--gutter); }
.cs-next-title { text-align: center; }
.cs-next-list {
  margin-top: 80px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.cs-next-list .work-card {
  flex: 1 0 0;
  width: auto;
}

/* ==================== CURSOR ====================
   Site-wide Figma-style cursor: the loader's red arrow with a "Me" name
   tag (script.js adds it once the loader is done, for mouse and trackpad
   only). Over the project cards it steps aside for their "View Case
   Study" pill and the normal pointer comes back. */
html.has-me-cursor,
html.has-me-cursor * { cursor: none !important; }
html.has-me-cursor .work-card,
html.has-me-cursor .work-card * { cursor: pointer !important; }

.me-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  /* the arrow's tip (2, 2 in its 18 × 20 box) sits on the pointer */
  margin: -2px 0 0 -2px;
  transform-origin: 2px 2px;
  transition: opacity 0.2s ease, scale 0.15s ease;
}
.me-cursor.is-on { opacity: 1; }
.me-cursor.is-pressed { scale: 0.9; }

/* ==================== DESKTOP: SHORTER WINDOWS ====================
   The hero is the 1131px-tall Figma frame, with the big "silvia" along its
   bottom. In windows shorter than that (most laptops and browser windows)
   the name fell below the fold. There the headline, image and gaps scale
   down with the window height (--hs), in their Figma proportions, and the
   name takes the room left below them (--hn): as big as fits with the
   bottom of its letters just past the bottom of the screen (up to its
   505px Figma size). The red wave keeps its Figma size relative to the
   name. Windows 1131px and taller are unchanged.
   The top padding (--hp) never drops below 150px: the headline starts
   below the logo, and its little toolbar sits between the logo and the
   menu button. script.js measures the name live, so the wave still meets it.
   The name box top sits 416px × --hs below the padding (the 307px headline
   + its 109px gap); the letters' baseline sits 0.80 × the size into the
   box and they're 0.73 × the size tall, so dividing by 0.76 lets ~5% of the
   letters run past the screen edge. */
@media (min-width: 1200px) and (max-height: 1130px) {
  .hero {
    --hs: max(0.5, tan(atan2(100vh, 1131px)));
    --hp: max(150px, calc(221.58px * var(--hs)));
    --hn: min(505.17px, calc((100vh - var(--hp) - 416px * var(--hs)) / 0.76));
  }
  .hero-inner { padding-top: var(--hp); }
  .hero-row { gap: calc(81px * var(--hs)); }
  .hero-title { width: calc(630px * var(--hs)); font-size: calc(80px * var(--hs)); }
  .hero-shot { width: calc(530px * var(--hs)); height: calc(295px * var(--hs)); }
  .hero-name {
    margin-top: calc(109px * var(--hs));
    height: var(--hn);
    font-size: var(--hn);
  }
  .hero-wave { height: calc(var(--hn) * 1.6233); } /* 820 / 505.17 */
}

/* ==================== RESPONSIVE ====================
   Desktop (1200px and wider) is the Figma build above and stays exactly as
   it is: every rule below sits inside a max-width query.
   Tablet: 768–1199px. Mobile: up to 767px. Same look, type and motion,
   re-flowed: rows stack, fixed Figma widths become fluid, type steps down. */

/* ---------- Tablet (and below) ---------- */
@media (max-width: 1199px) {
  :root { --gutter: 40px; --section-y: 96px; }
  body { min-width: 0; }
  .h2 { font-size: 56px; }

  /* Nothing may stick out sideways: on phones that widens the page and
     leaves a black strip on the right. Safety net for the whole page (clip,
     not hidden: hidden would turn body into a scroller and stop the pinned
     sections from sticking). */
  html,
  body { overflow-x: clip; }

  /* Header */
  .site-header,
  .page-case .site-header { top: 32px; }

  /* Hero: headline above the image, then the big "silvia" across the width */
  .hero-inner { padding-top: 190px; }
  .hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 0 var(--gutter);
  }
  .hero-title { width: auto; font-size: 72px; }
  .hero-shot {
    width: min(100%, 640px);
    height: auto;
    aspect-ratio: 530 / 295;
  }
  /* "silvia" keeps its desktop share of the width (505 / 1440) */
  .hero-name { margin-top: 80px; height: 35.08vw; font-size: 35.08vw; }
  .hero-wave { height: 57vw; } /* 820 / 1440 */

  /* About */
  .about-title { width: auto; }
  .about-title-1 { margin-left: 80px; }
  .about-body { margin-top: 64px; gap: 40px; }
  .about-text { font-size: 24px; }
  .about-photo { margin-top: 80px; }

  /* Work */
  .work-title { width: 100%; }
  .work-title-1 { white-space: normal; }
  .work-list { margin-top: 72px; gap: 64px; }
  .work-card { width: 72%; gap: 24px; }
  .work-card h3 { font-size: 28px; }
  .work-card h3.nowrap { width: 91.46%; white-space: normal; }

  /* Services */
  .services-inner { width: 100%; max-width: 870px; gap: 64px; }
  .services-title { width: 100%; }
  .svc-card { width: 100%; }
  .svc-card-body { min-height: 0; padding: 32px; gap: 24px; }
  .svc-card h3 { font-size: 26px; line-height: 30px; letter-spacing: -0.9px; }
  .svc-card p { font-size: 18px; }

  /* Process: no full-screen pinning here (the ring, the copy and the tags
     can't share one small screen). The steps flow as a vertical timeline:
     a thin line down the left, a dot per step that turns red (and the card
     brightens) as the step reaches the middle of the screen, driven by the
     same script as the desktop ring. The breathing glow stays behind. */
  .process-title { width: auto; margin-right: var(--gutter); }
  /* room under the heading; position: static lets the glow layer below fill
     the whole section, heading included (not just the steps area) */
  .process-pin { position: static; padding: 112px var(--gutter) var(--section-y); }
  .process-stage {
    position: absolute;
    inset: 0;
    height: auto;
    margin-bottom: 0;
  }
  .ring { display: none; }
  .process-steps {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-left: 40px;
  }
  .process-steps::before {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 22px;
    bottom: 22px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
  }
  .process-step { height: auto; display: block; }
  .step-card { position: relative; margin-left: 0; width: auto; max-width: 600px; }
  .step-card::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 17px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
  }
  .step-card.is-active::before { background: var(--red); box-shadow: 0 0 8px rgba(255, 0, 0, 0.6); }
  .step-card h3 { font-size: 44px; line-height: 44px; letter-spacing: -1.76px; }

  /* Purpose: the rays also shrink to fit the width. Their 871px layout box
     can be wider or taller than the screen, which the grid would pin to the
     top-left; explicit margins keep it centred (scale works from its centre) */
  .purpose-stage {
    overflow: hidden;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* tracks = the screen, not the 871px box */
  }
  .rays {
    place-self: start;
    margin-left: calc((100% - 871px) / 2);
    margin-top: calc((100svh - 871px) / 2);
    scale: min(1, tan(atan2(92vh, 943px)), tan(atan2(92vw, 943px)));
  }
  /* The titles sit exactly where the rays meet, and keep their desktop size
     relative to the rays (the whole block is scaled down to fit, so they
     show at ~54px on a tablet and ~35px on a phone, like the other headings) */
  .h2.rays-title {
    top: 50%;
    translate: 0 -50%;
    font-size: 72px;
  }

  /* Art arc */
  .art-arc { height: 860px; }
  .art-arc-title { left: var(--gutter); }

  /* Art ring: held on screen (sticky) for 70% of a screen of scrolling, so
     the ring that forms around the title (script.js fits it to the screen)
     is seen whole and turns before the page moves on. The strip draws the
     ring; the static Figma tiles are desktop-sized. */
  .art-ring { display: block; height: 170svh; padding: 0; }
  .ring-of-art {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
  }
  .ring-tile { display: none; }
  .ring-of-art-title {
    left: 50%;
    top: 50%;
    width: 460px;
    font-size: 48px;
    translate: -50% -50%;
  }

  /* The wide pieces are clipped where they sit, with overflow: hidden
     (older iPhone Safari ignores overflow: clip and would let them widen
     the page): the Process glow and ring, the desktop-sized static tiles,
     and the strip's off-screen images. The pinned stages are the sticky
     boxes themselves, so clipping them doesn't stop them sticking. */
  .process-stage,
  .art-strip,
  .exp-photos { overflow: hidden; }

  /* Experience: the turning landing pages first, the list under them */
  .experience {
    flex-direction: column;
    align-items: stretch;
    padding: var(--section-y) 0 120px;
    gap: 48px;
  }
  /* the turning half-circle (540px radius, 190px pages) reaches ~100px past
     the desktop 1110px box at top and bottom; stacked, that ran into the
     title under it, so the box holds the whole circle here */
  .exp-photos { height: 1340px; }
  .exp-copy { flex: none; padding: 0 var(--gutter); gap: 56px; }
  .exp-list { font-size: 44px; gap: 48px; }
  .exp-item { gap: 20px; }

  /* Brands */
  .brands { flex-direction: column; gap: 56px; }
  .brands-title { width: auto; }
  .brand-grid { width: 100%; grid-auto-rows: 160px; }
  .brand-grid img { max-width: 100%; height: auto; }

  /* Footer */
  .cta-card { padding: 64px 40px 48px; border-radius: 28px; gap: 48px; }
  .cta-title { font-size: 52px; }
  .socials { flex-wrap: wrap; gap: 12px; }

  /* Case study pages */
  .cs-rays { height: max(100svh, 700px); }
  .cs-intro { padding-top: 180px; }
  .cs-title { font-size: 64px; }
  .cs-lead { margin-top: 96px; width: 100%; max-width: 784px; }
  .cs-cover { margin: 80px var(--gutter) 0; }
  .cs-body {
    margin-top: 120px;
    padding-bottom: 140px;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
  }
  .cs-next-list { gap: 32px; }
  .cs-next-list .work-card { width: auto; }
  .cs-next-list .work-card h3 { width: 100%; font-size: 24px; }
}

/* ---------- Portrait tablet: case study card above the images ---------- */
@media (max-width: 1023px) {
  .cs-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cs-aside { position: static; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 72px; }
  .h2 { font-size: 36px; }

  /* Header: a smaller logo and menu button */
  .site-header,
  .page-case .site-header { top: 20px; }
  .brand { gap: 3px; }
  .brand-mark { width: 36px; height: 44.4px; }
  .brand > span:last-child { font-size: 11px; letter-spacing: 3px; }
  .site-nav,
  .menu-panel,
  .menu-btn { width: 48px; height: 48px; }
  .menu-panel { border-radius: 24px; }
  .menu-label { top: 35px; }
  .menu-list { padding-top: 80px; }
  .menu-link { font-size: 30px; }

  /* Hero */
  .hero-inner { padding-top: 150px; }
  .hero-row { gap: 36px; }
  .hero-title { font-size: min(44px, 10.6vw); }
  .hero-title-sub { margin-top: 4px; }
  .hero-shot { width: 100%; }
  .hero-name { margin-top: 56px; }

  /* About */
  .about-title-1 { margin-left: 0; }
  .about-body { flex-direction: column; margin-top: 40px; gap: 56px; }
  .about-copy,
  .about-photo { width: 100%; }
  .about-copy { position: relative; z-index: 1; gap: 32px; } /* text and button stay above the photo */
  .about-photo { margin-top: 0; }
  .about-text { font-size: 20px; }

  /* Work */
  .work-list { margin-top: 48px; gap: 48px; }
  .work-card { width: 100%; gap: 16px; }
  .work-card h3,
  .work-card h3.full,
  .work-card h3.nowrap { width: 100%; font-size: 20px; }

  /* Services: one column */
  .services-inner { gap: 40px; }
  .services-title-1 { text-align: left; }
  .services-grid { flex-direction: column; gap: 16px; }
  .services-col { flex: none; width: 100%; gap: 16px; }
  .services-col.is-offset { padding-top: 0; }
  .svc-card-body { padding: 24px; }
  .svc-card h3 { font-size: 22px; line-height: 26px; letter-spacing: -0.6px; }
  .svc-card p { font-size: 16px; }

  /* Process: the timeline, smaller type */
  .process-glow { right: -420px; }
  .process-pin { padding-top: 80px; }
  .process-steps { gap: 48px; padding-left: 28px; }
  .process-steps::before { top: 16px; bottom: 16px; }
  .step-card { gap: 20px; }
  .step-card::before { left: -28px; top: 12px; }
  .step-card h3 { font-size: 32px; line-height: 34px; letter-spacing: -1.1px; white-space: normal; }
  .step-card p { font-size: 15px; line-height: 22px; }
  .step-tags li { padding: 5px 10px; font-size: 13px; }

  /* Purpose: the rays a little wider than the screen, so the title reads */
  .rays { scale: min(1, tan(atan2(92vh, 943px)), tan(atan2(118vw, 943px))); }

  /* Art arc */
  .art-arc { height: 620px; }
  .art-arc-title { right: var(--gutter); white-space: normal; }

  /* Art ring: the title sized to sit inside the smaller ring */
  .ring-of-art-title { width: min(280px, 72vw); font-size: min(30px, 7.7vw); }

  /* Experience: room for the smaller half-ring (script.js scales it) */
  .experience { padding-bottom: 96px; gap: 32px; }
  .exp-photos { width: 100%; height: 182vw; }
  .exp-copy { gap: 40px; }
  .exp-list { font-size: 28px; gap: 36px; }
  .exp-item { gap: 12px; }

  /* Brands: two columns */
  .brands { gap: 40px; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 112px; gap: 12px; }
  .brand-grid li { padding: 16px; }
  .brand-text { font-size: 30px; }

  /* Footer */
  .footer { padding-top: 64px; gap: 32px; }
  .cta-card { padding: 48px 24px 32px; border-radius: 24px; gap: 40px; }
  .cta-top { gap: 24px; }
  .cta-title { font-size: 34px; white-space: normal; }
  .socials a { height: 40px; padding: 0 16px; font-size: 13px; }

  /* Loader: a bigger frame on a narrow screen */
  .ld-frame { width: min(86vw, calc((100vh - 240px) * 1.6)); }
  .ld-present { top: 16px; right: 16px; }

  /* Case study pages */
  .cs-rays { height: 100svh; }
  .cs-intro { padding-top: 140px; }
  .cs-title { font-size: 42px; line-height: 1.05; }
  /* the project type on its own line, then year · company (no dot left
     dangling at a line end) */
  .cs-meta { flex-wrap: wrap; justify-content: center; row-gap: 8px; font-size: 14px; }
  /* only when there are three parts (type · year · company); two stay on one line */
  .cs-meta > span:first-child:nth-last-child(n+5) { width: 100%; }
  .cs-meta > span:first-child:nth-last-child(n+5) + i { display: none; }
  .cs-lead { margin-top: 56px; flex-direction: column; gap: 16px; }
  .cs-lead p { width: auto; font-size: 17px; }
  .cs-cover { margin-top: 56px; border-radius: 16px; }
  .cs-body { margin-top: 80px; padding-bottom: 96px; }
  .cs-card { padding: 22px; }
  .cs-card-title { font-size: 22px; }
  .cs-gallery { gap: 56px; }
  .cs-group-title { font-size: 22px; }
  .cs-shot { border-radius: 12px; }
  .cs-shot + .cs-shot { margin-top: 8px; } /* 24px between images */
  .cs-next-list { margin-top: 48px; flex-direction: column; gap: 48px; }
  .cs-next-list .work-card { flex: none; width: 100%; }
  .cs-next-list .work-card h3 { font-size: 20px; }
}