/*
Theme Name: Abdul Aziz Web
Theme URI: https://example.com/
Author: Abdul Aziz
Description: Futuristic, minimal dark portfolio theme (Nocturne design system) converted from the Zenith Form Digital React project. Includes a three.js hero, scroll reveals, tilt cards, a working contact form, and a full Customizer builder (content + per-element styling, per device) plus a Testimonials post type. Projects are managed by the Zenith Projects plugin.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zenith-form
*/

/* ---------- Design tokens ---------- */
:root {
  --radius: 1rem;
  --container: 80rem;
  --background: #000000;
  --foreground: #fafafa;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --primary: #dc5f00;
  --primary-foreground: #ffffff;
  --violet: #ff8a2a;
  --muted-foreground: #9a9a9a;
  --border: #292929;
  --gradient-accent: linear-gradient(110deg, var(--primary), var(--violet));
  --gradient-halo: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%);
  --shadow-glow: 0 0 60px -14px color-mix(in oklab, var(--primary) 28%, transparent);
  --shadow-card: 0 30px 80px -40px oklch(0 0 0 / 90%);
  --shadow-soft: 0 10px 30px -10px rgba(0,0,0,.5);
  --shadow-medium: 0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-strong: 0 30px 80px -30px rgba(0,0,0,.9);
  --danger: oklch(0.7 0.2 25);
  color-scheme: dark;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Light theme (toggle in the header; dark is the default) ---------- */
:root[data-theme="light"] {
  /* Warm cream + slate + orange (matches the light-mode reference design) */
  --background: #fcf9f3;
  --foreground: #1c2b33;
  --surface: #ffffff;
  --surface-2: #f7efe5;
  --primary: #e8620c;
  --primary-foreground: #ffffff;
  --violet: #f58a2f;
  --muted-foreground: #67757c;
  --border: #f0e6da;
  --gradient-halo: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--primary) 9%, transparent), transparent 70%);
  --shadow-glow: 0 10px 24px -10px color-mix(in oklab, var(--primary) 55%, transparent);
  --shadow-card: 0 24px 60px -34px rgba(120,66,16,.22);
  --shadow-soft: 0 8px 24px -12px rgba(120,66,16,.16);
  --shadow-medium: 0 18px 44px -24px rgba(120,66,16,.22);
  --shadow-strong: 0 28px 70px -34px rgba(120,66,16,.3);
  --danger: oklch(0.55 0.22 25);
  color-scheme: light;
}
:root[data-theme="light"] .grain::after { opacity: 0.05; }
:root[data-theme="light"] .hero__particles span { opacity: 0.35; }

/* Smooth colour change when toggling (only while the toggle is animating) */
.theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); line-height: 1.5; overflow-x: hidden; min-height: 100vh;
}
::selection { background: color-mix(in oklab, var(--primary) 40%, transparent); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.zf-icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Utilities ---------- */
.text-gradient { background-image: var(--gradient-accent); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.glass {
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
}
.halo { position: relative; }
.halo::before { content: ""; position: absolute; inset: -20%; background: var(--gradient-halo); pointer-events: none; z-index: 0; }
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted-foreground); }
.eyebrow--line { display: flex; align-items: center; gap: 0.75rem; }
.eyebrow--line::before { content: ""; height: 1px; width: 2rem; background: linear-gradient(to right, var(--primary), var(--violet)); }

/* Reveal (only hidden when JS is running) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft); }
.js .reveal[data-visible="true"] { opacity: 1; transform: none; }

@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(0,-120px,0) scale(1.15); } }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
.animate-float-soft { animation: float-soft 7s ease-in-out infinite; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 500; border: 0;
  transition: transform .5s ease-out; will-change: transform;
}
.btn--primary { background-image: var(--gradient-accent); color: var(--primary-foreground); box-shadow: var(--shadow-glow); }
.btn--glass { background: color-mix(in oklab, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--border); }

/* ---------- Header / nav ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 1.5rem 0; transition: all .5s; }
.site-header.is-scrolled { padding: 0.75rem 0; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header__bar {
  width: min(100% - 1.5rem, var(--container)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  border-radius: 9999px; padding: 0.75rem 1.25rem; border: 1px solid transparent; transition: all .5s;
}
.site-header.is-scrolled .site-header__bar {
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--border); box-shadow: var(--shadow-card);
}
.site-logo { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.site-logo img { max-height: 2rem; width: auto; }
.primary-nav { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; }
.primary-nav a { position: relative; font-size: 0.875rem; color: var(--muted-foreground); transition: color .2s; }
.primary-nav a:hover { color: var(--foreground); }
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: -0.375rem; height: 1px; width: 0; background: linear-gradient(to right, var(--primary), var(--violet)); transition: width .3s; }
.primary-nav a:hover::after { width: 100%; }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.site-header__cta { display: none; padding: 0.625rem 1.25rem; }
.menu-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; padding: 0; }
.menu-toggle .zf-icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .zf-icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .zf-icon--close { display: block; }
.theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; padding: 0; transition: transform .3s var(--ease-out-soft), border-color .2s; }
.theme-toggle:hover { transform: rotate(14deg) scale(1.06); border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-toggle .zf-icon { width: 1.125rem; height: 1.125rem; }
.theme-toggle .zf-icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle .zf-icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle .zf-icon--moon { display: block; }
.mobile-menu { display: none; width: min(100% - 1.5rem, var(--container)); margin: 0.75rem auto 0; border-radius: 1.5rem; padding: 1.5rem; }
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu li a { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.mobile-menu .btn { margin-top: 1rem; width: 100%; padding: 0.75rem 1.25rem; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 1024px) { .primary-nav { display: block; } .menu-toggle, .mobile-menu, .mobile-menu.is-open { display: none; } }

/* ---------- Sections ---------- */
.section { position: relative; scroll-margin-top: 6rem; padding: 7rem 1.5rem; }
.section--tint { background: color-mix(in oklab, var(--surface) 30%, transparent); }
.section__inner { width: 100%; max-width: var(--container); margin: 0 auto; position: relative; }
.section-title { font-size: 2.25rem; line-height: 1.02; margin-top: 1.5rem; }
@media (min-width: 768px) { .section { padding: 10rem 2.5rem; } .section-title { font-size: 3.75rem; } }
.max-w-2xl { max-width: 42rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; padding: 8rem 1.5rem 0; }
.hero > * { position: relative; }
.hero__particles { position: absolute !important; inset: 0; pointer-events: none; overflow: hidden; }
.hero__particles span { position: absolute; border-radius: 9999px; background: var(--foreground); }
.hero__grid { position: relative; z-index: 10; max-width: var(--container); width: 100%; margin: 0 auto; display: grid; gap: 3rem; align-items: center; min-height: calc(100svh - 12rem); padding-bottom: 6rem; }
.hero__copy { animation: rise-in 1s ease-out both; }
.hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); line-height: 0.95; margin-top: 2rem; }
.hero h1 br { display: none; }
@media (min-width: 640px) { .hero h1 br { display: inline; } }
.hero__desc { color: var(--muted-foreground); margin-top: 2rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero__supporting { color: var(--muted-foreground); margin-top: 2rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.025em; }
.hero__scene { position: relative; width: 100%; max-width: 42rem; aspect-ratio: 1; }
.hero__scene::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9999px; background: var(--gradient-halo); filter: blur(40px); }
.hero__scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
@media (min-width: 768px) { .hero { padding-inline: 2.5rem; } .hero__desc { font-size: 1.125rem; } }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; padding-bottom: 0; } .hero__scene { height: 38rem; aspect-ratio: auto; } }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 4rem; }
.about-text { color: var(--muted-foreground); margin-top: 2rem; max-width: 36rem; line-height: 1.625; }
.about-text p + p { margin-top: 1.25rem; }
.stats { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.stat { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.stat__value { display: flex; align-items: center; height: 2.7rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.stat__value--num { font-size: 2.25rem; }
.stat__label { color: var(--muted-foreground); margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.025em; text-transform: uppercase; }
.about-visual { position: relative; min-height: 28rem; }
.about-visual__inner { position: relative; height: 100%; transition: opacity 1.2s var(--ease-out-soft), filter 1.2s var(--ease-out-soft); }
.about-visual__halo { position: absolute; inset: -1.5rem; z-index: -1; border-radius: 2.5rem; background: var(--gradient-halo); opacity: .5; filter: blur(40px); }
.about-visual__frame { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.about-visual__frame img { position: absolute; left: 0; width: 100%; height: 115%; object-fit: cover; top: -7.5%; transition: transform 1.2s var(--ease-out-soft); }
.about-visual__inner:hover .about-visual__frame img { transform: scale(1.05); }
.about-visual__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--background) 70%, transparent), transparent 50%); }
.about-visual__status { position: absolute; z-index: 2; bottom: 1.25rem; left: 1.25rem; border-radius: 1rem; padding: 0.75rem 1.25rem; }
.about-visual__status p:last-child { margin-top: 0.25rem; font-size: 0.875rem; }
.about-visual__badge { position: absolute; top: -1.25rem; right: -0.75rem; border-radius: 1rem; padding: 0.75rem 1rem; }
.about-visual__badge strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.about-visual__badge > span { color: var(--muted-foreground); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .stat__value { font-size: 1.875rem; height: 3.6rem; } .stat__value--num { font-size: 3rem; } .about-visual__badge { right: -1.5rem; } }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 0.85fr; gap: 6rem; } .about-visual { min-height: 36rem; } }

