/* ============================================================
   OASIS CREATIONS - style.css
   Design System: "Oasis Deep-Light System"
   
   Sections:
   1. Google Fonts Import
   2. CSS Custom Properties (Design Tokens)
   3. CSS Reset
   4. Base Styles
   5. Typography
   6. Layout
   7. Navigation
   8. Hero Section
   9. Work Section (Alternating Grid)
   10. About Section
   11. Blog Section
   12. Contact Section
   13. Footer
   14. Custom Cursor
   15. Modal System
   16. Tags & Buttons
   17. Animations & Keyframes
   18. Scroll Reveal
   19. Responsive (Tablet ≤ 768px, Mobile ≤ 480px)
   20. Utility & Scrollbar
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
/* Fonts loaded via <link> in HTML head - no duplicate @import needed */

/* ============================================================
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  /* ── Core Colors ── */
  --bg-base:           #0A0A0A;
  --bg-elevated:       #111111;
  --bg-surface:        #131313;
  --bg-container:      #201f1f;
  --bg-container-high: #2a2a2a;
  --bg-container-highest: #353534;

  --text-primary:      #F0EDE8;
  --text-secondary:    #A2A29E; /* WCAG AA ~8:1 on deep base */
  --text-muted:        #8B8880; /* WCAG AA ~5.5:1 on deep base */

  --border-default:    #222220;
  --border-subtle:     rgba(240, 237, 232, 0.1);

  /* ── Accent Colors: exactly four families (green, blue, brown, magenta) ── */
  --accent-green:      #3DBF6E;  /* Primary CTA, growth and social work */
  --accent-blue:       #6EC4C8;  /* Web design and ecommerce work */
  --accent-brown:      #C8944A;  /* Brand identity and packaging work */
  --accent-magenta:    #CC6AA5;  /* Music, advocacy and experimental notes */
  --accent-palm-bright:  var(--accent-green);
  --accent-oasis-water:  var(--accent-blue);
  --accent-sand-warm:    var(--accent-brown);
  --accent-palm-deep:    #1D5E2A;  /* Hover state, kept for button depth */
  --accent-sand-light:   var(--accent-brown);

  /* ── Typography ── */
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'Space Grotesk', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ── Spacing ── */
  --space-sm:      8px;
  --space-md:      16px;
  --space-lg:      24px;
  --space-xl:      48px;
  --space-2xl:     80px;
  --space-3xl:     128px;
  --gutter:        24px;
  --margin-desktop: 64px;
  --margin-tablet:  32px;
  --margin-mobile:  24px;
  --container-max:  1440px;

  /* ── Border Radius ── */
  /* Radius rule: 4px (--radius-default) is the minimum for interactive
     elements; use md/lg/xl for cards and media, full pill for CTAs. */
  --radius-default: 4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-full:   9999px;

  /* ── Transitions ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:  200ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-modal: 600ms;

  /* ── Theming prep (dark only, no visual change) ── */
  --surface-0:       var(--bg-base);
  --surface-1:       var(--bg-surface);

  /* ── Nav ── */
  --nav-height:    72px;
  --nav-blur:      20px;
}

/* Theming prep: advertise dark color scheme (no visual change, no light theme). */
:root { color-scheme: dark; }

/* ============================================================
   3. CSS RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

/* ============================================================
   4. BASE STYLES
   ============================================================ */
html {
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-base);
  overflow-x: clip;
}

/* ── Editorial Paragraph Styling ── */
p {
  line-height: 1.7;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Selection highlight */
::selection {
  background: rgba(61, 191, 110, 0.2);
  color: var(--text-primary);
}

/* Body scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */

/* ── Hero Name ── */
.text-hero-name {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 11vw, 160px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Hero Prefix ("HI, I'M") ── */
.text-hero-prefix {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8.5vw, 120px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Headline XL (Section Titles) ── */
.text-headline-xl {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Headline Card (Work Card Titles) ── */
.text-headline-card {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Blog Card Titles ── */
.text-headline-blog {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Subheading (Blog modal) ── */
.text-subheading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ── Eyebrow / Labels ── */
.text-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Nav Links ── */
.text-nav {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── Body Large ── */
.text-body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

/* ── Body Medium ── */
.text-body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* ── Blog Body (larger for reading) ── */
.text-blog-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}

/* ── Tag / Mono ── */
.text-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   6. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}

@media (min-width: 769px) {
  .container {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.section {
  margin-bottom: var(--space-3xl);
}

.section-divider {
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   7. NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--duration-base) ease,
              backdrop-filter var(--duration-base) ease;
}

.nav--scrolled {
  background: rgba(10, 10, 10, 0.8);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
}

@media (min-width: 769px) {
  .nav__inner {
    padding: 0 var(--margin-desktop);
  }
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity var(--duration-base) ease;
}

.nav__logo:hover {
  opacity: 0.8;
}

.nav__logo-img {
  height: 40px;
  width: auto;
}

/* Logo monogram: simple SA lettermark, no box or border, reads as a logo */
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto; /* Push links to the right */
}

.nav__link {
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
  position: relative;
}

.nav__link:hover,
.nav__link--active {
  color: var(--accent-palm-bright);
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-palm-bright);
}

/* Mobile nav toggle (hidden by default, shown on mobile) */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: transform var(--duration-base) ease;
}

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nav-height));
  padding-top: calc(var(--nav-height) + 24px);
  padding-bottom: var(--space-lg);
  border-bottom: none; /* Border added via .hero--scrolled-past class by JS */
  position: relative;
  overflow: hidden;
}

.hero--scrolled-past {
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 769px) {
  .hero {
    flex-direction: row;
    align-items: stretch;
    padding-top: calc(var(--nav-height) + 16px);
  }
}

.hero__text {
  flex: 1 1 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding-right: var(--space-lg);
  min-height: 0; /* Allow flex child to shrink */
  will-change: transform;
}

.hero__heading {
  margin-bottom: var(--space-md);
}

/* Each line of the hero text wraps for animation */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: charReveal 0.8s var(--ease-out-expo) forwards;
}

.hero__subtext {
  color: var(--text-secondary);
  max-width: 520px;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-out-expo) 1.2s forwards;
}

.hero__footnote {
  position: absolute;
  bottom: var(--space-lg);
  left: 0;
  color: var(--text-secondary);
  opacity: 0;
  animation: fadeSlideUp 0.6s var(--ease-out-expo) 1.6s forwards;
  max-width: 420px;
  font-size: 10px;
  line-height: 14px;
}

/* ── Carousel ── */
.hero__carousel {
  flex: 0 0 38%;
  max-width: 440px;
  overflow: hidden;
  position: relative;
  margin-top: var(--space-lg);
  will-change: transform;
}

@media (min-width: 769px) {
  .hero__carousel {
    height: auto;
    margin-top: 0;
  }
}

.hero__carousel-fade--top,
.hero__carousel-fade--bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 5;
  pointer-events: none;
}

.hero__carousel-fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-base), transparent);
}

.hero__carousel-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-base), transparent);
}

.hero__carousel-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  animation: carouselScrollUp 26s linear infinite;
}

.hero__carousel:hover .hero__carousel-track {
  animation-play-state: paused;
}

.hero__carousel-item {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.hero__carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity var(--duration-fast) ease;
  opacity: 0.8;
}

.hero__carousel-item:hover img {
  opacity: 1;
}

/* Hero visual side: soft tinted panel plus glow field so the side never reads empty */
.hero__carousel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-green) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent-brown) 6%, var(--bg-surface));
  padding: 12px;
}
.hero__carousel::before {
  content: '';
  position: absolute;
  inset: -40px -30px;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent-green) 16%, transparent), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.hero__carousel-track,
.hero__carousel-item {
  position: relative;
  z-index: 1;
}
:root[data-theme="light"] .hero__carousel {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-brown) 16%, transparent), transparent 62%),
    color-mix(in srgb, var(--accent-brown) 8%, #FFFFFF);
  border-color: rgba(22, 19, 14, 0.12);
  box-shadow: 0 12px 32px rgba(22, 19, 14, 0.08);
}
:root[data-theme="light"] .hero__carousel::before {
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent-brown) 22%, transparent), transparent 70%);
}

/* ============================================================
   9. WORK SECTION (ALTERNATING GRID)
   ============================================================ */
.work__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 769px) {
  .work__grid {
    gap: 80px;
  }
}

.work__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 769px) {
  .work__row {
    flex-direction: row;
    gap: var(--gutter);
  }

  /* Reverse even rows: text left, image right */
  .work__row:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.work__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (min-width: 769px) {
  .work__image-wrap {
    width: 50%;
    flex-shrink: 0;
  }
}

.work__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 150ms ease-out;
  will-change: transform;
}

.work__row:hover .work__image {
  transform: scale(1.02);
}

.work__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: transform 120ms ease-out, opacity 120ms ease-out;
  position: relative;
  cursor: none;
}

@media (min-width: 769px) {
  .work__card {
    width: 50%;
    padding: var(--space-xl) var(--space-xl);
  }
}

.work__card-tag {
  margin-bottom: var(--space-md);
}

.work__card-title {
  margin-bottom: var(--space-md);
  transition: color var(--duration-base) ease;
}

.work__card-desc {
  color: var(--text-secondary);
  max-width: 440px;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.work__card-arrow {
  font-family: 'Material Symbols Outlined';
  font-size: 40px;
  font-weight: 300;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 120ms ease-out,
              transform 120ms ease-out;
  position: absolute;
  right: var(--space-xl);
  top: 50%;
  margin-top: -20px;
}

.work__row:hover .work__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Per-project accent wash backgrounds: four families, resting 5% / hover 10% */
.work__card[data-accent="brown"]   { background: color-mix(in srgb, var(--accent-brown) 5%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-brown) 25%, transparent); }
.work__card[data-accent="green"] { background: color-mix(in srgb, var(--accent-green) 5%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-green) 25%, transparent); }
.work__card[data-accent="blue"] { background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-blue) 25%, transparent); }
.work__card[data-accent="magenta"]  { background: color-mix(in srgb, var(--accent-magenta) 5%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-magenta) 25%, transparent); }

