:root {
  /* Background and text gradients: mycolor.space "Matching Gradient" for #FFFFFF (light) and #000000 (dark) */
  --page: linear-gradient(170deg, #ffffff 0%, #dadde2 100%);
  --bg: #eceef1;
  --text: #000000;
  --muted: #4a5455;
  --faint: #555f60;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.75);
  --glass-menu: rgba(255, 255, 255, 0.32);
  --glass-nav: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(67, 101, 90, 0.1);
  --shadow: 0 1px 1px rgba(67, 101, 90, 0.05), 0 12px 32px -12px rgba(67, 101, 90, 0.25);
  --blob-1: #b1bdc5;
  --blob-2: #889fa5;
  --blob-3: #a3b4ba;
  --accent: #43655a;
  --glow: rgba(98, 130, 129, 0.4);
  --grad-a: #628281;
  --grad-b: #52736d;
  --grad-c: #43655a;
  --solid: #000000;
  --solid-text: #ffffff;
  --field: rgba(255, 255, 255, 0.7);
  --error: #c0262d;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: linear-gradient(170deg, #000000 0%, #23282b 100%);
    --bg: #121517;
    --text: #eef1f2;
    --muted: #d3d9dc;
    --faint: #b0b9bd;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.08);
    --glass-menu: rgba(18, 21, 23, 0.4);
  --glass-nav: rgba(18, 21, 23, 0.72);
    --glass-nav: rgba(18, 21, 23, 0.72);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-edge: rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    --blob-1: #4f5a63;
    --blob-2: #677381;
    --blob-3: #82a0aa;
    --accent: #a3cfcd;
    --glow: rgba(130, 160, 170, 0.35);
    --grad-a: #82a0aa;
    --grad-b: #a3cfcd;
    --grad-c: #a3cfcd;
    --solid: #eef1f2;
    --solid-text: #000000;
    --field: rgba(255, 255, 255, 0.06);
    --error: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: linear-gradient(170deg, #000000 0%, #23282b 100%);
  --bg: #121517;
  --text: #eef1f2;
  --muted: #d3d9dc;
  --faint: #b0b9bd;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-menu: rgba(18, 21, 23, 0.4);
  --glass-nav: rgba(18, 21, 23, 0.72);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --blob-1: #4f5a63;
  --blob-2: #677381;
  --blob-3: #82a0aa;
  --accent: #a3cfcd;
  --glow: rgba(130, 160, 170, 0.35);
  --grad-a: #82a0aa;
  --grad-b: #a3cfcd;
  --grad-c: #a3cfcd;
  --solid: #eef1f2;
  --solid-text: #000000;
  --field: rgba(255, 255, 255, 0.06);
  --error: #ff8a80;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg) var(--page) fixed; color: var(--text);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--solid); color: var(--solid-text); padding: 8px 12px; border-radius: 8px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* Background */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; }
.b1 { width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; background: var(--blob-1); top: -12vw; left: -8vw; animation: drift1 24s ease-in-out infinite alternate; }
.b2 { width: 38vw; height: 38vw; min-width: 320px; min-height: 320px; background: var(--blob-2); top: 18vh; right: -10vw; animation: drift2 28s ease-in-out infinite alternate; }
.b3 { width: 40vw; height: 40vw; min-width: 340px; min-height: 340px; background: var(--blob-3); bottom: -18vw; left: 30vw; animation: drift3 26s ease-in-out infinite alternate; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blob { opacity: .38; } }
:root[data-theme="dark"] .blob { opacity: .38; }
@keyframes drift1 { 50% { transform: translate(18vw, 14vh) scale(1.2); } 100% { transform: translate(6vw, 30vh) scale(.9); } }
@keyframes drift2 { 50% { transform: translate(-16vw, 22vh) scale(.85); } 100% { transform: translate(-4vw, -8vh) scale(1.15); } }
@keyframes drift3 { 50% { transform: translate(-20vw, -16vh) scale(1.15); } 100% { transform: translate(10vw, -6vh) scale(.95); } }

/* Glass */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; color: var(--text);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--solid); color: var(--solid-text); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

/* Nav */
.nav-wrap { position: sticky; top: 14px; z-index: 50; padding: 0 12px; }
.nav {
  max-width: 900px; margin: 14px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 10px; border-radius: 999px; background: var(--glass-menu);
  backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
}
.nav-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav-name img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.nav-links { display: none; gap: 2px; }
.nav-links a { padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nav-links a.active { color: var(--solid-text); background: var(--solid); }
.nav-cta { padding: 9px 16px; border-radius: 999px; background: var(--solid); color: var(--solid-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .2s; }
.nav-cta:hover { opacity: .85; }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Hero */
.hero { display: grid; gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 40px; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.1fr 1fr; gap: 40px; padding-top: 80px; padding-bottom: 56px; min-height: 80vh; } }
.hello { font-size: 20px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.hero h1 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.hero h1 .line { display: block; }
.rotator { display: grid !important; }
.rot {
  grid-area: 1 / 1; white-space: nowrap; opacity: 0; padding: .04em .06em .16em 0; margin-bottom: -.12em; transform: translateY(.45em); filter: blur(8px);
  background: linear-gradient(95deg, var(--ra), var(--rb));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1), filter .9s ease;
}
.rot.is-active { opacity: 1; transform: none; filter: none; }
.rot.is-leaving { opacity: 0; transform: translateY(-.45em); filter: blur(8px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.intro-photo {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from var(--spin, 0deg), var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  animation: spin 8s linear infinite;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--grad-b) 60%, transparent);
}
.intro-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); }
.intro-photo::after {
  content: ""; position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 3px solid var(--bg);
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.intro-hi { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.intro-hi strong { font-weight: 700; }
.intro-role { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--muted); }
.intro-role .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); margin: 0 4px; }
.intro-role .loc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.intro-role svg { color: var(--accent); }
@media (max-width: 420px) { .intro-role .sep { display: none; } .intro-role { gap: 2px 6px; } }

