/* ==========================================================================
   SH Portfolio - custom sections for Shopify (built for Minimog)
   Every sh-* section loads this file through snippets/sh-assets.liquid.
   Edit the tokens in the first block to re-skin all sections at once.
   Sizes are in px on purpose: some themes change the root font size.
   ========================================================================== */

.sh {
  /* Colour */
  --sh-ink: #120f24;
  --sh-ink-2: #3b3757;
  --sh-muted: #625e78;
  --sh-line: #e7e3f3;
  --sh-surface: #ffffff;
  --sh-soft: #f6f4fd;
  --sh-tint: #ece7ff;
  --sh-accent: #6a4dff;
  --sh-accent-hover: #5434f0;
  --sh-accent-light: #c3b4ff;
  --sh-dark: #0d0a1c;
  /* Green accent: used sparingly for status dots, small details and results */
  --sh-green: #16a34a;
  --sh-green-ink: #15803d;
  --sh-green-soft: #dcfce7;
  --sh-green-bright: #4ade80;
  --sh-live: var(--sh-green);

  /* Liquid glass */
  --sh-glass-dark: linear-gradient(150deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .1) 100%);
  --sh-glass-dark-rim: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(255, 255, 255, .05);
  --sh-glass-light: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, .74) 100%);
  --sh-glass-light-rim: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .55);
  --sh-glass-blur: blur(22px) saturate(180%);

  /* Type */
  --sh-font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sh-font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sh-font-mono: var(--sh-font-body);

  /* Shape & layout */
  --sh-radius-xl: 32px;
  --sh-radius-lg: 24px;
  --sh-radius-md: 18px;
  --sh-container: 1440px;
  --sh-gutter: clamp(20px, 4.5vw, 64px);
  --sh-ease: cubic-bezier(.22, .68, .2, 1);
  --sh-pscale: 1;

  position: relative;
  isolation: isolate;
  padding-block: calc(var(--sh-pt, 96px) * var(--sh-pscale)) calc(var(--sh-pb, 96px) * var(--sh-pscale));
  background: var(--sh-surface);
  color: var(--sh-ink);
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Clears the floating navigation when jumping to a section */
  scroll-margin-top: 96px;
}

/* Decorative elements and long labels must never make a shared portfolio page
   wider than the device. `clip` prevents the accidental sideways page scroll
   without creating a scroll container (so sticky/fixed elements still work). */
@supports (overflow: clip) {
  body:has(.sh) { overflow-x: clip; }
}

/* ---------- Scoped reset (keeps Minimog styles out of sh-* sections) ---------- */
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
.sh :where(ul, ol) { list-style: none; }
.sh :where(img, svg, video, iframe) { display: block; max-width: 100%; }
.sh :where(img) { height: auto; }
.sh a { color: inherit; text-decoration: none; }
.sh :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.sh :focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 3px; }
.sh [hidden] { display: none !important; }
/* Visually hidden, still read by search engines and screen readers */
.sh .sh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.sh) { scroll-behavior: smooth; }
}

/* ---------- Layout helpers ---------- */
.sh-container {
  width: 100%;
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter));
  margin-inline: auto;
  padding-left: max(var(--sh-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sh-gutter), env(safe-area-inset-right, 0px));
}
.sh-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.sh-split > * { min-width: 0; }

/* ---------- Type ---------- */
.sh .sh-display,
.sh .sh-h2,
.sh .sh-h3 {
  margin: 0;
  font-family: var(--sh-font-display);
  font-weight: 600;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
}
.sh .sh-display { font-size: clamp(42px, 30px + 3.6vw, 84px); line-height: 1.02; letter-spacing: -0.045em; }
.sh .sh-h2 { font-size: clamp(32px, 24px + 2vw, 52px); line-height: 1.08; letter-spacing: -0.04em; }
.sh .sh-h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.sh .sh-h2 em,
.sh .sh-h3 em { font-style: normal; color: var(--sh-accent); }
.sh .sh-lead { font-size: 17px; line-height: 1.65; color: var(--sh-muted); max-width: 58ch; }
.sh .sh-lead--sm { font-size: 15.5px; }
.sh .sh-lead a { color: var(--sh-accent); text-decoration: underline; text-underline-offset: 3px; }

.sh .sh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  border: 1px solid rgba(106, 77, 255, .16);
  border-radius: 999px;
  background: rgba(106, 77, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
  font: 600 14px/1.2 var(--sh-font-body);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--sh-accent);
}
.sh .sh-eyebrow span { display: none; }

.sh-head { display: grid; gap: 18px; justify-items: start; max-width: 720px; }
.sh-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sh-head--light { color: #fff; }
.sh .sh-head--light .sh-eyebrow { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); color: var(--sh-accent-light); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.sh .sh-head--light .sh-lead { color: rgba(255, 255, 255, .72); }
.sh .sh-head--light .sh-h2 em { color: var(--sh-accent-light); }

.sh-rte { display: grid; gap: 14px; max-width: 60ch; font-size: 16.5px; color: var(--sh-muted); }
.sh .sh-rte a { color: var(--sh-accent); text-decoration: underline; text-underline-offset: 3px; }
.sh .sh-rte ul { list-style: disc; padding-left: 1.2em; }
.sh .sh-rte strong { color: var(--sh-ink); font-weight: 600; }

/* ---------- Icons ---------- */
.sh-icon { width: 20px; height: 20px; flex: none; }

/* ---------- Buttons ---------- */
.sh .sh-btn {
  --sh-btn-bg: var(--sh-accent);
  --sh-btn-fg: #fff;
  --sh-btn-dot-bg: #fff;
  --sh-btn-dot-fg: var(--sh-accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  margin: 0;
  padding: 6px 6px 6px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sh-btn-bg);
  color: var(--sh-btn-fg);
  box-shadow: none;
  font: 600 15px/1 var(--sh-font-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .3s var(--sh-ease), color .3s, border-color .3s;
}
.sh .sh-btn__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sh-btn-dot-bg);
  color: var(--sh-btn-dot-fg);
  transition: transform .4s var(--sh-ease);
}
.sh .sh-btn__dot .sh-icon { width: 18px; height: 18px; }
.sh .sh-btn:hover { background: var(--sh-accent-hover); }
.sh .sh-btn:hover .sh-btn__dot { transform: rotate(45deg); }
/* Download buttons: no spin; the arrow drops into the tray and comes back in from the top */
.sh .sh-btn--download:hover .sh-btn__dot { transform: none; }
.sh .sh-btn--download:is(:hover, :focus-visible) .sh-btn__dot .sh-icon path:not(:first-child) {
  animation: sh-download-drop .7s var(--sh-ease);
}
@keyframes sh-download-drop {
  0% { transform: translateY(0); opacity: 1; }
  38% { transform: translateY(7px); opacity: 0; }
  39% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.sh .sh-btn--plain { padding: 6px 26px; }
.sh .sh-btn--sm { min-height: 44px; gap: 10px; padding: 5px 5px 5px 18px; font-size: 14px; }
.sh .sh-btn--sm .sh-btn__dot { width: 34px; height: 34px; }

.sh .sh-btn--glass {
  --sh-btn-bg: rgba(255, 255, 255, .1);
  --sh-btn-fg: #fff;
  --sh-btn-dot-bg: rgba(255, 255, 255, .16);
  --sh-btn-dot-fg: #fff;
  border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sh .sh-btn--glass:hover { background: rgba(255, 255, 255, .2); }
.sh .sh-btn--dark { --sh-btn-bg: var(--sh-ink); }
.sh .sh-btn--dark:hover { background: var(--sh-accent); }
.sh .sh-btn--light {
  --sh-btn-bg: #fff;
  --sh-btn-fg: var(--sh-ink);
  --sh-btn-dot-bg: var(--sh-accent);
  --sh-btn-dot-fg: #fff;
}
.sh .sh-btn--light:hover { background: var(--sh-tint); }
.sh .sh-btn--outline {
  --sh-btn-bg: transparent;
  --sh-btn-fg: var(--sh-ink);
  --sh-btn-dot-bg: var(--sh-ink);
  --sh-btn-dot-fg: #fff;
  border-color: var(--sh-line);
}
.sh .sh-btn--outline:hover { background: var(--sh-soft); }

.sh .sh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
  font-size: 15px;
  color: var(--sh-ink);
  transition: color .25s;
}
.sh .sh-link:hover { color: var(--sh-accent); }
.sh .sh-link .sh-icon { width: 16px; height: 16px; }

.sh-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sh-line);
  background: #fff;
  color: var(--sh-ink);
  transition: transform .4s var(--sh-ease), background-color .3s, color .3s, border-color .3s;
}
.sh-arrow .sh-icon { width: 18px; height: 18px; }

.sh .sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sh-ink-2);
  font: 500 12.5px/1 var(--sh-font-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.sh .sh-chip .sh-icon { width: 14px; height: 14px; }
.sh .sh-chip--green { border-color: transparent; background: var(--sh-green-soft); color: var(--sh-green-ink); }
.sh .sh-chip--green::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sh-green); }

.sh-pulse {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-live);
  animation: sh-pulse 2.2s infinite;
}

.sh-glass {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* Image placeholders shown until a photo is picked in the theme editor */
.sh-tile,
.sh-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 15%, rgba(155, 130, 255, .6), transparent 55%),
    linear-gradient(155deg, #2b2070 0%, #0d0a1c 75%);
}
.sh-tile::before,
.sh-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
}
.sh-tile .sh-icon { position: relative; width: 52px; height: 52px; opacity: .9; }
.sh-fallback span {
  position: relative;
  font: 600 clamp(72px, 11vw, 150px)/1 var(--sh-font-display);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.sh.sh-hero { padding: 12px; }
.sh-hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(600px, 88svh, 860px);
  overflow: hidden;
  border-radius: var(--sh-radius-xl);
  background: var(--sh-dark);
  color: #fff;
}
.sh-hero__media { position: absolute; inset: 0; z-index: -3; }
.sh-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Default background (no photo): deep ink, one soft glow, a faint grid that fades out */
.sh-hero__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 65% at 88% 8%, rgba(106, 77, 255, .34), transparent 62%),
    linear-gradient(180deg, #120e27 0%, #0c0a19 100%);
}
.sh-hero__fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, #000 10%, transparent 70%);
}
.sh-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: var(--sh-overlay, .75);
  background:
    linear-gradient(90deg, rgba(13, 10, 28, .94) 0%, rgba(13, 10, 28, .62) 48%, rgba(13, 10, 28, .12) 100%),
    linear-gradient(0deg, rgba(13, 10, 28, .92) 0%, rgba(13, 10, 28, 0) 46%);
}
.sh-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 0% 110%, rgba(106, 77, 255, .26), transparent 70%);
}

