:root {
  --teal: #7d959b;
  --teal-dark: #606d70;
  --accent: #3fadbe;
  --accent-line: #57a9c4;
  --ink: #3f3f3f;
  --ink-soft: #5d5d5d;
  --muted: #808080;
  --muted-2: #a3a3a3;
  --line: #e3e3e3;
  --header-bg: #f9f9f9;
  --header-line: #e8e8e8;

  --font-sans: "Manrope", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  --gutter: 79px;
  --contact-ink: #27555f;
  --neon-green: #39ff14;
  --neon-pink: #ff2bd6;
  --neon-orange: #ff8a00;
  /* hover purple: the neon purple darkened just enough to read on light backgrounds
     (4.6:1 or more on white, #f9f9f9 and #f7f6f3, WCAG AA for text and icons) */
  --hover-purple: #cc00b7;
  --header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-btn { display: inline-grid; place-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 60px 0 var(--gutter);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 4px 4px rgba(229, 229, 229, 0.25);
}
.logo { font-size: 20px; color: #515151; white-space: nowrap; } /* same grey as "cp estudi" on About */
.logo__light { font-weight: 200; }
.logo__strong { font-weight: 400; }
.header__divider { position: relative; width: 1px; height: 36px; margin: 0 16px 0 14px; flex: none; }
/* About has no logo: the line sits on the text's left edge (Figma 62:1754) */
body[data-page="about"] .site-header { padding-left: 78px; }
body[data-page="about"] .header__divider { margin-left: 0; }
.header__divider img { position: absolute; top: 50%; left: 50%; width: 36px; height: 1px; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.crumb {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}
/* nudged down so "AI Lab", "Furniture"... share the logo's baseline */
.crumb { position: relative; top: 1.5px; }
.crumb img { width: 16px; height: 16px; transition: transform 0.2s; }
.crumb:hover { color: var(--teal-dark); }
.crumb[aria-expanded="true"] img { transform: rotate(90deg); }
.sections { position: relative; }
.menu--sections { left: -5px; right: auto; top: calc(100% + 11px); }
.header__actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 23px; }
.cart-btn { position: relative; width: 24px; height: 24px; }
.cart-btn img { width: 24px; height: 24px; }
.contact-btn { position: relative; width: 24px; height: 24px; }
.contact-btn img { width: 19px; height: 19px; transition: opacity 0.2s; }
/* On hover the share and send icons turn neon purple, like the other hovers (same shape, recoloured) */
.contact-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 19px; height: 19px;
  background: var(--hover-purple);
  -webkit-mask: var(--shape) center / 19px 19px no-repeat; mask: var(--shape) center / 19px 19px no-repeat;
  filter: drop-shadow(0 0 3px rgba(204, 0, 183, 0.2));
  opacity: 0; transition: opacity 0.2s;
}
.share-btn { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 15C15.9997 14.9998 15.5044 15.1001 15.0436 15.2948C14.5827 15.4894 14.1656 15.7746 13.8169 16.1334L9.495 13.3556C9.83496 12.4838 9.83496 11.5162 9.495 10.6444L13.8169 7.86656C14.4661 8.53155 15.339 8.9318 16.2665 8.98971C17.1941 9.04763 18.11 8.75908 18.8369 8.18001C19.5637 7.60095 20.0497 6.77261 20.2005 5.85561C20.3513 4.93861 20.1563 3.99828 19.6532 3.21691C19.1501 2.43554 18.3748 1.86882 17.4776 1.62661C16.5804 1.3844 15.6252 1.48396 14.7973 1.90599C13.9693 2.32802 13.3275 3.04245 12.9964 3.91077C12.6652 4.77909 12.6683 5.73944 13.005 6.60562L8.68313 9.38344C8.16269 8.84913 7.49474 8.48217 6.76466 8.32945C6.03458 8.17673 5.27555 8.24519 4.58459 8.52609C3.89362 8.80699 3.30212 9.28756 2.8857 9.90637C2.46927 10.5252 2.24684 11.2541 2.24684 12C2.24684 12.7459 2.46927 13.4748 2.8857 14.0936C3.30212 14.7124 3.89362 15.193 4.58459 15.4739C5.27555 15.7548 6.03458 15.8233 6.76466 15.6706C7.49474 15.5178 8.16269 15.1509 8.68313 14.6166L13.005 17.3944C12.7155 18.1411 12.6726 18.9609 12.8827 19.7338C13.0929 20.5067 13.5449 21.1919 14.1727 21.6893C14.8004 22.1867 15.5709 22.47 16.3714 22.4977C17.1718 22.5255 17.9601 22.2963 18.6208 21.8436C19.2815 21.391 19.78 20.7387 20.0432 19.9822C20.3063 19.2258 20.3204 18.405 20.0833 17.64C19.8463 16.875 19.3705 16.2059 18.7257 15.7309C18.0809 15.2558 17.3009 14.9997 16.5 15ZM16.5 3C16.945 3 17.38 3.13196 17.75 3.37919C18.12 3.62643 18.4084 3.97783 18.5787 4.38896C18.749 4.8001 18.7936 5.2525 18.7068 5.68895C18.62 6.12541 18.4057 6.52632 18.091 6.84099C17.7763 7.15566 17.3754 7.36995 16.939 7.45677C16.5025 7.54358 16.0501 7.49903 15.639 7.32873C15.2278 7.15843 14.8764 6.87004 14.6292 6.50003C14.382 6.13002 14.25 5.69501 14.25 5.25C14.25 4.65326 14.4871 4.08097 14.909 3.65901C15.331 3.23705 15.9033 3 16.5 3ZM6 14.25C5.55499 14.25 5.11998 14.118 4.74997 13.8708C4.37996 13.6236 4.09157 13.2722 3.92127 12.861C3.75097 12.4499 3.70642 11.9975 3.79323 11.561C3.88005 11.1246 4.09434 10.7237 4.40901 10.409C4.72368 10.0943 5.12459 9.88005 5.56105 9.79323C5.9975 9.70642 6.4499 9.75097 6.86104 9.92127C7.27217 10.0916 7.62357 10.38 7.87081 10.75C8.11804 11.12 8.25 11.555 8.25 12C8.25 12.5967 8.01295 13.169 7.59099 13.591C7.16903 14.0129 6.59674 14.25 6 14.25ZM16.5 21C16.055 21 15.62 20.868 15.25 20.6208C14.88 20.3736 14.5916 20.0222 14.4213 19.611C14.251 19.1999 14.2064 18.7475 14.2932 18.311C14.3801 17.8746 14.5943 17.4737 14.909 17.159C15.2237 16.8443 15.6246 16.63 16.061 16.5432C16.4975 16.4564 16.9499 16.501 17.361 16.6713C17.7722 16.8416 18.1236 17.13 18.3708 17.5C18.618 17.87 18.75 18.305 18.75 18.75C18.75 19.3467 18.5129 19.919 18.091 20.341C17.669 20.7629 17.0967 21 16.5 21Z'/%3E%3C/svg%3E"); }
.contact-btn:not(.share-btn) { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.3112 2.68875C21.1226 2.50025 20.8872 2.36544 20.6291 2.29821C20.3711 2.23097 20.0997 2.23375 19.8431 2.30625H19.8291L1.83469 7.76625C1.54256 7.85044 1.28291 8.02141 1.09014 8.25651C0.897379 8.4916 0.780602 8.77972 0.755287 9.08269C0.729972 9.38565 0.797315 9.68915 0.948391 9.95298C1.09947 10.2168 1.32714 10.4285 1.60125 10.56L9.5625 14.4375L13.4344 22.3941C13.5548 22.6511 13.7463 22.8682 13.9862 23.0199C14.226 23.1716 14.5043 23.2514 14.7881 23.25C14.8312 23.25 14.8744 23.2481 14.9175 23.2444C15.2202 23.2199 15.5082 23.1034 15.7428 22.9105C15.9774 22.7176 16.1474 22.4576 16.23 22.1653L21.6862 4.17094C21.6862 4.16625 21.6862 4.16156 21.6862 4.15687C21.7597 3.9009 21.7637 3.62999 21.6978 3.37198C21.6319 3.11397 21.4984 2.87815 21.3112 2.68875ZM14.7966 21.7359L14.7919 21.7491V21.7425L11.0363 14.0269L15.5362 9.52688C15.671 9.38508 15.745 9.19627 15.7425 9.00069C15.7399 8.80512 15.6611 8.61827 15.5228 8.47997C15.3845 8.34166 15.1977 8.26286 15.0021 8.26036C14.8065 8.25785 14.6177 8.33185 14.4759 8.46656L9.97594 12.9666L2.2575 9.21094H2.25094H2.26406L20.25 3.75L14.7966 21.7359Z'/%3E%3C/svg%3E"); }
.contact-btn:hover::after, .contact-btn:focus-visible::after { opacity: 1; }
.contact-btn:hover img, .contact-btn:focus-visible img { opacity: 0; }
/* Small tooltips under the header icons (Share my studio page / Contact) */
.contact-btn .tip {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 30;
  padding: 5px 9px; border: 1px solid #ececec; border-radius: 4px;
  background: #fff; box-shadow: 0 4px 16px rgba(219, 211, 211, 0.15);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.2; color: #454545; white-space: nowrap; /* 9.6:1 */
  opacity: 0; visibility: hidden; transform: translate(-50%, -3px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s; pointer-events: none;
}
.contact-btn:last-child .tip { left: auto; right: -6px; transform: translateY(-3px); } /* (kept inside the screen edge) */
.contact-btn:hover .tip, .contact-btn:focus-visible .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.contact-btn:last-child:hover .tip, .contact-btn:last-child:focus-visible .tip { transform: none; }
@media (hover: none) { .contact-btn .tip { display: none; } }
.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Same look as the AI Lab's floating menu (Figma "AI Lab Expanded") */
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: -20px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #636363;
}
.menu[hidden] { display: none; }
.menu a:hover { color: #4f7d8e; }
.menu a[aria-current] { font-weight: 600; color: #749cac; }
.menu a { display: block; width: 100%; }

/* ---------- Photos ---------- */
.photo {
  position: relative;
  display: block;
  width: calc(var(--w) * 1px);
  max-width: 100%;
  aspect-ratio: var(--w) / var(--h);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--crop { overflow: hidden; }
.photo--crop img { position: absolute; max-width: none; object-fit: fill; }

/* ---------- Collection grid ---------- */
.collection { padding: 10px 24px 260px; } /* room below the last piece for its description on hover */
.collection__intro {
  margin: 40px 0 0 60px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  color: #000;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1410px;
  margin: 0 auto;
}
.grid--furniture { grid-auto-rows: minmax(440px, auto); }
.grid--softgoods { grid-auto-rows: minmax(300px, auto); row-gap: 30px; }
.grid--shop { grid-auto-rows: minmax(440px, auto); }

.card { display: grid; place-items: center; min-width: 0; padding: 16px; }
.card__frame { position: relative; width: min(420px, 100%); --info-w: min(88%, 341px); }
.card__link { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.card__fit { display: block; }
.card__fit .photo { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
/* Softgoods: the photo spans exactly the hover line */
.grid--softgoods .card__fit { width: var(--info-w) !important; height: auto !important; }
.grid--softgoods .card__fit .photo { aspect-ratio: var(--w) / var(--h); }

.social {
  display: flex;
  gap: 8px;
  padding: 0 16px;
}
.social .icon-btn { position: relative; width: 24px; height: 24px; }
.social img { width: 24px; height: 24px; transition: opacity 0.2s; }
.fav.is-on img { filter: brightness(0.7) saturate(2); }
/* On hover the heart and share icons glow neon purple (as the About links): the same icon shape, recoloured */
.social .icon-btn::after {
  content: ""; position: absolute; inset: 0;
  background: var(--glow);
  -webkit-mask: var(--shape) center / 24px 24px no-repeat; mask: var(--shape) center / 24px 24px no-repeat;
  filter: drop-shadow(0 0 3px var(--glow));
  opacity: 0; transition: opacity 0.2s;
}
/* (shapes embedded so they also work when the site is opened from a folder) */
.social .fav { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6875 3.75C14.7516 3.75 13.0566 4.5825 12 5.98969C10.9434 4.5825 9.24844 3.75 7.3125 3.75C5.77146 3.75174 4.29404 4.36468 3.20436 5.45436C2.11468 6.54404 1.50174 8.02146 1.5 9.5625C1.5 16.125 11.2303 21.4369 11.6447 21.6562C11.7539 21.715 11.876 21.7458 12 21.7458C12.124 21.7458 12.2461 21.715 12.3553 21.6562C12.7697 21.4369 22.5 16.125 22.5 9.5625C22.4983 8.02146 21.8853 6.54404 20.7956 5.45436C19.706 4.36468 18.2285 3.75174 16.6875 3.75ZM12 20.1375C10.2881 19.14 3 14.5959 3 9.5625C3.00149 8.41921 3.45632 7.32317 4.26475 6.51475C5.07317 5.70632 6.16921 5.25149 7.3125 5.25C9.13594 5.25 10.6669 6.22125 11.3062 7.78125C11.3628 7.91881 11.4589 8.03646 11.5824 8.11926C11.7059 8.20207 11.8513 8.24627 12 8.24627C12.1487 8.24627 12.2941 8.20207 12.4176 8.11926C12.5411 8.03646 12.6372 7.91881 12.6937 7.78125C13.3331 6.21844 14.8641 5.25 16.6875 5.25C17.8308 5.25149 18.9268 5.70632 19.7353 6.51475C20.5437 7.32317 20.9985 8.41921 21 9.5625C21 14.5884 13.71 19.1391 12 20.1375Z'/%3E%3C/svg%3E"); --glow: var(--hover-purple); }
.social [data-share] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 15C15.9997 14.9998 15.5044 15.1001 15.0436 15.2948C14.5827 15.4894 14.1656 15.7746 13.8169 16.1334L9.495 13.3556C9.83496 12.4838 9.83496 11.5162 9.495 10.6444L13.8169 7.86656C14.4661 8.53155 15.339 8.9318 16.2665 8.98971C17.1941 9.04763 18.11 8.75908 18.8369 8.18001C19.5637 7.60095 20.0497 6.77261 20.2005 5.85561C20.3513 4.93861 20.1563 3.99828 19.6532 3.21691C19.1501 2.43554 18.3748 1.86882 17.4776 1.62661C16.5804 1.3844 15.6252 1.48396 14.7973 1.90599C13.9693 2.32802 13.3275 3.04245 12.9964 3.91077C12.6652 4.77909 12.6683 5.73944 13.005 6.60562L8.68313 9.38344C8.16269 8.84913 7.49474 8.48217 6.76466 8.32945C6.03458 8.17673 5.27555 8.24519 4.58459 8.52609C3.89362 8.80699 3.30212 9.28756 2.8857 9.90637C2.46927 10.5252 2.24684 11.2541 2.24684 12C2.24684 12.7459 2.46927 13.4748 2.8857 14.0936C3.30212 14.7124 3.89362 15.193 4.58459 15.4739C5.27555 15.7548 6.03458 15.8233 6.76466 15.6706C7.49474 15.5178 8.16269 15.1509 8.68313 14.6166L13.005 17.3944C12.7155 18.1411 12.6726 18.9609 12.8827 19.7338C13.0929 20.5067 13.5449 21.1919 14.1727 21.6893C14.8004 22.1867 15.5709 22.47 16.3714 22.4977C17.1718 22.5255 17.9601 22.2963 18.6208 21.8436C19.2815 21.391 19.78 20.7387 20.0432 19.9822C20.3063 19.2258 20.3204 18.405 20.0833 17.64C19.8463 16.875 19.3705 16.2059 18.7257 15.7309C18.0809 15.2558 17.3009 14.9997 16.5 15ZM16.5 3C16.945 3 17.38 3.13196 17.75 3.37919C18.12 3.62643 18.4084 3.97783 18.5787 4.38896C18.749 4.8001 18.7936 5.2525 18.7068 5.68895C18.62 6.12541 18.4057 6.52632 18.091 6.84099C17.7763 7.15566 17.3754 7.36995 16.939 7.45677C16.5025 7.54358 16.0501 7.49903 15.639 7.32873C15.2278 7.15843 14.8764 6.87004 14.6292 6.50003C14.382 6.13002 14.25 5.69501 14.25 5.25C14.25 4.65326 14.4871 4.08097 14.909 3.65901C15.331 3.23705 15.9033 3 16.5 3ZM6 14.25C5.55499 14.25 5.11998 14.118 4.74997 13.8708C4.37996 13.6236 4.09157 13.2722 3.92127 12.861C3.75097 12.4499 3.70642 11.9975 3.79323 11.561C3.88005 11.1246 4.09434 10.7237 4.40901 10.409C4.72368 10.0943 5.12459 9.88005 5.56105 9.79323C5.9975 9.70642 6.4499 9.75097 6.86104 9.92127C7.27217 10.0916 7.62357 10.38 7.87081 10.75C8.11804 11.12 8.25 11.555 8.25 12C8.25 12.5967 8.01295 13.169 7.59099 13.591C7.16903 14.0129 6.59674 14.25 6 14.25ZM16.5 21C16.055 21 15.62 20.868 15.25 20.6208C14.88 20.3736 14.5916 20.0222 14.4213 19.611C14.251 19.1999 14.2064 18.7475 14.2932 18.311C14.3801 17.8746 14.5943 17.4737 14.909 17.159C15.2237 16.8443 15.6246 16.63 16.061 16.5432C16.4975 16.4564 16.9499 16.501 17.361 16.6713C17.7722 16.8416 18.1236 17.13 18.3708 17.5C18.618 17.87 18.75 18.305 18.75 18.75C18.75 19.3467 18.5129 19.919 18.091 20.341C17.669 20.7629 17.0967 21 16.5 21Z'/%3E%3C/svg%3E"); --glow: var(--hover-purple); }
.social .icon-btn:hover::after, .social .icon-btn:focus-visible::after { opacity: 1; }
.social .icon-btn:hover img, .social .icon-btn:focus-visible img { opacity: 0; }

.buy {
  width: 83px;
  height: 66px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  flex: none;
}
.buy__add {
  display: block;
  width: calc(100% + 2px);
  margin: -1px -1px 0;
  padding: 8px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  text-align: left;
}
.buy__add:hover { background: var(--teal-dark); }

.card .social { position: absolute; top: calc(100% - 16px); right: calc((100% - var(--info-w)) / 2); padding: 0; }
.card .buy { position: absolute; top: 10px; right: 10px; }
.card__info {
  position: absolute;
  z-index: 2;
  top: calc(100% + 22px);
  left: 0;
  right: 0;
  width: var(--info-w);
  margin: 0 auto;
  padding: 10px 0 6px;
  border-top: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.card__info h2 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.card__info p { font-size: 12px; line-height: normal; }
.card__price { margin-top: 4px; font-weight: 700; }

@media (hover: hover) {
  .card .social, .card .buy, .card__info {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .card:hover .social, .card:hover .buy, .card:hover .card__info,
  .card:focus-within .social, .card:focus-within .buy, .card:focus-within .card__info {
    opacity: 1;
    visibility: visible;
  }
  .card:hover { z-index: 3; position: relative; }
}
@media (hover: none) {
  .card .social, .card .buy, .card__info p { display: none; }
  .card__info { position: static; width: auto; border: 0; padding-top: 10px; }
}

/* ---------- Product detail ---------- */
.detail { padding: 34px 67px 120px 93px; max-width: 1440px; margin: 0 auto; }
.detail__bar { display: flex; justify-content: space-between; align-items: flex-start; }
.back { width: 32px; height: 32px; }
.back img { width: 32px; height: 32px; }
.detail .social { margin-top: 26px; }
.detail__gallery {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin: 40px 0 0 -15px;
}
.detail__photo { flex: 0 1 auto; max-height: 340px; width: auto; height: calc(var(--h) * 1px); max-width: 100%; }
.detail__gallery .photo { min-width: 0; }
.detail__gallery--pair { justify-content: flex-start; }
.detail__info {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 87px;
  padding: 0 0 18px 5px;
  border-bottom: 4px solid var(--line);
}
.detail__text { width: 340px; max-width: 100%; }
.detail__text h1 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.detail__text p { font-size: 12px; }
.detail__price { margin-top: 6px; font-weight: 700; }

/* ---------- Cart drawer ---------- */
.cart-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(255, 255, 255, 0.4); }
.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 31;
  width: 684px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 24px 28px 40px;
  background: #fff;
  border-left: 1px solid #b9b9b9;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
.cart.is-open { transform: none; visibility: visible; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding-left: 7px; }
.cart__head h2 { font-size: 24px; font-weight: 700; }
.cart__close { width: 32px; height: 32px; font-size: 32px; font-weight: 200; color: #838383; }
.cart__items { padding: 35px 0 30px; border-bottom: 2px solid #bdbdbd; }
.cart__empty { padding-left: 7px; font-size: 18px; color: var(--muted); }
.cart-line { display: flex; align-items: flex-start; gap: 30px; padding: 0 0 20px 7px; }
.cart-line__img { width: 160px; aspect-ratio: 3 / 2; flex: none; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { flex: 1; padding-top: 40px; }
.cart-line__name { font-size: 24px; font-weight: 500; }
.cart-line__price { margin-top: 4px; font-size: 14px; color: var(--muted); }
.qty { position: relative; display: inline-flex; align-items: center; margin-top: 10px; width: 56px; border-bottom: 1px solid #000; }
.qty select {
  appearance: none;
  width: 100%;
  padding: 8px 24px 8px 0;
  border: 0;
  background: transparent;
  font: 500 24px var(--font-sans);
  color: #838383;
  cursor: pointer;
}
.qty img { position: absolute; right: 0; width: 24px; height: 24px; pointer-events: none; }
.cart-line__remove { width: 32px; height: 32px; margin-top: 27px; }
.cart-line__remove img { width: 32px; height: 32px; }
.cart__summary { padding: 10px 2px 0 7px; }
.cart__total { display: flex; justify-content: space-between; font-size: 24px; font-weight: 500; }
.cart__note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.cart__checkout {
  width: 100%;
  margin-top: 73px;
  padding: 16px 10px;
  border: 1px solid #b3b3b3;
  font-size: 24px;
  font-weight: 500;
}
.cart__checkout:hover:not(:disabled) { border-color: var(--ink); }
.cart__checkout:disabled { opacity: 0.4; cursor: default; }

/* ---------- About ---------- */
/* Figma Home_about (1440 wide): neon lines drawn behind the text */
body[data-page="about"], body[data-page="applications"], body[data-page="contact"], body[data-page="services"] { background: #f7f6f3; } /* warm grey on About, Applications and Contact */
.about-page { position: relative; overflow: hidden; background: #f7f6f3; }
/* the lines melt away at the bottom of the animation area (TOP in app.js) instead of
   stopping at an edge; the text below stays fully visible */
.about__lines {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--anim-h, 1000px) - 180px), transparent var(--anim-h, 1000px));
  mask-image: linear-gradient(to bottom, #000 calc(var(--anim-h, 1000px) - 180px), transparent var(--anim-h, 1000px));
}
.about__flow {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%);
}
/* The flowing version of About draws on a canvas behind the text */
.about__flow { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.about__lines {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; min-width: 1100px; height: auto;
  overflow: visible; pointer-events: none; fill: none;
  stroke-width: var(--px, 1); stroke-linecap: round; stroke-linejoin: round; /* 1px lines (--px set by app.js) */
}
/* Same neon pink and green as the Contact lines */
.about__lines .is-pink { stroke: var(--neon-pink); filter: drop-shadow(0 0 2px var(--neon-pink)); }
.about__lines .is-green { stroke: var(--neon-green); filter: drop-shadow(0 0 2px var(--neon-green)); }
.about__lines .is-orange { stroke: var(--neon-orange); filter: drop-shadow(0 0 2px var(--neon-orange)); }
/* Each line draws in as a faint trail, then a bright stretch keeps travelling along it */
.about__drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: about-drift calc(7s + var(--i) * 0.9s) ease-in-out calc(var(--i) * -1.3s) infinite alternate;
}
.about__trail {
  opacity: 0.22;
  filter: none !important;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: about-draw 2.4s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i) * 0.18s) forwards;
}
/* The bright stretch is moved by wireAboutLines() in app.js; hidden until it starts */
.about__runner { stroke-dasharray: 0 1; }
/* Past each line's end it carries on across the page in light grey */
.about__lines .about__ext { stroke: #e4e4e4; filter: none; }
.about__lines .about__ext-runner { stroke: #c9c9c9; filter: none; stroke-dasharray: 0 1; }
/* Lines that grow later are revealed by app.js instead of the CSS draw-in */
.about__lines .about__trail--grow, .about__lines .about__ext--grow { animation: none; stroke-dashoffset: 0; }
.about__ext {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: about-draw 3s cubic-bezier(0.45, 0, 0.2, 1) calc(1.6s + var(--i) * 0.18s) forwards;
}
@keyframes about-draw { to { stroke-dashoffset: 0; } }
/* Grown lines leave slowly once the page has plenty */
.about__lines g { transition: opacity 3s ease; }
.about__lines g.is-leaving { opacity: 0; }
.about__lines g.is-fading { opacity: 0; transition: opacity 2.5s ease; }
@keyframes about-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(5px, -7px); }
  100% { transform: translate(-4px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .about__drift, .about__trail, .about__ext { animation: none; }
  .about__trail, .about__ext { stroke-dashoffset: 0; }
  .about__runner { stroke-dasharray: none; }
}
.about {
  position: relative; z-index: 1;
  box-sizing: border-box; width: 609px; max-width: 100%; min-height: calc(max(100vw, 1100px) * 1000 / 1440); /* the animation area (TOP in app.js) */
  padding: 0 0 120px 77px;
  font-family: "Hanken Grotesk", var(--font-sans); color: #000;
}
.about__title {
  position: relative;
  display: inline-block; /* so the hover covers just the word */
  margin: -5px 0 24px -0.094em; /* (Figma: the title box starts 12px left of the text) */
  font-size: 128px; font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: #515151; white-space: nowrap;
}
/* On hover the same words in moving neon pink and green fade in over the grey ones */
.about__title-neon {
  position: absolute; inset: 0;
  /* mostly pure pink and pure green with short blends, repeating every half of its width */
  background: linear-gradient(100deg,
    var(--neon-pink) 0%, var(--neon-pink) 8%, var(--neon-green) 17%, var(--neon-green) 33%, var(--neon-pink) 42%,
    var(--neon-pink) 58%, var(--neon-green) 67%, var(--neon-green) 83%, var(--neon-pink) 92%, var(--neon-pink) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
.about__title:hover .about__title-neon { opacity: 1; animation: about-title-neon 4s linear infinite; }
.about__thin { font-weight: 100; } /* "cp" in Hanken Grotesk Thin, "estudi" in Light */
@keyframes about-title-neon { to { background-position: 75% 0; } } /* one full pink-green cycle, so it loops seamlessly */
@media (prefers-reduced-motion: reduce) { .about__title:hover .about__title-neon { animation: none; } }
.about__quote {
  max-width: 499px; /* (same line breaks as before) */
  margin: 0;
  font-size: 16px; font-weight: 300; line-height: 1.18; color: #3f3f3f;
}
.about__quote p { margin: 0; }
.about__pitch { margin: 22px 0 0; font-size: 20px; color: #27555f; }
.about__links { display: flex; flex-direction: column; gap: 2px; margin: 48px 0 0; font-family: "Hanken Grotesk", var(--font-sans); color: #000; /* at the end of the page, after the services */ font-size: 20px; }
.about__pitch a, .about__links a { transition: color 0.2s, text-shadow 0.2s; }
/* Neon on hover, like the lines */
.about__pitch a:hover, .about__pitch a:focus-visible,
.about__links a:hover, .about__links a:focus-visible { color: var(--hover-purple); text-shadow: 0 0 3px rgba(204, 0, 183, 0.2); } /* neon purple, a faint glow */
.about__services-box { width: 493px; max-width: 100%; margin-top: 36px; text-align: right; } /* right edge = the text blocks' */
/* Services page: the services in detail, in the About text column */
.services { width: 493px; max-width: 100%; box-sizing: content-box; padding: 42px 0 120px 77px; }
.services__title { margin: 0 0 22px; font-family: "Hanken Grotesk", var(--font-sans); font-size: 20px; font-weight: 500; color: #27555f; }
.about__offer-item h2 { margin: 0 0 8px; font-family: var(--font-sans); font-size: 24px; font-weight: 800; color: #5e5e5e; }
.about__offer-item h2 small { margin-left: 4px; font-size: 14px; font-weight: 400; }
/* Services in detail (Figma 62:1670) */
.about__offer { width: 493px; max-width: 100%; margin-top: 36px; } /* ends where "cp estudi" ends */
.about__offer .about__heading { margin-bottom: 14px; }
.about__offer-item + .about__offer-item { margin-top: 22px; }
.about__offer-item h3 { margin: 0 0 8px; font-family: var(--font-sans); font-size: 24px; font-weight: 800; color: #5e5e5e; }
.about__offer-item h3 small { margin-left: 4px; font-size: 14px; font-weight: 400; }
.about__offer-item p { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: normal; color: #454545; }
.about__heading { margin: 0; font-size: 20px; font-weight: 500; color: #27555f; }
.about__services { margin: 8px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: 300; line-height: normal; }
/* Service notes: a small tooltip beside each service, like the "About the Lab" one */
.about__service { position: relative; cursor: default; outline: none; transition: color 0.2s; }
.about__service:hover, .about__service:focus-visible, .about__service:focus { color: var(--hover-purple); }
.about__note {
  position: absolute; z-index: 3; top: 50%; left: calc(100% + 16px);
  width: 260px; padding: 12px 16px;
  border: 1px solid #ececec; border-radius: 8px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 4px 16px rgba(219, 211, 211, 0.15);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: #454545; text-align: left; white-space: normal; /* 9.6:1 */
  opacity: 0; visibility: hidden; transform: translate(-4px, -50%);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
}
.about__service:hover .about__note, .about__service:focus .about__note { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.link-cta { display: inline-block; margin-top: 4px; font-size: 24px; font-weight: 500; color: var(--muted-2); }
.link-cta:hover { color: var(--ink); }

/* ---------- AI Lab ---------- */
.lab {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  background: #f9f9f9;
}
.lab__frame { display: block; width: 100%; height: 100%; border: 0; }
.lab__frame.is-off { visibility: hidden; } /* (kept loaded, so the music box keeps its place) */
.lab__paint { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #f7f6f3; } /* same warm grey as the About page */
.lab__paint[hidden] { display: none; }
/* Floating experiments menu (Figma "AI Lab Expanded") */
.lab__nav { position: absolute; top: 13px; left: var(--gutter); z-index: 2; display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-sans); }
.lab__toggle { display: flex; align-items: center; gap: 8px; width: 120px; padding: 4px; border: 1px solid #f0f0f0; border-radius: 4px; background: rgba(255, 255, 255, 0.7); color: #749cac; text-align: left; }
.lab__toggle:hover, .lab__toggle[aria-expanded="true"] { color: #4f7d8e; }
.lab__toggle svg { flex: none; }
.lab__current { font-size: 14px; font-weight: 600; }
.lab__menu { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 130px; padding: 16px; border: 1px solid #f0f0f0; border-radius: 4px; background: rgba(255, 255, 255, 0.7); }
.lab__menu[hidden] { display: none; }
.lab__exp { padding: 0; font-size: 14px; color: #636363; text-align: left; white-space: nowrap; }
button.lab__exp:hover { color: #4f7d8e; }
/* "About the Lab" turns neon purple while its tooltip is open (Figma 58:1546) */
.lab__exp[aria-controls="lab-about"]:hover, .lab__exp[aria-expanded="true"] { color: var(--hover-purple); }
.lab__exp[aria-current="page"] { font-weight: 600; color: #749cac; }
.lab__exp.is-soon small[hidden] { display: none; }
/* "coming soon" note, just outside the menu box, on the clicked item's line */
.lab__exp.is-soon small {
  position: absolute; left: calc(100% + 8px); margin-top: -3px;
  padding: 3px 8px; border: 1px solid #f0f0f0; border-radius: 4px; background: #fff;
  font-size: 12px; font-weight: 400; color: #555; white-space: nowrap; /* 7.5:1 (was 3.5:1) */
}
/* "About the Lab" tooltip */
.lab__about {
  width: 366px; padding: 20px 31px 20px 34px;
  border: 1px solid #ececec; border-radius: 8px; background: rgba(255, 255, 255, 0.94); /* (solid enough to read over the animation) */
  box-shadow: 0 4px 16px rgba(219, 211, 211, 0.15);
  font-size: 15px; color: #454545;
}
.lab__about[hidden] { display: none; }
.lab__about p { margin: 0 0 1.2em; }
.lab__about p:last-child { margin-bottom: 0; }

/* ---------- Applications (case studies) ---------- */
.cases { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
.cases__frame { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Contact ---------- */
.contact { position: relative; min-height: calc(100vh - var(--header-h)); overflow: hidden; padding: 109px var(--gutter) 120px; }
.contact__btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 10px;
  border-bottom: 1px solid var(--neon-green);
  font-size: 24px;
  font-weight: 600;
  color: var(--contact-ink);
}
.contact__btn:hover { color: var(--teal); }
.contact__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.contact__lines line { stroke-width: 1; }
.contact__wave { fill: none; stroke-width: 1.5; }
.contact__lines .is-green { stroke: var(--neon-green); filter: drop-shadow(0 0 3px var(--neon-green)); }
.contact__lines .is-pink { stroke: var(--neon-pink); filter: drop-shadow(0 0 3px var(--neon-pink)); }

/* ---------- Misc ---------- */
.soon { padding: 60px 0 0 36px; }
.soon h1 { font-size: 40px; font-weight: 400; color: #cacaca; }
.soon p { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink-soft); }
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .site-header { padding-right: 40px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { padding-inline: 40px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 64px; }
  .site-header { padding-right: 16px; }
  .logo { font-size: 17px; }
  .header__divider { height: 28px; margin: 0 10px; }
  body[data-page="about"] .site-header { padding-left: 40px; padding-right: 40px; } /* roomier sides on About */
  body[data-page="about"] .header__divider { margin-left: 0; }
  .header__divider img { width: 28px; }
  .crumb { font-size: 13px; top: 0.5px; }
  .collection { padding: 24px 16px 80px; }
  .collection__intro { margin-left: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto !important; row-gap: 32px; }
  .card { padding: 0; }
  .detail { padding: 20px 16px 80px; }
  .detail__gallery { flex-direction: column; align-items: center; margin-left: 0; gap: 24px; }
  .detail__photo { height: auto; }
  .detail__info { flex-direction: column; margin-top: 40px; }
  /* the animation runs behind the text here too; the page leaves a little room below it */
  .about { padding: 0 40px 140px; min-height: 0; }
  .services { width: auto; padding: 32px 40px 80px; }
  .about__title { font-size: 72px; }
  .about__services-box { text-align: left; margin-top: 40px; }
  /* the tooltip sits to the right of the word, in the room left before the screen edge */
  .about__service { width: fit-content; }
  .about__note { width: min(260px, calc(100vw - 100% - 92px)); left: calc(100% + 12px); } /* (40px sides + 12px gap) */
  .about__lines { min-width: 760px; } /* keeps the lines and drawings a readable size */
  .lab__nav { top: 12px; left: 16px; right: 16px; flex-wrap: wrap; }
  .lab__about { box-sizing: border-box; width: 100%; max-height: calc(100dvh - var(--header-h) - 220px); overflow-y: auto; padding: 16px 20px; }
  .contact { padding: 48px 16px 80px; }
  .cart { padding: 20px 16px 32px; }
  .cart-line { gap: 16px; padding-left: 0; }
  .cart-line__img { width: 100px; }
  .cart-line__body { padding-top: 8px; }
  .cart-line__name, .cart__total, .cart__checkout { font-size: 20px; }
  .cart-line__remove { margin-top: 0; }
  .cart__checkout { margin-top: 40px; }
}
@media (max-width: 420px) {
  .logo { font-size: 15px; }
  .header__divider { margin: 0 8px; }
}