.proof { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.logos { display: flex; }
.logos img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff;
  border: 3px solid var(--bg); margin-left: -10px; box-shadow: 0 4px 10px -4px rgba(67, 101, 90, .25);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.logos img:first-child { margin-left: 0; }
.logos:hover img { transform: translateX(calc(var(--k, 0) * 4px)); }
.logos img:hover { transform: translateY(-6px) scale(1.12) !important; position: relative; z-index: 2; }
.proof p { font-size: 14.5px; color: var(--muted); }
.proof strong { color: var(--text); font-weight: 600; }

.now {
  position: absolute; left: 4%; bottom: -44px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.now #now-site { transition: opacity .3s; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.lede { margin-top: 22px; font-size: 18px; color: var(--muted); max-width: 32em; }
.lede a { color: var(--text); text-decoration-color: var(--faint); text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-art { position: relative; height: 380px; }
@media (min-width: 960px) { .hero-art { height: 480px; } }
@media (max-width: 520px) { .hero-art { height: 320px; } }

/* Three screenshots orbit between slots; positions are transforms so every move is smooth */
.frame {
  position: absolute; left: 0; top: 0; width: 64%; aspect-ratio: 16 / 10; cursor: pointer;
  transform:
    translate3d(calc(var(--px, 0) * var(--d) * -14px), calc(var(--py, 0) * var(--d) * -14px), 0)
    translate(var(--x), var(--y)) perspective(1200px) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s));
  transition: transform 1.6s cubic-bezier(.65, 0, .35, 1), z-index 0s linear .8s;
  animation: float 10s ease-in-out infinite;
}
.frame.p0 { --x: 40%; --y: 120%; --ry: -6deg; --rz: 1deg; --s: 1.08; --d: 2.6; z-index: 3; }
.frame.p1 { --x: 54%; --y: 0%; --ry: -16deg; --rz: 2deg; --s: .9; --d: 1; z-index: 2; }
.frame.p2 { --x: 0%; --y: 52%; --ry: 14deg; --rz: -3deg; --s: .86; --d: 1.8; z-index: 1; }
@keyframes float { 50% { translate: 0 -14px; } }
/* Bob offsets belong to each element, not to a slot, so moving slots never jumps the float */
.frame:nth-child(2) { animation-delay: -4s; }
.frame:nth-child(3) { animation-delay: -7s; }

.face {
  display: block; width: 100%; height: 100%; padding: 8px; border-radius: 20px;
  transition: opacity 1.2s ease, filter 1.2s ease, box-shadow 1.2s ease;
}
.face img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 13px; }
.frame:not(.p0) .face { opacity: .78; filter: saturate(.75); }
.frame.p0 .face { box-shadow: var(--shadow), 0 40px 80px -24px color-mix(in srgb, var(--grad-a) 55%, transparent); }
.frame:hover .face { opacity: 1; filter: none; }