/* Animated background (no photo): slow-drifting light over deep ink */
.sh-hero__fallback--animated { overflow: hidden; background: linear-gradient(180deg, #110d24 0%, #0b0918 100%); }
.sh-aurora {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform;
}
.sh-aurora--1 {
  top: -32%;
  right: -12%;
  width: min(62vw, 980px);
  background: radial-gradient(circle, rgba(106, 77, 255, .7), rgba(106, 77, 255, 0) 68%);
  animation: sh-aurora-a 24s ease-in-out infinite alternate;
}
.sh-aurora--2 {
  bottom: -42%;
  left: -14%;
  width: min(56vw, 860px);
  background: radial-gradient(circle, rgba(56, 66, 230, .55), rgba(56, 66, 230, 0) 68%);
  animation: sh-aurora-b 28s ease-in-out infinite alternate;
}
.sh-aurora--3 {
  top: 22%;
  left: 36%;
  width: min(34vw, 520px);
  background: radial-gradient(circle, rgba(22, 163, 74, .26), rgba(22, 163, 74, 0) 70%);
  animation: sh-aurora-c 32s ease-in-out infinite alternate;
}

/* Work wall: homepage screenshots drifting in tilted columns on the right */
.sh-wall {
  position: absolute;
  top: -12%;
  bottom: -12%;
  right: -4%;
  z-index: -1;
  width: 56%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.sh-wall__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 100%;
  gap: 18px;
  height: 100%;
  transform: perspective(1600px) rotateX(12deg) rotateY(-18deg) rotateZ(7deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.sh-wall__col { height: 100%; overflow: hidden; }
.sh-wall__track { display: grid; gap: 18px; animation: sh-wall-up 70s linear infinite; }
.sh-wall__col--2 .sh-wall__track { animation-name: sh-wall-down; animation-duration: 82s; }
.sh-wall__col--3 .sh-wall__track { animation-duration: 64s; animation-delay: -24s; }
.sh-wall__card {
  aspect-ratio: 640 / 820;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: #1b1638;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}
.sh-wall__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Keeps the text side calm and readable */
.sh-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 10, 26, .9) 0%, rgba(12, 10, 26, .55) 40%, rgba(12, 10, 26, 0) 64%);
}
.sh-hero.is-offscreen .sh-aurora,
.sh-hero.is-offscreen .sh-wall__track { animation-play-state: paused; }

/* Built-in navigation */
/* The hero sits above later sections so its fixed navigation stays on top */
.sh.sh-hero { z-index: 30; }
.sh-hero__frame--nav { padding-top: 90px; }

/* Floating navigation: stays pinned while scrolling and tightens into a glass capsule */
.sh-nav {
  position: fixed;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  transition: top .5s var(--sh-ease), left .5s var(--sh-ease), right .5s var(--sh-ease), background-color .4s, box-shadow .4s;
}
.sh-nav.is-scrolled {
  top: 14px;
  left: max(16px, calc(50% - 740px));
  right: max(16px, calc(50% - 740px));
}

/* Sliding pill that marks the section you are viewing */
.sh-nav__pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 0;
  border-radius: 999px;
  background: var(--sh-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 20px -8px rgba(106, 77, 255, .8);
  opacity: 0;
  pointer-events: none;
}
.sh-nav.is-ready .sh-nav__pill {
  transition: transform .55s cubic-bezier(.34, 1.25, .5, 1), width .55s cubic-bezier(.34, 1.25, .5, 1), opacity .3s;
}
.sh .sh-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 22px/1 var(--sh-font-display);
  letter-spacing: -0.04em;
  color: #fff;
}
.sh-nav__logo i { font-style: normal; color: var(--sh-green-bright); }
/* Initials badge (the logo): a circle inset evenly from the bar's rounded end,
   mirroring the button on the right */
.sh-nav__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -15px;
  border-radius: 50%;
  background: linear-gradient(140deg, #9a85ff 0%, var(--sh-accent) 52%, #4b2fe6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 8px 18px -8px rgba(106, 77, 255, .9);
  font: 700 15px/1 var(--sh-font-display);
  letter-spacing: -0.03em;
  color: #fff;
}
.sh-nav__logo img { width: auto; height: 34px; }
.sh-nav__links { position: relative; isolation: isolate; display: flex; align-items: center; gap: 2px; }
.sh .sh-nav__links a {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .74);
  transition: color .25s, background-color .25s;
}
.sh .sh-nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sh .sh-nav__links a.is-active,
.sh .sh-nav__links a.is-active:hover { color: #fff; background: transparent; }
.sh-nav__menu { display: none; }
.sh-nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.sh-nav__toggle::-webkit-details-marker { display: none; }
.sh-nav__toggle::marker { content: ""; }
.sh-nav__toggle .sh-icon:last-child { display: none; }
.sh-nav__menu[open] .sh-nav__toggle .sh-icon:first-child { display: none; }
.sh-nav__menu[open] .sh-nav__toggle .sh-icon:last-child { display: block; }
.sh-nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(18, 15, 36, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.sh-nav__panel nav { display: grid; gap: 2px; }
.sh .sh-nav__panel nav a { padding: 13px 14px; border-radius: 14px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.sh .sh-nav__panel nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sh .sh-nav__panel nav a.is-active { background: var(--sh-accent); color: #fff; }
.sh .sh-nav__panel .sh-btn { justify-content: space-between; margin-top: 6px; }

/* Hero body */
.sh-hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.sh-hero__main { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.sh-hero__main > * { animation: sh-rise .9s var(--sh-ease) both; }
.sh-hero__main > :nth-child(2) { animation-delay: .08s; }
.sh-hero__main > :nth-child(3) { animation-delay: .16s; }
.sh-hero__main > :nth-child(4) { animation-delay: .24s; }
.sh-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .86);
}
.sh-hero__badge--plain { padding-left: 16px; padding-right: 16px; }
.sh .sh-hero__title {
  max-width: 11.5em;
  font-size: clamp(42px, 30px + 3.6vw, 84px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: #fff;
}
.sh .sh-hero__title em {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-style: normal;
  color: var(--sh-accent-light);
}

/* Typing animation: characters are revealed one by one by sh-portfolio.js.
   The full text is always in the DOM, so layout never shifts. */
.sh-hero__title.is-typing .sh-ch { opacity: 0; }
.sh-hero__title.is-typing .sh-ch.is-on { opacity: 1; }
.sh-caret { position: relative; display: inline-block; width: 0; height: .9em; vertical-align: -0.1em; }
.sh-caret::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: .05em;
  width: .06em;
  border-radius: 2px;
  background: var(--sh-green-bright);
  animation: sh-blink 1.05s steps(2, start) infinite;
}
.sh-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sh-hero__text {
  max-width: 34em;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7);
  text-wrap: pretty;
}

/* Floating cards */
.sh-hero__cards { display: grid; gap: 14px; width: 300px; align-self: end; }
.sh-hero__cards > * { animation: sh-float 7s ease-in-out infinite; }
.sh-hero__cards > :nth-child(2) { animation-delay: -3.5s; margin-left: -36px; margin-right: 36px; }
.sh-log { padding: 16px 18px 18px; font: 400 12.5px/1.5 var(--sh-font-mono); }
.sh-log__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 500; color: #fff; }
.sh-log__head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-accent-light); box-shadow: 0 0 12px var(--sh-accent-light); }
.sh-log__status {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, .24);
  color: #86efac;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sh-log__list { display: grid; gap: 7px; }
