/* ==========================================================================
   PORTFOLIO — SHARED STYLESHEET
   Theme: Dark minimalist · Cyberpunk industrial orange
   --------------------------------------------------------------------------
   Table of contents
   01. Design tokens (:root)        — edit colors / spacing here
   02. Reset & base
   03. Background layers (canvas + grid)
   04. Layout helpers
   05. Navigation + mobile drawer
   06. Buttons, badges, tags
   07. Glass cards
   08. Hero (index.html)
   09. Section headers & featured teasers
   10. Certificates grid + lightbox (certificates.html)
   11. Projects (projects.html)
   12. Contact (contact.html)
   13. Footer
   14. Reveal-on-scroll animation
   15. Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --orange:        #FF5500;
  --orange-2:      #FF6B00;
  --orange-soft:   rgba(255, 85, 0, 0.12);
  --orange-glow:   rgba(255, 85, 0, 0.45);

  /* Surfaces */
  --bg-0:          #0A0A0C;
  --bg-1:          #121216;
  --glass:         rgba(22, 22, 28, 0.55);
  --glass-strong:  rgba(18, 18, 22, 0.85);
  --border:        rgba(255, 255, 255, 0.08);
  --border-hot:    rgba(255, 107, 0, 0.55);

  /* Text */
  --text:          #EDEDF0;
  --text-dim:      #9A9AA6;
  --text-faint:    #5E5E6A;

  /* Type */
  /* Outfit has no Thai glyphs, so Thai characters fall through to Noto Sans Thai Looped */
  --font-sans:     "Outfit", "Noto Sans Thai Looped", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-thai:     "Noto Sans Thai Looped", "Outfit", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Shape & motion */
  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     22px;
  --blur:          14px;
  --ease:          cubic-bezier(.2, .8, .2, 1);
  --t-fast:        .2s var(--ease);
  --t:             .35s var(--ease);

  /* Layout */
  --container:     1180px;
  --gutter:        clamp(16px, 4vw, 32px);
  --nav-h:         72px;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Keep anchor targets (e.g. projects.html#hydroponics) clear of the fixed navbar */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--orange); color: #000; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #2a2a32; border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }


/* ==========================================================================
   03. BACKGROUND LAYERS
   ========================================================================== */
/* Interactive constellation canvas (drawn by script.js) */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Subtle engineering grid + vignette */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.grid-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(255, 85, 0, 0.10), transparent 70%),
    radial-gradient(500px 400px at 10% 90%, rgba(255, 107, 0, 0.06), transparent 70%);
}


/* ==========================================================================
   04. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 10vw, 120px); }

.page-top { padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 88px)); }

.text-orange { color: var(--orange-2); }

.mono {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ==========================================================================
   05. NAVIGATION + MOBILE DRAWER
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}

/* Added by script.js once the user scrolls */
.navbar.scrolled {
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom-color: var(--border);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
}
.logo span { color: var(--orange); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: .95rem;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
  border-radius: 2px;
}

.nav-cta { margin-left: 10px; }

/* Hamburger */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  position: relative;
  z-index: 120;
}
.hamburger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast), top var(--t);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }

.hamburger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); background: var(--orange); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); background: var(--orange); }

/* Drawer backdrop (mobile only).
   Must sit BELOW .navbar (z-index 100): the drawer lives inside the navbar's
   stacking context, so a higher backdrop would cover and blur the drawer. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  z-index: 99;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }


/* ==========================================================================
   06. BUTTONS, BADGES, TAGS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #0A0A0C;
  box-shadow: 0 0 0 0 var(--orange-glow);
}
.btn-primary:hover {
  box-shadow: 0 8px 30px -6px var(--orange-glow), 0 0 0 1px var(--orange-2);
  transform: translateY(-2px);
}

.btn-ghost {
  border-color: var(--border);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.btn-ghost:hover {
  border-color: var(--border-hot);
  color: var(--orange-2);
  transform: translateY(-2px);
}

.btn-sm { padding: 9px 16px; font-size: .88rem; }

/* Status badge with pulsing dot */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--border-hot);
  background: var(--orange-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--orange-2);
}
.badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--orange-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 85, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 85, 0, 0); }
}

