/* ==========================================================================
   Marsad — portfolio homepage
   Layout mirrors the original Framer build's breakpoints exactly:
     desktop >= 1200px  |  tablet 810–1199.98px  |  mobile <= 809.98px
   Base styles below are the desktop case; the two media queries at the
   bottom of each block override, matching Framer's own cascade order.
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--c-bg);
  color: var(--c-title);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Page shell ---------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-section);
  width: 100%;
  min-height: 100vh;
  padding: var(--pad-page);
}

/* --- Progressive blur strip (fixed to the very top edge) ------------------ */
/* 8 stacked backdrop-filter layers, each masked to a sliding window.
   Reproduces Framer's "progressive blur" component 1:1.                     */

.blur-bar {
  position: fixed;
  inset: 0 0 auto;
  height: var(--blur-bar-h);
  z-index: 1;
  pointer-events: none;
}
.blur-bar span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.blur-bar span:nth-child(1) {
  z-index: 1;
  -webkit-backdrop-filter: blur(0.78125px); backdrop-filter: blur(0.78125px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
}
.blur-bar span:nth-child(2) {
  z-index: 2;
  -webkit-backdrop-filter: blur(1.5625px); backdrop-filter: blur(1.5625px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
}
.blur-bar span:nth-child(3) {
  z-index: 3;
  -webkit-backdrop-filter: blur(3.125px); backdrop-filter: blur(3.125px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
}
.blur-bar span:nth-child(4) {
  z-index: 4;
  -webkit-backdrop-filter: blur(6.25px); backdrop-filter: blur(6.25px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
}
.blur-bar span:nth-child(5) {
  z-index: 5;
  -webkit-backdrop-filter: blur(12.5px); backdrop-filter: blur(12.5px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
}
.blur-bar span:nth-child(6) {
  z-index: 6;
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
}
.blur-bar span:nth-child(7) {
  z-index: 7;
  -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%);
}
.blur-bar span:nth-child(8) {
  z-index: 8;
  -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
}

/* --- Nav ----------------------------------------------------------------- */
/* Note: relative, not sticky — matches the live site, where the nav scrolls
   away and only .blur-bar stays pinned.                                      */

.nav {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: var(--w-column);
}

.nav__pill {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 14px;
  background: var(--c-surface);
}
.nav__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid var(--c-line);
  border-radius: 14px;
  pointer-events: none;
}
.nav__list {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-nav-size);
  line-height: var(--t-nav-line);
  color: var(--c-title);
  white-space: pre;
  transition: background-color var(--d-hover) var(--e-hover);
}
@media (hover: hover) {
  .nav__link:hover { background: var(--c-hover-nav); }
}

.btn-resume {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: max-content;
  padding: 8px 16px;
  border-radius: 14px;
  background: var(--c-ink-alt);
  color: var(--c-on-dark);
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--d-hover) var(--e-hover),
    padding          var(--d-hover) var(--e-hover),
    transform        var(--d-hover) var(--e-hover);
}
@media (hover: hover) {
  .btn-resume:hover {
    background: var(--c-hover-resume);
    padding: 10px 20px;
    transform: rotate(8deg);
  }
}

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

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: var(--w-column);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  /* Fixed in the original (.framer-1vu2vhh) — content is 437px, so this adds
     13px of trailing slack that the rest of the page's rhythm depends on. */
  height: 450px;
}
.hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  overflow: hidden;
  flex: none;
}
.hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.hero__headline {
  position: relative;
  width: var(--w-h1);
  max-width: 100%;
}
.hero__headline h1 {
  font-family: var(--f-display);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-line);
  font-weight: 400;
  color: var(--c-heading);
  text-align: left;
  white-space: pre-wrap;
  transition: color var(--d-hover) var(--e-hover);
}
/* " product designer " holds its colour while the rest of the line dims. */
.hl-keep {
  color: var(--c-heading);
  transition: color var(--d-hover) var(--e-hover);
}

/* Illustration that pops in beside the headline on hover. Framer mounts it on
   hover at 296x245, top:-87px right:-68px; here it is always in the DOM and
   fades/scales in so there is no layout shift. */
.headline-pop {
  position: absolute;
  top: -87px;
  right: -68px;
  z-index: 1;
  width: 296px;
  height: 245px;
  opacity: 0;
  /* The card sits at a fixed -5deg tilt (Framer: style {rotate: -5}); only the
     scale changes as it pops in. */
  transform: rotate(-5deg) scale(0.92);
  transform-origin: 70% 80%;
  pointer-events: none;
  transition:
    opacity   var(--d-hover) var(--e-hover),
    transform var(--d-hover) var(--e-hover);
}