/* ---------- Services ---------- */
.services-grid { margin-top: 4rem; display: grid; gap: 1px; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); background: var(--border); }
.service { position: relative; height: 100%; overflow: hidden; background: var(--background); padding: 2rem; transition: transform .5s var(--ease-out-soft); }
.service:hover { transform: perspective(900px) rotateX(4deg) translateY(-8px); }
.service::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: 0; transition: opacity .5s; }
.service:hover::before { opacity: 1; }
.service__body { position: relative; }
.service__top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--muted-foreground); }
.service__top .zf-icon { width: 1.25rem; height: 1.25rem; transition: color .3s; }
.service:hover .service__top .zf-icon { color: var(--foreground); }
.service__no { font-family: var(--font-mono); font-size: 0.75rem; }
.service h3 { margin-top: 3.5rem; font-size: 1.5rem; }
.service__desc { color: var(--muted-foreground); margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; }
.service__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out-soft); }
.service:hover .service__more { grid-template-rows: 1fr; }
.service__more p { overflow: hidden; opacity: 0; transition: opacity .5s; font-size: 0.75rem; letter-spacing: 0.025em; color: var(--muted-foreground); }
.service__more span { display: block; margin-top: 1rem; }
.service:hover .service__more p { opacity: 1; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .service { padding: 2.5rem; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.services-grid > .reveal { height: 100%; }

/* ---------- Marquee ---------- */
.marquee { position: relative; border-block: 1px solid var(--border); padding: 2rem 0; overflow: hidden; }
.marquee::before, .marquee::after { content: ""; position: absolute; inset-block: 0; width: 8rem; z-index: 10; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, var(--background), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--background), transparent); }
.marquee__track { display: flex; width: max-content; align-items: center; gap: 4rem; padding: 0 2rem; animation: marquee-x 38s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 4rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; white-space: nowrap; color: var(--muted-foreground); transition: color .2s; }
.marquee__item:hover { color: var(--foreground); }
.marquee__item::after { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 60%, transparent); }
@media (min-width: 768px) { .marquee__item { font-size: 2.25rem; } }

/* ---------- Projects ---------- */
.projects-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.projects-head p.lead { color: var(--muted-foreground); max-width: 24rem; font-size: 0.875rem; line-height: 1.625; }
.projects-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
.projects-grid > .reveal { height: 100%; }
.project { position: relative; height: 100%; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 40%, transparent); transition: transform .5s var(--ease-out-soft); will-change: transform; }
.project__media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out-soft); }
.project:hover .project__media img { transform: scale(1.1); }
.project__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--background), transparent 50%); }
.project__glow { position: absolute; z-index: 2; width: 10rem; height: 10rem; transform: translate(-50%, -50%); border-radius: 9999px; background: color-mix(in oklab, var(--primary) 25%, transparent); filter: blur(64px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.project:hover .project__glow { opacity: 1; }
.project__body { position: relative; padding: 1.75rem; }
.project h3 { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; }
.project h3 .zf-icon { width: 1.25rem; height: 1.25rem; transform: translateX(-0.5rem); opacity: 0; transition: all .5s; }
.project:hover h3 .zf-icon { transform: none; opacity: 1; }
.project__desc { color: var(--muted-foreground); margin-top: 0.75rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.625; }
.project__meta { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.project__meta li { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--foreground); }
.project__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.project__foot { margin-top: 1.5rem; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.project__link { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--border); padding: 0.5rem 1rem; font-size: 0.75rem; transition: border-color .2s; }
.project__link:hover { border-color: var(--primary); }
.project__link .zf-icon { width: 0.875rem; height: 0.875rem; }
/* Card with a case-study page: the title link covers the whole card; inner links stay clickable above it. */
.project--linked { cursor: pointer; }
.project--linked .project__body { position: static; }
.project__cover { color: inherit; }
.project__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.project--linked .project__link, .project--linked .project__meta a { position: relative; z-index: 3; }
.project--linked .project__link:not(.project__link--live) { border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.project__cover:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.projects-page { padding-top: 9rem; }
.projects-page .projects-head > .reveal:last-child { max-width: 24rem; }
.projects-count { margin-top: 0.75rem; font-family: var(--font-mono, monospace); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.projects-empty { margin-top: 4rem; color: var(--muted-foreground); text-align: center; }
@media (min-width: 768px) { .projects-grid--list { grid-template-columns: repeat(2, 1fr); } }
.projects-more { margin-top: 3.5rem; display: flex; justify-content: center; }
@media (min-width: 768px) { .project__body { padding: 2.25rem; } .project h3 { font-size: 1.875rem; } }
@media (min-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(12, 1fr); }
  .projects-grid > :nth-child(4n+1), .projects-grid > :nth-child(4n+4) { grid-column: span 7; }
  .projects-grid > :nth-child(4n+2), .projects-grid > :nth-child(4n+3) { grid-column: span 5; }
  .projects-grid--list { grid-template-columns: repeat(3, 1fr); }
  .projects-grid--list > * { grid-column: auto !important; }
}

/* ---------- Featured ---------- */
.featured { position: relative; padding: 6rem 1rem; }
.featured__inner { max-width: var(--container); margin: 0 auto; }
.featured__media { margin-top: 2.5rem; overflow: hidden; }
.featured__media img { width: 100%; height: 52vh; object-fit: cover; will-change: transform; border-radius: 48px; transform: scale(.88); }
.featured__grid { margin-top: 3rem; display: grid; gap: 2.5rem; }
.featured h2 { font-size: 2.25rem; line-height: 1.03; }
.featured__desc { color: var(--muted-foreground); margin-top: 1.5rem; max-width: 36rem; line-height: 1.625; }
.featured .btn { margin-top: 2.25rem; }
.featured__features { display: grid; gap: 2rem; align-content: start; }
.feature { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.feature p:last-child { color: var(--muted-foreground); margin-top: 0.75rem; font-size: 0.875rem; }
@media (min-width: 768px) {
  .featured { padding: 8rem 2.5rem; } .featured__media img { height: 78vh; } .featured h2 { font-size: 3.75rem; }
  .featured__grid { grid-template-columns: 1.1fr 0.9fr; } .featured__features { padding-top: 1rem; }
}

/* ---------- Experience ---------- */
.exp-desc { color: var(--muted-foreground); margin-top: 1.5rem; max-width: 36rem; line-height: 1.625; }
.timeline { position: relative; margin-top: 4rem; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(to bottom, color-mix(in oklab, var(--primary) 60%, transparent), color-mix(in oklab, var(--violet) 40%, transparent), transparent); }
.role { position: relative; display: grid; gap: 1rem; padding: 2.5rem 0; }
.role__period { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.75rem; }
.role__body { position: relative; }
.role__body::before { content: ""; position: absolute; top: 0.5rem; left: calc(-1.5rem - 1px); width: 0.5rem; height: 0.5rem; transform: translateX(-50%); border-radius: 9999px; background: var(--primary); box-shadow: var(--shadow-glow); }
.role h3 { font-size: 1.5rem; }
.role__org { margin-top: 0.25rem; font-size: 0.875rem; display: inline-block; }
.role__desc { color: var(--muted-foreground); margin-top: 1rem; max-width: 36rem; font-size: 0.875rem; line-height: 1.625; }
.role__org-wrap { display: block; }
@media (min-width: 768px) {
  .timeline { padding-left: 0; }
  .timeline::before { left: 22%; }
  .role { grid-template-columns: 22% 1fr; gap: 3rem; }
  .role__period { padding-right: 2.5rem; text-align: right; }
  .role__body::before { left: calc(-3rem - 1px); }
  .role h3 { font-size: 1.875rem; }
}

/* ---------- Testimonials ---------- */
.quotes { display: flex; gap: 1.5rem; overflow-x: auto; padding: 3.5rem 0 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quotes > .reveal { min-width: 85%; scroll-snap-align: start; }
.quote { display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin: 0; border-radius: 2rem; padding: 2rem; transition: transform .5s var(--ease-out-soft); }
.quote:hover { transform: translateY(-0.5rem); }
.quote blockquote { margin: 0; font-size: 1.125rem; line-height: 1.625; }
.quote figcaption { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.quote__avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background-image: var(--gradient-accent); color: var(--primary-foreground); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; flex: none; }
.quote__name { display: block; font-size: 0.875rem; font-weight: 500; }
.quote__role { display: block; color: var(--muted-foreground); font-size: 0.75rem; }
@media (min-width: 640px) { .quotes > .reveal { min-width: 52%; } }
@media (min-width: 1024px) { .quotes > .reveal { min-width: 34%; } }

/* ---------- Contact ---------- */
.contact { overflow: hidden; }
.contact__grid { position: relative; z-index: 1; display: grid; gap: 4rem; }
.contact h2 { font-size: 2.25rem; line-height: 1.02; margin-top: 1.5rem; }
.contact__desc { color: var(--muted-foreground); margin-top: 1.5rem; max-width: 28rem; line-height: 1.625; }
.contact__list { margin-top: 3rem; display: grid; gap: 1px; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--border); }
.contact__item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--background); transition: background .2s; }
a.contact__item:hover { background: var(--surface); }
.contact__item .zf-icon { color: var(--muted-foreground); transition: color .2s; }
a.contact__item:hover .zf-icon { color: var(--foreground); }
.contact__item small { display: block; color: var(--muted-foreground); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; }
.contact__item span span { display: block; font-size: 0.875rem; }
.contact-form { border-radius: 2rem; padding: 1.75rem; }
.contact-form__grid { display: grid; gap: 1rem; }
.field { width: 100%; border-radius: 1rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 40%, transparent); padding: 1rem 1.25rem; font: inherit; font-size: 0.875rem; color: var(--foreground); outline: none; transition: border-color .2s; appearance: none; -webkit-appearance: none; }
.field::placeholder { color: var(--muted-foreground); }
.field:focus { border-color: var(--primary); }
select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; padding-right: 3rem; }
select.field option { background: var(--surface); color: var(--foreground); }
select.field:invalid { color: var(--muted-foreground); }
textarea.field { margin-top: 1rem; resize: none; display: block; }
.contact-form .btn { margin-top: 1.5rem; width: 100%; padding: 1rem 1.75rem; }
.contact-form .btn[disabled] { opacity: .6; cursor: wait; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) { .contact-form__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .contact h2 { font-size: 3.75rem; } .contact-form { padding: 2.5rem; } }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: 6rem; } }