.sh-log__list li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .8); }
.sh-log__list .sh-icon { width: 15px; height: 15px; color: var(--sh-green-bright); }
.sh-metric { padding: 18px 18px 16px; }
.sh-metric__label { font: 500 11.5px/1 var(--sh-font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sh-metric__value { margin-top: 10px; font: 600 46px/1 var(--sh-font-display); letter-spacing: -0.04em; color: #fff; }
.sh-metric__spark { width: 100%; height: 56px; margin-top: 8px; }
.sh-metric__caption { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }

/* Stats bar */
.sh-hero__foot { position: relative; z-index: 2; }
.sh-hero__stats {
  display: grid;
  grid-template-columns: repeat(var(--sh-cols, 4), minmax(0, 1fr));
  gap: 20px;
  padding-block: 24px 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sh-stat { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sh-stat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #fff;
}
.sh-stat__icon .sh-icon { width: 19px; height: 19px; }
.sh-stat__value { display: block; font: 600 26px/1.1 var(--sh-font-display); letter-spacing: -0.03em; color: #fff; }
.sh-stat__label { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .66); }
/* Plain stats: numbers and labels split by hairlines, no icons */
.sh-hero__stats--plain { gap: 0; }
.sh-hero__stats--plain .sh-stat { padding: 2px 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.sh-hero__stats--plain .sh-stat:first-child { padding-left: 0; border-left: 0; }
.sh .sh-hero__stats--plain .sh-stat__value { font-size: 30px; }
.sh-hero__stats--plain .sh-stat__label { margin-top: 6px; color: rgba(255, 255, 255, .58); }

/* ---------- Portrait hero ----------
   A cut-out photo stands in front of a giant name, over a dark backdrop with
   one violet halo behind the head. Every element plays a short entrance on
   each page load. Layer order: backdrop, halo, name, photo, shade, text. */
.sh-hero--portrait .sh-hero__frame {
  min-height: 640px;
  min-height: clamp(640px, calc(100svh - 24px), 1040px);
  background: #07061a;
}
.sh-hero__fallback--portrait {
  background:
    radial-gradient(30% 40% at 0% 0%, rgba(124, 92, 255, .42), transparent 72%),
    linear-gradient(180deg, #0a0820 0%, #07061a 55%, #05040f 100%);
}
.sh-hero__fallback--portrait::before { display: none; }
.sh-hero__halo {
  --sh-halo: min(92vh, 70vw);
  position: absolute;
  z-index: 0;
  top: calc(var(--sh-halo-y, 48%) - var(--sh-halo) / 2);
  left: calc(50% - var(--sh-halo) / 2);
  width: var(--sh-halo);
  height: var(--sh-halo);
  border-radius: 50%;
  /* A single restrained halo lets the portrait's built-in rim light do the
     work instead of turning the whole area behind it into a bright circle. */
  background: radial-gradient(closest-side, rgba(146, 112, 255, .62) 0%, rgba(114, 82, 255, .36) 34%, rgba(86, 56, 236, .12) 60%, rgba(86, 56, 236, 0) 82%);
  pointer-events: none;
}

/* Giant name behind the photo, set like the footer wordmark and sized to the
   hero's width. It is the page's main heading: the letters are decoration,
   the full name sits in .sh-sr for search engines and screen readers. */
.sh-hero__bigname {
  position: absolute;
  z-index: 1;
  top: var(--sh-name-y, 12%);
  left: 0;
  right: 0;
  container-type: inline-size;
  pointer-events: none;
}
.sh .sh-hero__bigname-text {
  display: flex;
  justify-content: center;
  gap: .2em;
  font: 700 15cqw/1 var(--sh-font-display);
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
/* Each word clips its letters so they can rise into place */
.sh-hero__bigword { display: flex; overflow: hidden; padding: .06em .04em .04em; margin: -.06em -.04em -.04em; }
.sh-hero__bigword:last-child > span:last-child { margin-right: .06em; }
.sh-hero__bigword > span {
  display: block;
  background: linear-gradient(180deg, rgba(205, 192, 255, .72) 0%, rgba(150, 125, 255, .32) 55%, rgba(106, 77, 255, .06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cut-out photo: fades out into the backdrop at the shoulders and chest */
.sh-hero__portrait {
  position: absolute;
  z-index: 2;
  top: var(--sh-head-y, 19%);
  left: 0;
  right: 0;
  height: var(--sh-portrait-h, 68%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sh .sh-hero__portrait img {
  width: auto;
  max-width: none;
  height: 100%;
  -webkit-mask-image: radial-gradient(58% 80% at 50% 32%, #000 62%, transparent 100%);
  mask-image: radial-gradient(58% 80% at 50% 32%, #000 62%, transparent 100%);
}
/* Bottom shade for the text, plus a fine film grain over the whole scene */
.sh-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 5, 18, .85) 0%, rgba(6, 5, 18, 0) 32%);
}
.sh-hero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
}

/* Text: role on the left, buttons on the right, along the bottom */
.sh-hero--portrait .sh-hero__stage {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  padding-top: 32px;
  padding-bottom: clamp(28px, 5vh, 52px);
  padding-bottom: clamp(28px, 5svh, 52px);
}
.sh .sh-hero__heading {
  display: grid;
  justify-items: start;
  font: 700 clamp(34px, 2.4vw + 10px, 60px)/1.02 var(--sh-font-display);
  letter-spacing: -0.04em;
  color: #fff;
}
.sh-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  font-size: clamp(17px, .4vw + 12px, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #a690ff;
}
/* The Shopify kicker is plain text; themes may add separator rules to spans. */
.sh .sh-hero__heading .sh-hero__kicker::before,
.sh .sh-hero__heading .sh-hero__kicker::after { content: none; display: none; }
.sh-hero__ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.sh-hero__ln > span { display: block; }
.sh .sh-hero__ln > .sh-hero__accent {
  display: inline-block;
  background: linear-gradient(90deg, #b3a0ff 0%, #7354ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sh-hero__role,
.sh-hero__side { min-width: 0; max-width: 100%; }
.sh-hero__side { display: grid; justify-items: start; gap: 20px; max-width: 390px; }
/* Proof: initials of the stores worked on, then their names */
.sh-hero__proof { display: flex; align-items: center; gap: 14px; max-width: 100%; }
.sh-hero__marks { display: flex; flex: none; }
.sh-hero__marks span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #0b0920;
  border-radius: 50%;
  background: linear-gradient(140deg, #9a85ff, #5b3df0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  font: 700 14px/1 var(--sh-font-display);
  color: #fff;
}
.sh-hero__marks span + span { margin-left: -11px; }
.sh-hero__marks span:nth-child(2) { background: linear-gradient(140deg, #7aa2ff, #3d55e6); }
.sh-hero__marks span:nth-child(3) { background: linear-gradient(140deg, #e48cff, #9b3fe0); }
.sh-hero__marks .sh-icon { width: 17px; height: 17px; }
.sh-hero__proof p { display: grid; min-width: 0; gap: 3px; font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, .6); }
.sh-hero__proof strong { font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.sh .sh-hero__lead { max-width: 34ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.sh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Depth: sh-portfolio.js feeds pointer (-1..1) and scroll (px) into these */
.sh-hero__halo { translate: calc(var(--sh-mx, 0) * 28px) calc(var(--sh-my, 0) * 18px); }
.sh-hero__bigname { translate: calc(var(--sh-mx, 0) * -20px) calc(var(--sh-my, 0) * -10px + var(--sh-sy, 0) * .32px); }
.sh-hero__portrait { translate: calc(var(--sh-mx, 0) * 12px) calc(var(--sh-my, 0) * 6px + var(--sh-sy, 0) * .1px); }

/* Entrance: backdrop and halo, then the photo rises and turns solid, and only
   then does the name rise letter by letter from behind it (so the name never
   shows through the face), followed by the role and the buttons */
.sh-hero--portrait .sh-hero__fallback { animation: sh-hero-fade 1.2s ease-out backwards; }
.sh-hero__halo { animation: sh-halo-in 1.8s cubic-bezier(.16, 1, .3, 1) .05s backwards, sh-halo-breathe 6s ease-in-out 1.9s infinite alternate; }
.sh-hero--portrait .sh-nav { animation: sh-drop-in .9s var(--sh-ease) .15s backwards; }
.sh-hero__portrait img { animation: sh-portrait-in 1.5s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
.sh-hero__bigword > span { animation: sh-letter-in 1s cubic-bezier(.2, .85, .25, 1) calc(.9s + var(--i) * .05s) backwards; }
.sh-hero__kicker { animation: sh-fade-up .8s var(--sh-ease) 1.2s backwards; }
.sh-hero__ln > span { animation: sh-line-in 1s cubic-bezier(.2, .85, .25, 1) 1.28s backwards; }
.sh-hero__ln + .sh-hero__ln > span { animation-delay: 1.36s; }
.sh-hero__proof { animation: sh-fade-up .8s var(--sh-ease) 1.3s backwards; }
.sh-hero__lead { animation: sh-fade-up .8s var(--sh-ease) 1.38s backwards; }
.sh-hero__cta > * { animation: sh-fade-up .8s var(--sh-ease) 1.46s backwards; }
.sh-hero__cta > * + * { animation-delay: 1.54s; }
.sh-hero.is-offscreen .sh-hero__halo { animation-play-state: paused; }

/* Tablets: the text stacks under the photo, the name stays on one line */
@media (max-width: 989px) {
  .sh-hero--portrait .sh-hero__frame { min-height: calc(100svh - 24px); }
  .sh-hero__bigname { --sh-name-y: 104px; }
  .sh .sh-hero__bigname-text { font-size: 16cqw; }
  .sh-hero__halo { --sh-halo: 96vw; --sh-halo-y: 50vw; }
  .sh-hero__portrait { position: relative; top: auto; height: auto; margin-top: calc(4px + 9%); }
  .sh .sh-hero__portrait img { width: 104%; height: auto; }
  .sh-hero--portrait .sh-hero__stage {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-top: -16%;
    padding-top: 0;
    text-align: center;
  }
  .sh .sh-hero__heading { justify-items: center; }
  .sh-hero__kicker { justify-content: center; }
  .sh-hero__side { justify-items: center; gap: 18px; }
  .sh-hero__proof { text-align: left; }
  .sh-hero__cta { justify-content: center; margin-top: 0; }
}

/* Phones: the name splits over two lines above the head */
@media (max-width: 749px) {
  .sh-hero--portrait .sh-hero__frame { min-height: calc(100svh - 16px); }
  .sh-hero__bigname { --sh-name-y: 82px; }
  .sh .sh-hero__bigname-text { flex-direction: column; align-items: center; gap: 0; font-size: clamp(60px, 22cqw, 82px); line-height: .88; }
  .sh-hero__halo { --sh-halo: 118vw; --sh-halo-y: calc(48px + 68vw); }
  .sh-hero__portrait { margin-top: calc(44% - 10px); }
  .sh .sh-hero__portrait img { width: 118%; }
  .sh-hero--portrait .sh-hero__stage { gap: 16px; margin-top: -24%; padding-bottom: 24px; }
  .sh-hero__side { gap: 14px; }
  .sh .sh-hero__lead { max-width: 32ch; font-size: 15px; line-height: 1.55; }
  .sh-hero__proof { gap: 10px; }
  .sh-hero__marks span { width: 30px; height: 30px; font-size: 11.5px; }
  .sh-hero__marks span + span { margin-left: -9px; }
  .sh-hero__marks .sh-icon { width: 14px; height: 14px; }
  .sh-hero__proof strong { font-size: clamp(12.5px, 3.4vw, 14px); }
  .sh-hero__proof p { font-size: 12.5px; }
  .sh .sh-hero__heading { font-size: clamp(30px, 6vw + 10px, 38px); }
  .sh-hero__kicker { margin-bottom: 2px; font-size: 16px; }
  .sh-hero__cta { width: min(100%, 360px); flex-wrap: nowrap; gap: 8px; }
  .sh .sh-hero__cta .sh-btn { min-height: 46px; gap: 10px; padding: 5px 5px 5px 18px; font-size: 14px; }
  .sh .sh-hero__cta .sh-btn--plain { padding: 5px 18px; }
  .sh .sh-hero__cta .sh-btn__dot { width: 36px; height: 36px; }
  /* Keep the photo and its light locked together while the phone page scrolls. */
  .sh-hero__halo,
  .sh-hero__bigname,
  .sh-hero__portrait { translate: 0 0; }
  /* Keep the work proof and actions visible immediately, without waiting for entrance motion. */
  .sh-hero__proof,
  .sh-hero__cta > * { animation: none; opacity: 1; transform: none; }
}

/* Narrow phones need both calls to action to stay inside the hero.  Grid lets
   each button share the available width instead of its content forcing a
   horizontal overflow. */
@media (max-width: 374px) {
  .sh-hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .sh .sh-hero__cta .sh-btn { justify-content: space-between; min-width: 0; gap: 4px; padding-left: 12px; font-size: 12px; white-space: nowrap; }
  .sh .sh-hero__cta .sh-btn--plain { justify-content: center; padding-inline: 8px; font-size: 12.5px; }
  .sh .sh-hero__cta .sh-btn__dot { width: 32px; height: 32px; }
  .sh .sh-hero__cta .sh-btn__dot .sh-icon { width: 16px; height: 16px; }
}

/* Keep every control readable on exceptionally narrow in-app webviews. */
@media (max-width: 300px) {
  .sh-hero__cta { grid-template-columns: minmax(0, 1fr); max-width: 236px; }
  .sh .sh-hero__cta .sh-btn { justify-content: space-between; padding-left: 16px; font-size: 13px; }
  .sh .sh-hero__cta .sh-btn--plain { justify-content: center; }
}

/* Short phones: keep the buttons on the first screen. sh-portfolio.js sets
   is-short / is-tiny from the small viewport height (100svh) once, so the layout
   does not jump when the address bar hides or shows while the page scrolls. */
@media (max-width: 749px) {
  .sh.sh-hero.is-short .sh-hero__lead { display: none; }
}
@media (max-width: 749px) {
  .sh-hero.is-tiny .sh-hero__halo { --sh-halo-y: calc(48px + 68vw); }
  .sh-hero.is-tiny .sh-hero__proof { gap: 8px; }
  .sh-hero.is-tiny .sh-hero__marks span { width: 27px; height: 27px; font-size: 10px; }
  .sh-hero.is-tiny .sh-hero__marks span + span { margin-left: -8px; }
  .sh-hero.is-tiny .sh-hero__proof strong { font-size: 12px; }
  .sh-hero.is-tiny .sh-hero__proof p { font-size: 11.5px; }
  .sh-hero.is-tiny .sh-hero__side { gap: 10px; }
  .sh-hero.is-tiny .sh-hero__portrait { position: absolute; top: 174px; right: 0; left: 0; height: auto; margin: 0; translate: 0 0; }
  .sh.sh-hero.is-tiny .sh-hero__portrait img { width: 106%; }
  .sh-hero.is-tiny .sh-hero__bigname { --sh-name-y: 72px; }
  .sh.sh-hero.is-tiny .sh-hero__bigname-text { font-size: clamp(54px, 19vw, 68px); line-height: .82; }
  .sh-hero--portrait.is-tiny .sh-hero__stage { position: absolute; right: 0; bottom: 8px; left: 0; gap: 10px; margin: 0 auto; padding: 0 16px; }
  .sh.sh-hero.is-tiny .sh-hero__cta .sh-btn { min-height: 42px; }
  .sh.sh-hero.is-tiny .sh-hero__cta .sh-btn__dot { width: 32px; height: 32px; }
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.sh.sh-logos { overflow: hidden; background: linear-gradient(180deg, var(--sh-soft) 0%, var(--sh-surface) 100%); }
.sh .sh-logos__title {
  margin-bottom: 24px;
  text-align: center;
  font: 500 15px/1.4 var(--sh-font-body);
  letter-spacing: 0;
  color: var(--sh-muted);
  text-wrap: balance;
}
.sh-marquee {
  --sh-gap: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sh-marquee + .sh-marquee { margin-top: var(--sh-gap); }
.sh-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sh-gap);
  animation: sh-marquee var(--sh-speed, 40s) linear infinite;
}
.sh-marquee--reverse .sh-marquee__track { animation-direction: reverse; }
.sh-marquee:hover .sh-marquee__track { animation-play-state: paused; }
.sh-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  height: 56px;
  padding: 0 44px;
}
.sh-logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #d6d0ea;
}
.sh-logo img {
  width: auto;
  max-width: 140px;
  max-height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .3s, opacity .3s;
}
.sh-logo:hover img { filter: none; opacity: 1; }
.sh-logo__name {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font: 600 24px/1 var(--sh-font-display);
  letter-spacing: -0.04em;
  color: #a9a3c0;
  transition: color .3s;
}
.sh-logo:hover .sh-logo__name { color: var(--sh-ink); }
.sh-logo__mark { display: none; }

/* ==========================================================================
   About
   ========================================================================== */
.sh-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.sh-about__copy { display: grid; gap: 26px; justify-items: start; container-type: inline-size; }
/* Heading: "Meet" on its own line, then the full name on one line in the
   brand gradient. The name never breaks; it scales down only when the
   column is narrower than the name (10.6em wide in Geist). */
.sh .sh-about__copy .sh-h2 em {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: .06em;
  font-size: min(1em, calc(100cqw / 10.6));
  white-space: nowrap;
  background: linear-gradient(100deg, #4b2fe6 0%, #6a4dff 45%, #a35cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sh-facts { display: flex; flex-wrap: wrap; width: 100%; border-block: 1px solid var(--sh-line); }
.sh-fact { flex: 1 1 0; min-width: 110px; padding: 18px 20px 18px 0; }
.sh-fact + .sh-fact { padding-left: 20px; border-left: 1px solid var(--sh-line); }
.sh-fact__value { display: block; font: 600 32px/1 var(--sh-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sh-ink); }
.sh-fact__label { display: block; margin-top: 8px; font-size: 13.5px; color: var(--sh-muted); }
.sh-about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }

/* "Find me at": label followed by brand-coloured profile icons */
.sh-find { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.sh .sh-find__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 600 13px/1 var(--sh-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sh-ink-2);
}
.sh-find__line { width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sh-green), rgba(22, 163, 74, .25)); }
.sh-find__list { display: flex; flex-wrap: wrap; gap: 10px; }
/* When the block scrolls into view the line draws in and the icons pop up one by one */
.sh-reveal-ready .sh-find[data-sh-reveal] .sh-find__line { transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--sh-ease) .15s; }
.sh-reveal-ready .sh-find[data-sh-reveal].is-in .sh-find__line { transform: none; }
.sh-reveal-ready .sh-find[data-sh-reveal] .sh-find__list li {
  opacity: 0;
  transform: translateY(10px) scale(.6);
  transition: opacity .4s var(--sh-ease), transform .6s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 80ms + 300ms);
}
.sh-reveal-ready .sh-find[data-sh-reveal].is-in .sh-find__list li { opacity: 1; transform: none; }

/* Brand icon tile, shared by "Find me at" and the contact section */
.sh .sh-find__item {
  --brand: var(--sh-accent);
  --brand-rgb: 106 77 255;
  --brand-light: var(--sh-accent-light);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgb(var(--brand-rgb) / .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--brand);
  transition: transform .35s var(--sh-ease), background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.sh-find__item .sh-icon { width: 21px; height: 21px; }
.sh .sh-find__item:hover,
.sh .sh-find__item:focus-visible {
  background: var(--brand);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 22px -10px rgb(var(--brand-rgb) / .8);
}
.sh .sh-find__item--linkedin { --brand: #0a66c2; --brand-rgb: 10 102 194; --brand-light: #5ea6f0; }
.sh .sh-find__item--facebook { --brand: #1877f2; --brand-rgb: 24 119 242; --brand-light: #6eaafa; }
.sh .sh-find__item--instagram { --brand: #e1306c; --brand-rgb: 225 48 108; --brand-light: #f57ca5; }
.sh .sh-find__item--instagram:hover,
.sh .sh-find__item--instagram:focus-visible { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.sh .sh-find__item--whatsapp { --brand: #1fa855; --brand-rgb: 37 211 102; --brand-light: #55e08f; }
.sh .sh-find__item--github { --brand: #181717; --brand-rgb: 24 23 23; --brand-light: #f2f2f2; }
.sh .sh-find__item--x { --brand: #111111; --brand-rgb: 17 17 17; --brand-light: #f2f2f2; }
.sh .sh-find__item--youtube { --brand: #ff0000; --brand-rgb: 255 0 0; --brand-light: #ff6b6b; }

.sh-about__visual { position: relative; padding: 52px 0 60px; }
.sh-about__visual::before {
  content: "";
  position: absolute;
  inset: 18% 4% 6% 22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(106, 77, 255, .28), transparent);
  filter: blur(24px);
}
.sh-about__note {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 250px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sh-muted);
}
.sh-about__note span { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--sh-ink); }
.sh-about__photo {
  position: relative;
  width: 80%;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 28px;
  background: var(--sh-tint);
  box-shadow: 0 30px 60px -34px rgba(40, 25, 120, .35);
}
.sh-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.sh-about__card {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 12px;
  width: min(272px, 62%);
  padding: 12px 12px 18px;
  border: 1px solid var(--sh-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(40, 25, 120, .35);
  transition: transform .4s var(--sh-ease);
}
a.sh-about__card:hover { transform: translateY(-4px); }
.sh-about__card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--sh-dark); }
.sh-about__card-media img { width: 100%; height: 100%; object-fit: cover; }
.sh-about__card-body { display: grid; gap: 6px; padding-inline: 6px; }
.sh-about__card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 var(--sh-font-body);
  color: var(--sh-green-ink);
}
.sh-about__card-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-green); }
.sh-about__card-title { font: 600 19px/1.2 var(--sh-font-display); letter-spacing: -0.02em; color: var(--sh-ink); }
.sh-about__card-text { font-size: 13.5px; line-height: 1.5; color: var(--sh-muted); }

/* ==========================================================================
   Services
   ========================================================================== */
.sh-services__aside { display: grid; gap: 20px; justify-items: end; max-width: 380px; }
.sh-services__aside .sh-lead { text-align: right; }
.sh-slider__nav { display: none; gap: 10px; }
.sh-slider.is-scrollable .sh-slider__nav { display: flex; }
.sh .sh-slider__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sh-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sh-ink);
  cursor: pointer;
  transition: background-color .25s, color .25s, opacity .25s;
}
.sh .sh-slider__btn:hover:not(:disabled) { background: var(--sh-ink); color: #fff; }
.sh .sh-slider__btn:disabled { opacity: .35; cursor: default; }

.sh-services__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 2px 12px;
}
/* Background eases into the lavender of the work section below */
.sh.sh-services { background: linear-gradient(180deg, var(--sh-surface) 0%, var(--sh-surface) 35%, var(--sh-soft) 100%); }
.sh-services__head { margin-bottom: clamp(36px, 5vw, 56px); }
.sh-services__track::-webkit-scrollbar { display: none; }
.sh .sh-service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--sh-line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 15, 36, .04), 0 24px 48px -32px rgba(40, 25, 120, .28);
  color: var(--sh-ink);
  scroll-snap-align: start;
  transition: transform .5s var(--sh-ease), box-shadow .5s var(--sh-ease), border-color .4s;
}
.sh .sh-service.is-featured { border-color: rgba(106, 77, 255, .28); }
.sh .sh-service:hover {
  transform: translateY(-6px);
  border-color: rgba(106, 77, 255, .4);
  box-shadow: 0 1px 2px rgba(18, 15, 36, .04), 0 36px 64px -34px rgba(76, 48, 220, .45);
}
.sh-service__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: var(--sh-tint); }
.sh-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sh-ease); }
.sh .sh-service:hover .sh-service__media img { transform: scale(1.05); }
.sh .sh-service__tag { position: absolute; top: 14px; left: 14px; }
.sh-service__arrow { position: absolute; top: 12px; right: 12px; }
.sh .sh-service:hover .sh-service__arrow { border-color: transparent; background: var(--sh-accent); color: #fff; transform: rotate(45deg); }
.sh-service__body { display: grid; align-content: start; gap: 12px; padding: 22px 16px 16px; }
.sh-service__head { display: flex; align-items: center; gap: 14px; }
.sh-service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sh-tint), #f7f5ff);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(106, 77, 255, .12);
  color: var(--sh-accent);
}
.sh-service__icon .sh-icon { width: 22px; height: 22px; }
.sh .sh-service__title { font-size: 22px; }
.sh-service__text { font-size: 15.5px; line-height: 1.65; color: var(--sh-muted); }
.sh-service__points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sh-service__points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: var(--sh-soft);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sh-ink-2);
}
.sh-service__points .sh-icon { width: 14px; height: 14px; color: var(--sh-green); }
.sh-services__foot { display: flex; justify-content: center; margin-top: 48px; }
/* Two services: a calm two-column grid instead of a slider */
.sh-services__track--duo { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; overflow: visible; }
.sh-services__track--duo .sh-service__media { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Featured work
   ========================================================================== */
.sh.sh-work { background: var(--sh-soft); }
.sh-work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
.sh .sh-work__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(106, 77, 255, .12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(18, 15, 36, .035), 0 18px 42px -28px rgba(40, 25, 120, .28);
  color: var(--sh-ink);
  transition: box-shadow .45s var(--sh-ease), border-color .35s;
}
.sh .sh-work__card:hover,
.sh .sh-work__card:focus-visible {
  border-color: rgba(106, 77, 255, .32);
  box-shadow: 0 3px 8px rgba(18, 15, 36, .05), 0 28px 54px -30px rgba(76, 48, 220, .4);
}
.sh-work__card:first-child { grid-column: 1 / -1; }
.sh-work__media {
  position: relative;
  height: clamp(240px, 26vw, 300px);
  overflow: hidden;
  border-radius: 0;
  background: var(--sh-dark);
}
.sh-work__card:nth-child(-n+2) .sh-work__media { height: clamp(260px, 32vw, 440px); }
.sh-work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 10, 28, .28) 0%, transparent 30%, rgba(13, 10, 28, .78) 100%);
}
.sh-work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sh-ease), filter .5s; }
.sh-work__card:hover .sh-work__media img { transform: scale(1.035); filter: saturate(1.04); }
.sh-work__media .sh-arrow { position: absolute; z-index: 1; top: 14px; right: 14px; border-color: rgba(255, 255, 255, .3); }
.sh .sh-work__card:hover .sh-arrow { background: var(--sh-accent); color: #fff; transform: rotate(45deg); }
.sh-work__body { position: absolute; z-index: 2; right: 26px; bottom: 26px; left: 26px; display: grid; align-content: end; color: #fff; text-shadow: 0 1px 12px rgba(13, 10, 28, .4); }
.sh-work__row { display: grid; justify-content: start; gap: 9px; }
.sh .sh-work__title { font: 650 clamp(20px, 1.5vw, 24px)/1.2 var(--sh-font-display); letter-spacing: -0.03em; color: #fff; }
.sh .sh-work__body .sh-chip { justify-self: start; border: 1px solid rgba(255, 255, 255, .22); background: var(--sh-glass-dark), rgba(13, 10, 28, .42); box-shadow: var(--sh-glass-dark-rim); color: #fff; -webkit-backdrop-filter: var(--sh-glass-blur); backdrop-filter: var(--sh-glass-blur); }
.sh .sh-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: var(--sh-glass-dark), rgba(13, 10, 28, .48);
  box-shadow: var(--sh-glass-dark-rim);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
  color: #fff;
  font: 500 12px/1 var(--sh-font-mono);
  white-space: nowrap;
}
.sh .sh-metric-chip .sh-icon { width: 14px; height: 14px; }

@media (min-width: 990px) {
  .sh-work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sh-work__card { grid-column: span 4; }
  .sh-work__card:first-child { grid-column: span 7; }
  .sh-work__card:nth-child(2) { grid-column: span 5; }
  /* Fill the last row: one leftover card goes full width, two split it */
  .sh-work__card:nth-child(n+3):nth-child(3n):last-child { grid-column: span 12; }
  .sh-work__card:nth-child(n+4):nth-child(3n+1):last-child,
  .sh-work__card:nth-child(n+3):nth-child(3n):nth-last-child(2) { grid-column: span 6; }
  .sh-work__card:only-child { grid-column: span 12; }
}

/* ==========================================================================
   Homepage showcase
   ========================================================================== */
.sh-showcase__grid {
  display: grid;
  grid-template-columns: repeat(var(--sh-cols, 2), minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  margin-top: clamp(36px, 5vw, 56px);
}
.sh-showcase__grid--feature .sh-shot:first-child { grid-column: 1 / -1; }
/* Two columns: let a leftover last card span the row instead of sitting alone */
.sh-showcase__grid--2:not(.sh-showcase__grid--feature) .sh-shot:nth-child(odd):last-child,
.sh-showcase__grid--2.sh-showcase__grid--feature .sh-shot:nth-child(even):last-child { grid-column: 1 / -1; }

.sh-shot {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(106, 77, 255, .13);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(18, 15, 36, .035), 0 18px 42px -30px rgba(40, 25, 120, .28);
  transition: box-shadow .45s var(--sh-ease), border-color .35s;
}
.sh-shot:hover,
.sh-shot:focus-within {
  border-color: rgba(106, 77, 255, .34);
  box-shadow: 0 3px 8px rgba(18, 15, 36, .05), 0 28px 54px -32px rgba(76, 48, 220, .38);
}
.sh .sh-shot__frame {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--sh-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: box-shadow .5s var(--sh-ease), transform .5s var(--sh-ease), border-color .3s;
}
.sh .sh-shot__frame:hover { border-color: var(--sh-line); box-shadow: none; }
.sh-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-line);
  background: var(--sh-glass-light);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}
.sh-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcd7ea; }
.sh-shot__bar i:first-child { background: var(--sh-green); opacity: .85; }
.sh-shot__url {
  overflow: hidden;
  max-width: min(68%, 380px);
  margin-left: 10px;
  padding: 5px 12px;
  border: 1px solid rgba(231, 227, 243, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--sh-muted);
  font: 500 11px/1.2 var(--sh-font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sh-shot__view { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sh-soft); }
.sh-shot__view::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 34%, rgba(13, 10, 28, .08) 52%, rgba(13, 10, 28, .82) 100%); }
.sh-showcase__grid--feature .sh-shot:first-child .sh-shot__view { aspect-ratio: 16 / 7; }
.sh-shot__view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transition: object-position 1.6s var(--sh-ease), transform .9s var(--sh-ease);
}
.sh-shot--contain .sh-shot__view img { object-fit: contain; object-position: 50% 50%; }
@media (hover: hover) {
  .sh-shot__frame:hover .sh-shot__view img { object-position: 50% 9%; }
  .sh-shot--contain .sh-shot__frame:hover .sh-shot__view img { object-position: 50% 50%; transform: scale(1.02); }
}
.sh-shot__zoom {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(13, 10, 28, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: .9;
  transform: none;
  transition: opacity .35s var(--sh-ease), transform .35s var(--sh-ease);
}
.sh-shot__zoom .sh-icon { width: 15px; height: 15px; }
.sh-shot__frame:hover .sh-shot__zoom,
.sh-shot__frame:focus-visible .sh-shot__zoom { opacity: 1; transform: scale(1.025); }
@media (hover: none) { .sh-shot__zoom { opacity: 1; transform: none; } }
.sh-shot__body { position: absolute; z-index: 3; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 8px; margin: 0; padding: 0; color: #fff; text-shadow: 0 1px 14px rgba(13, 10, 28, .48); pointer-events: none; }
.sh-shot__row { display: grid; justify-content: start; gap: 7px; }
.sh .sh-shot__title { font: 650 clamp(18px, 1.35vw, 21px)/1.25 var(--sh-font-display); letter-spacing: -0.025em; color: #fff; }
.sh-shot__text { max-width: 62ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.sh .sh-shot__body .sh-chip--green { justify-self: start; border: 1px solid rgba(255, 255, 255, .22); background: var(--sh-glass-dark), rgba(13, 10, 28, .42); box-shadow: var(--sh-glass-dark-rim); color: #fff; -webkit-backdrop-filter: var(--sh-glass-blur); backdrop-filter: var(--sh-glass-blur); }

/* Theme-editor placeholder until a screenshot is picked */
.sh-shot__placeholder { position: absolute; inset: 0; display: grid; grid-template-rows: 14% 1fr 26%; gap: 6%; padding: 6% 7%; background: var(--sh-soft); }
.sh-shot__placeholder span { border-radius: 10px; background: #e9e5f5; }
.sh-shot__placeholder span:nth-child(2) { background: linear-gradient(120deg, #ece7ff, #f4f1ff); }
.sh-shot__placeholder em {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-muted);
}
.sh-shot__placeholder em .sh-icon { width: 28px; height: 28px; color: var(--sh-accent); }

/* Lightbox */
html.sh-lock { overflow: hidden; }
.sh .sh-lightbox {
  width: min(1240px, calc(100vw - 32px));
  max-width: none;
  height: calc(100dvh - 40px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--sh-ink);
  box-shadow: 0 40px 120px -20px rgba(13, 10, 28, .6);
}
.sh .sh-lightbox[open] { display: flex; flex-direction: column; animation: sh-lb-in .45s var(--sh-ease); }
.sh .sh-lightbox::backdrop { background: rgba(13, 10, 28, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sh-lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px 14px 24px;
  border-bottom: 1px solid var(--sh-line);
}
.sh-lightbox__meta { display: grid; gap: 4px; min-width: 0; }
.sh-lightbox__cat { font: 600 12.5px/1.2 var(--sh-font-body); color: var(--sh-green-ink); }
.sh .sh-lightbox__title { font: 600 19px/1.25 var(--sh-font-display); letter-spacing: -0.02em; }
.sh-lightbox__actions { display: flex; align-items: center; gap: 8px; }
.sh .sh-lightbox__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--sh-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sh-ink);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.sh .sh-lightbox__btn:hover { border-color: var(--sh-ink); background: var(--sh-ink); color: #fff; }
.sh .sh-lightbox__btn .sh-icon { width: 18px; height: 18px; }
.sh .sh-lightbox__visit { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--sh-accent); }
.sh-lightbox__visit .sh-icon { width: 15px; height: 15px; }
.sh-lightbox__scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sh-soft);
  -webkit-overflow-scrolling: touch;
}
.sh-lightbox__scroll:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -4px; }
.sh-lightbox__img { display: block; width: 100%; max-width: 1440px; height: auto; margin: 0 auto; background: #fff; }
.sh-lightbox__scroll.is-loading::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid var(--sh-line);
  border-top-color: var(--sh-accent);
  border-radius: 50%;
  animation: sh-spin .8s linear infinite;
}
.sh-lightbox__hint { padding: 10px 24px; border-top: 1px solid var(--sh-line); font-size: 12.5px; color: var(--sh-muted); text-align: center; }

/* Scroll reveal: only armed by JS, so content stays visible without it */
.sh-reveal-ready [data-sh-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--sh-ease), transform .8s var(--sh-ease);
  transition-delay: var(--sh-delay, 0s);
}
.sh-reveal-ready [data-sh-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Process
   ========================================================================== */
.sh-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}
.sh-process__copy { display: grid; gap: 32px; justify-items: start; }
.sh-steps { display: grid; gap: 6px; width: 100%; }
/* sh-portfolio.js animates the height; .is-closing switches the look back while a step collapses */
.sh-step { border-bottom: 1px solid var(--sh-line); border-radius: 20px; transition: background-color .45s var(--sh-ease), color .45s var(--sh-ease), border-color .45s, box-shadow .45s; }
.sh-step[open]:not(.is-closing) { border-color: transparent; background: var(--sh-ink); color: #fff; }
.sh .sh-step summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  list-style: none;
  cursor: pointer;
  font: 600 18px/1.3 var(--sh-font-display);
  letter-spacing: -0.015em;
}
.sh-step summary::-webkit-details-marker { display: none; }
.sh-step summary::marker { content: ""; }
.sh-step__num { min-width: 26px; font: 600 13px/1 var(--sh-font-body); font-variant-numeric: tabular-nums; color: var(--sh-muted); transition: color .45s; }
.sh-step[open]:not(.is-closing) .sh-step__num { color: var(--sh-green-bright); }
.sh-step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--sh-line);
  border-radius: 50%;
  transition: transform .45s var(--sh-ease), background-color .45s, border-color .45s;
}
.sh-step__icon .sh-icon { width: 16px; height: 16px; }
.sh-step[open]:not(.is-closing) .sh-step__icon { border-color: var(--sh-accent); background: var(--sh-accent); transform: rotate(45deg); }
.sh-step__body { max-width: 54ch; padding: 0 20px 22px 64px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .74); }
.sh-step__body { transition: opacity .3s var(--sh-ease); }
/* Status of a career step (In progress, Planned...) on its own line above the text */
.sh .sh-step__status { display: block; margin-bottom: 6px; font: 600 13px/1.2 var(--sh-font-body); color: var(--sh-green-bright); }
.sh-step[open] .sh-step__body { animation: sh-step-in .55s var(--sh-ease) .06s backwards; }
.sh-step.is-closing .sh-step__body { opacity: 0; }