/* Tech stack tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--orange-2);
  background: var(--orange-soft);
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: 6px;
}


/* ==========================================================================
   07. GLASS CARDS
   ========================================================================== */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* Glow-on-hover card. --mx/--my set by script.js for a cursor spotlight */
.card {
  position: relative;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 85, 0, 0.10), transparent 40%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hot);
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.15), 0 20px 50px -20px var(--orange-glow);
}
.card:hover::before { opacity: 1; }


/* ==========================================================================
   08. HERO (index.html)
   ========================================================================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--nav-h);
}

/* Two columns: text (vertically centred) + portrait (resting on the
   bottom edge). Keeping the photo inside .container stops it drifting
   into the far corner on wide screens. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(16px, 3vw, 48px);
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
/* Bottom padding keeps the stats clear of the scroll indicator */
.hero-content { max-width: 860px; position: relative; z-index: 1; padding-bottom: 80px; }

/* The image's bottom is already faded to transparent, so it melts
   into the background; ::before adds a soft orange glow behind it. */
.hero-photo {
  position: relative;
  align-self: end;
  height: min(86vh, 820px, 70vw);
  aspect-ratio: 1000 / 1677;
  pointer-events: none;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 8% 10% 25% 25%;
  background: radial-gradient(closest-side, rgba(255, 85, 0, 0.28), transparent);
  filter: blur(40px);
  z-index: -1;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--orange), var(--orange-2) 60%, #ffb27a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle under the headline: English title + Thai description,
   tied together by an orange accent bar */
.hero-sub {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
  box-shadow: inset 2px 0 12px -8px var(--orange-glow);
}
.hero-sub-title {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.hero-sub-th {
  margin-top: 6px;
  font-family: var(--font-thai);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.75;   /* Thai needs room for tone marks and vowels above/below */
  color: #C4C4CC;
}

/* Any Thai text marked lang="th" anywhere on the site */
:lang(th) { font-family: var(--font-thai); line-height: 1.75; }

.typing-line {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  color: var(--text-dim);
  min-height: 1.8em;
}
.typing-line .prompt { color: var(--orange); margin-right: 8px; }
.typing-text { color: var(--text); }
.cursor {
  display: inline-block;
  width: 10px; height: 1.1em;
  margin-left: 3px;
  background: var(--orange);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Stats row */
.stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
}
.stat {
  padding: 4px 24px;
  border-left: 1px solid var(--border);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-num .plus { color: var(--orange); }
.stat-label { color: var(--text-dim); font-size: .9rem; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
}
.mouse {
  width: 24px; height: 38px;
  border: 2px solid var(--text-faint);
  border-radius: 14px;
  position: relative;
}
.mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--orange);
  animation: wheel 1.8s infinite;
}
@keyframes wheel {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}


/* ==========================================================================
   09. SECTION HEADERS & FEATURED TEASERS
   ========================================================================== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange-2);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--orange);
}
.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section-sub {
  margin-top: 12px;
  max-width: 560px;
  color: var(--text-dim);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-2);
  font-weight: 600;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Featured projects carousel — slides share one grid cell and cross-fade,
   so the box always fits the tallest slide. Timing lives in --showcase-ms;
   script.js advances when the active dot's progress bar finishes. */
.showcase { --showcase-ms: 6s; }
.showcase-track { display: grid; }
.showcase-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s, border-color var(--t);
}
.showcase-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s, border-color var(--t);
}
.showcase-slide:hover { border-color: var(--border-hot); }

.showcase-media { position: relative; min-height: 100%; background: var(--bg-1); }
.showcase-media img {
  width: 100%; height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 6s linear;
}
.showcase-slide.is-active .showcase-media img { transform: scale(1); }
.showcase-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(10, 10, 12, 0.55));
  pointer-events: none;
}