.work__row:hover .work__card[data-accent="brown"]   { background: color-mix(in srgb, var(--accent-brown) 10%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-brown) 60%, transparent); }
.work__row:hover .work__card[data-accent="green"] { background: color-mix(in srgb, var(--accent-green) 10%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-green) 60%, transparent); }
.work__row:hover .work__card[data-accent="blue"] { background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-blue) 60%, transparent); }
.work__row:hover .work__card[data-accent="magenta"]  { background: color-mix(in srgb, var(--accent-magenta) 10%, var(--bg-base)); border-color: color-mix(in srgb, var(--accent-magenta) 60%, transparent); }

/* Arrow color per accent */
.work__card[data-accent="brown"]   .work__card-arrow { color: var(--accent-brown); }
.work__card[data-accent="green"] .work__card-arrow { color: var(--accent-green); }
.work__card[data-accent="blue"] .work__card-arrow { color: var(--accent-blue); }
.work__card[data-accent="magenta"]  .work__card-arrow { color: var(--accent-magenta); }

/* ============================================================
   10. ABOUT SECTION
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: center;
}

@media (min-width: 769px) {
  .about {
    grid-template-columns: 1fr 1fr;
  }
}

.about__photo-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-container-highest);
  justify-self: center;
}

@media (min-width: 769px) {
  .about__photo-wrap {
    max-width: 360px;
  }
}

/* NO blend mode, NO opacity reduction - per user mandate #2 */
.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__content {
  display: flex;
  flex-direction: column;
}

.about__title {
  margin-bottom: var(--space-lg);
  line-height: 0.95;
}

.about__bio {
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-xl);
}

.about__bio p + p {
  margin-top: var(--space-lg);
}

.about__skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
}

.about__skills-title {
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.about__skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--text-secondary);
}

/* ============================================================
   11. BLOG SECTION
   ============================================================ */
.blog__header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Section head: heading plus sub stacked cleanly, left aligned with the grid */
.blog__head {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.blog__sub {
  color: var(--text-secondary);
  max-width: 640px;
  margin-top: 12px;
}

.blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .blog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog__card {
  background: rgba(240, 237, 232, 0.03);
  border: 1px solid rgba(240, 237, 232, 0.05);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
  cursor: none;
  display: flex;
  flex-direction: column;
}

.blog__card:hover {
  background: rgba(240, 237, 232, 0.06);
  border-color: rgba(240, 237, 232, 0.1);
}

.blog__card-tag {
  margin-bottom: var(--space-lg);
}

.blog__card-title {
  margin-bottom: var(--space-md);
  transition: color var(--duration-base) ease;
}

.blog__card:hover .blog__card-title {
  color: var(--accent-palm-bright);
}

.blog__card-excerpt {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  transition: color var(--duration-base) ease;
}

.blog__card:hover .blog__card-link {
  color: var(--accent-palm-bright);
}

.blog__card-link .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--duration-base) ease;
}

.blog__card:hover .blog__card-link .material-symbols-outlined {
  transform: translateX(4px);
}

/* ============================================================
   12. CONTACT SECTION
   ============================================================ */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px var(--margin-desktop);
  border-top: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.contact__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background: var(--accent-palm-bright);
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.contact__heading {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.5vw, 9.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
}

.contact__link {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.contact__link:hover {
  color: var(--accent-palm-bright);
}

.contact__heading-prefix {
  display: inline-block;
  line-height: 0.92;
}

.contact__heading-word {
  display: inline-block;
  line-height: 0.92;
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}

/* ── Secret Hero Asterisk (Zero Clickable Styling) ── */
.hero__star {
  cursor: default !important;
  user-select: none;
  display: inline;
  pointer-events: auto;
}

/* ============================================================
   13. FOOTER
   ============================================================ */
.footer {
  height: 56px;
  border-top: 1px solid var(--border-subtle);
  /* No separate bg - integrated into page flow */
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
}

@media (min-width: 769px) {
  .footer__inner {
    padding: 0 var(--margin-desktop);
  }
}

/* Copyright synced to match social link typography (.text-tag) */
.footer__copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.footer__socials {
  display: flex;
  gap: var(--space-lg);
}

.footer__social-link {
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
}

.footer__social-link:hover {
  color: var(--accent-palm-bright);
}

/* ============================================================
   14. CUSTOM CURSOR
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  /* Hide system cursor on all elements */
  body, a, button, [data-cursor] {
    cursor: none;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* ── Illustrator-Style Crosshair ── */
  .cursor__crosshair-h,
  .cursor__crosshair-v {
    position: absolute;
    background: var(--text-primary);
    transition: width 0.3s var(--ease-out-expo),
                height 0.3s var(--ease-out-expo),
                opacity 0.3s ease;
  }

  /* Horizontal line */
  .cursor__crosshair-h {
    width: 28px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Vertical line */
  .cursor__crosshair-v {
    width: 1px;
    height: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Center dot */
  .cursor__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out-expo),
                height 0.3s var(--ease-out-expo),
                background-color 0.3s ease,
                opacity 0.3s ease;
  }

  /* Hide the old ring - repurpose as crosshair expansion ring */
  .cursor__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 1px solid var(--text-primary);
    opacity: 0;
    transition: width 0.35s var(--ease-out-expo),
                height 0.35s var(--ease-out-expo),
                opacity 0.35s ease,
                border-color 0.3s ease;
  }

  /* ── Link / Button Hover: hide crosshair, show green ring ── */
  .cursor--hover .cursor__crosshair-h,
  .cursor--hover .cursor__crosshair-v {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .cursor--hover .cursor__dot {
    width: 6px;
    height: 6px;
    background: var(--accent-palm-bright);
  }
  .cursor--hover .cursor__ring {
    width: 26px;
    height: 26px;
    opacity: 0.25;
    border-color: var(--accent-palm-bright);
  }

  /* ── Project Card Hover: hide crosshair, show dashed ring + VIEW ── */
  .cursor--project .cursor__crosshair-h,
  .cursor--project .cursor__crosshair-v {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .cursor--project .cursor__dot {
    width: 0;
    height: 0;
    opacity: 0;
  }
  .cursor--project .cursor__ring {
    width: 42px;
    height: 42px;
    opacity: 0.6;
    border-color: var(--text-primary);
    border-style: dashed;
    animation: cursorSpin 6s linear infinite;
  }

  .cursor__ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
  }

  .cursor--project .cursor__ring-text {
    opacity: 1;
  }
}

/* Touch devices: normal cursor */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
  body, a, button { cursor: auto; }
  a, button { cursor: pointer; }
}

/* ============================================================
   15. MODAL SYSTEM
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-base);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Hidden by default */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-modal) var(--ease-out-expo),
              opacity var(--duration-modal) var(--ease-out-expo),
              visibility 0s linear var(--duration-modal);
}

.modal-overlay.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--duration-modal) var(--ease-out-expo),
              opacity var(--duration-modal) var(--ease-out-expo),
              visibility 0s linear 0s;
}

/* Modal Header Actions (Close & Share) */
.modal__actions {
  position: sticky;
  top: 0;
  z-index: 210;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: var(--margin-mobile);
  pointer-events: none;
}

@media (min-width: 769px) {
  .modal__actions {
    padding: var(--margin-desktop);
  }
}

.modal__action-btn {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease,
              transform var(--duration-fast) ease,
              color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.modal__action-btn:hover {
  background: var(--bg-container-high);
  border-color: var(--accent-palm-bright);
  color: var(--accent-palm-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.modal__action-btn .material-symbols-outlined {
  font-size: 22px;
  transition: transform var(--duration-slow) ease;
}

.modal__close-btn:hover .material-symbols-outlined {
  transform: rotate(90deg);
}

/* ── Project Modal ── */
.modal__project-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-xl) var(--margin-mobile);
}

@media (min-width: 769px) {
  .modal__project-hero {
    padding: var(--space-2xl) var(--margin-desktop);
  }
}

.modal__project-title {
  text-align: center;
  max-width: 800px;
}

.modal__project-body {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: 0 var(--margin-mobile);
  padding-bottom: var(--space-3xl);
}

@media (min-width: 769px) {
  .modal__project-body {
    padding: 0;
    padding-bottom: var(--space-3xl);
  }
}

.modal__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(61, 74, 63, 0.3);
  border-bottom: 1px solid rgba(61, 74, 63, 0.3);
}

@media (min-width: 769px) {
  .modal__meta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.modal__meta-label {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.modal__meta-value {
  color: var(--text-primary);
}

.modal__meta-value ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Rich Case Study Breakdown ── */
.modal__casestudy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (min-width: 769px) {
  .modal__casestudy-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

.modal__casestudy-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal__casestudy-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-palm-bright);
}

.modal__casestudy-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Modal Gallery: Mixed Grid (Landscape Full-Width vs Portrait 2-Column) ── */
.modal__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  width: 100%;
}

.modal__gallery-img {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  cursor: zoom-in;
  transition: transform var(--duration-base) ease, border-color var(--duration-base) ease;
}

.modal__gallery-img:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 237, 232, 0.3);
}

.modal__gallery-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--duration-slow) ease;
}

.modal__gallery-img:hover img {
  transform: scale(1.01);
}

/* Wide / landscape assets take full container width */
.modal__gallery-img.is-landscape,
.modal__gallery-img--full {
  grid-column: 1 / -1;
}

/* Square / vertical portrait assets span 1 column side-by-side */
.modal__gallery-img.is-portrait {
  grid-column: span 1;
}

@media (max-width: 768px) {
  .modal__gallery {
    grid-template-columns: 1fr;
  }
  .modal__gallery-img.is-portrait {
    grid-column: span 1;
  }
}

.modal__gallery-zoom-hint {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  pointer-events: none;
}

.modal__gallery-img:hover .modal__gallery-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ── Fullscreen Image Zoom Lightbox ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: default;
  transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease;
}

.lightbox-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 10;
  background: rgba(10, 10, 10, 0.8);
}

.lightbox__counter {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.lightbox__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lightbox__btn {
  background: rgba(240, 237, 232, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.lightbox__btn:hover {
  background: rgba(61, 191, 110, 0.2);
  border-color: var(--accent-palm-bright);
  color: var(--accent-palm-bright);
}

.lightbox__body {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  cursor: default;
}

.lightbox__img-wrap {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
  transform-origin: center center;
  cursor: zoom-in;
}

.lightbox__img-wrap.is-zoomed {
  cursor: zoom-out;
}

.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  z-index: 10;
}

.lightbox__nav:hover {
  background: rgba(61, 191, 110, 0.2);
  border-color: var(--accent-palm-bright);
  color: var(--accent-palm-bright);
}

.lightbox__nav--prev {
  left: 24px;
}

.lightbox__nav--next {
  right: 24px;
}

.modal__project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(61, 74, 63, 0.3);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
}

.modal__project-counter {
  color: var(--text-secondary);
}

.modal__project-next {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--text-primary);
  transition: color var(--duration-base) ease;
}