/* Toast */
.zf-toast { position: fixed; right: 1.5rem; bottom: 5.75rem; z-index: 100; max-width: 22rem; border-radius: 1rem; padding: 1rem 1.25rem; opacity: 0; transform: translateY(1rem); pointer-events: none; transition: all .4s var(--ease-out-soft); }
.zf-toast.is-visible { opacity: 1; transform: none; }
.zf-toast strong { display: block; font-size: 0.875rem; }
.zf-toast span { display: block; color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.25rem; }
.zf-toast.is-error strong { color: var(--danger); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 4rem 1.5rem; }
.site-footer__grid { max-width: var(--container); margin: 0 auto; display: grid; gap: 3rem; }
.site-footer__desc { color: var(--muted-foreground); margin-top: 1rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.625; }
.site-footer__mail { color: var(--muted-foreground); margin-top: 1rem; display: block; font-size: 0.875rem; transition: color .2s; }
.site-footer__mail:hover, .footer-nav a:hover { color: var(--foreground); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.footer-nav a { color: var(--muted-foreground); font-size: 0.875rem; transition: color .2s; }
.site-footer__bottom { max-width: var(--container); margin: 3.5rem auto 0; border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.75rem; }
.site-footer__bottom p:last-child { font-family: var(--font-mono); }
@media (min-width: 768px) { .site-footer { padding-inline: 2.5rem; } .site-footer__grid { grid-template-columns: 1.4fr 1fr; } }

/* ---------- Generic pages / 404 ---------- */
.page-wrap { max-width: 48rem; margin: 0 auto; padding: 9rem 1.5rem 6rem; }
.page-wrap h1 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.page-wrap .entry-content { color: var(--muted-foreground); line-height: 1.75; }
.page-wrap .entry-content a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--primary); }
.page-wrap article + article { margin-top: 4rem; }
.not-found { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.not-found h1 { font-size: 4.5rem; }
.not-found h2 { margin-top: 1rem; font-size: 1.25rem; }
.not-found p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.not-found .btn { margin-top: 1.5rem; padding: .5rem 1rem; }

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

/* v1.3.0 — About skill chips, odd-count form grid */
.skill-chips { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.skill-chips li { border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; font-size: .8125rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .contact-form__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }


/* ---------- v1.4 additions: images ---------- */
.hero__image { width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; display: block; }
.service__img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .75rem; margin-bottom: 1.25rem; }
.quote__avatar { overflow: hidden; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-logo img { display: block; max-height: 2.5rem; width: auto; }


/* ======================================================================
   v1.7.1 — About page (template-about.php)
   ====================================================================== */

/* Nav: current page indicator (default menu + custom menus) */
.primary-nav a[aria-current="page"], .primary-nav .current-menu-item > a { color: var(--foreground); }
.primary-nav a[aria-current="page"]::after, .primary-nav .current-menu-item > a::after { width: 100%; }
.footer-nav a[aria-current="page"], .footer-nav .current-menu-item > a { color: var(--foreground); }
.mobile-menu a[aria-current="page"] { color: var(--foreground); }

/* Hero */
.about-hero { padding-top: 9rem; padding-bottom: 5rem; overflow: hidden; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: .55; pointer-events: none; }
.about-hero__grid { display: grid; gap: 3rem; align-items: center; }
.about-hero__title { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .98; margin-top: 1.5rem; max-width: 12ch; }
.about-hero__text { color: var(--muted-foreground); margin-top: 1.75rem; max-width: 34rem; font-size: 1rem; line-height: 1.7; }
.about-cv { margin-top: 2.5rem; padding-top: .25rem; }
.about-cv .btn { display: inline-flex; }
.about-hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; }
@media (min-width: 768px) { .about-hero { padding-top: 11rem; padding-bottom: 7rem; } .about-hero__text { font-size: 1.125rem; } }
@media (min-width: 1024px) { .about-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }

/* Orb (decorative, CSS only) */
.about-orb { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; }
.about-orb::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--gradient-halo); filter: blur(36px); }
.about-orb__core {
  position: absolute; inset: 27%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in oklab, #fff 55%, transparent), transparent 32%),
    radial-gradient(circle at 70% 75%, color-mix(in oklab, var(--violet) 35%, transparent), transparent 60%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--primary) 38%, var(--background)), var(--background) 92%);
  border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent);
  box-shadow: var(--shadow-glow), inset 0 0 40px color-mix(in oklab, var(--primary) 18%, transparent);
  animation: float-soft 8s ease-in-out infinite;
}
.about-orb__ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent); }
.about-orb__ring--1 { inset: 12%; animation: orb-spin 26s linear infinite; border-color: color-mix(in oklab, var(--primary) 55%, transparent); border-top-color: transparent; }
.about-orb__ring--2 { inset: 2%; transform: rotate(-24deg) scaleY(.42); border-color: color-mix(in oklab, var(--violet) 50%, transparent); }
.about-orb__ring--3 { inset: -6%; transform: rotate(32deg) scaleY(.62); opacity: .5; }
.about-orb__dot { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary); box-shadow: var(--shadow-glow); }
.about-orb__dot--1 { top: 18%; right: 8%; animation: float-soft 6s ease-in-out infinite; }
.about-orb__dot--2 { bottom: 14%; left: 6%; background: var(--violet); animation: float-soft 9s ease-in-out infinite reverse; }
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* Intro + stats */
.about-intro__grid { display: grid; gap: 3.5rem; align-items: center; }
.about-intro__text { color: var(--muted-foreground); margin-top: 1.75rem; max-width: 34rem; line-height: 1.7; }
.about-intro__media { margin: 0; position: relative; max-width: 28rem; margin-inline: auto; width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.about-intro__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-soft); }
.about-intro__media:hover img { transform: scale(1.04); }
.about-intro__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--background) 75%, transparent), transparent 45%); pointer-events: none; }
.about-intro__media figcaption { position: absolute; z-index: 1; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; justify-content: flex-end; color: var(--foreground); }
.about-intro__media-wrap { width: 100%; }
.about-stats { margin: 4rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 1.5rem; overflow: hidden; }
.about-stats__item { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: .5rem; padding: 1.75rem 1rem; text-align: center; border-top: 1px solid var(--border); }
.about-stats__item:nth-child(-n+2) { border-top: 0; }
.about-stats__item:nth-child(even) { border-left: 1px solid var(--border); }
.about-stats__value { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.about-stats__label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }
@media (min-width: 768px) { .about-stats__item { padding: 2.25rem 1rem; } }
@media (min-width: 900px) {
  .about-stats { grid-template-columns: repeat(4, 1fr); }
  .about-stats__item { border-top: 0; border-left: 1px solid var(--border); }
  .about-stats__item:first-child { border-left: 0; }
}
@media (min-width: 1024px) {
  .about-intro__grid { grid-template-columns: 1fr .8fr; gap: 6rem; }
  .about-intro__media { margin-inline: 0 0; margin-left: auto; }
}

/* Values */
.about-values__grid { margin-top: 3.5rem; display: grid; gap: 1.25rem; }
.about-values__cell { height: 100%; }
.value-card { height: 100%; border-radius: 1.5rem; padding: 2rem; transition: transform .5s var(--ease-out-soft), border-color .3s, box-shadow .5s; }
.value-card:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); box-shadow: var(--shadow-glow); }
.value-card__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.value-card__icon .zf-icon { width: 1.4rem; height: 1.4rem; }
.value-card h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.value-card p { color: var(--muted-foreground); margin-top: .75rem; font-size: .9rem; line-height: 1.7; }
@media (min-width: 768px) { .about-values__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* Process */
.process { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: none; }
.process__step { border-top: 1px solid var(--border); padding-top: 1.5rem; position: relative; }
.process__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 1px; background: var(--gradient-accent); }
.process__no { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; color: var(--primary); }
.process__step h3 { font-size: 1.375rem; margin-top: 1rem; }
.process__step p { color: var(--muted-foreground); margin-top: .75rem; font-size: .9rem; line-height: 1.7; }
@media (min-width: 640px) { .process { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }

/* Journey */
.about-journey__head .exp-desc { max-width: 34rem; }
.about-journey .timeline { margin-top: 3rem; }
.about-journey .role { padding: 2rem 0; }
.about-journey .role__desc { margin-top: .625rem; }
.about-journey .role__period { padding-top: .35rem; }

/* Closing call to action */
.about-cta { position: relative; overflow: hidden; isolation: isolate; padding: 7rem 1.5rem; text-align: center; border-top: 1px solid var(--border); }
.about-cta__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .55; }
.about-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 45%, transparent) 55%, var(--background)); }
:root[data-theme="light"] .about-cta__bg { opacity: .22; }
.about-cta__inner { max-width: 44rem; margin: 0 auto; }
.about-cta h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); line-height: 1.05; }
.about-cta__text { color: var(--muted-foreground); margin-top: 1.25rem; font-size: 1rem; }
.about-cta__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
@media (min-width: 768px) { .about-cta { padding: 10rem 2.5rem; } }

/* Small screens: stack buttons full-width for easy thumb taps */
@media (max-width: 479px) {
  .about-hero__actions .btn, .about-cta__actions .btn { width: 100%; }
  .value-card { padding: 1.5rem; }
}
@media (min-width: 768px) { .about-page .section { padding-block: 7rem; } .about-page .about-hero { padding-top: 11rem; padding-bottom: 6rem; } }

/* ======================================================================
   v1.8.0 — Services page (template-services.php)
   ====================================================================== */
.services-page .section { padding-block: 5rem; }
@media (min-width: 768px) { .services-page .section { padding-block: 7rem; } }