.showcase-body {
  padding: clamp(24px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.showcase-index { color: var(--orange-2); font-size: .8rem; }
.showcase-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.showcase-body p { color: var(--text-dim); }
.showcase-award {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(245, 184, 61, 0.1);
  border: 1px solid rgba(245, 184, 61, 0.35);
  color: #F5C661 !important;
  font-size: .9rem;
  font-weight: 500;
}
.showcase-award svg { width: 18px; height: 18px; flex-shrink: 0; }
.showcase-body .link-arrow { margin-top: 6px; }

.showcase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.showcase-arrow {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.showcase-arrow:hover { border-color: var(--border-hot); color: var(--orange-2); }
.showcase-arrow svg { width: 18px; height: 18px; }
.showcase-dots { display: flex; gap: 8px; }
.showcase-dot {
  position: relative;
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  cursor: pointer;
  transition: width var(--t);
}
.showcase-dot.is-active { width: 42px; }
.showcase-dot span {
  position: absolute; inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.showcase-dot.is-active span { animation: showcase-progress var(--showcase-ms) linear forwards; }
.showcase:hover .showcase-dot span,
.showcase:focus-within .showcase-dot span { animation-play-state: paused; }
@keyframes showcase-progress { to { transform: scaleX(1); } }

/* Award carousel variant — three cards: the centre one sits on top and the
   previous/next awards peek out behind it (sides are dropped on phones).
   Cards are opaque so the overlap doesn't show through the glass blur. */
.showcase--cert .showcase-slide {
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  width: min(520px, 56%);
  background: #141418;
  transform: scale(.7);
  z-index: 1;
}
.showcase--cert .showcase-slide.is-active {
  z-index: 3;
  transform: none;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 107, 0, 0.25);
}
.showcase--cert .showcase-slide.is-prev,
.showcase--cert .showcase-slide.is-next {
  z-index: 2;
  opacity: .4;
  visibility: visible;
  cursor: pointer;
  filter: saturate(.5);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease), visibility 0s, border-color var(--t);
}
.showcase--cert .showcase-slide.is-prev { transform: translateX(-58%) scale(.82); }
.showcase--cert .showcase-slide.is-next { transform: translateX(58%) scale(.82); }
.showcase--cert .showcase-slide.is-prev:hover,
.showcase--cert .showcase-slide.is-next:hover { opacity: .65; }
.showcase--cert .showcase-body { padding: 22px 26px 26px; gap: 10px; }
.showcase--cert .showcase-body h3 { font-size: 1.25rem; }
.showcase--cert .showcase-media {
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 24px);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.06), transparent 70%), var(--bg-1);
}
.showcase--cert .showcase-media::after { display: none; }
.showcase--cert .showcase-media img {
  height: auto;
  aspect-ratio: 297 / 210;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.showcase-org { color: var(--text-faint); font-size: .85rem; }

.teaser-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--orange-soft);
  border: 1px solid rgba(255, 107, 0, 0.3);
  color: var(--orange-2);
}
.teaser-icon svg { width: 22px; height: 22px; }

/* CTA banner */
.cta-banner {
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(255, 85, 0, 0.18), transparent 70%),
    var(--glass);
}
.cta-banner h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }
.cta-banner p { color: var(--text-dim); margin: 12px auto 28px; max-width: 520px; }


/* ==========================================================================
   10. CERTIFICATES GRID + LIGHTBOX (certificates.html)
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-dim);
  font-size: .88rem;
  transition: all var(--t-fast);
}
.filter-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.filter-btn.active {
  color: #0A0A0C;
  background: var(--orange);
  border-color: var(--orange);
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.cert-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
}
.cert-card.hidden { display: none; }

.cert-thumb {
  position: relative;
  aspect-ratio: 297 / 210;   /* landscape A4, so certificates aren't cropped */
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.cert-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter var(--t);
  filter: saturate(.85) brightness(.9);
}
.cert-card:hover .cert-thumb img { transform: scale(1.06); filter: none; }