/* The frame coming forward turns edge-on, swaps to the next site, and turns back */
.frame.flipping .face { animation: turn 1.6s cubic-bezier(.65, 0, .35, 1); }
@keyframes turn {
  0% { transform: perspective(900px) rotateY(0); }
  50% { transform: perspective(900px) rotateY(88deg); }
  50.01% { transform: perspective(900px) rotateY(-88deg); }
  100% { transform: perspective(900px) rotateY(0); }
}

/* Sections */
.section { padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 720px) { .section { padding-top: 48px; padding-bottom: 48px; } }
.head { margin-bottom: 24px; }
@media (min-width: 720px) { .head { margin-bottom: 28px; } }
.label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.head h2, .contact h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

/* Work cards */
.grid { display: grid; gap: 20px; }
@media (min-width: 680px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; border-radius: 22px; padding: 8px; display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 45%);
}
.card:hover::before { opacity: 1; }
.card:hover { box-shadow: 0 30px 60px -24px rgba(98, 130, 129, .45), inset 0 1px 0 rgba(255, 255, 255, .4); border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border)); }
@media (min-width: 1000px) {
  .card-wide { grid-column: span 2; }
  .card-wide .shot { aspect-ratio: auto; flex: 1; min-height: 200px; position: relative; }
  .card-wide .shot img { position: absolute; inset: 0; }
  .card-wide .card-body { flex: none; }
}
.shot { display: block; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--field); }
.shot > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: object-position 3s cubic-bezier(.45, 0, .2, 1), transform .6s ease; }
.card:hover .shot > img:first-child { transform: scale(1.03); }
.card:hover .shot > img:first-child { object-position: 50% 100%; }
.card-body { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: " ↗"; color: var(--faint); font-weight: 400; transition: color .2s; }
.card:hover h3 a::after { color: var(--accent); }
.card p { font-size: 14.5px; color: var(--muted); }
.card .stack { margin-top: auto; padding-top: 6px; }
.stack { font-size: 13px; color: var(--faint); font-weight: 500; }

/* Lists */
.list { border-radius: 22px; padding: 6px 24px; }
.list li { display: grid; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--glass-edge); }
.list li:last-child { border-bottom: 0; }
@media (min-width: 720px) { .list li { grid-template-columns: 1fr auto; align-items: baseline; } }
.list h3 { font-size: 16.5px; font-weight: 600; }
.list h3 a { text-decoration: none; }
.list h3 a:hover { color: var(--accent); }
.list p { font-size: 15px; color: var(--muted); margin-top: 2px; max-width: 46em; }
.list p a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--faint); }
.list .job { grid-template-columns: 1fr; }
@media (min-width: 720px) { .list .job { grid-template-columns: 140px 1fr; } }
.when { font-size: 14px; color: var(--faint); font-weight: 500; padding-top: 1px; }
.job h3 span { font-weight: 400; color: var(--muted); }
.job h3 span::before { content: "· "; }
.after { margin-top: 20px; }

/* Skills */
.skills { display: grid; gap: 20px; }
@media (min-width: 720px) { .skills { grid-template-columns: repeat(2, 1fr); } }
.skill { border-radius: 22px; padding: 24px 26px; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.skill:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(98, 130, 129, .4); }
.skill h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.skill p { color: var(--muted); font-size: 15px; }