/* Hero */
/* (prefixed with .services-page so it outranks the generic section padding above) */
.services-page .svc-hero { padding-top: 8rem; padding-bottom: 3rem; overflow: hidden; }
.svc-hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: .5; pointer-events: none; }
.svc-hero__grid { display: grid; gap: 3.5rem; align-items: center; }
.svc-hero__title { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.02; margin-top: 1.5rem; max-width: 15ch; text-wrap: balance; }
.svc-hero__text { color: var(--muted-foreground); margin-top: 1.75rem; max-width: 32rem; font-size: 1rem; line-height: 1.7; }
.svc-hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; }
@media (min-width: 768px) { .services-page .svc-hero { padding-top: 10.5rem; padding-bottom: 5rem; } .svc-hero__text { font-size: 1.125rem; } }
@media (min-width: 1024px) { .svc-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

/* Hero composition: layered browser windows (decorative) */
.svc-visual { position: relative; width: min(100%, 36rem); aspect-ratio: 1 / .92; margin-inline: auto; perspective: 1400px; }
.svc-visual__glow { position: absolute; inset: 6% 4%; border-radius: 50%; background: var(--gradient-halo); filter: blur(34px); }
.svc-win {
  position: absolute; overflow: hidden; border-radius: 1rem; border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-medium);
}
.svc-win__bar { display: flex; align-items: center; gap: .35rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.svc-win__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 22%, transparent); }
.svc-win__bar i:first-child { background: color-mix(in oklab, var(--violet) 80%, transparent); }
.svc-win__url { flex: 1; height: .8rem; margin-left: .6rem; border-radius: 99px; background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.svc-win__body { display: grid; gap: .55rem; padding: 1rem; }
.svc-line { display: block; height: .5rem; border-radius: 99px; background: color-mix(in oklab, var(--foreground) 13%, transparent); }
.svc-line--w85 { width: 85%; } .svc-line--w60 { width: 60%; } .svc-line--w40 { width: 40%; }
.svc-pill { display: block; width: 2.5rem; height: 1rem; border-radius: 99px; background-image: var(--gradient-accent); opacity: .85; }
.svc-win--back { left: 0; top: 4%; width: 52%; transform: rotateY(18deg) rotateZ(-4deg); opacity: .7; }
.svc-win--main {
  left: 12%; top: 16%; width: 70%;
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-medium), var(--shadow-glow);
  transform: rotateY(-12deg) rotateX(5deg) rotateZ(1deg);
  animation: float-soft 9s ease-in-out infinite;
}
.svc-win__body--main { place-items: center; gap: 1.25rem; padding: 2.25rem 1.25rem 2rem; }
.svc-code { width: 52%; height: auto; display: block; filter: drop-shadow(0 0 18px color-mix(in oklab, var(--primary) 55%, transparent)); }
.svc-win__lines { display: grid; gap: .55rem; width: 70%; justify-items: center; }
.svc-win__lines .svc-line { margin-inline: auto; }
.svc-win--side { right: 0; bottom: 6%; width: 38%; transform: rotateY(-16deg) rotateZ(3deg); }
.svc-chip {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem;
  color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  background: color-mix(in oklab, var(--surface-2) 85%, transparent); box-shadow: var(--shadow-soft);
  animation: float-soft 7s ease-in-out infinite;
}
.svc-chip .zf-icon { width: 1.35rem; height: 1.35rem; }
.svc-chip--1 { top: 2%; right: 14%; }
.svc-chip--2 { bottom: 12%; left: 6%; animation-delay: -2.5s; color: var(--violet); }
.svc-chip--3 { top: 46%; right: -1%; animation-delay: -4.5s; }
@media (max-width: 479px) { .svc-chip { width: 2.5rem; height: 2.5rem; } .svc-chip--3 { right: 0; } }

/* Service cards */
.svc-list__head .exp-desc { max-width: 34rem; }
.svc-grid { margin-top: 3rem; display: grid; gap: 1.25rem; }
.svc-grid__cell { height: 100%; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.svc-card {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem;
  border-radius: 1.5rem; border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 70%, var(--background));
  transition: border-color .3s, box-shadow .5s var(--ease-out-soft);
}
.svc-card:hover { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); box-shadow: var(--shadow-glow); }
.svc-card__head { display: flex; align-items: center; gap: 1rem; }
.svc-card__icon {
  flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem;
  color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}
.svc-card__icon .zf-icon { width: 1.5rem; height: 1.5rem; }
.svc-card h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; }
.svc-card__desc { color: var(--muted-foreground); margin-top: 1.25rem; font-size: .9rem; line-height: 1.65; }
.svc-card__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
.svc-card__list li { display: flex; align-items: center; gap: .65rem; font-size: .875rem; }
.svc-card__list .zf-icon {
  width: 1.3rem; height: 1.3rem; padding: .3rem; border-radius: 50%; stroke-width: 3.2;
  color: var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent);
}
.svc-card__cta {
  margin-top: auto; padding-top: 1.75rem; display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  font-size: .875rem; font-weight: 600;
}
/* The whole card is the tap target; the focus ring is drawn around the card */
.svc-card__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card__cta:focus-visible { outline: none; }
.svc-card__cta:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 3px; }
.svc-card__cta .zf-icon { color: var(--primary); transition: transform .3s var(--ease-out-soft); }
.svc-card:hover .svc-card__cta .zf-icon { transform: translateX(4px); }

/* Tools row */
.svc-tools { margin-top: 3.5rem; }
.svc-tools__label { color: var(--muted-foreground); font-size: .875rem; }
.svc-tools .skill-chips { margin-top: .875rem; }

/* How it works */
.svc-process__head .exp-desc { max-width: 34rem; }
.svc-steps { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 2.25rem; }
.svc-step { position: relative; }
.svc-step__icon {
  position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, var(--background));
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
}
.svc-step__icon .zf-icon { width: 1.4rem; height: 1.4rem; }
.svc-step__no { display: block; margin-top: 1.25rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; color: var(--primary); }
.svc-step h3 { font-size: 1.25rem; margin-top: .5rem; }
.svc-step p { color: var(--muted-foreground); margin-top: .6rem; font-size: .9rem; line-height: 1.65; max-width: 19rem; }
/* Mobile: vertical connector between steps */
.svc-step:not(:last-child)::after { content: ""; position: absolute; left: 1.75rem; top: 4.1rem; bottom: -1.9rem; width: 1px; background: linear-gradient(to bottom, color-mix(in oklab, var(--primary) 45%, transparent), transparent); }
@media (min-width: 640px) {
  .svc-steps { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
  .svc-step:not(:last-child)::after { display: none; }
}
@media (min-width: 1024px) {
  .svc-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  /* Desktop: horizontal connector that fades into the next step */
  .svc-step:not(:last-child)::after { display: block; left: 4.25rem; right: -1.25rem; top: 1.75rem; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, color-mix(in oklab, var(--primary) 50%, transparent), color-mix(in oklab, var(--violet) 15%, transparent)); }
}

/* Closing banner */
.svc-cta-section { padding: 0 1.5rem 5rem; }
.svc-cta-reveal { max-width: var(--container); margin: 0 auto; }
.svc-cta {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 1.75rem; align-items: center;
  padding: 2.25rem 1.75rem; border-radius: 2rem; border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, var(--background));
}
.svc-cta__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 60% 40%; opacity: .45; }
.svc-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in oklab, var(--background) 92%, transparent) 15%, color-mix(in oklab, var(--background) 35%, transparent)); }
:root[data-theme="light"] .svc-cta__bg { opacity: .2; }
.svc-cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; }
.svc-cta__copy p { color: var(--muted-foreground); margin-top: .75rem; max-width: 32rem; }
@media (min-width: 768px) {
  .svc-cta-section { padding: 0 2.5rem 7rem; }
  .svc-cta { grid-template-columns: 1fr auto; gap: 3rem; padding: 3rem 3.5rem; }
}
@media (max-width: 479px) { .svc-hero__actions .btn, .svc-cta__actions .btn { width: 100%; } .svc-card { padding: 1.5rem; } }

/* ==========================================================================
   v1.9.0 — Experience page (template-experience.php)
   ========================================================================== */
.experience-page .section { padding-block: 5rem; }
.experience-page .exp-hero { padding-top: 8rem; padding-bottom: 4rem; overflow: hidden; }
.exp-hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: .5; pointer-events: none; }
.exp-hero__grid { display: grid; gap: 3.5rem; align-items: center; }
.exp-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; margin-top: 1.5rem; max-width: 14ch; text-wrap: balance; }
.exp-hero__text { color: var(--muted-foreground); margin-top: 1.5rem; max-width: 34rem; font-size: 1rem; line-height: 1.7; }
.exp-hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; }
@media (min-width: 768px) {
  .experience-page .section { padding-block: 7rem; }
  .experience-page .exp-hero { padding-top: 10.5rem; padding-bottom: 5rem; }
  .exp-hero__text { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .exp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

/* Key numbers under the hero text */
.exp-kpis { margin: 2.25rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem 0; }
.exp-kpi { display: flex; flex-direction: column-reverse; gap: .35rem; padding: 0 1.5rem; border-left: 1px solid var(--border); }
.exp-kpi:first-child { padding-left: 0; border-left: 0; }
.exp-kpi__value { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.exp-kpi__label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }

/* Decorative hero visual */
.exp-visual { position: relative; width: min(100%, 28rem); aspect-ratio: 1; margin-inline: auto; }
.exp-visual__glow { position: absolute; inset: 6%; border-radius: 50%; background: var(--gradient-halo); filter: blur(34px); }
.exp-visual__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--primary) 40%, transparent); animation: orb-spin 60s linear infinite; }
.exp-visual__card { position: absolute; inset: 14% 10%; padding: 1.25rem 1.5rem; border-radius: 1.75rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1.25rem; }
.exp-visual__head { display: flex; gap: .35rem; }
.exp-visual__head i { width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 22%, transparent); }
.exp-visual__head i:first-child { background: color-mix(in oklab, var(--violet) 80%, transparent); }
.exp-visual__path { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; flex: 1; align-content: space-between; }
.exp-visual__path li { position: relative; display: grid; grid-template-columns: 1rem 1fr; gap: 1rem; align-items: center; }
.exp-visual__path li:not(:last-child)::after { content: ""; position: absolute; left: calc(.5rem - 1px); top: 1.35rem; bottom: -1.2rem; width: 2px; background: linear-gradient(to bottom, color-mix(in oklab, var(--primary) 60%, transparent), color-mix(in oklab, var(--violet) 20%, transparent)); }
.exp-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--primary); background: var(--background); }
.exp-visual__path .is-now .exp-dot { background: var(--gradient-accent); border-color: transparent; box-shadow: var(--shadow-glow); animation: exp-pulse 2.4s ease-in-out infinite; }
.exp-bars { display: grid; gap: .45rem; }
.exp-bars b { display: block; height: .5rem; border-radius: 99px; background: color-mix(in oklab, var(--foreground) 14%, transparent); }
.exp-bars b:first-child { background: color-mix(in oklab, var(--primary) 45%, transparent); }
.exp-chip--1 { top: 4%; right: 12%; }
.exp-chip--2 { bottom: 8%; left: 4%; animation-delay: -2.5s; color: var(--violet); }
.exp-chip--3 { top: 52%; right: -2%; animation-delay: -4.5s; }
@keyframes exp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 55%, transparent); } 50% { box-shadow: 0 0 0 .5rem transparent; } }