.sh-process__visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  max-width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--sh-dark);
}
.sh-process__img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--sh-ease); }
.sh-process__img.is-active { opacity: 1; }
.sh-process__img img { width: 100%; height: 100%; object-fit: cover; }
.sh-process__label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 36px);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(13, 10, 28, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 500 12.5px/1.3 var(--sh-font-mono);
}

/* ==========================================================================
   Toolkit
   ========================================================================== */
.sh.sh-toolkit { overflow: hidden; background: var(--sh-soft); }
.sh-toolkit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.sh-skill {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--sh-line);
  border-radius: 24px;
  background: #fff;
}
.sh-skill__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sh-tint); color: var(--sh-accent); }
/* The skill group being learned now: a badge beside the icon and a stronger border */
.sh-skill { position: relative; }
.sh-skill.is-focus { border-color: rgba(106, 77, 255, .32); box-shadow: 0 18px 42px -30px rgba(40, 25, 120, .4); }
.sh .sh-skill__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--sh-green-soft);
  color: var(--sh-green-ink);
  font: 600 12.5px/1 var(--sh-font-body);
}
.sh .sh-skill__title { font: 600 19px/1.25 var(--sh-font-display); letter-spacing: -0.02em; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-tag {
  padding: 7px 12px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: var(--sh-soft);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--sh-ink-2);
}
.sh-toolkit__marquees { margin-top: 32px; }
.sh-tool {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  font: 600 14.5px/1 var(--sh-font-display);
  letter-spacing: -0.01em;
  color: var(--sh-ink-2);
}
.sh-tool::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-green); }