/* Process */
.process { display: grid; gap: 20px; }
@media (min-width: 820px) { .process { grid-template-columns: repeat(3, 1fr); } }
.step { border-radius: 22px; padding: 28px; }
.num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--solid); color: var(--solid-text); font-size: 14px; font-weight: 700; margin-bottom: 20px;
}
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* Contact */
.contact { border-radius: 28px; padding: clamp(24px, 5vw, 56px); display: grid; gap: 40px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 64px; } }
.socials { display: flex; gap: 20px; margin-top: 24px; font-weight: 600; font-size: 15px; }
.socials a { text-decoration: none; }
.socials a:hover { color: var(--accent); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; }
.form label span { font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--field); color: var(--text); font: 16px/1.5 var(--sans); resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.form .invalid { border-color: var(--error); }
.form .btn { justify-self: start; }
.form-status { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.form-status.err { color: var(--error); }
.form-status a { color: inherit; }

.foot { padding-top: 24px; padding-bottom: 40px; font-size: 14px; color: var(--faint); display: grid; gap: 6px; }
.foot address { font-style: normal; color: var(--muted); }
.foot a { color: inherit; text-underline-offset: 3px; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.qa { border-radius: 18px; padding: 0 22px; transition: box-shadow .3s; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 16.5px; font-weight: 600; }
.qa summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .3s; flex: none; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--muted); font-size: 15px; padding-bottom: 20px; max-width: 52em; }
.qa:hover { box-shadow: 0 20px 40px -24px rgba(98, 130, 129, .35); }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease; }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .card.reveal.in { transition: opacity .9s ease, transform .5s cubic-bezier(.2, .7, .2, 1), filter .9s ease, box-shadow .4s ease, border-color .4s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob, .frame, .w, .btn::after, .live, .intro-photo { animation: none !important; }
  .rot { transition: none; }
  .js .hero h1 .w { opacity: 1; transform: none; filter: none; }
  .card { transform: none !important; }
  .frame.flipping .face { animation: none; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .shot img { transition: none; }
}

/* ---------- Motion ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blob-1), var(--accent), var(--blob-2)); }

.nav { transition: max-width .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, background-color .4s, padding .4s; }
.nav-wrap.scrolled .nav {
  max-width: 860px; background: var(--glass-nav); box-shadow: var(--shadow), 0 20px 40px -20px rgba(67, 101, 90, .3);
}
.nav-name img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.nav-name:hover img { transform: rotate(-8deg) scale(1.1); }
.nav-cta { position: relative; overflow: hidden; }

/* Headline words rise in */
.js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(8px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

/* Buttons: lift, glow and a light sweep */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
}
.btn:hover::after { transform: translateX(120%); transition: transform .8s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(98, 130, 129, .5); }
.btn:active { transform: translateY(0) scale(.97); }

/* Glass panels */
.list li { transition: background-color .3s, padding .3s, margin .3s, border-radius .3s; }
.list li:hover { background: var(--glass-strong); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 14px; }
.list li:hover h3 a { color: var(--accent); }
.list h3 a { transition: color .2s; }

.step { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.step:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -24px rgba(98, 130, 129, .4); }
.num { transition: transform .5s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.step:hover .num { transform: rotate(-12deg) scale(1.15); background: var(--accent); }

.socials a { position: relative; }
.socials a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.socials a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Get in touch menu */
.reach { position: relative; }
.reach .chev { transition: transform .3s; }
#reach-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.reach-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; min-width: 260px;
  padding: 8px; border-radius: 18px; display: grid; gap: 4px; background: var(--glass-strong);
  transform-origin: top left; animation: pop .25s cubic-bezier(.2, .7, .2, 1);
}
.reach-menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.reach-menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; transition: background-color .2s;
}
.reach-menu a:hover, .reach-menu a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.reach-menu a:hover strong, .reach-menu a:focus-visible strong { color: var(--accent); }
.reach-menu .ic { transition: background-color .2s, color .2s, transform .25s ease; }
.reach-menu a:hover .ic, .reach-menu a:focus-visible .ic { background: var(--accent); color: var(--solid-text); transform: scale(1.06); }
.reach-menu strong { display: block; font-size: 15px; font-weight: 600; }
.reach-menu small { display: block; font-size: 13.5px; color: var(--muted); }
.ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--solid); color: var(--solid-text);
}