/* Timeline */
.exp-timeline__head .exp-desc { max-width: 34rem; }
.exp-tl { --exp-progress: 1; list-style: none; position: relative; margin: 3rem 0 0; padding: 0 0 0 2.25rem; display: grid; gap: 1.25rem; }
.exp-tl::before, .exp-tl::after { content: ""; position: absolute; left: calc(.575rem - 1px); top: .5rem; width: 2px; border-radius: 2px; }
.exp-tl::before { bottom: .5rem; background: var(--border); }
.exp-tl::after { height: calc((100% - 1rem) * var(--exp-progress)); background: linear-gradient(to bottom, var(--primary), var(--violet)); box-shadow: 0 0 14px color-mix(in oklab, var(--primary) 55%, transparent); }
.exp-item { position: relative; }
.exp-item__reveal { height: 100%; }
.exp-item__node { position: absolute; z-index: 1; left: -2.25rem; top: 1.7rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; background: var(--background); border: 2px solid var(--border); transition: border-color .4s, box-shadow .4s; }
.exp-item__node::after { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--border); transition: background .4s; }
.exp-item.is-reached .exp-item__node { border-color: var(--primary); box-shadow: var(--shadow-glow); }
.exp-item.is-reached .exp-item__node::after { background: var(--primary); }
.exp-card { display: grid; gap: 1.1rem; padding: 1.5rem; border-radius: 1.25rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 70%, var(--background)); transition: border-color .3s, box-shadow .5s var(--ease-out-soft), transform .4s var(--ease-out-soft); }
.exp-card:hover,
.exp-item.is-current .exp-card { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.exp-card__period { margin: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--foreground); }
.exp-card__org { margin: .3rem 0 0; font-size: .85rem; color: var(--muted-foreground); }
.exp-badge { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; padding: .2rem .65rem; border-radius: 99px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.exp-badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: exp-pulse 2.4s ease-in-out infinite; }
.exp-card__main h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
.exp-card__main p { margin: .6rem 0 0; max-width: 38rem; color: var(--muted-foreground); font-size: .9rem; line-height: 1.65; }
.exp-card__side { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }
.exp-card__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.exp-card__icon .zf-icon { width: 1.3rem; height: 1.3rem; }
.exp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.exp-tags li { border: 1px solid var(--border); border-radius: 99px; padding: .25rem .65rem; font-size: .72rem; color: var(--muted-foreground); }
@media (min-width: 900px) {
  .exp-tl { padding-left: 3rem; }
  .exp-tl::before, .exp-tl::after { left: calc(.8rem - 1px); }
  .exp-item__node { left: -3rem; top: 2rem; width: 1.6rem; height: 1.6rem; }
  .exp-item__node::after { width: .55rem; height: .55rem; }
  .exp-card { grid-template-columns: minmax(9.5rem, .7fr) 1.8fr minmax(11rem, 1fr); gap: 0; padding: 1.5rem 0; align-items: stretch; }
  .exp-card > div { padding: 0 1.75rem; display: flex; flex-direction: column; justify-content: center; }
  .exp-card__main { border-inline: 1px solid var(--border); }
  .exp-card__side { align-items: flex-start; flex-wrap: nowrap; gap: .9rem; }
}

/* Tools & technologies */
.exp-tools-wrap { display: grid; gap: 2.5rem; align-items: start; }
.exp-tools-section .exp-desc { max-width: 26rem; }
.exp-tools-btn { margin-top: 1.75rem; }
.exp-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.exp-tool { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .85rem .95rem; border-radius: .9rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 65%, var(--background)); font-size: .85rem; transition: border-color .3s, transform .4s var(--ease-out-soft), box-shadow .4s; }
.exp-tool span:last-child { overflow-wrap: anywhere; }
.exp-tool:hover { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.exp-tool__mono { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 28%, transparent); }
@media (min-width: 640px) { .exp-tools { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .exp-tools-wrap { grid-template-columns: .8fr 1.5fr; gap: 4rem; } }
@media (min-width: 1200px) { .exp-tools { grid-template-columns: repeat(4, 1fr); } }

/* Numbers band */
.exp-numbers-section { padding: 0 1.5rem 5rem; }
.exp-numbers-reveal { max-width: var(--container); margin: 0 auto; }
.exp-numbers { display: grid; overflow: hidden; border-radius: 1.75rem; border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--surface) 60%, var(--background)); box-shadow: var(--shadow-glow); }
.exp-numbers__head { padding: 1.75rem; }
.exp-numbers__head h2 { margin-top: 1rem; font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: 1.1; }
.exp-numbers__list { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.exp-numbers__item { display: flex; flex-direction: column-reverse; justify-content: center; gap: .4rem; padding: 1.5rem 1.25rem; border-top: 1px solid var(--border); }
.exp-numbers__item:nth-child(even) { border-left: 1px solid var(--border); }
.exp-numbers__value { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.exp-numbers__label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }
@media (min-width: 768px) { .exp-numbers-section { padding: 0 2.5rem 7rem; } }
@media (min-width: 1024px) {
  .exp-numbers { grid-template-columns: minmax(16rem, .8fr) 2fr; }
  .exp-numbers__head { display: flex; flex-direction: column; justify-content: center; padding: 2.25rem 2.5rem; }
  .exp-numbers__list { grid-template-columns: repeat(4, 1fr); }
  .exp-numbers__item { border-top: 0; border-left: 1px solid var(--border) !important; padding: 2rem 1.5rem; }
}

/* Home page: "View full experience" button */
.exp-more { margin-top: 2.5rem; }

@media (max-width: 479px) { .exp-hero__actions .btn { width: 100%; } .exp-card { padding: 1.25rem; } .exp-kpi { padding: 0 1rem; } }
@media (prefers-reduced-motion: reduce) {
  .exp-visual__ring, .exp-badge::before, .exp-visual__path .is-now .exp-dot { animation: none; }
  .exp-card, .exp-tool, .exp-item__node { transition: none; }
}

/* ==========================================================================
   v1.11.0 — Contact page (template-contact.php)
   ========================================================================== */
.contact-page .section { padding-block: 5rem; }

/* Hero */
.contact-page .ct-hero { padding-top: 8rem; padding-bottom: 3rem; overflow: hidden; }
.ct-hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: .5; pointer-events: none; }
.ct-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.ct-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; margin-top: 1.5rem; max-width: 12ch; text-wrap: balance; }
.ct-hero__text { color: var(--muted-foreground); margin-top: 1.5rem; max-width: 34rem; line-height: 1.7; }
.ct-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .875rem; }
.ct-points { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.ct-point, .ct-fact { display: flex; align-items: center; gap: .85rem; }
.ct-point__icon {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.ct-point__icon .zf-icon { width: 1.15rem; height: 1.15rem; }
.ct-point__text strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.ct-point__text small { display: block; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.4; margin-top: .1rem; }

/* Hero visual: envelope, the letter rises once on load */
.ct-visual { position: relative; width: min(100%, 17rem); aspect-ratio: 1; margin-inline: auto; }
.ct-visual__glow { position: absolute; inset: 6%; border-radius: 50%; background: var(--gradient-halo); filter: blur(34px); }
.ct-visual__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--primary) 40%, transparent); animation: orb-spin 60s linear infinite; }
.ct-envelope { position: absolute; left: 6%; top: 12%; width: 88%; height: auto; overflow: visible; animation: float-soft 8s ease-in-out infinite; filter: drop-shadow(0 24px 40px color-mix(in oklab, var(--primary) 30%, transparent)); }
.ct-env__back { fill: color-mix(in oklab, var(--surface-2) 92%, var(--primary)); stroke: url(#ct-env-grad); stroke-width: 1.5; }
.ct-env__letter { animation: ct-letter-rise 1.2s var(--ease-out-soft) .4s both; }
.ct-env__letter > rect:first-child { fill: #fafafa; stroke: color-mix(in oklab, var(--primary) 45%, transparent); stroke-width: 1; }
.ct-env__line { fill: color-mix(in oklab, #777777 28%, transparent); }
.ct-env__line--a { fill: color-mix(in oklab, var(--primary) 70%, transparent); }
.ct-env__front { fill: color-mix(in oklab, var(--surface-2) 96%, var(--primary)); stroke: url(#ct-env-grad); stroke-width: 1.5; stroke-linejoin: round; }
.ct-env__flap { fill: none; stroke: url(#ct-env-grad); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
@keyframes ct-letter-rise { from { transform: translateY(58px); } to { transform: translateY(0); } }
.ct-chip--1 { top: 4%; right: 8%; }
.ct-chip--2 { bottom: 6%; left: 2%; animation-delay: -2.5s; color: var(--violet); }
.ct-chip--3 { top: 50%; right: -4%; animation-delay: -4.5s; }

/* Form + ways to reach me */
.ct-main__grid { display: grid; gap: 1.5rem; align-items: start; }
.ct-form { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: 2rem; box-shadow: var(--shadow-card); }
.ct-form__head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; }
.ct-form__head p { color: var(--muted-foreground); margin-top: .75rem; max-width: 30rem; line-height: 1.6; font-size: .9375rem; }
.ct-form__row { display: grid; gap: 1.5rem; }
.ct-field label, .ct-topics legend { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .5rem; padding: 0; }
.ct-field abbr { color: var(--primary); text-decoration: none; }
.ct-optional { color: var(--muted-foreground); font-weight: 400; }
.ct-form .field:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent); }
.ct-form .field:user-invalid { border-color: var(--danger); }
.ct-form textarea.field { margin-top: 0; resize: vertical; min-height: 9rem; line-height: 1.6; }
.ct-form select.field:invalid { color: var(--foreground); }
.ct-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-topics__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-topic { position: relative; }
.ct-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ct-topic span {
  display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; font-size: .8125rem; cursor: pointer;
  border: 1px solid var(--border); color: var(--muted-foreground); background: color-mix(in oklab, var(--surface) 40%, transparent);
  transition: border-color .2s, color .2s, background-color .2s;
}
.ct-topic:hover span { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.ct-topic input:checked + span { color: var(--foreground); border-color: var(--primary); background: color-mix(in oklab, var(--primary) 18%, transparent); }
.ct-topic input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-form__foot { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.ct-form .btn { margin: 0; width: 100%; padding: 1rem 1.75rem; }
.ct-form .btn[disabled] { opacity: .6; cursor: wait; }
.ct-form__note { display: flex; align-items: center; gap: .5rem; color: var(--muted-foreground); font-size: .8125rem; }
.ct-status { margin: 0; padding: .9rem 1.1rem; border-radius: 1rem; font-size: .875rem; line-height: 1.5; border: 1px solid var(--border); }
.ct-status strong { display: block; }
.ct-status.is-success { border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.ct-status.is-error { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, transparent); }

.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ct-card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 1.35rem;
  border-radius: 1.5rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 55%, transparent);
  transition: border-color .25s, background-color .25s;
}
.ct-card:has(.ct-card__link):hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--surface-2) 70%, transparent); }
.ct-card__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--primary);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, transparent), color-mix(in oklab, var(--violet) 6%, transparent));
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
}
.ct-card__icon .zf-icon { width: 1.25rem; height: 1.25rem; }
.ct-card__body { min-width: 0; }
.ct-card__label { color: var(--muted-foreground); font-size: .75rem; margin-bottom: .15rem; }
.ct-card__link, .ct-card__value { display: block; font-weight: 500; font-size: .9375rem; overflow-wrap: anywhere; }
.ct-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 1.5rem; }
.ct-card__link:focus-visible { outline: none; }
.ct-card__link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-card__meta { color: var(--muted-foreground); font-size: .8125rem; margin-top: .25rem; }
.ct-card__go { color: var(--muted-foreground); transition: color .2s, transform .2s; }
.ct-card:hover .ct-card__go { color: var(--foreground); transform: translate(2px, -2px); }
.ct-card__copy {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px;
  font-size: .75rem; background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); transition: color .2s, border-color .2s, background-color .2s;
}
.ct-card__copy:hover { color: var(--foreground); background: color-mix(in oklab, var(--surface-2) 80%, transparent); }
.ct-card__copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-card__copy.is-copied { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); }
.ct-card--links { grid-template-columns: auto 1fr; align-items: start; }
.ct-links { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-links a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px; font-size: .8125rem;
  border: 1px solid var(--border); color: var(--muted-foreground); transition: color .2s, border-color .2s;
}
.ct-links a:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.ct-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-links .zf-icon { width: .8rem; height: .8rem; }

