/* ==========================================================
   Portfolio — shared styles
   Layout: 456px content column, nav on the left, meta on the right,
   dashed grid lines and border strips framing the page.
   ========================================================== */

:root {
  --bg: #f6f6f4;
  --surface: #fdfdfc;
  --ink: #212223;
  --text: #595959;
  --muted: #737373;
  --faint: var(--muted); /* readable grey for small labels (was 40% black) */
  --line: #eaeae9;
  --accent: #60b5ff;
  --teal: #0eb3c9;
  --tg: #1d93d2;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-card: rgba(33, 34, 35, 0.1) 0 0.5px 0.5px, rgba(33, 34, 35, 0.06) 0 4px 8px -3px, rgba(33, 34, 35, 0.08) 0 0 0 0.5px;

  /* Type scale, after Apple's Human Interface Guidelines text styles.
     Tracking tightens as size grows, like SF Pro. */
  --font-display: InterDisplay, "Inter Display", Inter, sans-serif;
  --fs-display: 44px; --lh-display: 48px; --tr-display: -0.022em; /* hero, desktop */
  --fs-large: 34px;   --lh-large: 40px;   --tr-large: -0.02em;    /* Large Title: hero, phones */
  --fs-title1: 28px;  --lh-title1: 34px;  --tr-title1: -0.018em;  /* Title 1 */
  --fs-title2: 22px;  --lh-title2: 28px;  --tr-title2: -0.015em;  /* Title 2 */
  --fs-body: 17px;     --lh-body: 26px;     --tr-body: -0.011em;     /* Body (web leading) */
  --fs-sub: 15px;      --lh-sub: 20px;      --lh-sub-para: 22px;     --tr-sub: -0.009em; /* Subheadline */
  --fs-foot: 13px;     --lh-foot: 18px;     --tr-foot: -0.004em;     /* Footnote */
  --fs-cap: 12px;      --lh-cap: 16px;                               /* Caption 1 */
  --fs-cap2: 11px;     --lh-cap2: 14px;                              /* Caption 2 */
  /* Spacing on a 4/8pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
  color: #363636;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* ---------- Page frame ---------- */
.page {
  position: relative;
  min-height: 100vh;
  background: var(--surface);
  overflow-x: clip;
}
/* Curtain plays only when arriving from another page of the site */
.curtain .page { animation: curtainReveal 0.6s var(--ease-io); }
.page.leaving { animation: curtainHide 0.35s var(--ease-io) both; }
@keyframes curtainReveal {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes curtainHide {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
}

.strip {
  position: fixed; top: -50px; bottom: -50px; width: 40px; z-index: 0;
  background: rgba(73, 73, 73, 0.07);
  border-right: 1px dashed rgba(73, 73, 73, 0.4);
  opacity: 0.5;
}
.strip.left { left: 0; }
.strip.right { right: 0; transform: scaleX(-1); }

.gridline {
  position: fixed; top: 0; bottom: 0; width: 0; z-index: 0; pointer-events: none;
  border-right: 1px dashed rgba(73, 73, 73, 0.1);
}
.gl-nav   { left: calc(50% - 512px); }
.gl-left  { left: calc(50% - 228px); }
.gl-right { left: calc(50% + 228px); }
.gl-end   { left: calc(50% + 512px); }

/* ---------- Left nav ---------- */
.side-nav {
  position: fixed; top: 120px; left: max(24px, 50% - 512px); z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Wordmark: letters fold up one by one, then the dot pops in.
   Entrance animations only fill "backwards", so once they finish the normal
   styles below take over and hover states can change them. */
.wordmark-link { display: inline-block; margin-bottom: var(--s-5); }
.wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: var(--fs-body); line-height: 22px; letter-spacing: -0.02em; color: var(--ink); } /* Headline */
.wm-name { font-weight: 700; display: inline-flex; align-items: baseline; }
.wm-name span { display: inline-block; animation: wmLetter 0.45s var(--ease-out) backwards; animation-delay: calc(var(--i) * 30ms); }
.wm-dot { display: inline-block; font-weight: 700; color: var(--ink); transform-origin: 50% 85%; /* scale from the baseline */
  animation: wmDot 0.5s var(--spring) 0.3s backwards; }
@keyframes wmLetter { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } }
@keyframes wmDot { 0% { opacity: 0; scale: 0; } 70% { opacity: 1; scale: 1.25; } 100% { scale: 1; } }
.wm-tld { font-weight: 400; color: var(--text); animation: wmLetter 0.45s var(--ease-out) 0.3s backwards; }

.nav-links { display: flex; flex-direction: column; gap: 8px; }
.nav-link {
  font-size: 13px; font-weight: 450; line-height: 20px; letter-spacing: -0.065px;
  color: var(--text); white-space: nowrap; transition: color 0.15s;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.side-nav:has(.nav-link:hover) .nav-link:not(:hover) { color: #929292; }
.nav-link.soon { pointer-events: none; color: rgba(89, 89, 89, 0.4); display: inline-flex; align-items: center; }
.soon-badge { position: relative; margin-left: 8px; color: #058798; font-weight: 500; }
.soon-badge svg { position: absolute; top: 50%; left: 50%; width: calc(100% + 26px); transform: translate(calc(-50% + 2px), -50%); overflow: visible; }
.soon-badge path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: draw 0.9s 0.6s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.nav-contact {
  position: fixed; bottom: 40px; left: max(24px, 50% - 512px); z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
}
.nav-contact p { margin: 0; font-size: var(--fs-cap2); line-height: var(--lh-cap2); color: var(--text); }
.email-wrap { position: relative; display: inline-block; }
.underline {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(33, 34, 35, 0.05), rgba(33, 34, 35, 0.05));
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px, 100% 1px;
  transition: background-size 0.25s, color 0.15s;
}
.underline:hover { background-size: 100% 1px, 100% 1px; }
.email { font-size: var(--fs-foot); font-weight: 450; line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--text); cursor: pointer; }
.email:hover { color: var(--ink); }
.copied {
  position: absolute; top: 50%; left: calc(100% + 8px); white-space: nowrap; pointer-events: none;
  padding: 3px 6px; border-radius: 6px; background: rgba(33, 34, 35, 0.1);
  font-size: var(--fs-cap2); font-weight: 500; line-height: 1; color: var(--ink);
  opacity: 0; transform: translate(-8px, -50%);
  animation: copiedIn 0.3s var(--ease-out) forwards, copiedOut 0.25s ease-in 1.4s forwards;
}
@keyframes copiedIn { to { opacity: 1; transform: translate(0, -50%); } }
@keyframes copiedOut { from { opacity: 1; transform: translate(0, -50%); } to { opacity: 0; transform: translate(4px, -50%); } }

/* ---------- Main column ---------- */
.main { position: relative; max-width: 1024px; min-height: 100vh; margin: 0 auto; display: flex; justify-content: center; }
.content { position: relative; width: 100%; max-width: 456px; padding: 120px 0 96px; }

.meta-right { position: fixed; top: 114px; right: max(24px, 50% - 512px); z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.visitors {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 425; line-height: 20px; letter-spacing: -0.06px; color: var(--faint);
}
.visitors rect { transform-box: fill-box; transform-origin: center bottom; }
.visitors .b1 { animation: pulse1 3s ease-in-out infinite; }
.visitors .b2 { animation: pulse2 3s ease-in-out 0.4s infinite; }
.visitors .b3 { animation: pulse3 3s ease-in-out 0.8s infinite; }
@keyframes pulse1 { 0%,100% { opacity: .1; transform: scaleY(1); } 50% { opacity: .4; transform: scaleY(1.15); } }
@keyframes pulse2 { 0%,100% { opacity: .2; transform: scaleY(1); } 50% { opacity: .55; transform: scaleY(1.08); } }
@keyframes pulse3 { 0%,100% { opacity: .15; transform: scaleY(1); } 50% { opacity: .5; transform: scaleY(1.12); } }

/* Theme switch: sun / moon, a thumb slides under the active one */
.theme-switch { position: relative; display: inline-flex; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ts-thumb {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 999px; pointer-events: none;
  background: var(--surface); box-shadow: rgba(0,0,0,.08) 0 1px 2px, inset 0 0 0 .5px rgba(0,0,0,.14);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.theme-switch.is-dark .ts-thumb { transform: translateX(24px); }
.theme-switch button {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: none; cursor: pointer; color: var(--muted); transition: color .15s;
}
.theme-switch button[aria-checked="true"], .theme-switch button:hover { color: var(--ink); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch button::after { content: ""; position: absolute; inset: -10px -2px; } /* 44pt tap area */

.follow { display: flex; flex-direction: column; align-items: flex-end; margin-top: 32px; }
.nav-divider { width: 24px; height: 1px; margin: 0 0 24px; background: rgba(0, 0, 0, 0.1); }
/* Under the theme switch: a short divider, then "Let's connect" with the LinkedIn mark (after wireframe.co) */
.connect-link { margin-top: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-cap); font-weight: 425; line-height: var(--lh-cap); color: var(--text); transition: color .15s; }
.connect-link:hover { color: var(--ink); }
.connect-link svg { flex: none; color: var(--faint); transition: scale .2s var(--ease-out); } /* same grey as the weather icon */
.connect-link svg .in { fill: var(--bg); }
.connect-link:hover svg { scale: 1.08; }
.connect-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 1200px) { .connect-link { display: none; } } /* the top bar is too tight on smaller screens */
.follow a { display: inline-flex; align-items: center; gap: 6px; }

/* Entrance animations */
.fold { animation: foldIn 0.5s ease both; }
@keyframes foldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.blur-in { animation: blurIn 0.5s ease-out both; }
@keyframes blurIn { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }

.greeting {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5);
  font-size: var(--fs-cap); font-weight: 425; line-height: var(--lh-cap); color: var(--faint);
}
.greeting .dot { width: 1.5px; height: 1.5px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
.greeting .time { font-variant-numeric: tabular-nums; }
.side-nav .greeting { margin: 0; white-space: nowrap; } /* desktop: top left, where the logo used to be */
.meta-greeting { display: none; margin: 0; white-space: nowrap; } /* smaller screens: top right, next to the theme switch */
@media (max-width: 1200px) {
  .meta-right { flex-direction: row; align-items: center; gap: var(--s-3); }
  .meta-greeting { display: flex; }
}
@media (max-width: 480px) { .meta-greeting .label, .meta-greeting .dot { display: none; } } /* phones: icon and time only */

.title {
  margin: 0 0 var(--s-5); cursor: default;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--ink);
}
.body-text { margin: 0; font-size: var(--fs-body); font-weight: 425; line-height: var(--lh-body); letter-spacing: var(--tr-body); color: var(--text); }
.body-text + .body-text { margin-top: var(--s-4); }
.body-text strong { color: var(--ink); font-weight: 480; }

/* Buttons: pill shape. The primary one has soft drifting colour inside */
.button-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-7); flex-wrap: wrap; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-5);
  border-radius: 50px; font-size: var(--fs-sub); font-weight: 500; line-height: var(--lh-sub); letter-spacing: var(--tr-sub); white-space: nowrap;
}
.btn-primary {
  --beam-fill: #1d1d1f;
  position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--beam-fill);
  border-radius: 8px; /* same corner radius as wireframe.co's main button */
  box-shadow: rgba(0,0,0,.24) 0 1px 1px, inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .2s var(--spring);
}
/* Soft blobs in the title-sweep colours drift inside the button (like the libraries.dev "Tune in Studio" button).
   The mask keeps the middle faint so the label stays crisp. */