.modal__project-next:hover {
  color: var(--accent-palm-bright);
}

.modal__project-next-label {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

@media (min-width: 769px) {
  .modal__project-next-label {
    font-size: 48px;
  }
}

.modal__project-next .material-symbols-outlined {
  font-size: 32px;
  transition: transform var(--duration-base) ease;
}

.modal__project-next:hover .material-symbols-outlined {
  transform: translateX(8px);
}

/* ── Blog Modal ── */
.modal-overlay--blog {
  background: var(--bg-elevated);
}

.modal__blog-article {
  width: 100%;
  max-width: 680px;
  padding: var(--space-2xl) var(--margin-mobile);
  margin: 0 auto;
  padding-bottom: var(--space-3xl);
}

@media (min-width: 769px) {
  .modal__blog-article {
    padding: var(--space-2xl) 0;
    padding-bottom: var(--space-3xl);
  }
}

.modal__blog-header {
  margin-bottom: var(--space-xl);
}

.modal__blog-title {
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
}

.modal__blog-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.modal__blog-date {
  color: var(--text-secondary);
}

.modal__blog-date-sep {
  color: var(--text-secondary);
  opacity: 0.6;
}

.modal__blog-featured {
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal__blog-featured img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1s ease-out;
}

.modal__blog-featured:hover img {
  transform: scale(1.05);
}

.modal__blog-content {
  color: rgba(240, 237, 232, 0.9);
}

.modal__blog-content p {
  margin-bottom: 28px;
}

.modal__blog-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.modal__blog-content blockquote {
  padding-left: var(--space-lg);
  border-left: 2px solid var(--accent-palm-bright);
  font-style: italic;
  margin: var(--space-xl) 0;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.modal__blog-endmark {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

.modal__blog-endmark span {
  width: 48px;
  height: 4px;
  background: rgba(245, 188, 110, 0.2);
  border-radius: var(--radius-full);
}

/* ── Modal reveal animations for inner content ── */
.modal__reveal {
  opacity: 0;
  transform: translateY(40px);
  animation: modalContentReveal 0.8s var(--ease-out-expo) forwards;
}

.modal__reveal--delay-1 { animation-delay: 100ms; }
.modal__reveal--delay-2 { animation-delay: 200ms; }
.modal__reveal--delay-3 { animation-delay: 300ms; }

/* ============================================================
   16. TAGS & BUTTONS
   ============================================================ */

/* ── Tag ── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-default);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tag accent variants: exactly four families */
.tag--green    { background: rgba(61, 191, 110, 0.10); color: var(--accent-green); }
.tag--blue     { background: rgba(110, 196, 200, 0.10); color: var(--accent-blue); }
.tag--brown    { background: rgba(200, 148, 74, 0.10); color: var(--accent-brown); }
.tag--magenta  { background: rgba(204, 106, 165, 0.12); color: var(--accent-magenta); }

/* ── Tag (plain, no bg) ── */
.tag--plain {
  padding: 0;
  background: none;
}

/* ── Secondary Button ── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-default);
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

.btn-secondary:hover {
  background: rgba(240, 237, 232, 0.05);
}

/* ============================================================
   17. ANIMATIONS & KEYFRAMES
   ============================================================ */

/* Hero character reveal */
@keyframes charReveal {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade + slide up (general) */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Carousel vertical scroll (desktop) */
@keyframes carouselScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Carousel horizontal scroll (mobile marquee) */
@keyframes carouselScrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cursor rotation */
@keyframes cursorSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Modal content inner reveal */
@keyframes modalContentReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   18. SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* ============================================================
   19. ABOUT PAGE
   ============================================================ */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--margin-mobile) var(--space-2xl);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 769px) {
  .about-hero {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.about-hero__title {
  margin-bottom: var(--space-lg);
}

.about-hero__subtitle {
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: var(--space-xl);
}

.about-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--margin-mobile);
}

@media (min-width: 769px) {
  .about-body {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-2xl) var(--margin-desktop);
  }
}

.about__skills-list li {
  transition: color var(--duration-base) ease;
  padding: 6px 0;
}

.about__skills-list li:hover {
  color: var(--accent-palm-bright);
}

/* ============================================================
   20. BLOG PAGE
   ============================================================ */
.page-header {
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--margin-mobile) var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 769px) {
  .page-header {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

.page-header__title {
  max-width: var(--container-max);
  margin: 0 auto;
}

.blog-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--margin-mobile);
}

@media (min-width: 769px) {
  .blog-page__grid {
    grid-template-columns: repeat(3, 1fr);
    padding: var(--space-xl) var(--margin-desktop);
  }
}

/* ============================================================
   21. ARTICLE PAGE
   ============================================================ */
.article-page {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--margin-mobile) var(--space-3xl);
}

.article-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
  margin-bottom: var(--space-xl);
}

.article-page__back:hover {
  color: var(--accent-palm-bright);
}

.article-page__header {
  margin-bottom: var(--space-xl);
}

.article-page__title {
  margin-bottom: var(--space-lg);
}

.article-page__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.article-page__featured {
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.article-page__featured img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-page__content {
  color: rgba(240, 237, 232, 0.9);
}

.article-page__content p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.article-page__content h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.article-page__content blockquote {
  padding-left: var(--space-lg);
  border-left: 2px solid var(--accent-palm-bright);
  font-style: italic;
  margin: var(--space-xl) 0;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.article-page__content img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}

.article-page__endmark {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

.article-page__endmark span {
  width: 48px;
  height: 4px;
  background: rgba(245, 188, 110, 0.2);
  border-radius: var(--radius-full);
}

/* ============================================================
   22. CONTACT PAGE
   ============================================================ */
.contact-page {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--margin-mobile) var(--space-3xl);
  text-align: center;
}

.contact-page__title {
  margin-bottom: var(--space-lg);
}

.contact-page__subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: left;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-form__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.contact-form__input,
.contact-form__textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--duration-base) ease;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--accent-palm-bright);
}

.contact-form__textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-default);
  background: var(--accent-palm-bright);
  color: var(--bg-base);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-base) ease,
              transform var(--duration-base) ease;
}

.contact-form__submit:hover {
  background: var(--accent-palm-deep);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ── Primary Button (reusable) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-default);
  background: var(--accent-palm-bright);
  color: var(--bg-base);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-base) ease,
              transform var(--duration-base) ease;
}

.btn-primary:hover {
  background: var(--accent-palm-deep);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ── Section spacer (between hero and SELECTED WORK) ── */
.section-spacer {
  height: 80px;
}

@media (max-width: 768px) {
  .section-spacer {
    height: 24px;
  }
}

/* ── View all link ── */
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-xl);
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
}

.view-all-link:hover {
  color: var(--accent-palm-bright);
}

.view-all-link .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--duration-base) ease;
}

.view-all-link:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* ============================================================
   22. WORK ARCHIVE PAGE & VIEW ALL CTA
   ============================================================ */
.work__view-all-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

.work__view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  font-size: 12px;
  letter-spacing: 0.2em;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(61, 191, 110, 0.2);
}

.work__view-all-btn .material-symbols-outlined {
  font-size: 18px;
  transition: transform var(--duration-base) ease;
}

.work__view-all-btn:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* Category Filter Bar */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-xl);
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}

.filter-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-container);
}

.filter-btn.is-active {
  background: var(--accent-palm-bright);
  color: var(--bg-base);
  border-color: var(--accent-palm-bright);
  font-weight: 600;
}

/* Work Archive Grid */
.work-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 769px) {
  .work-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--gutter);
  }
}

.archive__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: transform var(--duration-base) ease,
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
  position: relative;
}

.archive__card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 237, 232, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.archive__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--bg-elevated);
}

.archive__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.archive__card:hover .archive__image {
  transform: scale(1.04);
}

.archive__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.archive__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.archive__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  transition: color var(--duration-base) ease;
}

.archive__card:hover .archive__card-title {
  color: var(--accent-palm-bright);
}

.archive__card-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive__card-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  transition: color var(--duration-base) ease;
}

.archive__card:hover .archive__card-footer {
  color: var(--accent-palm-bright);
}

.archive__card-footer .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--duration-base) ease;
}

.archive__card:hover .archive__card-footer .material-symbols-outlined {
  transform: translateX(4px);
}