@media (hover: hover) {
  .hero__headline:hover h1 { color: var(--c-headline-dim); }
  .hero__headline:hover .hl-keep { color: var(--c-heading); }
  .hero__headline:hover .headline-pop { opacity: 1; transform: rotate(-5deg) scale(1); }
}
/* Per-character reveal. Initial values lifted from the Framer bundle:
   blur(6px) / opacity .001 / scale(1.4), spring 450ms, 35ms per character. */
.hero__headline h1.is-split .split-word { white-space: nowrap; }
.hero__headline h1.is-split .split-char {
  display: inline-block;
  opacity: 0.001;
  filter: blur(6px);
  transform: scale(1.4);
  will-change: transform, opacity, filter;
  transition:
    opacity   var(--d-headline) var(--e-spring),
    filter    var(--d-headline) var(--e-spring),
    transform var(--d-headline) var(--e-spring);
}
.hero__headline h1.is-revealed .split-char {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.hero__sub {
  width: var(--w-hero-sub);
  max-width: 100%;
}
.hero__sub p {
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
}
.br-mobile { display: none; }

.btn-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 8px 16px;
  border-radius: 14px;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-family: var(--f-mono);
  font-size: var(--t-nav-size);
  line-height: var(--t-nav-line);
  white-space: pre;
  transition:
    padding   var(--d-hover) var(--e-hover),
    transform var(--d-hover) var(--e-hover);
}
.btn-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid var(--c-line-chat);
  border-radius: 14px;
  pointer-events: none;
  transition: border-width var(--d-hover) var(--e-hover);
}
@media (hover: hover) {
  .btn-chat:hover { padding: 10px 20px; transform: rotate(-8deg); }
  .btn-chat:hover::after { border-width: 2px; }
}

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

.work {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 40px;
}
.work__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: var(--w-shell);
}
.work__label {
  position: relative;
  z-index: 1;
  width: var(--w-column);
}
.work__label h2 {
  font-family: var(--f-label);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  font-weight: 500;
  letter-spacing: var(--t-h2-track);
  color: var(--c-title);
  text-align: left;
}

.work__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--card-gap);
  width: min-content;
  /* The original list has an empty 4th slot, which contributes one extra
     60px gap below the last card. Reproduced as padding so the page rhythm
     below this point lines up, without carrying over a phantom element. */
  padding-bottom: var(--card-gap);
}

/* Sticky stack: each card pins 32px from the top and the next one rides
   over it. JS adds the scroll-linked scale (0.9 -> 1).                      */
.card-slot {
  position: sticky;
  top: var(--card-sticky-top);
  z-index: 1;
  width: 100%;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: var(--w-column);
  padding: 6px;
  border-radius: var(--card-radius);
  background: var(--c-bg);
  overflow: hidden;
  will-change: transform;
  transform: scale(var(--card-scale, 1));
  transition: background-color var(--d-hover) var(--e-hover);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--card-radius);
  pointer-events: none;
  transition:
    border-width var(--d-hover) var(--e-hover),
    border-color var(--d-hover) var(--e-hover);
}

/* Card hover. Scoped to a.card because the "Coming Soon" card is not a link
   and the original enables the hover gesture only on the link variant. */
@media (hover: hover) {
  a.card:hover { background: var(--c-hover-surface); }
  a.card:hover::after {
    border-width: 2px;
    border-color: var(--c-hover-line);
  }
  a.card:hover .card__action { background: var(--c-hover-arrow); }
  a.card:hover .card__action::after { border-width: 0; }
  /* Arrow swings from diagonal to horizontal. */
  a.card:hover .card__arrow img { transform: rotate(0deg); }
}
.card__media {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--card-img-h);
  border-radius: 10px;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 10px;
}
.card__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 18px 18px;
  overflow: hidden;
}
.card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1 0 0;
  width: 1px;
  overflow: hidden;
}
.card__copy h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-line);
  font-weight: 500;
  letter-spacing: var(--t-h3-track);
  color: var(--c-title);
  text-align: left;
}
.card__copy p {
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
}

.card__action {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;
  height: 48px;
  padding: 0 4px;
  border-radius: 14px;
  background: var(--c-bg);
  overflow: hidden;
  transition: background-color var(--d-hover) var(--e-hover);
}
.card__action::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line-arrow);
  border-radius: 14px;
  pointer-events: none;
  transition: border-width var(--d-hover) var(--e-hover);
}
.card__action--soon { padding: 0 12px; }
/* Card 3 carries both actions; only one is shown per breakpoint (see index.html). */
.card__action--arrow { display: none; }
.card__action--soon span {
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
  white-space: pre;
}
.card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 30%;
  overflow: hidden;
}
.card__arrow img {
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);
  transition: transform var(--d-hover) var(--e-hover);
}