.btn-beam::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(36, 131, 255, .9), transparent),   /* #2483ff */
    radial-gradient(closest-side, rgba(255, 102, 244, .85), transparent), /* #ff66f4 */
    radial-gradient(closest-side, rgba(254, 123, 2, .8), transparent),    /* #fe7b02 */
    radial-gradient(closest-side, rgba(130, 188, 255, .85), transparent), /* #82bcff */
    radial-gradient(closest-side, rgba(255, 48, 41, .7), transparent);    /* #ff3029 */
  background-size: 60% 150%, 55% 140%, 55% 140%, 50% 130%, 45% 120%;
  background-repeat: no-repeat;
  background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%, 50% 50%;
  filter: blur(6px) saturate(1.15);
  opacity: .5; transition: opacity .3s;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.35) 35%, #000 100%);
  mask-image: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.35) 35%, #000 100%);
  animation: beamDrift 7s ease-in-out infinite;
}
.btn-beam:hover::before { opacity: .75; }
.btn-primary:active, .btn-secondary:active { transform: scale(.97); }
@keyframes beamDrift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%, 50% 50%; }
  25% { background-position: 100% 100%, 0% 0%, 50% 100%, 100% 0%, 0% 50%; }
  50% { background-position: 100% 0%, 0% 100%, 0% 50%, 50% 0%, 100% 50%; }
  75% { background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%, 50% 0%; }
}
/* Secondary: plain text pill, no border; a light fill on hover */
.btn-secondary { color: var(--ink); background: transparent; padding: 0 var(--s-4); border-radius: 8px; /* matches the primary button */ transition: background .25s ease-out, transform .2s var(--spring); }
.btn-secondary:hover { background: rgba(0,0,0,.045); }
@media (prefers-reduced-motion: reduce) { .btn-beam::before { animation: none; } }