/* ============================================================
   23. RESPONSIVE (TABLET & MOBILE)
   ============================================================ */

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {

  /* ── Prevent horizontal overflow ── */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* ── Fluid Typography via clamp() - Extra Bold on Mobile ── */
  .text-hero-name {
    font-size: clamp(4.8rem, 26vw, 8.8rem);
    line-height: 0.86;
    letter-spacing: -0.03em;
  }

  .text-hero-prefix {
    font-size: clamp(3.2rem, 17vw, 5.5rem);
    line-height: 0.86;
    letter-spacing: -0.03em;
  }

  .text-headline-xl {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    line-height: 1.05;
  }

  .text-headline-card {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.1;
  }

  .text-headline-blog {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1.2;
  }

  /* ── Header Navigation on Mobile ── */
  .nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .nav__logo-text {
    display: block;
    font-size: 20px;
  }

  /* ── Full-Screen Mobile Navigation Overlay ── */
  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(10, 10, 10, 0.98);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    z-index: 999;
    padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom) 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out-expo),
                visibility 0s linear 0.4s;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--ease-out-expo),
                visibility 0s linear 0s;
  }

  .nav__links .nav__link {
    font-size: clamp(2rem, 7vw, 2.5rem);
    letter-spacing: 0.1em;
    line-height: 1.3;
  }

  .nav__toggle {
    display: flex;
    z-index: 1000;
    position: relative;
    padding: 8px;
  }

  /* ── Hero on Mobile: Strict 100dvh Viewport Fold Isolation ── */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    padding-top: calc(var(--nav-height) + 12px);
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
  }

  .hero__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0;
    width: 100%;
    z-index: 2;
  }

  .hero__subtext {
    margin-top: 10px;
    font-size: clamp(15px, 4vw, 17px);
  }

  .hero__footnote {
    position: relative;
    bottom: auto;
    margin-top: 12px;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    opacity: 0.85;
  }

  /* ── Mobile Hero Carousel: Touching Screen Bottom (Max 28% of Viewport) ── */
  .hero__carousel {
    display: block;
    flex: 0 0 auto;
    width: calc(100% + (var(--margin-mobile) * 2));
    margin-left: calc(-1 * var(--margin-mobile));
    margin-right: calc(-1 * var(--margin-mobile));
    margin-top: auto;
    margin-bottom: 0;
    height: clamp(140px, 26vh, 180px);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  /* Bottom rising gradient for seamless blending into #0A0A0A base */
  .hero__carousel-fade--bottom {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: linear-gradient(to top, var(--bg-base) 20%, rgba(10, 10, 10, 0.6) 60%, transparent 100%);
    z-index: 6;
    pointer-events: none;
  }

  /* Top subtle gradient fade */
  .hero__carousel-fade--top {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 35px;
    background: linear-gradient(to bottom, var(--bg-base) 15%, transparent 100%);
    z-index: 6;
    pointer-events: none;
  }

  /* Left and right edge masks */
  .hero__carousel-fade--left,
  .hero__carousel-fade--right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 6;
    pointer-events: none;
  }

  .hero__carousel-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--bg-base) 25%, transparent 100%);
  }

  .hero__carousel-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--bg-base) 25%, transparent 100%);
  }

  .hero__carousel-track {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: max-content;
    height: 100%;
    animation: carouselScrollLeft 24s linear infinite;
  }

  .hero__carousel-item {
    width: 135px;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .hero__carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
  }

  /* ── Selected Work Section ── */
  .work__grid {
    gap: var(--space-lg);
  }

  .work__row,
  .work__row:nth-child(even) {
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    transition: transform 120ms ease-out;
  }

  @media (hover: hover) {
    .work__row:active {
      transform: scale(0.99);
      border-color: rgba(240, 237, 232, 0.25);
    }
  }

  .work__image-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .work__card {
    width: 100%;
    padding: var(--space-lg);
  }

  .work__card-arrow {
    display: none;
  }

  /* ── Modal System (Mobile Bottom-Sheet Style) ── */
  .modal-overlay {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .modal__close {
    padding: 12px 16px;
  }

  .modal__close-btn {
    width: 44px;
    height: 44px;
  }

  .modal__close-btn .material-symbols-outlined {
    font-size: 22px;
  }

  .modal__project-hero {
    padding: var(--space-md) var(--margin-mobile);
  }

  .modal__project-title {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    line-height: 1;
  }

  .modal__project-body {
    padding: 0 var(--margin-mobile) var(--space-2xl);
    gap: var(--space-lg);
  }

  .modal__meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
  }

  .modal__project-next-label {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  /* ── Contact Section Responsive (Single Line, Baseline Synced, Breathing Margins) ── */
  .contact {
    padding: 36px var(--margin-mobile);
    width: 100%;
    box-sizing: border-box;
  }

  .contact__heading {
    font-size: clamp(2.3rem, 10.5vw, 3.8rem);
    line-height: 0.92;
    width: 100%;
    text-align: center;
  }

  .contact__link {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2em;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
  }

  .contact__heading-prefix,
  .contact__heading-word {
    font-size: inherit;
    line-height: 0.92;
  }

  /* ── Mobile Footer: Vertical Stacking & Single-Line Copyright ── */
  .footer {
    height: auto;
    padding: 24px var(--margin-mobile);
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }

  .footer__copyright {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.1em;
    order: 2;
  }

  .footer__socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    order: 1;
  }

  /* ── About Page Responsive ── */
  .about-hero {
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
    min-height: auto;
  }

  .about-hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
  }

  .about-hero__subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .about-body {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--margin-mobile);
  }

  /* ── Blog & Article Responsive ── */
  .blog-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--margin-mobile);
  }

  .article-page {
    padding: calc(var(--nav-height) + var(--space-lg)) var(--margin-mobile) var(--space-2xl);
  }
}

/* ── Glowing Endmark for Blog Archive & Article Pages ── */
.article-page__endmark,
.blog-page__endmark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px auto 24px;
  width: 100%;
}

.article-page__endmark span,
.blog-page__endmark span {
  width: 48px;
  height: 3px;
  background: rgba(245, 188, 110, 0.35);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(245, 188, 110, 0.3);
  display: block;
}

/* ── Small Mobile (≤ 480px) ── */
@media (max-width: 480px) {

  :root {
    --margin-mobile: 16px;
  }

  .hero {
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
  }

  .work__card {
    padding: 16px;
  }

  .modal__meta-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about__skills {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-form__submit {
    width: 100%;
  }
}

/* ============================================================
   20. UTILITY & SCROLLBAR
   ============================================================ */

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-elevated);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-container-highest);
  border-radius: var(--radius-default);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-container-highest) var(--bg-elevated);
}

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__carousel-track {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Smooth focus for accessibility ── */
*:focus-visible {
  outline: 2px solid var(--accent-palm-bright);
  outline-offset: 2px;
}

/* ── Material Symbols font setup ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* ── Touch-Device Cursor Guard ── */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor button,
  body.has-custom-cursor a,
  body.has-custom-cursor [role="button"] {
    cursor: none;
  }
}

/* ── Navigation CTA Button ── */
.nav__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-palm-bright);
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.nav__cta-btn:hover {
  background: var(--accent-palm-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(61, 191, 110, 0.35);
}

/* Secondary header action: quiet outline, pairs with the primary CTA */
.nav__cta-btn--secondary {
  background: transparent;
  border: 1px solid rgba(240, 237, 232, 0.35);
  color: var(--text-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav__cta-btn--secondary:hover {
  background: rgba(240, 237, 232, 0.06);
  border-color: var(--text-primary);
  color: var(--text-primary);
  box-shadow: none;
}

@media (max-width: 768px) {
  .nav__links.is-open .nav__cta-btn {
    min-height: 48px;
    margin-top: 8px;
  }
}

/* ── Testimonials & Social Proof Grid ── */
.testimonials__section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.testimonials__header {
  margin-bottom: var(--space-xl);
}

.testimonials__stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
}

.testimonials__stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.testimonials__stat-badge {
  color: var(--accent-palm-bright);
  display: flex;
  align-items: center;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.testimonial__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out-quart), border-color var(--duration-base) ease;
}

.testimonial__card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 237, 232, 0.25);
}

.testimonial__stars {
  display: flex;
  gap: 4px;
  color: #F5BC6E;
  margin-bottom: var(--space-md);
}

.testimonial__stars .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
}

.testimonial__quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

.testimonial__client {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.testimonial__role {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Contact Direct Action Cards ── */
.contact-direct-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.contact-direct-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: border-color var(--duration-base) ease, transform var(--duration-base) ease;
}

.contact-direct-card:hover {
  border-color: rgba(240, 237, 232, 0.3);
  transform: translateY(-2px);
}

.email-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(240, 237, 232, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.email-copy-chip:hover {
  background: rgba(61, 191, 110, 0.12);
  border-color: var(--accent-palm-bright);
  color: var(--accent-palm-bright);
}

.email-copy-chip .material-symbols-outlined {
  font-size: 15px;
  color: var(--accent-palm-bright);
}

.contact-direct-card .card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-palm-bright);
  transition: color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.contact-direct-card .card-action-btn:hover {
  color: var(--accent-palm-bright);
  transform: translateX(3px);
}

/* ── Share Toast Notification ── */
.share-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--accent-palm-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(61, 191, 110, 0.25);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease, visibility 0.3s;
  pointer-events: none;
}

.share-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* ── Tablet Viewports (769px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav__inner {
    padding: 0 var(--margin-tablet);
  }

  .nav__links {
    gap: 16px;
  }

  .nav__link {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .nav__cta-btn {
    font-size: 11px;
    padding: 7px 14px;
    letter-spacing: 0.08em;
  }

  .hero {
    gap: 24px;
    padding-top: calc(var(--nav-height) + 12px);
  }

  .hero__text {
    flex: 1 1 58%;
    padding-right: var(--space-sm);
  }

  .hero__carousel {
    flex: 0 0 40%;
    max-width: 380px;
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-direct-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
  .contact-direct-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   24. APPROVED FEATURE SET - 7 features (additive, dark-first)
   Voice: warm first-person. Motion: transform/opacity only.
   ============================================================ */

/* -- Shared measure and scale tokens for reading -- */
:root {
  --measure: 68ch;
  --measure-narrow: 44rem;
  --read-pill-bg: rgba(240, 237, 232, 0.06);
  --read-pill-border: rgba(240, 237, 232, 0.12);
}

/* -- Data states for every data-driven block -- */
.data-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.data-state--error {
  border-color: rgba(200, 148, 74, 0.5);
  color: var(--text-primary);
}
.data-state__spinner {
  width: 22px;
  height: 22px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-palm-bright);
  animation: dataSpin 0.9s linear infinite;
}
@keyframes dataSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -- (1) Live iframe previews on work and case views -- */
.live-preview {
  margin-top: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
.live-preview__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-elevated);
}
.live-preview__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg-elevated);
}
.live-preview__caption {
  padding: 12px 16px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.live-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 16px 16px;
}
.live-preview__fallback {
  display: block;
  text-decoration: none;
}
.live-preview__fallback img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.live-preview__fallback-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-palm-bright);
}

/* -- (2) Trust line under each submit -- */
.form-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.form-trust .material-symbols-outlined {
  font-size: 16px;
  font-weight: 200;
  font-variation-settings: 'FILL' 0, 'wght' 200;
  color: var(--accent-palm-bright);
}

/* -- (3) Hand-holding guidance lines -- */
.field-help {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 2px;
}
.services-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
  text-align: left;
}
@media (min-width: 769px) {
  .services-guide {
    grid-template-columns: repeat(3, 1fr);
  }
}
.service-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--duration-base) ease, transform var(--duration-base) ease;
}
.service-card:hover {
  border-color: rgba(240, 237, 232, 0.25);
  transform: translateY(-2px);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.service-card__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.service-card__meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}