/* Remote work + FAQ */
.ct-info__grid { display: grid; gap: 1.5rem; align-items: stretch; }
.ct-remote-wrap, .ct-faq-wrap { display: flex; }
.ct-remote, .ct-faq { width: 100%; border-radius: 2rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 55%, transparent); padding: 1.5rem; }
.ct-h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; }
.ct-remote { display: grid; gap: 1.5rem; align-items: center; }
.ct-globe { width: min(100%, 15rem); margin-inline: auto; }
.ct-globe svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 26px color-mix(in oklab, var(--primary) 35%, transparent)); }
.ct-globe__sphere { fill: color-mix(in oklab, var(--primary) 9%, transparent); stroke: color-mix(in oklab, var(--primary) 45%, transparent); stroke-width: 1.2; }
.ct-globe__grid * { fill: none; stroke: color-mix(in oklab, var(--primary) 30%, transparent); stroke-width: 1; }
.ct-globe__arcs path { fill: none; stroke: var(--violet); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .8; }
.ct-globe__nodes circle { fill: var(--primary); }
.ct-globe__home { fill: var(--violet); }
.ct-globe__pulse { fill: var(--violet); opacity: .5; transform-box: fill-box; transform-origin: center; animation: ct-pulse 2.8s ease-out infinite; }
@keyframes ct-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(4); opacity: 0; } }
.ct-remote__text { color: var(--muted-foreground); margin-top: 1rem; line-height: 1.65; font-size: .9375rem; max-width: 32rem; }
.ct-facts { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }

.ct-faq__title { margin-bottom: 1.25rem; }
.ct-faq__list { display: grid; gap: .625rem; }
.ct-faq__item { border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in oklab, var(--surface) 40%, transparent); transition: border-color .2s; }
.ct-faq__item[open] { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.ct-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.15rem; cursor: pointer;
  font-size: .9rem; font-weight: 500; list-style: none; border-radius: 1rem;
}
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-faq__icon { position: relative; flex: none; width: .9rem; height: .9rem; color: var(--muted-foreground); }
.ct-faq__icon::before, .ct-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease-out-soft); }
.ct-faq__icon::after { transform: rotate(90deg); }
.ct-faq__item[open] .ct-faq__icon { color: var(--primary); }
.ct-faq__item[open] .ct-faq__icon::after { transform: rotate(0); }
.ct-faq__answer { padding: 0 1.15rem 1.1rem; }
.ct-faq__answer p { color: var(--muted-foreground); font-size: .875rem; line-height: 1.7; max-width: 38rem; }
.ct-faq__item[open] .ct-faq__answer { animation: rise-in .35s var(--ease-out-soft); }
.ct-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 640px) {
  .ct-form__row { grid-template-columns: repeat(2, 1fr); }
  .ct-points { grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.1rem 2rem; }
  .ct-remote { grid-template-columns: 14rem 1fr; gap: 2rem; }
  .ct-globe { margin: 0; }
  .ct-form__foot { flex-direction: row; align-items: center; gap: 1.5rem; }
  .ct-form .btn { width: auto; min-width: 13rem; }
}
@media (min-width: 768px) {
  .contact-page .section { padding-block: 7rem; }
  .contact-page .ct-hero { padding-top: 10.5rem; padding-bottom: 4rem; }
  .contact-page .ct-main { padding-block: 5rem; }
  .ct-hero__text { font-size: 1.125rem; }
  .ct-form { padding: 2.5rem; }
  .ct-remote, .ct-faq { padding: 2rem; }
  .ct-visual { width: min(100%, 24rem); }
}
@media (min-width: 1024px) {
  .ct-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
  .ct-points { grid-template-columns: 1fr; }
  .ct-main__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; }
  .ct-main__side { position: sticky; top: 6.5rem; }
  .ct-info__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
@media (min-width: 1200px) { .ct-points { grid-template-columns: repeat(3, auto); } }
@media (max-width: 479px) {
  .ct-hero__actions .btn, .ct-cta__actions .btn { width: 100%; }
  .ct-card { grid-template-columns: auto 1fr; }
  .ct-card__copy { grid-column: 1 / -1; justify-self: start; }
  .ct-card__go { display: none; }
  .ct-chip { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-visual__ring, .ct-envelope, .ct-env__letter, .ct-globe__pulse, .ct-faq__item[open] .ct-faq__answer { animation: none; }
}

/* =====================================================================
   Single project / case study page (single-project-case.php)
   ===================================================================== */
.case { position: relative; overflow: clip; }
.eyebrow--primary { color: var(--primary); letter-spacing: 0.32em; }
.cs-h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.035em; margin-top: 0.75rem; }
.cs-h2--sm { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ---------- Hero ---------- */
.cs-hero { position: relative; padding: 8.5rem 1.5rem 5rem; isolation: isolate; }
.cs-hero__aurora { position: absolute; inset: -10% -10% auto -10%; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 40% at 78% 38%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%),
    radial-gradient(34% 34% at 90% 70%, color-mix(in oklab, var(--violet) 10%, transparent), transparent 70%),
    radial-gradient(30% 30% at 8% 12%, color-mix(in oklab, var(--primary) 6%, transparent), transparent 70%);
  animation: cs-aurora 14s ease-in-out infinite alternate; }
@keyframes cs-aurora { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 3%, 0) scale(1.06); } }
.cs-hero__grid { display: grid; gap: 3rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .cs-hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; } }
.cs-back { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 2.25rem; transition: color .25s; }
.cs-back svg { width: 1rem; height: 1rem; transform: scaleX(-1); transition: transform .3s var(--ease-out-soft); }
.cs-back:hover { color: var(--foreground); }
.cs-back:hover svg { transform: scaleX(-1) translateX(4px); }
.cs-hero__title { font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.04em; margin-top: 1rem; max-width: 12ch; }
.cs-hero__text { margin-top: 1.5rem; max-width: 34rem; color: var(--muted-foreground); font-size: 1.02rem; line-height: 1.7; }
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.cs-live { position: relative; overflow: hidden; }
.cs-live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: cs-sheen 3.8s ease-in-out infinite; }
@keyframes cs-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cs-live svg { width: 1rem; height: 1rem; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem; margin: 3rem 0 0; padding: 0; }
.cs-stat { display: flex; flex-direction: column-reverse; gap: 0.2rem; }
.cs-stat dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1; }
.cs-stat dt { font-size: 0.7rem; color: var(--muted-foreground); max-width: 7rem; line-height: 1.3; }

/* Hero scene: orbit ring + floating device */
.cs-scene { position: relative; min-height: 26rem; display: grid; place-items: center; perspective: 1400px; --mx: 0; --my: 0; }
@media (min-width: 62rem) { .cs-scene { min-height: 34rem; } }
.cs-ring { position: absolute; width: min(36rem, 92%); aspect-ratio: 1; border-radius: 50%; right: -2%; top: 2%;
  background: conic-gradient(from 0deg, transparent 0 30%, var(--primary) 52%, var(--violet) 66%, transparent 80% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--primary) 80%, transparent)); animation: cs-spin 16s linear infinite; opacity: .95; }