/* Learning card (toolkit) */
.sh-learn {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 24px 48px;
  margin-top: 18px;
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--sh-line);
  border-radius: 28px;
  background: #fff;
}
.sh-learn__copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.sh .sh-learn__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--sh-green-soft);
  color: var(--sh-green-ink);
  font: 600 13px/1 var(--sh-font-body);
}
.sh .sh-learn__title { display: flex; align-items: center; gap: 12px; font: 600 26px/1.15 var(--sh-font-display); letter-spacing: -0.025em; }
.sh-learn__title .sh-icon { width: 26px; height: 26px; color: var(--sh-green); }
.sh-learn .sh-rte { font-size: 15.5px; }
.sh-learn__focus { display: grid; gap: 10px; padding: 22px; border-radius: 20px; background: var(--sh-soft); }
.sh-learn__focus-title { margin-bottom: 4px; font: 600 14px/1.2 var(--sh-font-body); color: var(--sh-ink); }
.sh-learn__focus li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--sh-ink-2); }
.sh-learn__focus li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; border: 2px solid var(--sh-green); }

/* ==========================================================================
   Experience
   ========================================================================== */
.sh-exp__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.sh-exp__intro { position: sticky; top: 32px; display: grid; gap: 28px; justify-items: start; }
.sh-exp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sh-exp__actions:has(.sh-exp__social) { column-gap: 12px; }
/* LinkedIn next to the CV pill uses the same brand tile as "Find me at" (.sh-find__item) */
.sh-timeline { position: relative; display: grid; gap: 20px; }
.sh-timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 25px;
  width: 1px;
  background: linear-gradient(180deg, var(--sh-accent), var(--sh-line));
}
.sh-job { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; }
.sh-job__logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 16px;
  background: #fff;
  color: var(--sh-accent);
  font: 600 18px/1 var(--sh-font-display);
}
.sh-job__logo img { width: 100%; height: 100%; object-fit: cover; }
.sh-job__brand { display: none; }
.sh-job__card { display: grid; gap: 14px; min-width: 0; padding: 24px; border: 1px solid var(--sh-line); border-radius: 24px; background: var(--sh-soft); }
.sh-job.is-current .sh-job__card { background: #fff; box-shadow: 0 1px 2px rgba(18, 15, 36, .04), 0 18px 40px -20px rgba(40, 25, 120, .22); }
.sh-job__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.sh .sh-job__company { font: 600 21px/1.2 var(--sh-font-display); letter-spacing: -0.02em; }
.sh-job__role { margin-top: 4px; font-size: 15px; color: var(--sh-muted); }
/* Company website under the role, so visitors can check the workplace */
.sh .sh-job__site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--sh-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgb(106 77 255 / .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .3s;
}
.sh .sh-job__site:hover { text-decoration-color: currentColor; }
.sh-job__site .sh-icon { width: 14px; height: 14px; transition: transform .3s var(--sh-ease); }
.sh .sh-job__site:hover .sh-icon { transform: translate(2px, -2px); }
.sh-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sh-ink-2);
  font: 500 12px/1 var(--sh-font-mono);
  white-space: nowrap;
}
.sh-job .sh-rte { font-size: 15.5px; }
.sh-job .sh-tag { border-color: transparent; background: var(--sh-green-soft); color: var(--sh-green-ink); }