/* --- Connect ------------------------------------------------------------- */

.connect {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: var(--w-column);
}
.connect__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 257px;
  height: 101px;
  overflow: hidden;
}
.connect__copy > * { width: 100%; }
.connect__copy h2 {
  font-family: var(--f-display);
  font-size: var(--t-connect-size);
  line-height: var(--t-connect-line);
  font-weight: 500;
  color: var(--c-heading);
}
.connect__copy p {
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
  white-space: pre-wrap;
}
.connect__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min-content;
}
/* Hover comes from the component's motion variants (not its stylesheet):
   background -> rgb(237,233,222), a 1px rgb(203,187,154) border appears, and
   each tile tilts by its own angle — LinkedIn -7deg, Instagram 0deg, Email
   +6deg. The 48px padding is dropped (icon is flex-centred, so the 96x96 rest
   state is unchanged) because it floored the border-box and blocked animation. */
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 96px;
  height: 96px;
  position: relative;
  border-radius: 10px;
  background: var(--c-surface);
  transition:
    background-color var(--d-hover) var(--e-hover),
    transform        var(--d-hover) var(--e-hover);
}
.social::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  pointer-events: none;
  transition: border-color var(--d-hover) var(--e-hover);
}
/* The 48px padding on a 96px border-box button leaves a zero-width content
   box (true of the original too), so the icon must be exempt from the
   reset's max-width:100% or it collapses. */
.social img { flex: none; max-width: none; }
.social--mail img { width: 20px; height: 16px; }
.social--linkedin img,
.social--instagram img { width: 19px; height: 19px; }
@media (hover: hover) {
  .social:hover { background: var(--c-hover-surface); }
  .social:hover::after { border-color: var(--c-hover-line); }
  .social--linkedin:hover  { transform: rotate(-7deg); }
  .social--instagram:hover { transform: rotate(0deg); }
  .social--mail:hover      { transform: rotate(6deg); }
}
/* Keyboard users get the same affordance. */
.social:focus-visible { background: var(--c-hover-surface); }
.social:focus-visible::after { border-color: var(--c-hover-line); }
.social--linkedin:focus-visible  { transform: rotate(-7deg); }
.social--mail:focus-visible      { transform: rotate(6deg); }

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

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
  padding: 60px 48px 24px;
  border-radius: 14px;
  background: var(--c-ink);
}
/* Overlay border — keeps the footer's box height identical to the original. */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--c-line-footer);
  border-radius: 14px;
  pointer-events: none;
}

/* Tag cluster — five rotated pills arranged around the headline.
   Static on the live site; the only motion is the hover reflow below.       */
.tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min-content;
  cursor: pointer;
}
.tags__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: none;
  width: min-content;
}
.tags__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: none;
  width: min-content;
  height: 93px;
}
.tags__col--left  { justify-content: flex-end; }
.tags__col--right { justify-content: flex-start; }

.tags__title { flex: none; width: auto; }
.tags__title p {
  font-family: var(--f-display);
  font-size: var(--t-connect-size);
  line-height: var(--t-connect-line);
  font-weight: 500;
  color: var(--c-footer-head);
  text-align: center;
  white-space: pre;
}

/* justify-content centres the absolutely-positioned Research pill via its
   static position, so it needs no translateX(-50%). That keeps every pill's
   transform a pure rotation, which the FLIP animation in main.js relies on. */
.tags__bottom {
  position: relative;
  display: flex;
  justify-content: center;
  flex: none;
  width: 108px;
  height: 50px;
}

.pill {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  width: min-content;
  padding: 6px 16px;
  border-radius: 10px;
  background: var(--c-ink);
  transition: transform var(--d-hover) var(--e-hover);
}
/* Border as an overlay so it never inflates the min-content box — this is
   how Framer's [data-border] elements behave, and the cluster geometry
   depends on the pills measuring exactly text + padding. */
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line-pill);
  border-radius: 10px;
  pointer-events: none;
}
.pill span {
  font-family: var(--f-ui);
  font-size: var(--t-pill-size);
  line-height: var(--t-pill-line);
  color: var(--c-on-dark);
  white-space: pre;
}

/* --pill-rot is the single source of truth for each pill's resting angle;
   main.js reads it so the CSS and the FLIP animation can't drift apart. */