.cs-ring--2 { width: min(30rem, 78%); right: 5%; top: 9%; animation-duration: 26s; animation-direction: reverse; opacity: .45; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-orbit { position: absolute; width: min(36rem, 92%); aspect-ratio: 1; right: -2%; top: 2%; animation: cs-spin 16s linear infinite; }
.cs-orbit i { position: absolute; top: 0; left: 50%; width: .65rem; height: .65rem; margin: -.32rem; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px var(--primary), 0 0 36px 10px var(--violet); }
.cs-stars span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .15; animation: cs-twinkle var(--d) ease-in-out var(--t) infinite; }
@keyframes cs-twinkle { 0%, 100% { opacity: .1; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.5); } }
.cs-float { position: relative; width: min(100%, 38rem); animation: cs-bob 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes cs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.cs-device { position: relative; border-radius: 1.4rem; padding: .7rem; background: linear-gradient(145deg, #2a2a2a, #0d0d0d); box-shadow: 0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 80px -20px color-mix(in oklab, var(--primary) 60%, transparent);
  transform: rotateY(calc(-16deg + var(--mx) * 9deg)) rotateX(calc(6deg - var(--my) * 7deg)) rotateZ(-1.5deg); transition: transform .35s var(--ease-out-soft); }
.cs-device--flat { transform: none; }
.cs-device__bar { display: flex; gap: .3rem; padding: .1rem .5rem .55rem; }
.cs-device__bar i { width: .42rem; height: .42rem; border-radius: 50%; background: rgba(255,255,255,.28); }
.cs-device__screen { position: relative; aspect-ratio: 16 / 10; border-radius: .8rem; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.cs-device__screen img { width: 100%; height: 100%; object-fit: cover; }
.cs-device__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--muted-foreground); }
.cs-device__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 48%, transparent 60%); transform: translateX(-100%); animation: cs-shine 6s ease-in-out infinite; pointer-events: none; }
@keyframes cs-shine { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.cs-badge { position: absolute; right: 6%; bottom: -1.1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: color-mix(in oklab, var(--surface) 70%, transparent); border: 1px solid var(--border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-medium); transform: translateZ(60px); }
.cs-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: cs-ping 1.8s ease-out infinite; }
@keyframes cs-ping { to { box-shadow: 0 0 0 .6rem rgba(52,211,153,0); } }

/* ---------- Gallery ---------- */
.cs-gallery { padding-left: 0; padding-right: 0; overflow: hidden; }
.cs-gallery > .section__inner { padding: 0 1.5rem; }
.cs-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 2.5rem; }
@media (min-width: 52rem) { .cs-head { grid-template-columns: 1fr 1fr; } }
.cs-head__side { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cs-head__side p { max-width: 24rem; color: var(--muted-foreground); font-size: .82rem; line-height: 1.6; }
.cs-arrows { display: flex; gap: .6rem; flex: none; }
.cs-arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 60%, transparent); transition: background .25s, border-color .25s, transform .25s; }
.cs-arrow svg { width: 1.05rem; height: 1.05rem; transform: scaleX(-1); }
.cs-arrow--next { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 18%, transparent); }
.cs-arrow--next svg { transform: none; }
.cs-arrow:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); transform: scale(1.06); }
.cs-stage { position: relative; height: var(--cs-h, 22rem); margin-top: .5rem; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.cs-stage.is-drag { cursor: grabbing; }
.cs-slide { position: absolute; left: 50%; top: 0; margin: 0; width: var(--cs-w, 56vw); height: 100%; border-radius: 1.25rem; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card);
  transform: translateX(calc(-50% + var(--cs-x, 0px))) scale(var(--cs-sc, 1)); opacity: var(--cs-o, 1);
  transition: transform .7s var(--ease-out-soft), opacity .5s ease, border-color .4s, box-shadow .4s; backface-visibility: hidden; }
.cs-stage.is-drag .cs-slide { transition: none; }
/* v1.14.6 — looping slide leaves in the travel direction, then re-enters from the opposite side */
.cs-slide.is-wrap { transition: transform .3s var(--ease-out-soft), opacity .3s ease, border-color .4s, box-shadow .4s; }
.cs-slide.is-snap { transition: none !important; }
.cs-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; }
.cs-slide.is-active { cursor: zoom-in; }
.cs-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--background) 55%, transparent), transparent 30%, transparent 70%, color-mix(in oklab, var(--background) 55%, transparent)); opacity: 0; transition: opacity .5s; pointer-events: none; }
.cs-slide:not(.is-active) { cursor: pointer; }
.cs-slide:not(.is-active)::after { opacity: 1; background: color-mix(in oklab, var(--background) 45%, transparent); }
.cs-slide.is-active { border-color: color-mix(in oklab, var(--primary) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent), 0 30px 80px -30px color-mix(in oklab, var(--primary) 45%, transparent), var(--shadow-card); }
.cs-slide.is-far { pointer-events: none; }
.cs-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1.4rem) / 5); gap: 1.4rem; margin-top: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px; scrollbar-width: none; }
.cs-thumbs::-webkit-scrollbar { display: none; }
.cs-thumb { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 16 / 9; border-radius: .8rem; overflow: hidden; border: 1px solid var(--border); background: var(--surface); scroll-snap-align: start; position: relative; opacity: .6; transition: opacity .3s, border-color .3s, transform .3s, box-shadow .3s; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-thumb:hover { opacity: 1; transform: translateY(-3px); }
.cs-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cs-thumb.is-active { opacity: 1; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 10px 30px -10px color-mix(in oklab, var(--primary) 70%, transparent); }
@media (max-width: 40rem) { .cs-thumbs { grid-auto-columns: calc((100% - 2 * .6rem) / 3); gap: .6rem; } }

/* ---------- About ---------- */
.cs-about__grid { display: grid; gap: 3.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .cs-about__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.cs-about__text { margin-top: 1.5rem; color: var(--muted-foreground); line-height: 1.75; max-width: 34rem; }
.cs-about__text p + p { margin-top: 1rem; }
.cs-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; margin: 2.25rem 0 0; padding: 1.5rem; max-width: 34rem; border-radius: 1.1rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 60%, transparent); }
@media (max-width: 30rem) { .cs-info { grid-template-columns: 1fr; } }
.cs-info__item { display: flex; align-items: center; gap: .85rem; }
.cs-info__icon { width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center; border-radius: .7rem; color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 28%, transparent); }
.cs-info__icon svg { width: 1.1rem; height: 1.1rem; }
.cs-info dt { font-size: .68rem; color: var(--muted-foreground); }
.cs-info dd { margin: .1rem 0 0; font-size: .86rem; font-weight: 600; }
.cs-about__visual { position: relative; min-height: 24rem; }
@media (min-width: 62rem) { .cs-about__visual { min-height: 30rem; } }
.cs-about__glow { position: absolute; inset: 8% 0 0 12%; background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 38%, transparent), transparent 75%); filter: blur(30px); animation: cs-aurora 9s ease-in-out infinite alternate; }
.cs-tablet { position: absolute; border-radius: 1.2rem; padding: .55rem; background: linear-gradient(145deg, #2a2a2a, #0d0d0d); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12) inset; }
.cs-tablet__screen { aspect-ratio: 4 / 3; border-radius: .75rem; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.cs-tablet__screen img { width: 100%; height: 100%; object-fit: cover; }
.cs-tablet--front { width: 74%; left: 2%; top: 8%; transform: rotate(-4deg); animation: cs-tab-a 8s ease-in-out infinite; }
.cs-tablet--back { width: 54%; right: 0; top: 26%; transform: rotate(6deg); opacity: .92; animation: cs-tab-b 9s ease-in-out infinite; }
@keyframes cs-tab-a { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-12px); } }
@keyframes cs-tab-b { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(5deg) translateY(10px); } }

/* ---------- Functionality showcase ---------- */
.cs-func { margin-top: 6rem; }
.cs-func__grid { display: grid; gap: 2rem; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) { .cs-func__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; } }
.cs-func__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cs-feat { all: unset; box-sizing: border-box; position: relative; display: flex; gap: .95rem; align-items: flex-start; width: 100%; padding: 1rem 1.1rem; border-radius: 1rem; cursor: pointer; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 45%, transparent); overflow: hidden; transition: background .3s, border-color .3s, transform .3s; }
.cs-feat:hover { transform: translateX(4px); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.cs-feat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cs-feat__icon { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: .75rem; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); transition: background .3s, color .3s; }
.cs-feat__icon svg { width: 1.15rem; height: 1.15rem; }
.cs-feat__body { display: block; min-width: 0; }
.cs-feat strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .96rem; letter-spacing: -.01em; }
.cs-feat__text { display: block; color: var(--muted-foreground); font-size: .84rem; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out-soft), opacity .4s, margin .4s; }
.cs-feat.is-active { background: color-mix(in oklab, var(--primary) 10%, var(--surface)); border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.cs-feat.is-active .cs-feat__icon { background: var(--gradient-accent); color: var(--primary-foreground); }
.cs-feat.is-active .cs-feat__text { max-height: 8rem; opacity: 1; margin-top: .35rem; }
.cs-feat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.cs-feat__bar i { display: block; height: 100%; width: 0; background: var(--gradient-accent); }
.cs-feat.is-active .cs-feat__bar i { animation: cs-progress var(--cs-dur, 5s) linear forwards; }
.cs-func.is-paused .cs-feat.is-active .cs-feat__bar i { animation: none; width: 0; }
.cs-func.is-locked .cs-feat.is-active .cs-feat__bar i { animation: none; width: 100%; }
@keyframes cs-progress { from { width: 0; } to { width: 100%; } }
.cs-func__preview { position: relative; }
.cs-func__preview::before { content: ""; position: absolute; inset: 10% 5% -6%; background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 30%, transparent), transparent 75%); filter: blur(30px); z-index: -1; }
.cs-func__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .9s var(--ease-out-soft); }
.cs-func__shot.is-active { opacity: 1; transform: scale(1); }