.service-card__meta strong {
  color: var(--text-primary);
  font-weight: 600;
}
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-xl);
  text-align: left;
}
@media (min-width: 769px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.process-step {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 20px;
}
.process-step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.process-step__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.process-step__need {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.process-step__need strong {
  color: var(--text-primary);
}
.work-intro__help {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  max-width: 640px;
  margin-top: 16px;
}
.work-intro__cta {
  margin-top: 20px;
}

/* -- (4) FAQ upgrade -- */
.faq {
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
  text-align: left;
}
.faq__title {
  margin-bottom: 8px;
}
.faq__sub {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}
.faq__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq__item.is-open {
  border-color: rgba(61, 191, 110, 0.45);
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  color: var(--text-primary);
  transition: color var(--duration-fast) ease;
}
.faq__question:hover {
  color: var(--accent-palm-bright);
}
.faq__question h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0;
}
.faq__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  transition: transform var(--duration-base) ease;
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}
.faq__icon .material-symbols-outlined {
  font-size: 18px;
}
.faq__panel {
  padding: 0 20px 20px;
  animation: faqIn 0.28s var(--ease-out-expo);
}
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq__panel p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.faq__panel p + p {
  margin-top: 12px;
}
.faq__intake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-palm-bright);
}
.faq__unsure {
  margin-top: var(--space-lg);
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.faq__unsure p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 16px;
}

/* -- (5) Blog readability: measure, pill, shield row -- */
.read-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--read-pill-bg);
  border: 1px solid var(--read-pill-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.blog__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--space-md);
}
.shield-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(61, 191, 110, 0.06);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--measure);
}
.shield-row .material-symbols-outlined {
  font-size: 16px;
  font-weight: 200;
  font-variation-settings: 'FILL' 0, 'wght' 200;
  color: var(--accent-palm-bright);
  flex-shrink: 0;
}
.article-page__body,
.modal__blog-content {
  max-width: var(--measure);
}
.article-page__header p,
.modal__blog-header p {
  max-width: var(--measure);
}

/* -- (6) Know-how list reusing blog components -- */
.knowhow {
  margin-top: var(--space-2xl);
}
.knowhow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--space-lg);
}
@media (min-width: 769px) {
  .knowhow__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.knowhow__empty {
  max-width: var(--measure-narrow);
  margin: 0 auto;
}
.related-essays {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  max-width: var(--measure);
}
.related-essays__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.related-essays__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 769px) {
  .related-essays__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* -- (7) Header CTA on mobile plus footer contact button -- */
.nav__cta-btn--mobile {
  display: none;
}
@media (max-width: 768px) {
  .nav__cta-btn--mobile {
    display: inline-flex;
    margin-left: auto;
    margin-right: 12px;
    padding: 8px 14px;
    font-size: 11px;
    white-space: nowrap;
  }
  .nav__inner {
    gap: 8px;
  }
}
.footer__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--accent-palm-bright);
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
  white-space: nowrap;
}
.footer__contact-btn:hover {
  background: var(--accent-sand-light);
  transform: translateY(-1px);
}
.footer__contact-btn .material-symbols-outlined {
  font-size: 15px;
}
@media (max-width: 768px) {
  .footer__contact-btn {
    order: 0;
  }
}

/* ============================================================
   25. REVIEW-FIX: roomier blog and contact, button tiers,
   expanded footer, cursor guards (same warm dark look)
   ============================================================ */

/* -- (2) Roomier reading: reuse --measure, larger padding, air -- */
.article-page {
  max-width: var(--measure);
}
@media (min-width: 769px) {
  .article-page {
    max-width: var(--measure);
    padding-left: 24px;
    padding-right: 24px;
  }
  .contact-page {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.modal__blog-article {
  max-width: var(--measure);
}
.contact-page {
  max-width: var(--measure);
  padding-bottom: var(--space-3xl);
}
.faq {
  max-width: var(--measure);
}
.page-header__subtitle,
.work-intro__help,
.contact-page__subtitle {
  max-width: var(--measure);
}
.blog-page__grid {
  gap: 32px;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.blog__card {
  padding: 32px;
}
.blog__card-meta {
  margin-bottom: var(--space-lg);
}
.blog__card-excerpt {
  margin-bottom: var(--space-xl);
}
.knowhow {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
}
.contact-form {
  gap: 16px;
  margin-top: var(--space-lg);
}
/* Title carries a small accent underline so the form feels present */
.contact-page--wide .contact-page__title {
  position: relative;
  padding-bottom: 14px;
}
.contact-page--wide .contact-page__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-palm-bright);
}
/* Tinted panel edge plus focus accent on labels */
.contact-page--wide .contact-form {
  border-left: 3px solid color-mix(in srgb, var(--accent-palm-bright) 55%, transparent);
}
.contact-form__group:focus-within .contact-form__label {
  color: var(--accent-palm-bright);
}
.contact-form__input,
.contact-form__textarea {
  padding: 18px 20px;
}
.contact-form__textarea {
  min-height: 180px;
}
.contact-direct-grid {
  gap: 20px;
  margin-top: var(--space-2xl);
}
.contact-direct-card {
  padding: 24px;
  gap: 16px;
}
.services-guide {
  margin-bottom: var(--space-2xl);
  gap: 20px;
}
.service-card {
  padding: 28px;
  gap: 14px;
}
.process-steps {
  margin: var(--space-xl) 0 var(--space-2xl);
  gap: 20px;
}
.process-step {
  padding: 28px;
}
.faq__question {
  padding: 22px 24px;
}
.faq__panel {
  padding: 0 24px 24px;
}
.faq__unsure {
  padding: 28px;
  margin-top: var(--space-2xl);
}

/* -- (6) Button tiers: primary glass, outline secondary, quiet link -- */
.btn-primary,
.nav__cta-btn,
.contact-form__submit,
.work__view-all-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 191, 110, 0.14);
  border: 1px solid rgba(61, 191, 110, 0.5);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-primary:hover,
.nav__cta-btn:hover,
.contact-form__submit:hover,
.work__view-all-btn:hover {
  background: rgba(61, 191, 110, 0.24);
  border-color: var(--accent-palm-bright);
  color: var(--text-primary);
}
.btn-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(240, 237, 232, 0.35);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: rgba(240, 237, 232, 0.06);
  border-color: var(--text-primary);
}
.btn-quiet,
.view-all-link,
.faq__intake,
.contact-direct-card .card-action-btn,
.article-page__back {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-palm-bright);
}
/* Equal heights where buttons sit in groups */
.contact-direct-card,
.faq__unsure,
.modal__project-cta,
.work-intro {
  align-items: stretch;
}
.faq__unsure .btn-primary,
.modal__project-cta .btn-primary {
  min-height: 48px;
}

/* -- (5) Expanded footer: no contact button, link columns -- */
.footer {
  height: auto;
  padding: 56px 0 32px;
}
.footer__inner--expanded {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  height: auto;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__col-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
}
.footer__col a:hover {
  color: var(--accent-palm-bright);
}
@media (min-width: 769px) {
  .footer__inner--expanded {
    grid-template-columns: 1.1fr 1.6fr;
  }
  .footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .footer__inner--expanded {
    text-align: center;
    justify-items: center;
  }
  .footer__brand {
    align-items: center;
  }
  .footer__cols {
    width: 100%;
  }
}

/* -- (7) Cursor guards: touch gets no cursor, reduced motion keeps native -- */
@media (prefers-reduced-motion: reduce) {
  .cursor {
    display: none !important;
  }
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: auto;
  }
}

/* -- (8) Iframe hover: custom cursor hides over embedded frames -- */
@media (hover: hover) and (pointer: fine) {
  .cursor--hidden {
    opacity: 0 !important;
  }
}

/* -- (9) Zoomable images: hide the native cursor so only the custom zoom ring shows -- */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor .modal__gallery-img,
  body.has-custom-cursor .modal__gallery-img img,
  body.has-custom-cursor .lightbox__img-wrap,
  body.has-custom-cursor .lightbox__img-wrap img,
  body.has-custom-cursor .lightbox__body {
    cursor: none !important;
  }
}

/* ============================================================
   26. UI BATCH: single CTA header, wide contact/article,
   expanded form, conditional fields, light theme
   Voice: warm first-person. No em dashes in copy.
   ============================================================ */