.pill--ux          { --pill-rot: -9deg; position: absolute; z-index: 1; top: -4px; right: -8px; }
.pill--proto       { --pill-rot: 5deg; }
.pill--interaction { --pill-rot: 8deg; }
.pill--vibe        { --pill-rot: -8deg; position: absolute; z-index: 1; bottom: 0; left: -33px; }
.pill--research    { --pill-rot: -9deg; position: absolute; top: 1px; }
.pill { transform: rotate(var(--pill-rot, 0deg)); }

/* Hovering the cluster straightens every pill to 0deg and reflows the columns.
   The reflow changes `position` and flex alignment, which CSS cannot transition
   — main.js FLIPs the difference so it glides instead of snapping. `.is-open`
   is the JS-driven state; the :hover pair is the no-JS fallback. */
@media (hover: hover) {
  .tags:not(.tags--js):hover .tags__col--left,
  .tags.is-open .tags__col--left  { justify-content: flex-start; align-items: flex-start; }

  .tags:not(.tags--js):hover .tags__col--right,
  .tags.is-open .tags__col--right { justify-content: flex-end; align-items: flex-end; }

  .tags:not(.tags--js):hover .pill--ux,
  .tags.is-open .pill--ux   { position: relative; top: auto; right: auto; }

  .tags:not(.tags--js):hover .pill--vibe,
  .tags.is-open .pill--vibe { position: relative; bottom: auto; left: auto; }

  .tags:not(.tags--js):hover .pill--research,
  .tags.is-open .pill--research { top: 54%; }

  /* Without JS the reflow is instant but the rotation still eases. */
  .tags:not(.tags--js):hover .pill { transform: rotate(0deg); }
}

/* The title rides along with the reflow, so it gets the same transition. */
.tags__title { transition: transform var(--d-hover) var(--e-hover); }

.footer__copy { width: 100%; }
.footer__copy p {
  font-family: var(--f-mono);
  font-size: var(--t-copy-size);
  line-height: 21px;
  color: var(--c-text);
  text-align: center;
  white-space: pre-wrap;
}
.footer__copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Tablet — 810px to 1199.98px
   ========================================================================== */

@media (min-width: 810px) and (max-width: 1199.98px) {
  .work__inner { gap: 24px; padding: 0 39px; }

  /* Deliberate deviation from the original: Framer widened the cards to the
     full container here (854px at 1024px viewport) while the nav, hero and
     connect rows stayed at the 640px column, so the cards broke out of the
     page's vertical edge. Keeping them on the column instead means they
     inherit the desktop card treatment untouched. */

  .card__action--soon  { display: none; }
  .card__action--arrow { display: flex; }
}

/* ==========================================================================
   Mobile — up to 809.98px
   ========================================================================== */

@media (max-width: 809.98px) {
  .nav { width: 100%; padding: 0 10px; }

  .hero { width: 100%; }
  .hero__inner { padding: 0 10px; }
  .hero__headline,
  .hero__sub { width: 100%; }
  .br-mobile { display: inline; }

  .work { padding: 20px 0; }
  .work__inner { padding: 0 10px; }
  .work__label { width: 100%; }
  .work__list { width: 100%; }

  .card { width: 100%; padding: 6px 6px 16px; }
  .card__meta { padding: 0 10px; }
  .card__copy { gap: 4px; }

  .card__action--soon  { display: none; }
  .card__action--arrow { display: flex; }

  .br-nonmobile { display: none; }
  .tags__title p { white-space: pre-wrap; }

  .connect {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    padding: 0 10px;
  }
  .connect__copy { width: 100%; }
  .connect__links { width: 100%; height: 115px; }
  .social { width: auto; flex: 1 1 0; height: 100%; padding: 0; }

  /* Tag cluster, mobile arrangement */
  .tags__col { height: auto; align-self: stretch; width: 80px; }
  .tags__col--left  { padding: 0 0 10px; }
  .tags__col--right { padding: 14px 0; }
  .tags__title { width: 184px; }
  .tags__title p {
    font-size: 31px;
    line-height: 40px;
    white-space: pre-wrap;
  }
  .pill { padding: 4px 12px; }
  .pill--ux    { top: -2px; right: -20px; }
  .pill--proto { position: absolute; z-index: 1; bottom: 13px; right: -33px; }
  .pill--interaction { position: absolute; z-index: 1; top: 4px; left: -17px; }
  .pill--vibe  { bottom: 12px; left: -27px; }

  .footer__copy { width: 234px; }
}