/* Contact methods */
.methods { display: grid; gap: 12px; margin-top: 24px; }
.method { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; transition: transform .3s, box-shadow .3s; }
.method:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(98, 130, 129, .4); }
.method a { flex: 1; min-width: 0; text-decoration: none; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.method a:hover { color: var(--accent); }
.method small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.copy {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--muted); transition: color .2s, background-color .2s;
}
.copy:hover { color: var(--text); }
.copy.done { color: #16a34a; }

/* Mobile menu */
.nav-end { display: flex; align-items: center; gap: 6px; }
.nav-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-content: center; gap: 5px;
  background: var(--glass); color: var(--text);
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle, .mobile-menu { display: none !important; } }
@media (max-width: 759px) { .nav-cta { display: none; } }

.mobile-menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 10px); max-width: 760px; margin: 0 auto; padding: 10px; border-radius: 24px; display: grid; gap: 2px;
  background: var(--glass-menu); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  transform-origin: top center; animation: pop .3s cubic-bezier(.2, .7, .2, 1);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a { padding: 13px 16px; border-radius: 14px; font-size: 17px; font-weight: 700; text-decoration: none; }
.mobile-menu > a:hover, .mobile-menu > a:active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mobile-contact { display: grid; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--glass-edge); }
.mobile-contact a {
  padding: 13px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; text-decoration: none; text-align: center;
  background: var(--solid); color: var(--solid-text);
}
.mobile-contact a + a { background: var(--glass); color: var(--text); }

/* Client work: swipeable carousel on phones */
.swipe-nav { display: none; }
@media (max-width: 679px) {
  .grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 6px 16px 24px; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .grid::-webkit-scrollbar { display: none; }
  .grid .card { flex: 0 0 84%; scroll-snap-align: center; }
  /* Cards off to the side never cross the viewport vertically, so show them all at once */
  .js .grid .card.reveal { opacity: 1; transform: none; filter: none; }
  .swipe-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
  .swipe-dots { display: flex; justify-content: center; gap: 6px; }
  .swipe-btn {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--text); transition: transform .25s ease, opacity .25s ease;
  }
  .swipe-btn:active { transform: scale(.92); }
  .swipe-btn:disabled { opacity: .35; cursor: default; }
  .swipe-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--faint); opacity: .45; transition: width .35s ease, opacity .35s ease, background-color .35s ease; }
  .swipe-dots span.on { width: 22px; opacity: 1; background: var(--accent); }
}

/* Download CV in the hero */
.btn-cv svg { transition: transform .3s ease; }
.btn-cv:hover svg { transform: translateY(2px); }
.mobile-contact a { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Theme switch */
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--glass); color: var(--text); transition: background-color .2s, color .2s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.theme-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.theme-btn:active { transform: rotate(-30deg) scale(.92); }
.theme-btn .i-moon { display: none; }
/* Show the icon of the theme you would switch to */
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root:not([data-theme="dark"]) .theme-btn .i-sun { display: none; }
:root:not([data-theme="dark"]) .theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme]) .theme-btn .i-moon { display: none; }
}
html.theme-switching, html.theme-switching * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }

/* Display font for headings and names; Inter for everything else */
h1, h2, h3, .nav-name, .intro-hi, .num, .method a { font-family: var(--display); }
.hero h1 { font-weight: 700; letter-spacing: -0.04em; }
.head h2, .contact h2 { font-weight: 700; letter-spacing: -0.03em; }