/* -- Light theme tokens (true white base, dark remains default) -- */
:root[data-theme="light"] {
  --bg-base: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-container: #F4F4F4;
  --bg-container-high: #E9E9E9;
  --bg-container-highest: #D9D9D9;
  --text-primary: #16130E;
  --text-secondary: #4A4640;
  --text-muted: #6B6660;
  --border-default: #E2E2E2;
  --accent-green: #1E7A3C;
  --accent-blue: #1F6B6E;
  --accent-brown: #8A5E22;
  --accent-magenta: #9C2F6B;
  --accent-palm-bright: var(--accent-green);
  --accent-palm-deep: #1D5E2A;
  --accent-sand-warm: var(--accent-brown);
  --accent-sand-light: var(--accent-brown);
  --accent-oasis-water: var(--accent-blue);
  --border-subtle: rgba(22, 19, 14, 0.12);
  --read-pill-bg: rgba(22, 19, 14, 0.05);
  --read-pill-border: rgba(22, 19, 14, 0.14);
  color-scheme: light;
}
:root[data-theme="light"] body,
:root[data-theme="light"] {
  background-color: var(--bg-base);
}
:root[data-theme="light"] .nav--scrolled {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(22, 19, 14, 0.1);
}
:root[data-theme="light"] .hero__carousel-fade--top {
  background: linear-gradient(to bottom, var(--bg-base), transparent);
}
:root[data-theme="light"] .hero__carousel-fade--bottom {
  background: linear-gradient(to top, var(--bg-base), transparent);
}
:root[data-theme="light"] .blog__card {
  background: rgba(22, 19, 14, 0.03);
  border-color: rgba(22, 19, 14, 0.1);
}
/* Light mode: no difference-blend wash on the cursor, keep it dark on white */
:root[data-theme="light"] .cursor {
  mix-blend-mode: normal;
}
/* Light mode: hover borders use ink tints, never near-black fills */
:root[data-theme="light"] .archive__card:hover,
:root[data-theme="light"] .testimonial__card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .contact-direct-card:hover,
:root[data-theme="light"] .process-step:hover {
  border-color: rgba(22, 19, 14, 0.3);
}
:root[data-theme="light"] .blog__card:hover {
  background: rgba(22, 19, 14, 0.05);
  border-color: rgba(22, 19, 14, 0.18);
}
/* Light mode card hover: tinted wash per tag family so the change reads as color, not just lift */
:root[data-theme="light"] .blog__card:has(.tag--green):hover,
:root[data-theme="light"] .archive__card:has(.tag--green):hover {
  background: color-mix(in srgb, var(--accent-green) 12%, #FFFFFF);
  border-color: color-mix(in srgb, var(--accent-green) 45%, transparent);
}
:root[data-theme="light"] .blog__card:has(.tag--blue):hover,
:root[data-theme="light"] .archive__card:has(.tag--blue):hover {
  background: color-mix(in srgb, var(--accent-blue) 12%, #FFFFFF);
  border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent);
}
:root[data-theme="light"] .blog__card:has(.tag--brown):hover,
:root[data-theme="light"] .archive__card:has(.tag--brown):hover {
  background: color-mix(in srgb, var(--accent-brown) 12%, #FFFFFF);
  border-color: color-mix(in srgb, var(--accent-brown) 45%, transparent);
}
:root[data-theme="light"] .blog__card:has(.tag--magenta):hover,
:root[data-theme="light"] .archive__card:has(.tag--magenta):hover {
  background: color-mix(in srgb, var(--accent-magenta) 10%, #FFFFFF);
  border-color: color-mix(in srgb, var(--accent-magenta) 45%, transparent);
}
/* Dark mode card hover also carries a faint tint wash per family */
.blog__card:has(.tag--green):hover { background: color-mix(in srgb, var(--accent-green) 9%, var(--bg-base)); }
.blog__card:has(.tag--blue):hover { background: color-mix(in srgb, var(--accent-blue) 9%, var(--bg-base)); }
.blog__card:has(.tag--brown):hover { background: color-mix(in srgb, var(--accent-brown) 9%, var(--bg-base)); }
.blog__card:has(.tag--magenta):hover { background: color-mix(in srgb, var(--accent-magenta) 9%, var(--bg-base)); }
.archive__card:has(.tag--green):hover { background: color-mix(in srgb, var(--accent-green) 7%, var(--bg-surface)); }
.archive__card:has(.tag--blue):hover { background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-surface)); }
.archive__card:has(.tag--brown):hover { background: color-mix(in srgb, var(--accent-brown) 7%, var(--bg-surface)); }
.archive__card:has(.tag--magenta):hover { background: color-mix(in srgb, var(--accent-magenta) 7%, var(--bg-surface)); }
:root[data-theme="light"] .email-copy-chip {
  background: rgba(22, 19, 14, 0.04);
}
:root[data-theme="light"] .work__row:hover .work__card {
  box-shadow: 0 8px 28px rgba(22, 19, 14, 0.12);
}

/* -- Header: logo left, links centered, actions right -- */
.nav__inner {
  gap: 16px;
}
.nav__logo {
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav__links {
  flex: 1 1 auto;
  justify-content: center;
  margin-left: 0;
}
.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-base) ease, transform var(--duration-fast) ease;
}
.theme-toggle:hover {
  border-color: var(--accent-palm-bright);
  color: var(--accent-palm-bright);
  transform: translateY(-1px);
}
.theme-toggle .material-symbols-outlined {
  font-size: 20px;
}
.nav__actions .nav__cta-btn {
  white-space: nowrap;
}
.nav__cta-btn--in-menu {
  display: none;
}
@media (min-width: 769px) {
  .nav__links {
    margin: 0 auto;
  }
  .nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .nav__actions .nav__cta-btn--desktop {
    display: none;
  }
  .nav__links.is-open .nav__cta-btn--in-menu {
    display: inline-flex;
    min-height: 48px;
    margin-top: 8px;
  }
  .nav__actions {
    margin-left: auto;
  }
}

/* -- Contact wide two part layout -- */
.contact-page--wide {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.contact-page--wide .contact-page__title,
.contact-page--wide .contact-page__subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.contact-page--wide .contact-page__subtitle {
  max-width: 720px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr);
    gap: 40px;
  }
  .contact-aside {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
  }
}
.contact-main {
  min-width: 0;
}
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.aside-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.aside-card__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aside-card__title .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent-palm-bright);
}
.aside-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.aside-card p + p {
  margin-top: 10px;
}
.aside-card .btn-primary,
.aside-card .btn-secondary {
  margin-top: 14px;
  width: 100%;
}
.contact-page--wide .contact-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
}
@media (min-width: 769px) {
  .contact-page--wide .contact-form {
    padding: 36px;
  }
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 769px) {
  .contact-form__row--two {
    grid-template-columns: 1fr 1fr;
  }
}

/* -- Form controls, errors, conditional reveal, status -- */
.contact-form__select-wrap {
  position: relative;
}
.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 18px 44px 18px 20px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--duration-base) ease;
}
.contact-form__select:focus {
  outline: none;
  border-color: var(--accent-palm-bright);
}
.contact-form__select-wrap::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
  font-size: 22px;
}
.field-error {
  font-size: 13px;
  line-height: 1.5;
  color: #D88F7E;
  min-height: 20px;
}
:root[data-theme="light"] .field-error {
  color: #96402F;
}
.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"],
.contact-form__select[aria-invalid="true"] {
  border-color: #B96A58;
}
.contact-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.cond-field {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s var(--ease-out-expo), transform 0.28s var(--ease-out-expo), grid-template-rows 0.28s var(--ease-out-expo);
}
.cond-field__inner {
  overflow: hidden;
  min-height: 0;
}
.cond-field.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.form-status {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  margin-top: 16px;
}
.form-status--success {
  border-color: rgba(61, 191, 110, 0.45);
}
.form-status--error {
  border-color: rgba(200, 148, 74, 0.55);
}
.form-status__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.form-status--success .form-status__icon {
  background: rgba(61, 191, 110, 0.15);
  color: var(--accent-palm-bright);
}
.form-status--error .form-status__icon {
  background: rgba(200, 148, 74, 0.15);
  color: var(--accent-sand-warm);
}
.form-status h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.form-status p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto 20px;
}
.form-status a {
  color: var(--accent-palm-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -- Article wide two part layout -- */
.article-page--wide {
  max-width: 1200px;
  margin: 0 auto;
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.85fr);
    gap: 48px;
  }
  .article-aside {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
  }
}
.article-main {
  min-width: 0;
}
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1023px) {
  .contact-layout,
  .article-layout {
    grid-template-columns: 1fr;
  }
  .contact-aside,
  .article-aside {
    position: static;
  }
}

/* -- Reduced motion guard for new transitions -- */
@media (prefers-reduced-motion: reduce) {
  .cond-field {
    transition: none;
    transform: none;
  }
  .theme-toggle,
  .nav__cta-btn,
  .contact-form__submit {
    transition: none;
  }
}

/* ============================================================
   27. CONTACT REFINE: guard, invisible Turnstile slot,
   budget slider, tiny hint motion, article closers
   Voice: warm first-person. Motion: transform/opacity only.
   ============================================================ */

/* -- Compact security-feeling guard under the submit -- */
.form-guard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.form-guard .material-symbols-outlined {
  font-size: 15px;
  color: var(--accent-palm-bright);
  font-variation-settings: 'FILL' 0, 'wght' 200;
}

/* -- Invisible Turnstile slot: collapsed at rest so no checkbox
      shows. It only takes space when a real challenge appears. -- */
.turnstile-slot {
  min-height: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  display: block;
}
.turnstile-slot.is-challenged {
  min-height: 68px;
  height: auto;
  overflow: visible;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cf-turnstile {
  min-height: 0;
  height: 0;
  overflow: hidden;
}
.turnstile-slot.is-challenged #cf-turnstile {
  min-height: 65px;
  height: auto;
  overflow: visible;
}

/* -- Budget slider with currency toggle -- */
.budget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Knob-slide currency switch: checkbox plus label after.
   Motion is pure CSS (translateX on the thumb, opacity on the
   names). JS only flips checked; it never animates. */
.budget-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.budget-cur-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  transition: opacity 200ms ease-out;
}
.budget-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.budget-switch:not(:checked) ~ .is-ngn { opacity: 1; }
.budget-switch:checked ~ .is-ngn { opacity: 0.45; }
.budget-switch:not(:checked) ~ .is-usd { opacity: 0.45; }
.budget-switch:checked ~ .is-usd { opacity: 1; }
.budget-track {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: 56px;
  height: 32px;
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 200ms ease-out;
}
.budget-track:hover {
  border-color: var(--accent-palm-bright);
}
.budget-switch:focus-visible + .budget-track {
  border-color: var(--accent-palm-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-palm-bright) 25%, transparent);
}
.budget-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-palm-bright);
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.budget-switch:checked + .budget-track .budget-thumb {
  transform: translateX(24px);
}
/* Focus tint on text inputs */
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
  background-color: color-mix(in srgb, var(--accent-palm-bright) 7%, var(--bg-elevated));
}
.budget-controls {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 16px;
  align-items: center;
}
@media (max-width: 560px) {
  .budget-controls {
    grid-template-columns: 1fr;
  }
}
.budget-range {
  width: 100%;
  accent-color: var(--accent-palm-bright);
  min-height: 44px;
}
.budget-range:disabled {
  opacity: 0.45;
}
.budget-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.budget-symbol {
  position: absolute;
  left: 14px;
  color: var(--text-secondary);
  font-size: 16px;
  pointer-events: none;
}
.budget-amount {
  width: 100%;
  padding-left: 32px !important;
}
.budget-amount:disabled {
  opacity: 0.45;
}
.budget-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 21px;
}
.budget-hint.is-swap {
  animation: hintIn 200ms var(--ease-out-expo);
}
@keyframes hintIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.budget-unsure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
}
.budget-unsure input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-palm-bright);
}

/* -- Article closers: related essays, one next line, quiet chat -- */
.article-closer {
  border-left: 3px solid color-mix(in srgb, var(--accent-sand-warm) 55%, transparent);
}
.closer-line {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-primary);
}
.closer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.closer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-palm-bright);
}
.closer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.closer-sign {
  font-size: 13px;
  font-style: italic;
}
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 4px;
}
.quiet-link:hover {
  color: var(--accent-palm-bright);
}
.quiet-link .material-symbols-outlined {
  font-size: 15px;
}