.cert-thumb .zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 12, 0.55);
  opacity: 0;
  transition: opacity var(--t);
}
.cert-thumb .zoom span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-hot);
  background: rgba(10, 10, 12, 0.7);
  color: var(--orange-2);
  font-size: .85rem;
}
.cert-card:hover .zoom,
.cert-card:focus-visible .zoom { opacity: 1; }

.cert-body { padding: 18px 20px 20px; }
.cert-body h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.cert-meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-dim);
  font-size: .85rem;
}
.cert-meta .date { font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; }

/* Lightbox modal */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-panel {
  width: 100%;
  max-width: 980px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--glass-strong);
  border: 1px solid var(--border-hot);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 80px -20px var(--orange-glow);
  transform: translateY(20px) scale(.97);
  transition: transform var(--t);
}
.lightbox.open .lightbox-panel { transform: none; }

.lightbox-img-wrap {
  background: #000;
  border-bottom: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.lightbox-img-wrap img {
  max-height: 64vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.lightbox-info { padding: clamp(20px, 4vw, 32px); }
.lightbox-info h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; line-height: 1.25; }
.lightbox-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: var(--text-dim);
}
.lightbox-meta span { display: inline-flex; align-items: center; gap: 8px; }
.lightbox-meta svg { width: 16px; height: 16px; color: var(--orange-2); }
.lightbox-desc { margin-top: 18px; color: var(--text); opacity: .88; }
.lightbox-info .tags { margin-top: 18px; }

.lightbox-close,
.lightbox-nav {
  position: fixed;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
.lightbox-close:hover,
.lightbox-nav:hover { border-color: var(--orange); color: var(--orange-2); }
.lightbox-close svg,
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-nav.prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 18px; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   11. PROJECTS
       11a. Overview grid (projects.html)
       11b. Project detail pages (projects/*.html)
   ========================================================================== */

/* Shared media box: blueprint-grid background, holds an image, video or
   placeholder icon. Used by overview thumbnails and the detail cover. */
.project-media {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 85, 0, 0.14), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px),
    var(--bg-1);
}
.project-media img,
.project-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

/* ---------- 11a. Overview grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.work-card { display: flex; flex-direction: column; }
.work-card.hidden { display: none; }
.work-card .project-media {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--border);
}
.work-card:hover .project-media img { transform: scale(1.05); }

.work-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}
.work-body h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.work-body p { color: var(--text-dim); font-size: .95rem; flex-grow: 1; }
.work-body .link-arrow { margin-top: 4px; }
.work-card:hover .link-arrow svg { transform: translateX(4px); }

/* ---------- 11b. Project detail pages ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: .92rem;
  margin-bottom: 28px;
  transition: color var(--t-fast);
}
.back-link svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.back-link:hover { color: var(--orange-2); }
.back-link:hover svg { transform: translateX(-4px); }

/* Full-width header with the project photo as background.
   Layers (bottom → top): blueprint gradient → big faint icon (shown only
   when there's no photo) → photo → dark overlay → text. */
.pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 32px) 0 clamp(72px, 9vw, 110px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(700px 400px at 80% 30%, rgba(255, 85, 0, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px),
    var(--bg-1);
}
.pd-hero-icon {
  position: absolute;
  right: 4%; top: 50%;
  width: min(46vw, 520px);
  transform: translateY(-50%);
  color: rgba(255, 107, 0, 0.16);
  z-index: 0;
}
.pd-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  animation: pd-zoom 18s ease-out both;   /* slow Ken Burns push-in */
}
@keyframes pd-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.pd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.75) 0%, transparent 24%),   /* keeps the navbar readable */
    linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.72) 45%, rgba(10, 10, 12, 0.2) 100%),
    linear-gradient(0deg, var(--bg-0) 0%, transparent 45%);
}
.pd-hero-inner { position: relative; z-index: 3; }
.pd-hero-content { max-width: 760px; }
.pd-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.pd-title {
  margin-top: 12px;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.pd-lead {
  margin-top: 18px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-dim);
}
.pd-hero .tags { margin-top: 22px; }