/* Rotating phrase colours: mycolor.space "Matching Palette" (#000000, #564147, #BDA5AB, #002120, #254D4C) */
.rot:nth-child(1) { --ra: #564147; --rb: #254d4c; }
.rot:nth-child(2) { --ra: #254d4c; --rb: #002120; }
.rot:nth-child(3) { --ra: #002120; --rb: #564147; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rot:nth-child(1) { --ra: #bda5ab; --rb: #9cc4c2; }
  :root:not([data-theme="light"]) .rot:nth-child(2) { --ra: #9cc4c2; --rb: #bda5ab; }
  :root:not([data-theme="light"]) .rot:nth-child(3) { --ra: #bda5ab; --rb: #e2d6d9; }
}
:root[data-theme="dark"] .rot:nth-child(1) { --ra: #bda5ab; --rb: #9cc4c2; }
:root[data-theme="dark"] .rot:nth-child(2) { --ra: #9cc4c2; --rb: #bda5ab; }
:root[data-theme="dark"] .rot:nth-child(3) { --ra: #bda5ab; --rb: #e2d6d9; }

/* Keep the hero copy readable while the background glows drift behind it */
.hero-copy { position: relative; isolation: isolate; }
.hero-copy::before {
  /* Stays inside the hero's width and fades to nothing at its edges, so it never shows a hard line */
  content: ""; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 85%, transparent) 35%, transparent 100%);
}
.hero .lede, .intro-role, .proof p { color: var(--hero-muted); }
:root { --hero-muted: #2f3839; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-muted: #e2e7e9; } }
:root[data-theme="dark"] { --hero-muted: #e2e7e9; }

/* Skills: tech chips with monochrome logos (Simple Icons, CC0) tinted to the theme */
.tech { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tech li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.tech li:hover { transform: translateY(-2px); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border)); }
.ti {
  width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}

/* ---------- Case study pages ---------- */
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 22px; }
.back:hover { color: var(--accent); }
.case-hero { padding-top: 56px; padding-bottom: 24px; }
.case-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.case-hero .lede { max-width: 40em; }
.case-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.case-meta li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.case-meta strong { font-weight: 700; margin-right: 6px; }
.case-hero .actions { margin-top: 26px; }

/* Desktop screenshot with a phone overlapping its corner */
.devices { position: relative; margin-top: 44px; padding-bottom: 6%; }
.devices .desk { border-radius: 22px; padding: 8px; }
.devices .desk img { width: 100%; height: auto; border-radius: 15px; display: block; }
.devices .phone {
  position: absolute; right: 3%; bottom: 0; width: 22%; min-width: 120px; border-radius: 30px; padding: 7px;
  box-shadow: var(--shadow), 0 40px 80px -30px rgba(0, 0, 0, .45);
}
.devices .phone img { width: 100%; height: auto; border-radius: 24px; display: block; }

.case-grid { display: grid; gap: 20px; }
@media (min-width: 860px) { .case-grid { grid-template-columns: 1.4fr 1fr; } }
.case-card { border-radius: 22px; padding: 26px 28px; }
.case-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.case-card p { color: var(--muted); font-size: 15.5px; }
.case-card p + p { margin-top: 12px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15.5px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

/* Lighthouse scores */
.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 520px) { .scores { grid-template-columns: repeat(2, 1fr); } }
.score { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.ring {
  --c: #16a34a; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 15%, transparent) 0);
  font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); position: relative;
}
.ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg); }
.ring span { position: relative; }
.ring.mid { --c: #d97706; }
.ring.low { --c: #dc2626; }
.score-note { margin-top: 14px; font-size: 13px; color: var(--faint); }

.more-shots { display: grid; gap: 20px; }
@media (min-width: 720px) { .more-shots { grid-template-columns: 1fr 1fr; } }
.more-shots figure { margin: 0; border-radius: 20px; padding: 8px; }
.more-shots img { width: 100%; height: auto; border-radius: 13px; display: block; }
.more-shots figcaption { padding: 12px 8px 4px; font-size: 14px; color: var(--muted); }

.next-case { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 22px; padding: 24px 28px; text-decoration: none; transition: transform .3s; }
.next-case:hover { transform: translateY(-4px); }
.next-case small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.next-case strong { font-family: var(--display); font-size: 22px; }

/* "Case study" link on client cards */
.case-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.case-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Phone view tucked into the corner of each client screenshot */
.shot { position: relative; }
.shot-phone {
  position: absolute; right: 10px; bottom: 10px; width: 24%; height: auto; aspect-ratio: 240 / 520;
  object-fit: cover; object-position: top; border-radius: 12px; border: 3px solid #0b0d0e;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .shot-phone { transform: translateY(-6px) rotate(-2deg); }
.scores-2 { grid-template-columns: repeat(2, 1fr); }

/* Hero content is the first thing on screen: animate it with movement only, no blur or long delays */
.js .hero .reveal { filter: none; transform: translateY(16px); transition-duration: .6s; }
.js .hero .reveal.in { transform: none; }
/* The Get in touch menu opens over the client logos below it */
.hero .actions { position: relative; z-index: 5; }
.js .hero h1 .w { filter: none; animation-duration: .6s; animation-delay: calc(var(--i) * 50ms); }
/* The readability backdrop behind the hero copy must not widen the page on phones */
.hero { overflow-x: clip; }

/* The tenth client card spans the full row on wide screens, image beside the text */
@media (min-width: 1000px) {
  .card-feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .card-feature .shot { flex: 0 0 62%; aspect-ratio: 16 / 9; }
  .card-feature .card-body { padding: 24px 28px; justify-content: center; }
  .card-feature h3 { font-size: 22px; }
}

/* Client work: first six projects, the rest behind "Show more" (phones keep the full carousel) */
.more-wrap { display: none; justify-content: center; margin-top: 28px; }
@media (min-width: 680px) {
  .more-wrap { display: flex; }
  .grid.collapsed > .card:nth-child(n+7) { display: none; }
  .grid > .card.just-shown { animation: rise-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 70ms); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
#more-btn .chev { transition: transform .3s ease; }
#more-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.scores-auto { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); row-gap: 18px; }

/* Hidden trap field for spam bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mobile and visual polish ---------- */

/* Numbers band under the hero */
.facts-wrap { padding-top: 8px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 22px; padding: 6px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts li { padding: 16px 18px; display: grid; gap: 2px; }
.facts li + li { border-left: 1px solid var(--glass-edge); }
@media (max-width: 759px) {
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--glass-edge); }
}
.facts strong { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.facts span { font-size: 13.5px; color: var(--muted); }

/* Section labels draw a short line in as the heading comes into view */
.head .label { display: inline-flex; align-items: center; gap: 10px; }
.head .label::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .15s;
}
.js .head.in .label::before, html:not(.js) .head .label::before { transform: scaleX(1); }

/* Stack chips on client cards */
.card .stack-chips { margin-top: auto; padding-top: 8px; gap: 6px; }
.card .stack-chips li { padding: 5px 10px; font-size: 12.5px; }
.card .stack-chips .ti { width: 13px; height: 13px; }

/* Dark mode: a light top edge so the glass reads as glass */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 45%);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .14);
  }
}
:root[data-theme="dark"] .glass {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 45%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Skill tabs only exist on phones */
.skill-tabs { display: none; }
@media (max-width: 719px) {
  .skill-tabs {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px;
  }
  .skill-tabs::-webkit-scrollbar { display: none; }
  .skill-tabs button {
    flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--glass-border); cursor: pointer;
    background: var(--glass); color: var(--text); font: 600 14px var(--sans); transition: background-color .2s, color .2s;
  }
  .skill-tabs button[aria-selected="true"] { background: var(--solid); color: var(--solid-text); border-color: transparent; }
  .skills .skill:not(.is-shown) { display: none; }
  .skills .skill.is-shown { animation: rise-in .4s cubic-bezier(.2, .7, .2, 1); }
}

/* Process steps become a swipe row on phones */
@media (max-width: 819px) {
  .process {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px 18px; scroll-padding: 0 16px;
  }
  .process::-webkit-scrollbar { display: none; }
  .process .step { flex: 0 0 80%; scroll-snap-align: start; }
  .js .process .step.reveal { opacity: 1; transform: none; filter: none; }
}

/* Experience rows open on tap on phones */
@media (max-width: 719px) {
  .job.collapsible > div { position: relative; padding-right: 30px; cursor: pointer; }
  .job.collapsible > div::after {
    content: "+"; position: absolute; right: 0; top: -2px; font-size: 22px; color: var(--accent); transition: transform .3s;
  }
  .job.collapsible.open > div::after { transform: rotate(45deg); }
  .job.collapsible p { display: none; }
  .job.collapsible.open p { display: block; animation: rise-in .35s ease; }
}

/* Hero on phones: screenshots sit between the headline and the text */
@media (max-width: 959px) {
  .hero { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy::before { display: none; }
  .hero .intro { order: 1; }
  .hero h1 { order: 2; }
  .hero-art { order: 3; height: 330px; margin: 18px 0 34px; }
  .hero .lede { order: 4; }
  .hero .actions { order: 5; }
  .hero .proof { order: 6; }
  .hero .now { bottom: -30px; }
}
@media (min-width: 521px) and (max-width: 959px) { .hero-art { height: 440px; } }

/* Client screenshots scroll on their own when centred in the phone carousel */
@media (max-width: 679px) {
  .grid .card.is-centered .shot > img:first-child { animation: pan 9s ease-in-out .6s infinite alternate; }
}
@keyframes pan { from { object-position: 50% 0%; } to { object-position: 50% 100%; } }

/* Floating contact bar on phones */
.callbar { display: none; }
@media (max-width: 759px) {
  .callbar {
    display: flex; gap: 6px; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 6px; border-radius: 999px; background: var(--glass-nav);
    transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s;
  }
  .callbar.show { transform: translate(-50%, 0); opacity: 1; }
  .callbar a {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
    font-weight: 600; font-size: 15px; text-decoration: none; color: var(--text);
  }
  .callbar a:first-child { background: var(--solid); color: var(--solid-text); }
}

@media (prefers-reduced-motion: reduce) {
  .grid .card.is-centered .shot > img:first-child { animation: none; }
  .head .label::before { transition: none; }
}

/* Thank-you panel after the contact form is sent */
.thanks { border-radius: 22px; padding: 30px 28px; display: grid; gap: 10px; justify-items: start; align-content: start; animation: rise-in .5s cubic-bezier(.2, .7, .2, 1); }
.thanks[hidden] { display: none; }
.thanks:focus { outline: none; }
.thanks-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--solid-text); margin-bottom: 6px; }
.thanks h3 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.thanks p { color: var(--muted); font-size: 15.5px; }
.thanks-alt a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.thanks .btn { margin-top: 8px; }
.form[hidden] { display: none; }
.facts span a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.facts span a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Services */
.services { display: grid; gap: 20px; }
@media (min-width: 680px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }
.svc { border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(67, 101, 90, .35); }
.svc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--solid); color: var(--solid-text); margin-bottom: 6px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.svc:hover .svc-ic { transform: rotate(-8deg) scale(1.08); background: var(--accent); }
.svc h3 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.svc p { color: var(--muted); font-size: 15px; }
.svc-cta { background: var(--solid); color: var(--solid-text); text-decoration: none; justify-content: center; }
.svc-cta p { color: color-mix(in srgb, var(--solid-text) 75%, transparent); }
.svc-go { margin-top: 6px; font-weight: 700; font-size: 15px; }
.svc-cta:hover .svc-go span { display: inline-block; transform: translateX(4px); transition: transform .3s; }