/* ==========================================================================
   Video
   ========================================================================== */
.sh.sh-video { background: linear-gradient(180deg, var(--sh-surface) 0%, var(--sh-tint) 30%, #e3dbff 65%, var(--sh-surface) 100%); }
.sh-video__card {
  position: relative;
  max-width: 1040px;
  margin: 48px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 28px;
  background: var(--sh-dark);
  box-shadow: 0 50px 100px -40px rgba(60, 35, 190, .55);
}
.sh-video__poster { position: absolute; inset: 0; }
.sh-video__poster img { width: 100%; height: 100%; object-fit: cover; }
.sh-video__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 10, 28, .15) 0%, rgba(13, 10, 28, .3) 50%, rgba(13, 10, 28, .78) 100%);
}
.sh .sh-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--sh-accent);
  box-shadow: 0 20px 40px -12px rgba(13, 10, 28, .5);
  cursor: pointer;
  transition: transform .4s var(--sh-ease);
}
.sh .sh-video__play::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  animation: sh-ring 2.4s ease-out infinite;
}
.sh .sh-video__play:hover { transform: scale(1.06); }
.sh-video__play .sh-icon { width: 30px; height: 30px; margin-left: 4px; }
.sh span.sh-video__play { cursor: default; }
.sh-video__caption { position: absolute; left: clamp(18px, 3vw, 32px); right: clamp(18px, 3vw, 32px); bottom: clamp(16px, 3vw, 28px); z-index: 1; display: grid; gap: 8px; color: #fff; }
.sh-video__label { font: 500 11.5px/1 var(--sh-font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.sh-video__title { font: 600 clamp(18px, 14px + 1vw, 26px)/1.2 var(--sh-font-display); letter-spacing: -0.02em; }
.sh-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sh-video__card.is-playing .sh-video__poster,
.sh-video__card.is-playing .sh-video__play,
.sh-video__card.is-playing .sh-video__caption { display: none; }

/* ==========================================================================
   Blog
   ========================================================================== */
.sh-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; margin-top: 48px; }
.sh .sh-post { display: grid; align-content: start; gap: 16px; min-width: 0; color: var(--sh-ink); }
.sh-post__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 22px; background: var(--sh-tint); }
.sh-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sh-ease); }
.sh-post:hover .sh-post__media img { transform: scale(1.05); }
.sh-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font: 500 11.5px/1 var(--sh-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
.sh-post__cat { color: var(--sh-accent); }
.sh-post__cat::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 12px; border-radius: 50%; background: var(--sh-line); vertical-align: middle; }
.sh .sh-post__title {
  display: -webkit-box;
  overflow: hidden;
  font: 600 20px/1.3 var(--sh-font-display);
  letter-spacing: -0.02em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: color .25s;
}
.sh-post:hover .sh-post__title { color: var(--sh-accent); }
.sh-post__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.sh-post__more .sh-icon { width: 16px; height: 16px; transition: transform .3s var(--sh-ease); }
.sh-post:hover .sh-post__more .sh-icon { transform: translateX(4px); }
.sh-blog__foot { display: flex; justify-content: center; margin-top: 48px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.sh.sh-contact { padding: 12px; }
.sh-contact__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--sh-radius-xl);
  background: var(--sh-dark);
  color: #fff;
}
.sh-contact__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(106, 77, 255, .45), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(106, 77, 255, .3), transparent 70%);
}
.sh-contact__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 65%);
}
.sh-contact__inner { padding-top: clamp(64px, 8vw, 112px); }
.sh-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(40px, 6vw, 88px);
}
.sh-contact__copy { display: grid; gap: 32px; justify-items: start; min-width: 0; }
.sh-contact__list { display: grid; gap: 16px; }
.sh-contact__item { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sh-contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--sh-accent-light);
}
.sh-contact__icon .sh-icon { width: 19px; height: 19px; }
.sh-contact__label { display: block; font: 500 13px/1 var(--sh-font-body); color: rgba(255, 255, 255, .55); }
.sh .sh-contact__value { display: block; margin-top: 6px; font-size: 16.5px; color: #fff; overflow-wrap: anywhere; }
.sh .sh-contact__value:is(a):hover { color: var(--sh-accent-light); }
.sh-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-contact__form { min-width: 0; }
/* Brand tiles on the dark panel: tinted fill, lighter icon, solid colour on hover */
.sh-contact .sh-find__item {
  border: 1px solid rgb(var(--brand-rgb) / .34);
  background: rgb(var(--brand-rgb) / .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--brand-light);
}
.sh-contact .sh-find__item--github,
.sh-contact .sh-find__item--x { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); }
.sh-contact .sh-find__item--github:hover,
.sh-contact .sh-find__item--x:hover { background: #fff; color: #111; }

.sh .sh-form {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sh-form__head { display: grid; gap: 6px; margin-bottom: 4px; }
.sh .sh-form__title { font: 600 24px/1.2 var(--sh-font-display); letter-spacing: -0.025em; color: #fff; }
.sh-form__sub { font-size: 14.5px; color: rgba(255, 255, 255, .62); }
.sh-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sh-field { display: grid; gap: 8px; min-width: 0; }
.sh .sh-field label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .74); }
.sh .sh-input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  outline: none;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  color: #fff;
  font: 400 15px/1.4 var(--sh-font-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.sh .sh-input::placeholder { color: rgba(255, 255, 255, .4); opacity: 1; }
.sh .sh-input:focus { border-color: var(--sh-accent-light); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 4px rgba(106, 77, 255, .28); }
.sh textarea.sh-input { min-height: 136px; resize: vertical; }
.sh select.sh-input {
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}
.sh select.sh-input option { color: #120f24; background: #fff; }
.sh .sh-form .sh-btn { justify-content: space-between; width: 100%; }
.sh-notice { padding: 14px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.sh-notice ul { list-style: disc; padding-left: 1.2em; }
.sh-notice--ok { border: 1px solid rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); color: #b9f6dc; }
.sh-notice--err { border: 1px solid rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .12); color: #fecaca; }

.sh-contact__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.sh .sh-contact__bar a { display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.sh .sh-contact__bar a:hover { color: #fff; }
.sh-contact__bar .sh-icon { width: 16px; height: 16px; }
/* Big name at the bottom: lavender gradient that fades into the panel, fully visible */
.sh-contact__wordmark {
  margin-top: clamp(4px, 1.5vw, 20px);
  padding-bottom: .08em;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font: 700 clamp(40px, 12.5vw, 210px)/.95 var(--sh-font-display);
  letter-spacing: -0.06em;
  color: transparent;
  background: linear-gradient(180deg, rgba(195, 180, 255, .62) 0%, rgba(150, 125, 255, .28) 50%, rgba(106, 77, 255, .04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   Liquid glass
   Frosted, light-catching surfaces in the spirit of Apple's Liquid Glass:
   a translucent gradient fill, a bright top rim, a soft shadow and a strong
   backdrop blur. Used only where something sits over imagery or colour,
   so the glass has something to refract.
   ========================================================================== */
.sh .sh-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* Light sweep across solid buttons on hover */
.sh .sh-btn:not(.sh-btn--glass):not(.sh-btn--outline) { position: relative; isolation: isolate; overflow: hidden; }
.sh .sh-btn:not(.sh-btn--glass):not(.sh-btn--outline)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .34) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .8s var(--sh-ease);
}
.sh .sh-btn:not(.sh-btn--glass):not(.sh-btn--outline):hover::after { transform: translateX(110%); }
.sh-step[open]:not(.is-closing) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* Dark glass: navigation and hero elements over the background image, contact panel */
.sh-nav,
.sh-hero__badge,
.sh .sh-btn--glass,
.sh-hero__stats,
.sh-glass,
.sh .sh-form,
.sh-contact__icon {
  border: 1px solid rgba(255, 255, 255, .16);
  background: var(--sh-glass-dark), rgba(20, 16, 40, .18);
  box-shadow: var(--sh-glass-dark-rim), 0 12px 32px -14px rgba(5, 3, 20, .55);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}
/* Over white sections the floating navigation takes a deeper tint, light enough to show the blur behind it */
.sh-nav.is-scrolled {
  background: var(--sh-glass-dark), rgba(14, 10, 34, .8);
  box-shadow: var(--sh-glass-dark-rim), 0 18px 44px -16px rgba(5, 3, 20, .55);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
}
/* Brighter links keep the lighter glass readable over white sections */
.sh .sh-nav.is-scrolled .sh-nav__links a { color: rgba(255, 255, 255, .92); }
.sh .sh-nav.is-scrolled .sh-nav__links a:hover,
.sh .sh-nav.is-scrolled .sh-nav__links a.is-active { color: #fff; }
.sh-hero__stats { padding: 20px 28px; border-radius: 24px; margin-bottom: 24px; }
/* Over the screenshot wall the stats glass takes a deeper tint so its text stays crisp */
.sh-hero__frame--wall .sh-hero__stats { background: var(--sh-glass-dark), rgba(16, 13, 32, .5); }
.sh-logos .sh-marquee { --sh-gap: 0px; }

/* Dark glass over photos and screenshots: a stronger tint keeps white text legible on bright images */
.sh .sh-work__media .sh-chip,
.sh-work__media .sh-arrow,
.sh .sh-service__tag,
.sh-service__arrow,
.sh-shot__zoom,
.sh-process__label {
  border: 1px solid rgba(255, 255, 255, .2);
  background: var(--sh-glass-dark), rgba(13, 10, 28, .52);
  box-shadow: var(--sh-glass-dark-rim), 0 10px 24px -12px rgba(5, 3, 20, .6);
  color: #fff;
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}

/* Light glass surfaces for the about card and lightbox toolbar */
.sh-about__card,
.sh-lightbox__bar {
  border: 1px solid rgba(255, 255, 255, .8);
  background: var(--sh-glass-light);
  box-shadow: var(--sh-glass-light-rim), 0 24px 48px -22px rgba(40, 25, 120, .35), 0 2px 6px rgba(40, 25, 120, .06);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}
/* The preview's top bar floats over the screenshot, which scrolls underneath it */
.sh-lightbox__bar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; border-radius: 18px; }
.sh-lightbox__scroll { padding-top: 88px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .sh-hero__body { grid-template-columns: minmax(0, 1fr); }
  .sh-hero__cards { display: none; }
}

/* Keep the skills and tools cards comfortable to read on laptop widths. */
@media (max-width: 1199px) {
  .sh-toolkit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 989px) {
  .sh-wall,
  .sh-hero__scrim { display: none; }
}

@media (max-width: 989px) {
  .sh-nav__links,
  .sh .sh-nav__cta { display: none; }
  .sh-nav__menu { display: block; }
  .sh-about__grid,
  .sh-process__grid,
  .sh-exp__grid,
  .sh-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-about__visual { width: 100%; max-width: 560px; margin-inline: auto; }
  .sh-process__visual { aspect-ratio: 4 / 3; }
  .sh-exp__intro { position: static; }
  .sh-toolkit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-services__aside { justify-items: start; }
  .sh-services__aside .sh-lead { text-align: left; }
  .sh-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-learn { grid-template-columns: minmax(0, 1fr); }
}

/* Phones. Sizes stay modest because many phones (and in-app browsers such as
   Messenger) enlarge text by 15-30%; layouts here must survive that. */
@media (max-width: 749px) {
  .sh { --sh-pscale: .5; }
  .sh .sh-h2 { font-size: clamp(26px, 4vw + 14px, 32px); line-height: 1.12; }
  .sh .sh-lead,
  .sh-rte { font-size: 15.5px; }
  .sh-head { gap: 14px; }
  .sh.sh-hero,
  .sh.sh-contact { padding: 8px; }
  .sh-hero__frame,
  .sh-contact__frame { border-radius: 24px; }

  /* Compact floating navigation */
  .sh-nav { top: 12px; left: 12px; right: 12px; padding: 5px 5px 5px 18px; }
  .sh-nav.is-scrolled { top: 8px; left: 8px; right: 8px; }
  .sh .sh-nav__logo { gap: 9px; font-size: 20px; }
  .sh-nav__mark { width: 40px; height: 40px; margin-left: -13px; font-size: 14px; }
  .sh-nav__toggle { width: 40px; height: 40px; }

  /* Hero: smaller heading and tighter rhythm so the buttons and stats fit the first screen */
  .sh-hero__frame--nav { padding-top: 64px; }
  .sh-hero__body { padding-top: 24px; padding-bottom: 28px; }
  .sh-hero__main { gap: 18px; }
  .sh-hero__badge { padding: 6px 13px; font-size: 12.5px; }
  .sh .sh-hero__title { font-size: clamp(32px, 6vw + 14px, 40px); line-height: 1.05; }
  .sh-hero__text { font-size: 15px; line-height: 1.6; }
  .sh-hero__btns { gap: 10px; margin-top: 2px; }
  .sh .sh-hero__btns .sh-btn { min-height: 46px; gap: 10px; padding: 5px 5px 5px 18px; font-size: 14px; }
  .sh .sh-hero__btns .sh-btn--plain { padding: 5px 20px; }
  .sh .sh-hero__btns .sh-btn__dot { width: 36px; height: 36px; }
  .sh-hero__stats { padding: 16px 18px; margin-bottom: 16px; }
  .sh-logo { padding: 0 28px; }
  .sh-logo__name { font-size: 19px; }

  /* About facts: one row per fact (value left, label right) instead of three cramped columns */
  .sh-facts { flex-direction: column; }
  .sh-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; padding: 12px 0; }
  .sh-fact + .sh-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--sh-line); }
  .sh-fact__value { font-size: 22px; white-space: nowrap; }
  .sh-fact__label { margin-top: 0; text-align: right; }

  .sh-hero__stats--plain { row-gap: 14px; }
  .sh-hero__stats--plain .sh-stat { padding: 0 0 0 14px; }
  .sh-hero__stats--plain .sh-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  /* A leftover stat takes the whole last row */
  .sh-hero__stats--plain .sh-stat:last-child:nth-child(odd) { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .sh .sh-hero__stats--plain .sh-stat__value { font-size: 22px; white-space: nowrap; }
  .sh-hero__stats--plain .sh-stat__label { font-size: 12.5px; }
  .sh-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .sh .sh-service__title { font-size: 20px; }
  .sh-skill { gap: 14px; padding: 20px; }
  /* Keeps the email address on one line */
  .sh-contact__item { gap: 14px; }
  .sh-contact__icon { width: 42px; height: 42px; }
  .sh .sh-contact__value { font-size: 15px; }
  .sh-stat { gap: 10px; }
  .sh-stat__icon { width: 38px; height: 38px; }
  .sh-stat__value { font-size: 22px; }
  .sh-services__track { grid-auto-columns: minmax(260px, 82%); }
  .sh-services__track--duo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sh-work__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-work__media,
  .sh-work__card:nth-child(-n+2) .sh-work__media { height: 240px; }
  .sh-work__body { right: 18px; bottom: 20px; left: 18px; }
  .sh-toolkit__grid,
  .sh-blog__grid,
  .sh-form__row { grid-template-columns: minmax(0, 1fr); }
  .sh-about__photo { width: 86%; }
  .sh-about__note { position: static; max-width: none; margin-bottom: 20px; }
  .sh-about__visual { padding-top: 0; padding-bottom: 0; }
  /* Keep the face clear: the card tucks under the photo's bottom edge instead of covering it */
  .sh-about__card { position: relative; right: auto; bottom: auto; width: 82%; margin: -56px 0 0 auto; }
  .sh-step__body { padding-left: 20px; }
  .sh-job { grid-template-columns: minmax(0, 1fr); }
  .sh-job__logo { display: none; }
  /* the timeline logo column is gone here, so a logo shows inside the card instead */
  .sh-job__brand { display: block; width: 44px; height: 44px; margin-bottom: 12px; border: 1px solid var(--sh-line); border-radius: 14px; background: #fff; object-fit: cover; }
  .sh-timeline::before { display: none; }
  .sh .sh-video__play { width: 72px; height: 72px; }
  .sh-video__caption .sh-video__title { display: none; }
  .sh-showcase__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-showcase__grid--feature .sh-shot:first-child .sh-shot__view { aspect-ratio: 4 / 3; }
  .sh-shot__body { right: 14px; bottom: 14px; left: 14px; gap: 6px; }
  .sh-shot__zoom { top: 10px; right: 10px; }
  .sh-shot__text { font-size: 13.5px; }
  .sh .sh-lightbox { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 18px; }
  /* Full-page preview: the bar sits above the screenshot instead of covering it */
  .sh-lightbox__bar { position: relative; top: auto; left: auto; right: auto; flex-wrap: nowrap; margin: 8px; padding: 8px 8px 8px 16px; }
  .sh-lightbox__scroll { padding-top: 0; }
  .sh-lightbox__meta { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); }
  .sh-lightbox__cat { display: none; }
  .sh .sh-lightbox__title { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
  .sh-lightbox__actions { flex: none; gap: 6px; }
  .sh .sh-lightbox__btn { width: 38px; height: 38px; }
  .sh .sh-lightbox__visit { margin-right: 2px; }
  .sh .sh-lightbox__visit span { display: none; }
  .sh-lightbox__hint { display: none; }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes sh-marquee { to { transform: translateX(calc(-50% - var(--sh-gap) / 2)); } }
@keyframes sh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@keyframes sh-lb-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@keyframes sh-blink { to { visibility: hidden; } }
@keyframes sh-aurora-a { to { transform: translate3d(-14%, 16%, 0) scale(1.12); } }
@keyframes sh-aurora-b { to { transform: translate3d(18%, -12%, 0) scale(1.18); } }
@keyframes sh-aurora-c {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-30%, 20%, 0) scale(1.2); }
  100% { transform: translate3d(20%, -10%, 0) scale(.9); }
}
@keyframes sh-wall-up { to { transform: translateY(calc(-50% - 9px)); } }
@keyframes sh-wall-down { from { transform: translateY(calc(-50% - 9px)); } to { transform: translateY(0); } }
@keyframes sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sh-rise { from { transform: translateY(22px); } }
@keyframes sh-ring { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes sh-fade { from { opacity: 0; transform: translateY(-6px); } }
@keyframes sh-step-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sh-hero-fade { from { opacity: 0; } }
@keyframes sh-halo-in { from { opacity: 0; transform: scale(.4); } }
@keyframes sh-halo-breathe { to { opacity: .82; transform: scale(1.06); } }
@keyframes sh-letter-in { from { transform: translateY(108%) rotate(7deg); } }
/* Solid and sharp by 40%, before the name starts rising behind it */
@keyframes sh-portrait-in {
  0% { opacity: 0; transform: translateY(12%) scale(.95); filter: blur(10px) brightness(.4); }
  40% { opacity: 1; filter: blur(0) brightness(.9); }
}
@keyframes sh-drop-in { from { opacity: 0; transform: translateY(-24px); } }
@keyframes sh-fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes sh-line-in { from { transform: translateY(106%); } }

@media (prefers-reduced-motion: reduce) {
  .sh *,
  .sh *::before,
  .sh *::after { animation: none !important; transition: none !important; }
  .sh-marquee { -webkit-mask-image: none; mask-image: none; }
  .sh-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; }
  .sh-marquee__track [aria-hidden="true"] { display: none; }
  .sh-reveal-ready [data-sh-reveal] { opacity: 1; transform: none; }
}

/* Touch screens: small text links get a taller hit area (about 44px) without
   changing how they look */
@media (pointer: coarse) {
  .sh .sh-link { padding-top: 10px; margin-top: -10px; padding-bottom: 6px; }
  .sh .sh-job__site { padding-block: 10px; margin-block: 0 -10px; }
  .sh .sh-contact__value:is(a) { padding-block: 9px; margin-block: -3px -9px; }
  .sh-contact__bar a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Phones: on a tall, narrow panel percentage-sized glows stretch into a hard
   vertical band, so they get fixed sizes instead */
@media (max-width: 749px) {
  .sh-contact__frame::before {
    background:
      radial-gradient(360px 300px at 100% 0%, rgba(106, 77, 255, .4), transparent 70%),
      radial-gradient(340px 300px at 0% 100%, rgba(106, 77, 255, .28), transparent 70%);
  }
}

/* Contact form: in-place confirmation and sending state */
.sh-form__note { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: #ffd6d6; background: rgba(255, 90, 90, .12); }
.sh-form__note.is-ok { color: #c9f7dc; background: rgba(46, 204, 113, .14); }
.sh .sh-form .sh-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ==========================================================================
   Smooth scroll (Lenis, desktop wheel only; touch keeps native scrolling)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================================
   Blur reveal: content sharpens from a soft blur as it scrolls into view,
   and a section heading's eyebrow, title and intro follow one another
   ========================================================================== */
.sh-reveal-ready [data-sh-reveal] {
  filter: blur(8px);
  transform: translateY(24px);
  transition: opacity .9s var(--sh-ease), transform .9s var(--sh-ease), filter .9s var(--sh-ease);
  transition-delay: var(--sh-delay, 0s);
}
.sh-reveal-ready [data-sh-reveal].is-in { filter: blur(0); transform: none; }
.sh-reveal-ready [data-sh-reveal] > .sh-head > * {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition: opacity .8s var(--sh-ease), transform .8s var(--sh-ease), filter .8s var(--sh-ease);
}
.sh-reveal-ready [data-sh-reveal] > .sh-head > :nth-child(2) { transition-delay: .1s; }
.sh-reveal-ready [data-sh-reveal] > .sh-head > :nth-child(3) { transition-delay: .2s; }
.sh-reveal-ready [data-sh-reveal].is-in > .sh-head > * { opacity: 1; filter: blur(0); transform: none; }
@media (max-width: 749px) {
  .sh-reveal-ready [data-sh-reveal] { filter: blur(5px); transform: translateY(18px); }
}

/* Tool logos in the toolkit marquee (one SVG sprite, coloured per brand) */
.sh-tool--logo::before { content: none; }
.sh-tool__logo { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ==========================================================================
   Design stack: each card sticks while the next one slides over it
   (sh-portfolio.js scales and dims covered cards and pans the screenshot)
   ========================================================================== */
.sh-stack { --stack-top: 104px; position: relative; margin-top: clamp(36px, 5vw, 56px); }
.sh-stack__card {
  position: sticky;
  top: calc(var(--stack-top) + var(--i) * 12px);
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  height: min(600px, calc(100vh - var(--stack-top) - 110px));
  height: min(600px, calc(100svh - var(--stack-top) - 110px));
  min-height: 420px;
  margin-bottom: 36vh;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(106, 77, 255, .14);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(18, 15, 36, .04), 0 30px 60px -40px rgba(40, 25, 120, .4);
  transform-origin: 50% 0;
  will-change: transform;
}
/* Dims a card as the next one covers it (opacity set by sh-portfolio.js) */
.sh-stack__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: #0d0a1c;
  opacity: 0;
  pointer-events: none;
}
.sh-stack__end { height: 1px; }
.sh-stack__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(8px, 1.6vw, 22px); }
.sh .sh-stack__count { font: 600 14px/1 var(--sh-font-body); font-variant-numeric: tabular-nums; color: var(--sh-muted); }
.sh-stack__count span { color: var(--sh-accent); }
.sh .sh-stack__title { font: 700 clamp(30px, 2.6vw, 46px)/1.05 var(--sh-font-display); letter-spacing: -0.035em; color: var(--sh-ink); }
.sh-stack__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh .sh-stack__desc { max-width: 34ch; font-size: 15.5px; line-height: 1.6; color: var(--sh-muted); }
.sh-stack__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.sh .sh-stack__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  font: 600 14px/1 var(--sh-font-display);
  color: var(--sh-ink);
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.sh .sh-stack__open:hover { border-color: rgba(106, 77, 255, .4); background: var(--sh-tint); }
.sh-stack__open .sh-icon { width: 15px; height: 15px; }
.sh .sh-stack__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 20px;
  background: var(--sh-soft);
  box-shadow: none;
  text-align: left;
  cursor: zoom-in;
}
.sh-stack__frame .sh-shot__bar { flex: none; }
.sh-stack__view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sh .sh-stack__view img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  will-change: transform;
}
@media (max-width: 989px) {
  .sh-stack { --stack-top: 88px; }
  .sh-stack__card {
    top: calc(var(--stack-top) + var(--i) * 8px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    height: min(720px, calc(100vh - var(--stack-top) - 56px));
    height: min(720px, calc(100svh - var(--stack-top) - 56px));
    min-height: 0;
    margin-bottom: 30vh;
    padding: 14px;
    border-radius: 24px;
  }
  .sh-stack__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 4px 4px 0; }
  .sh-stack__count { grid-column: 1; }
  .sh .sh-stack__title { grid-column: 1; font-size: clamp(24px, 5vw, 32px); }
  .sh-stack__chips,
  .sh .sh-stack__desc { display: none; }
  .sh-stack__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .sh .sh-stack__open { display: none; }
  .sh-stack__frame { border-radius: 16px; }
}
@media (max-width: 749px) {
  .sh-stack { --stack-top: 80px; }
  .sh-stack__card { margin-bottom: 26vh; padding: 12px; }
  .sh .sh-stack__live { min-height: 40px; padding: 4px 4px 4px 14px; font-size: 13px; }
  .sh .sh-stack__live .sh-btn__dot { width: 32px; height: 32px; }
}

/* ==========================================================================
   Page rhythm: the career path sits on a dark panel and the Shopify designs
   on a soft tint, so white sections never run into each other
   ========================================================================== */
.sh.sh-process--dark {
  position: relative;
  isolation: isolate;
  margin-inline: 12px;
  overflow: hidden;
  border-radius: var(--sh-radius-xl);
  background: var(--sh-dark);
  color: #fff;
}
.sh.sh-process--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 0% 0%, rgba(106, 77, 255, .32), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(106, 77, 255, .28), transparent 70%);
}
.sh-process--dark .sh-step { border-color: rgba(255, 255, 255, .1); }
.sh-process--dark .sh-step[open]:not(.is-closing) {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 48px -28px rgba(0, 0, 0, .6);
}
.sh-process--dark .sh-step__num { color: rgba(255, 255, 255, .45); }
.sh-process--dark .sh-step__icon { border-color: rgba(255, 255, 255, .2); color: #fff; }
.sh-process--dark .sh-process__visual { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.sh.sh-showcase { background: linear-gradient(180deg, var(--sh-surface) 0, var(--sh-soft) 280px); }
@media (max-width: 749px) {
  .sh.sh-process--dark { margin-inline: 8px; border-radius: 26px; }
  .sh-toolkit__marquees { margin-top: 24px; }
  .sh-tool { padding: 10px 14px; font-size: 13.5px; }
  .sh-tool__logo { width: 16px; height: 16px; }
}

/* Reading progress along the top edge of the window */
.sh-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #b3a0ff, #6a4dff 60%, #16a34a);
  transform: scaleX(0);
  will-change: transform;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ==========================================================================
   Liquid glass, round 2: brighter lens edges (light catches the top-left
   rim, a fainter glow sits bottom-right), a pointer highlight, and in
   Chromium a slight refraction of whatever is behind the glass
   ========================================================================== */
:root {
  --sh-glass-dark-rim: inset 1px 1px 0 rgba(255, 255, 255, .36), inset -1px -1px 0 rgba(255, 255, 255, .12), inset 0 0 18px rgba(255, 255, 255, .06);
  --sh-glass-light-rim: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(255, 255, 255, .6), inset 0 0 18px rgba(255, 255, 255, .45);
  --sh-glass-shine: radial-gradient(160px circle at var(--sh-gx, 30%) var(--sh-gy, 0%), rgba(255, 255, 255, .2), transparent 70%);
}

/* Navigation: clear dark glass over the hero and dark panels, light glass over white sections */
.sh-nav.is-scrolled.is-over-dark {
  background: var(--sh-glass-shine), var(--sh-glass-dark), rgba(14, 10, 34, .3);
  border-color: rgba(255, 255, 255, .18);
}
.sh-nav.is-scrolled:not(.is-over-dark) {
  border-color: rgba(255, 255, 255, .75);
  background: var(--sh-glass-shine), linear-gradient(150deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .56) 100%);
  box-shadow: var(--sh-glass-light-rim), 0 18px 44px -20px rgba(40, 25, 120, .38), 0 2px 8px rgba(40, 25, 120, .06);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  backdrop-filter: blur(20px) saturate(190%);
}
.sh .sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__links a { color: var(--sh-ink-2); }
.sh .sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__links a:hover { color: var(--sh-ink); background: rgba(106, 77, 255, .08); }
.sh .sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__links a.is-active { color: #fff; }
.sh .sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__cta { --sh-btn-bg: var(--sh-accent); --sh-btn-fg: #fff; --sh-btn-dot-bg: #fff; --sh-btn-dot-fg: var(--sh-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -12px rgba(106, 77, 255, .75); }
.sh .sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__cta:hover { background: #5a3df0; }
.sh-nav.is-scrolled:not(.is-over-dark) .sh-nav__toggle { border-color: rgba(18, 15, 36, .14); background: rgba(255, 255, 255, .5); color: var(--sh-ink); }
.sh-nav { transition: top .5s var(--sh-ease), left .5s var(--sh-ease), right .5s var(--sh-ease), background-color .4s, border-color .4s, box-shadow .4s; }

/* Phone menu panel: glass instead of a near-solid block */
.sh-nav__panel {
  border-color: rgba(255, 255, 255, .16);
  background: var(--sh-glass-dark), rgba(14, 10, 34, .72);
  box-shadow: var(--sh-glass-dark-rim), 0 24px 50px -20px rgba(5, 3, 20, .6);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
}

/* Hero proof line becomes a glass pill */
.sh-hero__proof {
  padding: 7px 18px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: var(--sh-glass-shine), var(--sh-glass-dark), rgba(20, 16, 40, .2);
  box-shadow: var(--sh-glass-dark-rim), 0 14px 34px -16px rgba(5, 3, 20, .6);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}
.sh-hero__marks span { border-color: rgba(18, 14, 40, .9); }

/* Glass buttons and chips pick up the pointer highlight */
.sh .sh-btn--glass { background: var(--sh-glass-shine), var(--sh-glass-dark), rgba(20, 16, 40, .18); }
.sh-shot__zoom,
.sh-process__label { background: var(--sh-glass-shine), var(--sh-glass-dark), rgba(13, 10, 28, .42); }

/* Open career step on the dark panel: a glass card over the purple glow */
.sh-process--dark .sh-step[open]:not(.is-closing) {
  background: var(--sh-glass-dark), rgba(255, 255, 255, .03);
  box-shadow: var(--sh-glass-dark-rim), 0 24px 48px -28px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: var(--sh-glass-blur);
  backdrop-filter: var(--sh-glass-blur);
}

/* Chromium: refract the backdrop through #sh-liquid (other browsers ignore this class) */
html.sh-refract .sh-nav,
html.sh-refract .sh-nav.is-scrolled,
html.sh-refract .sh-nav.is-scrolled:not(.is-over-dark),
html.sh-refract .sh-hero__proof,
html.sh-refract .sh .sh-btn--glass,
html.sh-refract .sh-shot__zoom,
html.sh-refract .sh-process__label,
html.sh-refract .sh-nav__panel {
  -webkit-backdrop-filter: blur(14px) url(#sh-liquid) saturate(190%);
  backdrop-filter: blur(14px) url(#sh-liquid) saturate(190%);
}

/* ==========================================================================
   Shopify showcase, round 2: a brand tint and a
   large outlined number per card and a details list
   ========================================================================== */
.sh-showcase__head { gap: 28px 48px; }
.sh-showcase__head .sh-head { max-width: 640px; }

.sh-stack__card { background: #fff; }
.sh-stack__card { background: radial-gradient(60% 85% at 0% 0%, color-mix(in srgb, var(--tint, #6a4dff) 13%, transparent), transparent 72%), #fff; }
.sh .sh-stack__num {
  margin-bottom: -4px;
  font: 700 clamp(64px, 6.4vw, 104px)/.9 var(--sh-font-display);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tint, var(--sh-accent));
  opacity: .7;
}
.sh-stack__card .sh-stack__count { display: none; }
.sh .sh-stack__meta { display: grid; margin-top: 4px; border-top: 1px solid var(--sh-line); }
.sh-stack__meta div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--sh-line); font-size: 14px; }
.sh .sh-stack__meta dt { color: var(--sh-muted); }
.sh .sh-stack__meta dd { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--sh-ink); }
.sh .sh-stack__frame { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tint, #6a4dff) 9%, transparent), 0 24px 50px -30px rgba(18, 15, 36, .45); }
.sh-stack__view .sh-shot__zoom { opacity: 1; }

@media (max-width: 989px) {
  .sh .sh-stack__num,
  .sh .sh-stack__meta { display: none; }
  .sh-stack__card .sh-stack__count { display: block; }
      }
@media (max-width: 749px) {
  .sh-showcase__head .sh-head { text-align: left; }
  }

/* The last design only needs a short stop before the section ends, and the
   contact frame's outer margin takes the showcase tint (no white strip) */
.sh-stack__card:nth-last-child(2) { margin-bottom: 14vh; }
.sh.sh-contact { background: var(--sh-soft); }