/* ---------- Closing CTA ---------- */
.cs-cta-wrap { padding-top: 2rem; }
.cs-cta { position: relative; overflow: hidden; display: grid; gap: 2rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 1.5rem; border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  background: radial-gradient(60% 120% at 100% 50%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%), color-mix(in oklab, var(--surface) 70%, transparent); }
@media (min-width: 48rem) { .cs-cta { grid-template-columns: 1.2fr .8fr; } }
.cs-cta__copy p { margin: 1rem 0 1.75rem; color: var(--muted-foreground); max-width: 28rem; line-height: 1.6; }
.cs-cta__orb { position: relative; justify-self: center; width: 11rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc79a, var(--primary) 45%, #2b1200 80%); box-shadow: 0 0 70px color-mix(in oklab, var(--primary) 60%, transparent); animation: cs-bob 6s ease-in-out infinite; }
.cs-cta__orb::before, .cs-cta__orb::after { content: ""; position: absolute; inset: -22%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--violet) 60%, transparent); transform: rotateX(72deg) rotate(0deg); animation: cs-orbit-ring 9s linear infinite; }
.cs-cta__orb::after { inset: -38%; opacity: .5; animation-duration: 14s; animation-direction: reverse; }
@keyframes cs-orbit-ring { to { transform: rotateX(72deg) rotate(360deg); } }

/* Light theme tweaks */
:root[data-theme="light"] .cs-device, :root[data-theme="light"] .cs-tablet { box-shadow: 0 40px 70px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.2) inset; }
:root[data-theme="light"] .cs-stars span { background: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .cs-hero__aurora, .cs-ring, .cs-orbit, .cs-stars span, .cs-float, .cs-device__shine, .cs-live::after, .cs-badge i, .cs-tablet, .cs-about__glow, .cs-cta__orb, .cs-cta__orb::before, .cs-cta__orb::after { animation: none !important; }
  .cs-slide, .cs-func__shot, .cs-device { transition: none !important; }
}

/* v1.13.6 — Single project: tools & technologies as category tabs */
.cs-tools-main { min-width: 0; }
.cs-tabs__list { display: flex; flex-wrap: nowrap; gap: .5rem; margin: 0 0 1rem; padding: 0 0 .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cs-tabs__list::-webkit-scrollbar { display: none; }
.cs-tab { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 55%, transparent); color: var(--muted-foreground); font-family: var(--font-display); font-size: .85rem; font-weight: 500; white-space: nowrap; transition: color .3s, background .3s, border-color .3s, box-shadow .3s; }
.cs-tab em { font-style: normal; font-size: .7rem; line-height: 1; padding: .2rem .45rem; border-radius: 999px; background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.cs-tab:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.cs-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cs-tab.is-active { color: var(--primary-foreground); background: var(--gradient-accent); border-color: transparent; box-shadow: var(--shadow-glow); }
.cs-tab.is-active em { background: color-mix(in oklab, #000 22%, transparent); }
.cs-tabpanel[hidden] { display: none; }
.cs-tabpanel.is-active { animation: cs-tab-in .45s var(--ease-out-soft) both; }
@keyframes cs-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-tabpanel.is-active { animation: none; } .cs-tab { transition: none; } }

/* ======================================================================
   Section spacing (top & bottom): desktop 90px, tablet 70px, mobile 50px.
   Hero sections keep extra room at the top for the fixed header.
   Change the three --section-py values to adjust every page at once.
   ====================================================================== */
:root { --section-py: 50px; --header-clear: 5.5rem; }
@media (min-width: 768px)  { :root { --section-py: 70px; } }
@media (min-width: 1024px) { :root { --section-py: 90px; } }

body .section,
body .about-page .section, body .services-page .section,
body .experience-page .section, body .contact-page .section,
body .about-cta { padding-top: var(--section-py); padding-bottom: var(--section-py); }

body .svc-cta-section { padding-bottom: var(--section-py); }
body .cs-cta-wrap { padding-top: 2rem; }

body .about-hero, body .about-page .about-hero,
body .svc-hero, body .services-page .svc-hero,
body .exp-hero, body .experience-page .exp-hero,
body .ct-hero, body .contact-page .ct-hero,
body .cs-hero, body .section.projects-page, body .page-wrap {
  padding-top: calc(var(--header-clear) + var(--section-py));
  padding-bottom: var(--section-py);
}

/* v1.14.4 — Project gallery: top-centre crop + lightbox */
.cs-lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .3s ease; }
.cs-lb[hidden] { display: none; }
.cs-lb.is-open { opacity: 1; }
.cs-lb__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; }
.cs-lb__panel { position: relative; width: min(80vw, var(--container)); max-height: 90vh; transform: translateY(14px) scale(.98); transition: transform .35s var(--ease-out-soft); }
.cs-lb.is-open .cs-lb__panel { transform: none; }
.cs-lb__scroll { max-height: 90vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-radius: 1.1rem; border: 1px solid color-mix(in oklab, var(--primary) 55%, transparent); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent), 0 40px 120px -30px color-mix(in oklab, var(--primary) 45%, transparent); outline: none; scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
.cs-lb__img { display: block; width: 100%; height: auto; max-width: none; object-fit: cover; object-position: top center; }
.cs-lb__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; border: 1px solid var(--border); background: color-mix(in oklab, var(--background) 80%, transparent); color: var(--foreground); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.cs-lb__btn:hover, .cs-lb__btn:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); transform: scale(1.06); outline: none; }
.cs-lb__close { top: .75rem; right: 1.4rem; font-size: 1.6rem; line-height: 1; }
.cs-lb__nav { top: 50%; margin-top: -1.375rem; }
.cs-lb__nav svg { width: 1.05rem; height: 1.05rem; }
.cs-lb__nav--prev { left: -1.4rem; } .cs-lb__nav--prev svg { transform: scaleX(-1); }
.cs-lb__nav--next { right: -1.4rem; }
.cs-lb__count { position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%); margin: 0; font-size: .75rem; letter-spacing: .12em; color: var(--muted-foreground); }
html.cs-lb-open, html.cs-lb-open body { overflow: hidden; }
@media (max-width: 52rem) {
  .cs-lb__panel { width: 94vw; }
  .cs-lb__nav--prev { left: .5rem; } .cs-lb__nav--next { right: .5rem; }
  .cs-lb__close { right: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .cs-lb, .cs-lb__panel { transition: none !important; } }

/* ======================================================================
   Closing banners: gradient background + drifting particles (replaces the photo)
   ====================================================================== */
.about-cta__bg, .svc-cta__bg { opacity: 1 !important; background-image: none !important; }
.zf-cta-bg {
  background:
    radial-gradient(70% 140% at 90% 115%, color-mix(in oklab, var(--primary) 70%, transparent), transparent 65%),
    radial-gradient(50% 110% at 5% -15%, color-mix(in oklab, var(--violet) 32%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, var(--background)) 0%, var(--background) 55%, color-mix(in oklab, var(--primary) 26%, var(--background)) 100%) !important;
}
:root[data-theme="light"] .zf-cta-bg {
  background:
    radial-gradient(60% 120% at 88% 110%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 65%),
    radial-gradient(45% 90% at 8% -10%, color-mix(in oklab, var(--violet) 14%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--primary) 6%, var(--background)), var(--background) 60%) !important;
}
.zf-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* the old left-to-right dark wash is no longer needed; keep only a light one so text stays readable */
.svc-cta::before { background: linear-gradient(100deg, color-mix(in oklab, var(--background) 45%, transparent) 10%, transparent 75%); }
.about-cta::before { background: linear-gradient(to bottom, var(--background), transparent 30%, transparent 70%, var(--background)); }


/* ==========================================================================
   Light mode refinements (cream background, white cards, warm borders, orange accents)
   ========================================================================== */
:root[data-theme="light"] body {
  background:
    radial-gradient(60rem 30rem at 85% -8rem, color-mix(in oklab, var(--primary) 7%, transparent), transparent 70%),
    var(--background);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ecd9c4; }
:root[data-theme="light"] ::selection { background: color-mix(in oklab, var(--primary) 28%, transparent); }
:root[data-theme="light"] .glass,
:root[data-theme="light"] .btn--glass {
  background: color-mix(in oklab, #ffffff 82%, transparent);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
:root[data-theme="light"] .btn--glass:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
:root[data-theme="light"] .btn--primary { box-shadow: var(--shadow-glow); }
:root[data-theme="light"] .site-header.is-scrolled .site-header__bar {
  background: color-mix(in oklab, #ffffff 80%, transparent);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
:root[data-theme="light"] .section--tint { background: color-mix(in oklab, var(--surface-2) 45%, transparent); }
:root[data-theme="light"] .hero__particles span { background: var(--primary); opacity: .28; }
:root[data-theme="light"] .field { background: #ffffff; border-color: var(--border); }
:root[data-theme="light"] .field:focus { border-color: var(--primary); }
:root[data-theme="light"] .site-footer { background: color-mix(in oklab, var(--surface-2) 35%, transparent); }
:root[data-theme="light"] .stat { border-color: #efd9c2; }
:root[data-theme="light"] .eyebrow { color: #55646b; }

/* Testimonial carousel */
:root[data-theme="light"] .aaw-card-face { border-color: color-mix(in oklab, var(--primary) 22%, var(--border)); }
:root[data-theme="light"] .aaw-card-front,
:root[data-theme="light"] .aaw-card-back {
  background: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--primary) 6%, #ffffff));
  box-shadow: var(--shadow-medium);
}
:root[data-theme="light"] .aaw-carousel-nav {
  background: #ffffff; box-shadow: var(--shadow-soft);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
:root[data-theme="light"] .aaw-carousel-nav:hover,
:root[data-theme="light"] .aaw-carousel-nav:focus-visible { background: var(--primary); }
:root[data-theme="light"] .aaw-carousel-dots span { background: #ecd9c4; }