/* -- Small accents so no section feels empty (same palette) -- */
.page-header__title {
  position: relative;
  padding-bottom: 14px;
}
.page-header__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-palm-bright);
}
.footer__wordmark::after {
  content: '.';
  color: var(--accent-palm-bright);
}
/* About hero is centered, so its accent bar centers too */
.about-hero__title {
  position: relative;
  padding-bottom: 14px;
}
.about-hero__title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-palm-bright);
}
.testimonials__stat-item,
.service-card__title,
.process-step__title {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* -- Reduced motion: hint swap and switch motion go still -- */
@media (prefers-reduced-motion: reduce) {
  .budget-hint.is-swap {
    animation: none;
  }
  .budget-cur-name,
  .budget-thumb,
  .budget-track {
    transition: none;
  }
}

/* ============================================================
   28. SECOND REVIEW ROUND (1) small cursor rings, (2) tinted
   card hover, (3) hero glow, (7) article TOC, (9) tight budget,
   (11) footer middle plus products, (12) opacity press accents
   Voice: warm first-person. Motion: transform/opacity only.
   ============================================================ */

/* Cursor graphic stays small. The 44px minimum lives only on
   real controls (buttons, links, inputs), never on the ring. */
@media (hover: hover) and (pointer: fine) {
  .cursor__ring-text {
    font-size: 7px;
    letter-spacing: 0.12em;
  }
}

/* Article table of contents, auto-built from H2 and H3 */
.article-toc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 20px 22px;
  margin: 28px 0 8px;
  max-width: var(--measure);
}
.article-toc__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.article-toc ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.article-toc a:hover {
  color: var(--accent-palm-bright);
}
.article-toc li.is-sub a {
  padding-left: 16px;
  font-size: 13px;
}
.article-page__body h2,
.article-page__body h3,
.modal__blog-content h2,
.modal__blog-content h3 {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* Budget block: tighter stacking between toggle, slider and input */
.budget-group {
  gap: 8px;
}
.budget-top {
  gap: 8px;
}
.budget-controls {
  gap: 8px;
}
.budget-hint {
  min-height: 20px;
  margin-top: 2px;
}
.budget-unsure {
  min-height: 40px;
}

/* Footer: brand block sits at the vertical middle next to link columns */
@media (min-width: 769px) {
  .footer__inner--expanded {
    align-items: center;
  }
  .footer__brand {
    align-self: center;
    justify-content: center;
  }
}
.footer__lab-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 280px;
}
.footer__col .is-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Press accents use opacity only, never layout or shadow */
.btn-primary:active,
.nav__cta-btn:active,
.contact-form__submit:active,
.btn-secondary:active,
.filter-btn:active {
  opacity: 0.72;
}
/* Focus tint on inputs so keyboard focus reads as a warm wash */
.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible,
.contact-form__select:focus-visible,
.budget-amount:focus-visible {
  background-color: color-mix(in srgb, var(--accent-palm-bright) 9%, var(--bg-elevated));
  border-color: var(--accent-palm-bright);
  outline: none;
}

/* ============================================================
   29. FAST GOOD CHEAP MOTION: knob slide stays, focus tint is
   visible, press is opacity only. All 200ms or less, no loops.
   Voice: warm first-person. Motion: transform/opacity only.
   ============================================================ */

/* Inputs and selects tint within 200ms on focus */
.contact-form__input,
.contact-form__textarea,
.contact-form__select,
.budget-amount {
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus,
.budget-amount:focus {
  background-color: color-mix(in srgb, var(--accent-palm-bright) 7%, var(--bg-elevated));
  border-color: var(--accent-palm-bright);
  outline: none;
}

/* Buttons: press is opacity only, 200ms or less, no movement */
.btn-primary,
.nav__cta-btn,
.contact-form__submit,
.btn-secondary,
.filter-btn,
.work__view-all-btn {
  transition: opacity 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
}
.btn-primary:active,
.nav__cta-btn:active,
.contact-form__submit:active,
.btn-secondary:active,
.filter-btn:active,
.work__view-all-btn:active {
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

/* Knob slide stays pure CSS and quick */
.budget-thumb {
  transition: transform 200ms ease-out;
}
.budget-cur-name {
  transition: opacity 200ms ease-out;
}
.budget-toggle:has(.budget-switch:checked) .is-ngn { opacity: 0.45; }
.budget-toggle:has(.budget-switch:not(:checked)) .is-ngn { opacity: 1; }
.budget-toggle:has(.budget-switch:checked) .is-usd { opacity: 1; }
.budget-toggle:has(.budget-switch:not(:checked)) .is-usd { opacity: 0.45; }
.budget-track {
  transition: border-color 200ms ease-out;
}

/* Blog sidebar contact card spacing */
.blog-contact {
  margin-top: 32px;
  margin-bottom: 8px;
}

/* Reduced motion: new accents go still, nothing loops here */
@media (prefers-reduced-motion: reduce) {
  .contact-form__input,
  .contact-form__textarea,
  .contact-form__select,
  .budget-amount,
  .btn-primary,
  .nav__cta-btn,
  .contact-form__submit,
  .btn-secondary,
  .filter-btn,
  .work__view-all-btn,
  .budget-thumb,
  .budget-cur-name,
  .budget-track {
    transition: none;
  }
  .budget-hint.is-swap {
    animation: none;
  }
}

/* ============================================================
   30. UI BATCH 2026-10: hero field, work hover, grain, footer
   split, lab, services rhythm, recent rail, modal buttons,
   aside steps, tag views, contrast hardening
   Voice: warm first-person. Motion: transform/opacity only.
   The grain and masks below are static, so reduced-motion
   needs no extra switch for them.
   ============================================================ */

/* -- (1) Hero: deep grounded base that lifts into the light section.
   No green tint anywhere here. The hero flows from darkness at the
   top into the page background, in both themes. No boxed panel. -- */
.hero {
  isolation: isolate;
  background: linear-gradient(180deg, #050505 0%, rgba(10, 10, 10, 0.6) 22%, transparent 58%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 42%);
}
:root[data-theme="light"] .hero {
  background: linear-gradient(180deg, #0D0B08 0%, #171310 26%, rgba(23, 19, 16, 0.12) 52%, transparent 74%);
}
:root[data-theme="light"] .hero::before {
  background: linear-gradient(180deg, rgba(13, 11, 8, 0.35) 0%, transparent 40%);
}
/* Light theme hero copy sits over the dark base, so it stays light */
:root[data-theme="light"] .hero__text .text-hero-prefix,
:root[data-theme="light"] .hero__text .text-hero-name {
  color: #F0EDE8;
}
:root[data-theme="light"] .hero__subtext {
  color: rgba(240, 237, 232, 0.82);
}
:root[data-theme="light"] .hero__footnote {
  color: rgba(240, 237, 232, 0.66);
}
/* Light theme nav at the top sits over the dark hero base, so it stays light until scrolled */
:root[data-theme="light"] .nav:not(.nav--scrolled) {
  border-bottom-color: rgba(240, 237, 232, 0.14);
}
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__logo-text,
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__link {
  color: #F0EDE8;
}
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__link:hover,
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__link--active {
  color: #FFFFFF;
}
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__cta-btn {
  color: #F0EDE8;
  border-color: rgba(61, 191, 110, 0.6);
}
:root[data-theme="light"] .nav:not(.nav--scrolled) .theme-toggle {
  background: transparent;
  border-color: rgba(240, 237, 232, 0.3);
  color: #F0EDE8;
}
:root[data-theme="light"] .nav:not(.nav--scrolled) .nav__toggle span {
  background: #F0EDE8;
}
.hero__text {
  z-index: 2;
}
.hero__carousel {
  z-index: 1;
}
/* Unboxed carousel: no panel, no border, no glow wash */
.hero__carousel {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.hero__carousel::before {
  content: none;
}
:root[data-theme="light"] .hero__carousel {
  background: none;
  border: none;
  box-shadow: none;
}
:root[data-theme="light"] .hero__carousel::before {
  content: none;
}
/* Edge blending without an overlay wash: mask the rail itself */
.hero__carousel-fade--top,
.hero__carousel-fade--bottom,
.hero__carousel-fade--left,
.hero__carousel-fade--right {
  display: none;
}
.hero__carousel {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
@media (max-width: 768px) {
  .hero__carousel {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* -- (2) Work cards: visible hover, tag badge deepens per family -- */
.work__card {
  transition: transform 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
}
.work__row:hover .work__card {
  transform: translateY(-2px);
}
.work__card .tag {
  transition: background-color 200ms ease-out;
}
.work__row:hover .work__card[data-accent="brown"] .tag {
  background: color-mix(in srgb, var(--accent-brown) 26%, transparent);
}
.work__row:hover .work__card[data-accent="green"] .tag {
  background: color-mix(in srgb, var(--accent-green) 26%, transparent);
}
.work__row:hover .work__card[data-accent="blue"] .tag {
  background: color-mix(in srgb, var(--accent-blue) 26%, transparent);
}
.work__row:hover .work__card[data-accent="magenta"] .tag {
  background: color-mix(in srgb, var(--accent-magenta) 26%, transparent);
}

/* -- (3) Light-mode grain: one static SVG noise layer, near zero cost -- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
:root[data-theme="light"] body::after {
  opacity: 0.04;
}

/* -- (4/10) Footer: brand note, split Explore, lab anchors -- */
.footer__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 340px;
}
.footer__col--split .footer__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.footer__split a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  transition: color var(--duration-base) ease;
}
.footer__split a:hover {
  color: var(--accent-palm-bright);
}
#lab {
  scroll-margin-top: calc(var(--nav-height) + 8px);
}
.lab__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.lab__card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 24px;
  scroll-margin-top: calc(var(--nav-height) + 24px);
}
.lab__card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.lab__card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .lab__grid {
    grid-template-columns: 1fr;
  }
}

/* -- (5) Services: alternate intro, three offers, condensed strip -- */
.services-intro {
  max-width: var(--measure);
}
.services-intro p + p {
  margin-top: 16px;
}
.offer {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--nav-height) + 16px);
}
.offer:last-of-type {
  border-bottom: 1px solid var(--border-subtle);
}
.offer[data-accent="brown"] {
  --offer-accent: var(--accent-brown);
}
.offer[data-accent="blue"] {
  --offer-accent: var(--accent-blue);
}
.offer__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--offer-accent, var(--accent-palm-bright));
}
.offer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.offer h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.offer p {
  color: var(--text-secondary);
  max-width: 62ch;
}
.offer p + p {
  margin-top: 12px;
}
.offer__includes {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer__includes li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
}
.offer__includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--offer-accent, var(--accent-palm-bright));
}
.offer__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.offer__meta strong {
  color: var(--text-primary);
}
.offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offer-accent, var(--accent-palm-bright));
}
.offer__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform 200ms ease-out;
}
.offer__cta:hover .material-symbols-outlined {
  transform: translateX(4px);
}
/* Second offer runs mirrored so the three read with distinct rhythm */
@media (min-width: 769px) {
  .offer--flip {
    grid-template-columns: 1fr 72px;
  }
  .offer--flip .offer__num {
    order: 2;
    text-align: right;
  }
  .offer--flip .offer__body {
    order: 1;
  }
  .offer--band {
    grid-template-columns: 72px 1fr 1fr;
  }
  .offer--band .offer__includes {
    margin-top: 0;
    align-self: start;
  }
}
@media (max-width: 768px) {
  .offer {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.process-strip {
  margin-top: var(--space-2xl);
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.process-strip ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.process-strip li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.process-strip li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .process-strip ol {
    grid-template-columns: 1fr;
  }
}

/* -- (6) Recent work rail on the homepage -- */
.recent__head {
  margin-bottom: 24px;
}
.recent__sub {
  color: var(--text-secondary);
  margin-top: 12px;
  max-width: 62ch;
}
.recent__rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.recent__card {
  flex: 0 0 min(300px, 78vw);
  scroll-snap-align: start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}
.recent__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-palm-bright) 55%, transparent);
}
.recent__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elevated);
}
.recent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-primary);
}
.recent__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-palm-bright);
}
.recent__view .material-symbols-outlined {
  font-size: 15px;
}