/* Year / role / duration / team strip — pulled up to overlap the header */
.pd-meta {
  position: relative;
  z-index: 4;
  margin-top: -40px;
  background: var(--glass-strong);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pd-meta > div { padding: 18px 22px; border-left: 1px solid var(--border); }
.pd-meta > div:first-child { border-left: 0; }
.pd-meta dt { color: var(--text-faint); margin-bottom: 4px; }
.pd-meta dd { font-weight: 600; }


/* Main write-up + sticky sidebar */
.pd-layout {
  margin-top: clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.pd-section + .pd-section { margin-top: 48px; }
.pd-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 14px;
}
.pd-section h2 .mono { color: var(--orange-2); font-size: .8rem; }
.pd-section p { color: var(--text); line-height: 1.85; }   /* white body text; tall lines suit Thai */
.pd-section p + p { margin-top: 12px; }
.pd-section ul + p { margin-top: 16px; }

/* Sub-heading inside a section (e.g. "ด้านการออกแบบโครงสร้าง") */
.pd-section h3 {
  margin: 26px 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--orange);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.5;
}
.pd-section h2 + h3 { margin-top: 6px; }

/* Pull quote */
.pd-quote {
  margin: 22px 0;
  padding: 18px 22px 18px 26px;
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--orange-soft), transparent);
  border-left: 3px solid var(--orange);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--orange-2);
}
.pd-quote::before { content: "“"; margin-right: 2px; }
.pd-quote::after  { content: "”"; margin-left: 2px; }
.pd-after-awards { margin-top: 20px; }

/* Full-width figure (e.g. system diagram) — shown uncropped */
.pd-gallery.pd-figure-wide { grid-template-columns: 1fr; }
.pd-gallery.pd-figure-wide img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; }
.pd-gallery.pd-figure-wide figure:hover img { transform: none; }

/* Numbered process steps with a connecting line */
.process-steps {
  margin-top: 26px;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 18px;
}
.process-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
}
.process-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--orange-2);
  background: var(--orange-soft);
  border: 1px solid var(--border-hot);
}
.process-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px; top: 40px; bottom: -14px;
  width: 2px;
  background: linear-gradient(var(--border-hot), transparent);
}
.process-steps strong { display: block; font-weight: 600; font-size: 1.05rem; line-height: 34px; }
.process-steps p { margin-top: 2px; }

/* Version comparison (V1 → V2) */
.evolution {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.evo-card { overflow: hidden; }
.evo-card.is-new {
  border-color: var(--border-hot);
  box-shadow: 0 0 40px -16px var(--orange-glow);
}
.evo-media { aspect-ratio: 4 / 3; background: var(--bg-1); border-bottom: 1px solid var(--border); }
.evo-media img { width: 100%; height: 100%; object-fit: cover; }
.evo-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.evo-body .mono { font-size: .7rem; color: var(--text-faint); }
.evo-card.is-new .evo-body .mono { color: var(--orange-2); }
.evo-body strong { font-weight: 600; line-height: 1.45; }
.evo-body small { font-size: .82rem; color: var(--text-dim); line-height: 1.5; }
.evo-arrow {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--orange-2);
}
.evo-arrow .mono { font-size: .7rem; }
.evo-arrow svg { width: 28px; height: 28px; }