/* Writing */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.posts { display: grid; gap: 20px; }
@media (min-width: 860px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card { border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(67, 101, 90, .35); }
.post-card h2, .post-card h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.post-card:hover h2, .post-card:hover h3 { color: var(--accent); }
.post-card p { color: var(--muted); font-size: 15px; flex: 1; }
.post-tags { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.post-date { font-size: 13px; color: var(--faint); }

/* Article page */
.post { max-width: 760px; padding-top: 56px; padding-bottom: 40px; }
.post h1 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.post-meta { margin-top: 16px; color: var(--faint); font-size: 14px; }
.post-body { margin-top: 34px; font-size: 17.5px; line-height: 1.75; }
.post-body > * + * { margin-top: 18px; }
.post-body h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 40px; }
.post-body ul, .post-body ol { padding-left: 22px; display: grid; gap: 8px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body a { color: var(--accent); text-underline-offset: 3px; }
.post-body strong { font-weight: 600; }
.post-cta { margin-top: 48px; border-radius: 22px; padding: 28px; display: grid; gap: 10px; justify-items: start; }
.post-cta h2 { font-family: var(--display); font-size: 22px; font-weight: 700; }
.post-cta p { color: var(--muted); }
.post-more { margin-top: 48px; }
.post-more h2 { font-family: var(--display); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.post-more ul { display: grid; gap: 14px; }
.post-more a { font-weight: 600; color: var(--text); text-underline-offset: 3px; }
.post-more a:hover { color: var(--accent); }
.post-more span { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }

/* Nav: seven links fit with a little less padding; switch to the menu button below 900px */
.nav-links a { padding: 7px 11px; }
@media (max-width: 899px) { .nav-links { display: none !important; } .nav-cta { display: none; } .nav-toggle { display: grid !important; } }
@media (min-width: 900px) { .nav-toggle, .mobile-menu { display: none !important; } }