/* -- (7) Modal buttons stay visible in light mode -- */
:root[data-theme="light"] .modal__action-btn {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(22, 19, 14, 0.22);
  color: #16130E;
  box-shadow: 0 4px 16px rgba(22, 19, 14, 0.12);
}
:root[data-theme="light"] .modal__action-btn:hover {
  background: color-mix(in srgb, var(--accent-green) 14%, #FFFFFF);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* -- (8) Contact rail steps, condensed for the narrow column -- */
.aside-steps ol {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.aside-steps li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.aside-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-palm-bright);
}
.aside-steps li strong {
  color: var(--text-primary);
}

/* -- (9) Blog tag filter bar -- */
.blog-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--margin-mobile) 0;
}
.blog-filter__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.blog-filter__note strong {
  color: var(--text-primary);
}

/* -- Blog search and tag filters -- */
.blog-controls {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--margin-mobile) 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 560px;
}
.blog-search__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.blog-search__input {
  min-height: 44px;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
}
.blog-search__input::placeholder {
  color: var(--text-muted);
}
.blog-search__input:focus {
  outline: none;
  border-color: var(--accent-palm-bright);
}
.blog-search__input:focus-visible {
  outline: 2px solid var(--accent-palm-bright);
  outline-offset: 2px;
}
.blog-search__help {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-tags .filter-btn {
  min-height: 44px;
}
.blog-empty {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 12px 0 0;
}
@media (min-width: 769px) {
  .blog-controls {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

/* -- (11) Contrast hardening in both themes -- */
:root[data-theme="light"] .article-page__content,
:root[data-theme="light"] .modal__blog-content {
  color: var(--text-primary);
}
:root[data-theme="light"] .testimonial__stars {
  color: var(--accent-brown);
}
:root[data-theme="light"] .modal__project-title[data-accent="brown"] {
  color: var(--accent-brown) !important;
}
:root[data-theme="light"] .modal__project-title[data-accent="green"] {
  color: var(--accent-green) !important;
}
:root[data-theme="light"] .modal__project-title[data-accent="blue"] {
  color: var(--accent-blue) !important;
}
:root[data-theme="light"] .modal__project-title[data-accent="magenta"] {
  color: var(--accent-magenta) !important;
}
:root[data-theme="light"] .modal__project-title:not([data-accent]) {
  color: var(--text-primary) !important;
}
/* Light-mode cursor keeps a soft halo so it reads over photos */
:root[data-theme="light"] .cursor {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}

/* ============================================================
   31. UI BATCH 2026-10-24: light audit hardening, unified form
   pattern, tradeoff widget. Motion: transform/opacity only.
   Voice: warm first-person. No em dashes.
   ============================================================ */

/* -- Light audit: kill leftover dark washes, cream, invisible text -- */
:root[data-theme="light"] .nav__links {
  background: none;
}
@media (max-width: 768px) {
  :root[data-theme="light"] .nav__links {
    background: rgba(255, 255, 255, 0.98);
  }
  :root[data-theme="light"] .nav__links .nav__link {
    color: var(--text-primary);
  }
  :root[data-theme="light"] .work__row:active {
    border-color: rgba(22, 19, 14, 0.25);
  }
}
:root[data-theme="light"] .modal-overlay {
  background: #FFFFFF;
}
:root[data-theme="light"] .modal-overlay--blog {
  background: #FFFFFF;
}
:root[data-theme="light"] .modal__meta-grid {
  border-top-color: rgba(22, 19, 14, 0.16);
  border-bottom-color: rgba(22, 19, 14, 0.16);
}
:root[data-theme="light"] .modal__project-footer {
  border-top-color: rgba(22, 19, 14, 0.16);
}
:root[data-theme="light"] .modal__gallery-img:hover {
  border-color: rgba(22, 19, 14, 0.3);
}
:root[data-theme="light"] .btn-secondary {
  border-color: rgba(22, 19, 14, 0.35);
}
:root[data-theme="light"] .btn-secondary:hover {
  background: rgba(22, 19, 14, 0.05);
  border-color: var(--text-primary);
}
:root[data-theme="light"] .nav__cta-btn--secondary {
  border-color: rgba(22, 19, 14, 0.35);
  color: var(--text-primary);
}
:root[data-theme="light"] .filter-btn {
  background: #FFFFFF;
}
:root[data-theme="light"] .filter-btn:hover {
  background: #F4F4F4;
}
:root[data-theme="light"] .contact-page--wide .contact-form {
  background: #FFFFFF;
}
:root[data-theme="light"] .faq__item.is-open {
  border-color: rgba(30, 122, 60, 0.5);
}
:root[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F1F1F1;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #C9C9C9;
}
:root[data-theme="light"] ::placeholder {
  color: #8A8580;
  opacity: 1;
}
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
/* Light shadows stay soft, never heavy black */
:root[data-theme="light"] .hero__carousel-item,
:root[data-theme="light"] .work__image-wrap,
:root[data-theme="light"] .archive__card,
:root[data-theme="light"] .modal__blog-featured,
:root[data-theme="light"] .article-page__featured {
  box-shadow: 0 8px 24px rgba(22, 19, 14, 0.1);
}
:root[data-theme="light"] .archive__card:hover {
  box-shadow: 0 12px 28px rgba(22, 19, 14, 0.14);
}
:root[data-theme="light"] .contact__glow {
  opacity: 0.06;
}
/* Cursor stays visible on white */
:root[data-theme="light"] .cursor__crosshair-h,
:root[data-theme="light"] .cursor__crosshair-v,
:root[data-theme="light"] .cursor__dot,
:root[data-theme="light"] .cursor__ring {
  background-color: var(--text-primary);
}
:root[data-theme="light"] .cursor__ring {
  background-color: transparent;
  border-color: var(--text-primary);
}
:root[data-theme="light"] .cursor--hover .cursor__dot {
  background-color: var(--accent-green);
}
:root[data-theme="light"] .cursor--hover .cursor__ring {
  border-color: var(--accent-green);
}

/* -- Unified native form pattern: one ring, one disabled, one error -- */
.contact-form__input,
.contact-form__textarea,
.contact-form__select,
.budget-amount,
.tradeoff__pill {
  transition: background-color 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out;
}
.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible,
.contact-form__select:focus-visible,
.budget-amount:focus-visible,
.budget-range:focus-visible,
.budget-unsure input:focus-visible,
.tradeoff__input:focus-visible + .tradeoff__pill,
.contact-form__submit:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.filter-btn:focus-visible {
  outline: 2px solid var(--accent-palm-bright);
  outline-offset: 2px;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus,
.budget-amount:focus {
  outline: none;
}
.contact-form__input:disabled,
.contact-form__textarea:disabled,
.contact-form__select:disabled,
.budget-range:disabled,
.budget-amount:disabled,
.tradeoff__input:disabled + .tradeoff__pill,
.budget-unsure input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.contact-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.field-error {
  min-height: 20px;
}
/* Native checkboxes and radios share size, accent and ring */
.budget-unsure input[type="checkbox"],
input[type="checkbox"].check-dot,
input[type="radio"].radio-dot {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-palm-bright);
  flex-shrink: 0;
}
input[type="radio"].radio-dot {
  width: 18px;
  height: 18px;
}
/* Hand rolled range: native input, custom track and thumb, keyboard safe */
.budget-range {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  background: transparent;
}
.budget-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--border-default);
}
:root[data-theme="light"] .budget-range::-webkit-slider-runnable-track {
  background: #D9D9D9;
}
.budget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--accent-palm-bright);
  border: 2px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--accent-palm-bright);
}
.budget-range::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--border-default);
}
.budget-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-palm-bright);
  border: 2px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--accent-palm-bright);
}

/* -- Tradeoff widget: three native checkboxes, one segmented control -- */
.tradeoff-group {
  gap: 8px;
}
.tradeoff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-elevated);
}
.tradeoff__opt {
  position: relative;
  display: block;
  min-height: 48px;
}
.tradeoff__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.tradeoff__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border-left: 1px solid var(--border-default);
  transition: background-color 200ms ease-out, color 200ms ease-out, opacity 200ms ease-out;
}
.tradeoff__opt:first-child .tradeoff__pill {
  border-left: none;
}
.tradeoff__input:checked + .tradeoff__pill {
  background: rgba(61, 191, 110, 0.16);
  color: var(--text-primary);
}
:root[data-theme="light"] .tradeoff__input:checked + .tradeoff__pill {
  background: rgba(30, 122, 60, 0.14);
  color: var(--text-primary);
}
.tradeoff__input:focus-visible + .tradeoff__pill {
  outline: 2px solid var(--accent-palm-bright);
  outline-offset: -2px;
}
.tradeoff__input:disabled + .tradeoff__pill {
  opacity: 0.5;
  cursor: not-allowed;
}
.tradeoff-status {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 21px;
}
@media (max-width: 480px) {
  .tradeoff {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }
  .tradeoff__pill {
    border-left: none;
    border-top: 1px solid var(--border-default);
  }
  .tradeoff__opt:first-child .tradeoff__pill {
    border-top: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tradeoff__pill,
  .budget-range::-webkit-slider-thumb,
  .budget-range::-moz-range-thumb {
    transition: none;
  }
}