/* System diagram: main node on top, two branches below */
.sys-diagram {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.sys-node {
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sys-node .mono { font-size: .68rem; color: var(--text-faint); }
.sys-node strong { font-weight: 600; line-height: 1.35; }
.sys-node small { font-size: .82rem; color: var(--text-dim); line-height: 1.5; }
.sys-node.main {
  grid-column: 1 / -1;
  border-color: var(--border-hot);
  box-shadow: 0 0 40px -14px var(--orange-glow);
}
.sys-node.main .mono { color: var(--orange-2); }
.sys-link {
  position: relative;
  height: 46px;
  display: grid;
  place-items: center;
}
.sys-link::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(var(--orange), rgba(255, 107, 0, 0.35));
}
.sys-link span {
  position: relative;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .66rem;
  color: var(--orange-2);
  background: var(--bg-0);
  border: 1px solid var(--border-hot);
}
.pd-section .project-highlights { margin-top: 14px; }
.pd-section .project-highlights li { font-size: 1rem; opacity: 1; line-height: 1.8; }

/* Awards list — tier colour via data-tier="gold|silver|bronze" */
.awards {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.awards-single { grid-template-columns: 1fr; }
.award {
  --tier: #F5B83D;
  --tier-soft: rgba(245, 184, 61, 0.12);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 20px;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.award[data-tier="silver"] { --tier: #C9CED8; --tier-soft: rgba(201, 206, 216, 0.12); }
.award[data-tier="bronze"] { --tier: #D9894F; --tier-soft: rgba(217, 137, 79, 0.12); }

/* Coloured accent bar on the left edge */
.award::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tier);
  box-shadow: 0 0 12px var(--tier);
}
.award:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tier) 45%, transparent);
  box-shadow: 0 16px 40px -20px var(--tier);
}

.award-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--tier);
  background: var(--tier-soft);
  border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent);
}
.award-icon svg { width: 24px; height: 24px; }

.award-text { flex: 1; min-width: 0; }
.award-text strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.award-text span {
  display: block;
  margin-top: 2px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.award-year {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: .72rem;
  color: var(--tier);
  background: var(--tier-soft);
}

/* Result numbers */
.pd-results {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pd-results div { padding: 18px; }
.pd-results strong {
  display: block;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--orange-2);
  line-height: 1.1;
}
.pd-results span { color: var(--text-dim); font-size: .88rem; }

.pd-aside {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 24px;
  display: grid;
  gap: 24px;
}
.pd-aside h3 { color: var(--text-faint); margin-bottom: 10px; }
.pd-aside .project-links { margin-top: 0; padding-top: 0; flex-direction: column; }
.pd-aside .project-links .btn { width: 100%; }

/* Photo gallery (click to enlarge — handled by script.js) */
.pd-gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.pd-gallery figure {
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-1);
  transition: border-color var(--t);
}
.pd-gallery figure:hover { border-color: var(--border-hot); }
.pd-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pd-gallery figure:hover img { transform: scale(1.05); }
.pd-gallery figcaption { padding: 10px 12px; font-size: .85rem; color: var(--text-dim); }

.gallery-caption { padding: 16px 22px; color: var(--text-dim); }

/* Previous / next project */
.pd-pager {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pd-pager a { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.pd-pager a.next { text-align: right; align-items: flex-end; }
.pd-pager .mono { color: var(--text-faint); }
.pd-pager strong { font-size: 1.15rem; font-weight: 600; }

/* Placeholder content shown when there's no image yet */
.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}
.media-placeholder svg { width: 64px; height: 64px; color: rgba(255, 107, 0, 0.5); }

.play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 85, 0, 0.9);
  color: #0A0A0C;
  box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.18), 0 0 40px var(--orange-glow);
  transition: transform var(--t-fast);
}
.play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
.play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }

.media-label {
  position: absolute;
  top: 16px; left: 16px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid var(--border);
  color: var(--orange-2);
  z-index: 1;
}

.project-highlights { display: grid; gap: 8px; }
.project-highlights li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  opacity: .85;
  font-size: .94rem;
}
.project-highlights li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 2px;
  background: var(--orange);
}

.project-links {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Video modal (projects page) reuses the .lightbox base */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}


/* ==========================================================================
   12. CONTACT (contact.html)
   ========================================================================== */
.contact-grid { max-width: 880px; }

.contact-side { display: grid; gap: 18px; }
.info-card { padding: 24px; }
.info-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
.info-card p { color: var(--text-dim); font-size: .94rem; }

.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #6be0a0;
  font-size: .88rem;
}
.availability .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 10px #2ecc71;
}