/* Section divider: two 1px lines touching (darker on top, lighter below) for an engraved look */
.divider { --divider-top: #e7e7e5; --divider-bottom: #ffffff; width: 100%; height: 2px; margin-top: var(--s-7); background: linear-gradient(var(--divider-top) 0 1px, var(--divider-bottom) 1px 2px); }

/* Career */
.section { margin-top: var(--s-7); }
.section-heading { margin: 0 0 var(--s-5); font-size: var(--fs-foot); font-weight: 425; line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--muted); } /* Footnote */
.career { display: flex; flex-direction: column; gap: var(--s-5); }
.career-row { display: flex; justify-content: space-between; align-items: flex-end; }
.career-left { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.logo-box {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(115,115,115,.2); border-radius: 8px;
  font-size: 15px; font-weight: 600; color: #fff;
}
.logo-box:has(img, svg) { overflow: hidden; border: 0; outline: 1px solid rgba(0,0,0,.05); outline-offset: -1px; background: #fbfbfa; } /* quiet tile, close to the page colour */
.logo-box img { width: 100%; height: 100%; object-fit: cover; }
.logo-box img.logo-sm { padding: var(--s-1); } /* slightly smaller mark inside the same tile */
/* Career logos in brand colours, tuned to stay visible on light and dark tiles */
.logo-box .lg { width: 100%; height: 100%; padding: var(--s-1); }
.lg-maltem .lg-a { fill: #e5483d; }
.lg-gear9 .lg-a { fill: #111112; }
.lg-wanmei .lg-a { fill: #24505f; }
.lg-shems .lg-a { fill: #d9a21b; } /* the yellow, a touch deeper so it reads on the light tile */
.lg-shems .lg-b { fill: #757576; }
.logo-box i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.company { font-size: var(--fs-sub); font-weight: 500; line-height: var(--lh-sub); letter-spacing: var(--tr-sub); color: var(--ink); } /* Subheadline */
.role, .date { font-size: var(--fs-foot); line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--muted); } /* Footnote */
.date { white-space: nowrap; }
.career-info { display: flex; flex-direction: column; }

/* Clients */
.clients { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--s-5) var(--s-6); } /* columns fit their longest name */
.client { font-size: var(--fs-sub); font-weight: 500; line-height: var(--lh-sub); letter-spacing: var(--tr-sub); color: var(--ink); transition: color 0.15s; } /* Subheadline */
a.client:hover { color: #9d9e9e; }
/* "Your project": grey, with the title colour sweep passing over it every few seconds */
.nda-note { margin: var(--s-6) 0 0; font-size: var(--fs-foot); line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--muted); }
.client.muted { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); justify-self: start; }
.client.muted:hover { color: var(--ink); }
.client.muted .sweep {
  --tail: currentColor; background-position: 0 0; animation: clientSweep 8s ease-in-out 2s infinite;
  /* softer band: the title colours mixed back toward the grey text */
  background-image: linear-gradient(90deg, currentColor 0, currentColor 33.33%,
    color-mix(in srgb, #82bcff 45%, currentColor) 40%, color-mix(in srgb, #2483ff 45%, currentColor) 45%,
    color-mix(in srgb, #ff66f4 45%, currentColor) 50%, color-mix(in srgb, #ff3029 45%, currentColor) 55%,
    color-mix(in srgb, #fe7b02 45%, currentColor) 60%, currentColor 66.67%, currentColor);
}
@keyframes clientSweep { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0 0; } }
.caret { display: inline-flex; animation: caretBounce 1.2s ease-in-out infinite; }
@keyframes caretBounce { 0%,100% { transform: none; } 50% { transform: translateX(3px); } }

/* ---------- Small screens ---------- */

@media (max-width: 1200px) {
  .side-nav, .nav-contact, .gl-nav, .gl-end { display: none; }
  /* Less empty space above the logo on smaller screens */
  .content { padding-top: 40px; }
  /* Theme switch sits top right, on the same line as the logo */
  .meta-right { position: absolute; top: 37px; right: calc(50% - 228px); z-index: 10; } /* centred on the 22px logo line */
}
@media (max-width: 768px) {
  .strip { width: 8px; }
  .gl-left, .gl-right { display: none; }
  .content { max-width: 100%; padding: 32px 20px 64px; }
  .meta-right { top: 29px; right: 20px; }
  .title { font-size: var(--fs-large); line-height: var(--lh-large); letter-spacing: var(--tr-large); }
  .clients { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Dark mode (the "Mode" switch) ---------- */
.dark {
  color-scheme: dark;
  --bg: #0c0c0d;
  --surface: #121213;
  --ink: #ededed;
  --text: #a3a3a3;
  --muted: #8a8a8a;
  --line: #262627;
  --shadow-card: rgba(255, 255, 255, 0.08) 0 0 0 0.5px, rgba(0, 0, 0, 0.4) 0 4px 8px -3px;
}
.dark body { color: #d4d4d4; }
.dark .strip { background: rgba(255, 255, 255, 0.04); border-right-color: rgba(255, 255, 255, 0.18); }
.dark .gridline { border-right-color: rgba(255, 255, 255, 0.07); }
.dark .side-nav:has(.nav-link:hover) .nav-link:not(:hover) { color: #666; }
.dark .nav-link.soon { color: rgba(255, 255, 255, 0.3); }
.dark .soon-badge { color: #2cc6db; }
.dark .underline { background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)); }
.dark .copied { background: rgba(255, 255, 255, 0.12); }
.dark .nav-divider { background: rgba(255, 255, 255, 0.12); }
.dark .greeting .dot { background: rgba(255, 255, 255, 0.35); }
/* Primary button flips to light on dark */
.dark .btn-primary { --beam-fill: #262628; color: #f5f5f5; }
.dark .ts-thumb { background: #121213; box-shadow: rgba(0,0,0,.3) 0 1px 2px, inset 0 0 0 .5px rgba(255,255,255,.18); }
.dark .divider { --divider-top: #0a0a0b; --divider-bottom: var(--line); }
.dark .btn-secondary:hover { background: rgba(255,255,255,.06); }
.dark .logo-box { background: #161617; border-color: rgba(255, 255, 255, 0.06); }
.dark .logo-box:has(img, svg) { outline-color: rgba(255,255,255,.06); background: #161617; }
.dark .logo-box img[src$=".svg"] { filter: brightness(1.7); } /* lift the grey logos on dark tiles */
.dark a.client:hover { color: #6b6b6b; }
.dark .portrait { box-shadow: var(--shadow-card), rgba(0,0,0,.5) 0 10px 24px -8px; }
/* Smooth fade only while switching, so other animations keep their own timing */
.theming, .theming *, .theming *::before, .theming *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Title colour sweep (rainbow band passes over the words) ----------
   First run reveals the text from transparent; later runs pass the band over
   solid text (the tail switches from transparent to the text colour). */
.sweep {
  --tail: transparent;
  background-image: linear-gradient(90deg,
    currentColor 0, currentColor 33.33%,
    #82bcff 40%, #2483ff 45%, #ff66f4 50%, #ff3029 55%, #fe7b02 60%,
    var(--tail) 66.67%, var(--tail));
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .1em; margin-right: -.1em; /* keep the last letter's edge inside the gradient */
}
.sweep-wait .sweep { background-position: 100% 0; }
.sweep-run .sweep { animation: titleSweep 1.2s ease var(--d, 0s) both; }
.sweep-loop .sweep { --tail: currentColor; }
.sweep-loop.sweep-run .sweep { animation-name: titleSweepFlat; }
@keyframes titleSweep {
  from { filter: blur(1px); background-position: 100% 0; }
  to   { filter: none; background-position: 0 0; }
}
@keyframes titleSweepFlat {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .sweep { background: none; -webkit-text-fill-color: currentColor; animation: none !important; }
}


/* ==========================================================
   Landing page sections (About, Expertise, How I work, Contact)
   ========================================================== */
#about, #how-i-work, #career, #brands, #contact { scroll-margin-top: 80px; }
.about .section-heading { margin-bottom: 24px; }
.contact .title { font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--tr-title1); margin-bottom: var(--s-4); }

/* Reveal on scroll: blocks below the hero fade up when they enter the view */
.rv { opacity: 0; translate: 0 24px; filter: blur(6px); transition: opacity .8s var(--ease-out), translate .9s var(--ease-out), filter .8s var(--ease-out); }
.rv.in { opacity: 1; translate: 0 0; filter: none; }
/* Inside a section, its pieces come in one after another (order set in script.js) */
.rv .stg { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); transition-delay: calc(.12s + var(--i, 0) * 70ms); }
.rv.in .stg { opacity: 1; translate: 0 0; }
/* Projects come in one at a time, each as it scrolls into view */
.rv-item { opacity: 0; translate: 0 24px; filter: blur(6px); transition: opacity .8s var(--ease-out), translate .9s var(--ease-out), filter .8s var(--ease-out); }
.rv-item.in { opacity: 1; translate: 0 0; filter: none; }
.work .work-item.in { transition: opacity .5s var(--ease-out), translate .9s var(--ease-out), filter .8s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rv, .rv .stg, .rv-item { opacity: 1; translate: none; filter: none; } .work-bar { display: none; } }

/* How I work: four large words; the active one gets the title colour sweep
   and opens its description underneath, then closes as the next one opens */
/* Selected work: a typographic list. Title, client, what I did, and one result */
.work { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
/* Same family as How I work: a hairline on the left; its gradient runs down once as each project appears */
.work { gap: var(--s-8); }
.work-item { position: relative; padding: 2px 0 2px var(--s-5); }
.work-name .sweep { --tail: currentColor; }
.work-line { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.work-bar { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; translate: -50% 0; border-radius: 2px;
  background: linear-gradient(180deg, #82bcff, #2483ff 30%, #ff66f4 60%, #ff3029 85%, #fe7b02);
  clip-path: inset(0 0 100% 0); opacity: 0; }
.work-item.in .work-bar { animation: workLine 2.4s var(--ease-out) .3s both; }
@keyframes workLine { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 55% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0); opacity: 0; } }

.work-shot { margin: 0 0 var(--s-4); aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #f3f3f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.work-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Logo covers, in the same pastel style as the MyCDM screenshot: soft rose, lavender and periwinkle blur, logo on a framed white tile */
.work-cover {
  display: grid; place-items: center;
  background:
    radial-gradient(60% 80% at 0% 45%, #ebbcc8 0%, transparent 72%),
    radial-gradient(55% 60% at 45% 0%, #cdc6f0 0%, transparent 72%),
    radial-gradient(60% 70% at 100% 100%, #bfc4f2 0%, transparent 72%),
    radial-gradient(50% 60% at 15% 100%, #e6d3ee 0%, transparent 70%),
    #f4eef4;
}
.dark .work-shot.work-cover { background:
    radial-gradient(60% 80% at 0% 45%, #ebbcc8 0%, transparent 72%),
    radial-gradient(55% 60% at 45% 0%, #cdc6f0 0%, transparent 72%),
    radial-gradient(60% 70% at 100% 100%, #bfc4f2 0%, transparent 72%),
    radial-gradient(50% 60% at 15% 100%, #e6d3ee 0%, transparent 70%),
    #f4eef4; } /* stays light, like the MyCDM image */
.cover-tile {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px;
  background: #fff; border: 6px solid rgba(255, 255, 255, .55); background-clip: padding-box;
  box-shadow: 0 12px 32px rgba(80, 70, 140, .12), 0 2px 6px rgba(80, 70, 140, .08);
}
.work-cover .cover-tile img { width: 56px; height: 56px; object-fit: contain; }
@media (max-width: 480px) { .cover-tile { width: 84px; height: 84px; border-radius: 22px; } .work-cover .cover-tile img { width: 42px; height: 42px; } }
/* MyCDM Entreprise cover: the dashboard rebuilt from its Figma layers, played like a short showreel.
   Intro (once): window rises, header and sidebar slide in, then the widgets assemble.
   Loop (13s): a camera tours the side menu, account cards, quick actions and the bank card, then pulls back.
   Numbers count up and the credit bar and chart draw in during the intro. */
.reel { position: relative; isolation: isolate; }
.reel .reel-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; background: rgba(255, 0, 242, .1); pointer-events: none; }
.reel-cam { position: absolute; left: 0; right: 0; top: 50%; margin-top: -28.125%; aspect-ratio: 16 / 9; z-index: 1; transform-origin: 50% 50%; will-change: transform; } /* 16:9 scene centred in the taller cover */
.reel-win {
  position: absolute; left: 15%; top: 5.75%; width: 70%; aspect-ratio: 1007 / 716; overflow: hidden;
  background: #fff; border-radius: 10px; outline: 5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 30px 60px rgba(60, 50, 120, .18), 0 6px 16px rgba(60, 50, 120, .1);
}
.reel-win .rl { position: absolute; display: block; max-width: none; height: auto; }
/* Live numbers over the flat layers (Poppins SemiBold, like the dashboard); sizes scale with the window */
.reel-win { container-type: inline-size; --u: calc(100cqw / 1007); }
.reel-win .rl-num { position: absolute; z-index: 1; display: block; white-space: nowrap; font-family: Poppins, var(--font-display), sans-serif; font-weight: 600; font-size: calc(11.186 * var(--u)); font-variant-numeric: tabular-nums; }
.reel-win .rl-num.g { color: #18bb0c; letter-spacing: calc(.5243 * var(--u)); line-height: calc(17 * var(--u)); background: #fff; }
.reel-win .rl-num.c { background: #f6fcf5; }
.reel-win .rl-num.d { color: #4e4b66; line-height: calc(13 * var(--u)); background: #fcfdff; }
.reel-win .rl-num.r { text-align: right; background: #fbfdfe; }
/* Wipes that draw the credit bar and the chart from left to right */
.reel-win .rl-wipe { position: absolute; z-index: 1; transform-origin: 100% 50%; display: none; }
.js .reel-win .rl-wipe { display: block; }
.reel-win .rl-wipe-bar { background: #fdfeff; }
.reel-win .rl-wipe-chart { background: linear-gradient(#fafcfe, #eef3f8 55%, #f5f9fb); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%); mask-image: linear-gradient(90deg, transparent, #000 8%); }
.reel.play .rl-wipe-bar { animation: rlWipe 1.1s cubic-bezier(.45, 0, .2, 1) 1.5s forwards; }
.reel.play .rl-wipe-chart { animation: rlWipe 1.6s cubic-bezier(.45, 0, .2, 1) 1.7s forwards; }
@keyframes rlWipe { to { transform: scaleX(0); } }
.reel-win .rl-header { z-index: 3; }
.reel-win .rl-sidebar { z-index: 2; }

/* Intro */
.reel-win, .reel-win .rl { transition: opacity .7s var(--ease-out), transform .9s cubic-bezier(.22, 1, .36, 1); }
.js .reel:not(.play) .reel-win { opacity: 0; transform: translateY(6%) scale(.96); }
.js .reel:not(.play) .rl { opacity: 0; transform: translateY(14px); }
.js .reel:not(.play) .rl-header { transform: translateY(-100%); }
.js .reel:not(.play) .rl-sidebar { transform: translateX(-100%); }
.reel .rl-header { transition-delay: .35s; }
.reel .rl-sidebar { transition-delay: .5s; }
.reel .rl-title { transition-delay: .7s; }
.reel .rl-accounts { transition-delay: .85s; }
.reel .rl-compte { transition-delay: 1s; }
.reel .rl-quick { transition-delay: 1.1s; }
.reel .rl-graph { transition-delay: 1.2s; }
.reel .rl-cards { transition-delay: 1.3s; }

/* Camera loop (paused while the cover is off screen). t = 50% - target, so the target lands in the centre. */
.reel.play .reel-cam { animation: reelCam 13s cubic-bezier(.65, 0, .35, 1) 3.4s infinite; animation-play-state: paused; }
.reel.play.inview .reel-cam { animation-play-state: running; }
@keyframes reelCam {
  0%, 8%    { transform: none; }                                   /* overview */
  16%, 24%  { transform: scale(1.3) translate(21.03%, 9.64%); }    /* side menu */
  32%, 40%  { transform: scale(1.4) translate(-4.59%, 25.03%); }   /* account cards */
  48%, 56%  { transform: scale(1.65) translate(-19.25%, 5.81%); }  /* quick actions */
  64%, 72%  { transform: scale(1.65) translate(-19.25%, -26.14%); } /* bank card */
  84%, 100% { transform: none; }                                   /* back to overview */
}
@media (prefers-reduced-motion: reduce) {
  .js .reel .reel-win, .js .reel .rl { opacity: 1; transform: none; transition: none; }
  .reel.play .reel-cam, .reel.play .rl-wipe { animation: none; }
  .js .reel-win .rl-wipe { display: none; }
}

/* Safe Connect cover, rebuilt from the Figma frame (1600×900): blurred background, three shields, three phones.
   Reveal: shields appear one after another (inner to outer), then the main phone rises, then the side phones fan out. */
.sc-cover { position: relative; isolation: isolate; }
.sc-cover img { position: absolute; display: block; max-width: none; object-fit: fill; }
.sc-cover .sc-bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-stage { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; aspect-ratio: 16 / 9; translate: 0 -50%; } /* scene keeps its Figma proportions, centred in the taller cover */
.sc-cover::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(255, 0, 242, .1); } /* Figma's pink tint */
.sc-cover .sc-shield { z-index: 1; height: auto; }
.sc-cover .sc-s1 { left: 21.863%; top: 1.444%; width: 56.262%; aspect-ratio: 900.185 / 1083.241; }
.sc-cover .sc-s2 { left: 25.992%; top: 10.251%; width: 48.005%; aspect-ratio: 768.082 / 926.605; }
.sc-cover .sc-s3 { left: 30.063%; top: 16.556%; width: 40.456%; aspect-ratio: 647.303 / 779.405; }
/* Soft shadow on each shield, growing from the outer one to the inner one for depth */
.sc-cover .sc-s1 { filter: drop-shadow(0 4px 10px rgba(70, 60, 140, .06)); }
.sc-cover .sc-s2 { filter: drop-shadow(0 6px 14px rgba(70, 60, 140, .09)); }
.sc-cover .sc-s3 { filter: drop-shadow(0 8px 20px rgba(70, 60, 140, .12)); }
.sc-cover .sc-phone { left: 40%; top: 14%; width: 20%; height: auto; filter: drop-shadow(0 18px 28px rgba(60, 50, 120, .18)); }
.sc-cover .sc-main { z-index: 3; -webkit-mask: url(images/work/safeconnect/main-mask.png) center / 100% 100% no-repeat; mask: url(images/work/safeconnect/main-mask.png) center / 100% 100% no-repeat; } /* Figma export with the new logo; the mask trims the white frame corners */
.sc-cover .sc-left, .sc-cover .sc-right { z-index: 2; }
/* Final layout, fanned like the reference: side phones tucked behind the main one, slightly tilted */
.sc-cover .sc-left  { transform: translate(-60%, 3%) rotate(-8deg) scale(.92); }
.sc-cover .sc-right { transform: translate(60%, 3%) rotate(8deg) scale(.92); }

/* Hidden start state, only when JS is on and motion is allowed */
.js .sc-cover:not(.play) .sc-shield { opacity: 0; transform: scale(.94); }
.js .sc-cover:not(.play) .sc-main { opacity: 0; transform: translateY(14%) scale(.96); }
.js .sc-cover:not(.play) .sc-left, .js .sc-cover:not(.play) .sc-right { opacity: 0; transform: translate(0, 3%) rotate(0) scale(.9); }
.sc-cover .sc-shield, .sc-cover .sc-phone { transition: opacity .7s var(--ease-out), transform .9s cubic-bezier(.22, 1, .36, 1); }
.sc-cover .sc-s3 { transition-delay: 0s; }
.sc-cover .sc-s2 { transition-delay: .2s; }
.sc-cover .sc-s1 { transition-delay: .4s; }
.sc-cover .sc-main { transition-delay: .75s; }
.sc-cover .sc-left { transition-delay: 1.2s; }
.sc-cover .sc-right { transition-delay: 1.4s; }
/* After the reveal, the shields keep breathing: a soft pulse that ripples from the inner shield outwards */
.sc-cover.play .sc-shield { transform-origin: 50% 45%; animation: shieldPulse 6s ease-in-out infinite; }
.sc-cover.play .sc-s3 { animation-delay: 1.6s; }
.sc-cover.play .sc-s2 { animation-delay: 2.1s; }
.sc-cover.play .sc-s1 { animation-delay: 2.6s; }
@keyframes shieldPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.035); } }
/* After the reveal, the phones float gently, each slightly out of step (uses `translate`, so it never fights their layout transform) */
.sc-cover.play .sc-phone { animation: phoneFloat 5s ease-in-out infinite; }
.sc-cover.play .sc-main  { animation-delay: 2.2s; }
.sc-cover.play .sc-left  { animation-delay: 2.9s; }
.sc-cover.play .sc-right { animation-delay: 3.6s; }
@keyframes phoneFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6%; } }
@media (prefers-reduced-motion: reduce) {
  .js .sc-cover .sc-shield, .js .sc-cover .sc-phone { transition: none; }
  .js .sc-cover:not(.play) .sc-shield, .js .sc-cover:not(.play) .sc-phone { opacity: 1; }
  .js .sc-cover:not(.play) .sc-shield { transform: none; }
  .js .sc-cover:not(.play) .sc-main { transform: none; }
  .js .sc-cover:not(.play) .sc-left  { transform: translate(-60%, 3%) rotate(-8deg) scale(.92); }
  .js .sc-cover:not(.play) .sc-right { transform: translate(60%, 3%) rotate(8deg) scale(.92); }
  .sc-cover.play .sc-shield, .sc-cover.play .sc-phone { animation: none; }
}
.work-head { display: flex; align-items: center; gap: var(--s-4); }
.work-head .date { margin-left: auto; align-self: flex-start; padding-top: 3px; }
.work-info { display: flex; flex-direction: column; min-width: 0; }
/* Logo tiles match Career's 48px tile; the client logos keep their own colours */
.work-mark { display: grid; place-items: center; width: 100%; height: 100%; }
.work-mark img { width: 32px; height: 28px; object-fit: contain; padding: 0; } /* same box for every logo */
/* Dark mode: every logo goes grey, so nothing competes with the text */
.dark .lg .lg-a, .dark .lg .lg-b { fill: #a3a3a5; }
.dark .logo-box.work-logo img[src$=".svg"] { filter: none; } /* brand colours in both themes */
.work-mark .boa-mark { width: 32px; height: 28px; }
.boa-ring { fill: #09407A; }
.dark .boa-ring { fill: #4d86c6; } /* lighter navy so the ring reads on the dark tile */
.work-name { margin: 0; font-family: var(--font-display); font-size: var(--fs-title2); font-weight: 600; line-height: var(--lh-title2); letter-spacing: var(--tr-title2); color: var(--ink); transition: color .3s; } /* Title 2, like How I work */
.work-client { margin: 2px 0 0; display: block; font-size: var(--fs-foot); line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--muted); }
.work-desc { margin: var(--s-3) 0 0; max-width: 34em; font-size: var(--fs-sub); line-height: var(--lh-sub-para); letter-spacing: var(--tr-sub); color: var(--text); text-wrap: pretty; }
.work-result { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: var(--fs-foot); font-weight: 450; line-height: var(--lh-foot); letter-spacing: var(--tr-foot); color: var(--text); } /* quiet footnote-size proof lines */
.work-result::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; translate: 0 -2px; background: linear-gradient(135deg, #2483ff, #ff66f4 55%, #fe7b02); }
.work-result + .work-result { margin-top: var(--s-1); } /* stacked results sit closer together */
.work-result.is-live { color: var(--text); } /* a status, not a result: quieter than the proof lines */
.work-result.is-live::before { background: var(--accent); animation: livePulse 4s ease-out infinite; } /* site accent blue, soft ring = still ongoing */
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(96, 181, 255, .5); } 45%, 100% { box-shadow: 0 0 0 4px rgba(96, 181, 255, 0); } } /* same 4s rhythm as the text */
/* Text shimmer, same as the hover on wireframe.co's main button: a faded band sweeps through the label.
   Here it loops slowly with a pause, in step with the dot's pulse, to say the work is ongoing. */
.live-text {
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 30%, color-mix(in srgb, var(--text) 35%, transparent) 50%, var(--text) 70%, var(--text) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: liveShimmer 4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes liveShimmer { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } } /* 1.6s sweep, then a 2.4s pause */
@media (prefers-reduced-motion: reduce) { .work-result.is-live::before, .live-text { animation: none; } }
.dark .work-shot { background: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* How I work: large words on a vertical hairline. The open step's segment
   fills top to bottom in the title colours, then the next step opens. */
.hw { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.hw-item { position: relative; padding: 6px 0 6px var(--s-5); }
.hw-word {
  display: inline-block;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title2); line-height: var(--lh-title2); letter-spacing: var(--tr-title2); /* Title 2 */
  padding: var(--s-2) 0; margin: calc(var(--s-2) * -1) 0; /* 44pt tall tap area, same look */
  color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .3s;
}
.hw-word:hover { color: color-mix(in srgb, var(--ink) 50%, transparent); }
.hw-item.on .hw-word { color: var(--ink); }
.hw-word .sweep { --tail: currentColor; }
.hw-item.on .hw-word .sweep { animation: titleSweepFlat 1.2s ease both; }
.hw-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.hw-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.hw-more > div { overflow: hidden; }
.hw-desc { margin: 0; padding: var(--s-2) 0 var(--s-2); max-width: 400px; font-size: var(--fs-sub); line-height: var(--lh-sub-para); letter-spacing: var(--tr-sub); color: var(--text); opacity: 0; translate: 0 -4px; transition: opacity .3s, translate .4s var(--ease-out); }
.hw-item.on .hw-more { grid-template-rows: 1fr; }
.hw-item.on .hw-desc { opacity: 1; translate: 0 0; transition-delay: .12s; }
.hw-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hw-bar {
  position: absolute; top: 0; left: 50%; width: 2px; height: 100%; translate: -50% 0; border-radius: 2px;
  background: linear-gradient(180deg, #82bcff, #2483ff 30%, #ff66f4 60%, #ff3029 85%, #fe7b02);
  clip-path: inset(0 0 100% 0); opacity: 0; /* revealed top to bottom, so the colours stay put */
}
.hw-item.on .hw-bar { opacity: 1; animation: hwFill var(--hw-time, 5s) linear both; }
.hw.paused .hw-item.on .hw-bar { animation-play-state: paused; }
.hw.manual .hw-item.on .hw-bar { animation: none; clip-path: inset(0); }
@keyframes hwFill { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .hw-more { grid-template-rows: 1fr; } .hw-desc { opacity: 1; translate: none; } .hw-bar { display: none; } }

/* Portrait between the "About" label and the title */
.portrait { width: 180px; height: 180px; margin: 0 0 var(--s-5); border-radius: 4px; overflow: hidden; background: #e08a2e;
  box-shadow: var(--shadow-card), rgba(0,0,0,.08) 0 10px 24px -8px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.portrait:hover img { scale: 1.05; }

/* Career: rows open to show a short summary */
.job-head { width: 100%; }
.job-head .career-left { display: flex; }
.job-head .career-info { display: flex; flex-direction: column; }
.company-sub { color: var(--muted); font-weight: 450; }
.job-right { display: flex; align-items: center; gap: var(--s-3); }

/* Certifications */
.certs { --cert-line: color-mix(in srgb, var(--line) 50%, transparent); /* row lines at half strength */ margin: 0; padding: 0; list-style: none; }
.certs li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--cert-line); }
.certs li:last-child { border-bottom: 0; } /* lines only between rows */
.certs .date { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.cert-name { font-size: var(--fs-sub); font-weight: 500; line-height: var(--lh-sub); letter-spacing: var(--tr-sub); color: var(--ink); } /* Subheadline */
.cert-tag { margin-left: auto; flex-shrink: 0; font-size: var(--fs-cap); line-height: var(--lh-cap); font-weight: 425; color: var(--muted); } /* Caption 1 */
#certifications { scroll-margin-top: 80px; }

/* Career: intro line, role tags, closing call to action */
.career-lead { margin-bottom: 28px; }
.career-cta { display: inline-block; margin-top: 28px; font-size: 14px; font-weight: 450; line-height: 21px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--muted); transition: border-color .2s; }
.career-cta:hover { border-color: var(--ink); }
.career-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Logos hidden in Career and Selected work (remove this rule to bring them back) */
.logo-box { display: none; } /* Logos hidden in Career and Selected work (the covers carry the brands) */

/* Selected work and How I work start on the dotted guide, like every other section;
   the gradient lines are switched off */
.hw-item, .work-item { padding-left: 0; }
.hw-line, .work-line { display: none; }