.social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.social-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.social-badge .teaser-icon { width: 42px; height: 42px; flex-shrink: 0; }
.social-badge .s-text { min-width: 0; flex: 1; }
.social-badge strong { display: block; font-weight: 600; font-size: .96rem; }
.social-badge small {
  display: block;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-badge .arrow { width: 18px; height: 18px; color: var(--text-faint); transition: transform var(--t-fast), color var(--t-fast); }
.social-badge:hover .arrow { color: var(--orange-2); transform: translate(3px, -3px); }

/* Toast (used for "copied!" messages) */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 20px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--border-hot);
  color: var(--text);
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  z-index: 300;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 32px;
  margin-top: 40px;
  color: var(--text-faint);
  font-size: .88rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a:hover { color: var(--orange-2); }


/* ==========================================================================
   14. REVEAL-ON-SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* Stagger children via inline style="--d: 1" etc. */
.reveal { transition-delay: calc(var(--d, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* No auto-motion: carousels stay on manual arrows/dots (script.js skips autoplay) */
  .showcase-dot.is-active span { animation: none; transform: scaleX(1); }
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .contact-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Mobile drawer */
  .hamburger { display: block; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: calc(var(--nav-h) + 20px) 24px 24px;
    /* Near-opaque: nested backdrop-filter is unreliable inside the scrolled navbar */
    background: rgba(14, 14, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform var(--t);
    z-index: 110;
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px 16px; font-size: 1.05rem; }
  .nav-links a.active { background: var(--orange-soft); color: var(--orange-2); }
  .nav-links a.active::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .nav-cta { margin: 16px 0 0; }

  /* Hero stacks: portrait FIRST so it's visible as soon as the page opens.
     Its faded bottom overlaps slightly into the badge for a seamless blend. */
  .hero { min-height: 0; padding-bottom: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-photo {
    order: -1;
    justify-self: center;
    height: min(46vh, 420px);
    margin: 8px 0 -36px;
  }
  .hero-content { padding-bottom: 0; }
  .hero-content h1 { margin-top: 20px; }
  .scroll-indicator { display: none; }

  /* Project detail: sidebar drops below the write-up */
  .pd-layout { grid-template-columns: minmax(0, 1fr); }
  .pd-aside { position: static; }
  .pd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-meta > div:nth-child(3) { border-left: 0; }
  .pd-meta > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  /* Header: darker overlay since text spans the full width of the photo */
  .pd-hero { min-height: 0; }
  .pd-hero::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.82) 55%, var(--bg-0) 100%);
  }
  .pd-hero-icon { right: -10%; top: 30%; width: 80vw; }

  .lightbox-nav { display: none; }

  /* Carousel: photo on top, text below */
  .showcase-slide { grid-template-columns: minmax(0, 1fr); }
  .showcase--cert .showcase-slide { width: min(440px, 60%); }
  .showcase-media::after { background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 12, 0.5)); }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .stats { gap: 0; }
  .stat { padding: 4px 12px; }
  .stat-label { font-size: .78rem; }

  .hero-ctas .btn { flex: 1 1 auto; }
  .scroll-indicator { display: none; }

  .cert-grid { grid-template-columns: 1fr; }
  .showcase-award { font-size: .82rem; }
  /* Phones: centre card only, full width */
  .showcase--cert .showcase-slide { width: 100%; }
  .showcase--cert .showcase-slide.is-prev,
  .showcase--cert .showcase-slide.is-next { opacity: 0; visibility: hidden; pointer-events: none; }
  .work-grid { grid-template-columns: 1fr; }
  .social-list { grid-template-columns: 1fr; }
  .lightbox-close { top: 10px; right: 10px; }

  .pd-results { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .evolution { grid-template-columns: 1fr; }
  .evo-arrow svg { transform: rotate(90deg); }
  .pd-pager { grid-template-columns: 1fr; }
  .pd-pager a.next { text-align: left; align-items: flex-start; }
}