/* =========================================================
   PREMIUM LAYER — warm ivory theme, navigation, per-section layouts
   Loaded after style.css; redefines the design tokens.
   Original layer restored; fonts/tokens up top, small additive fixes at the bottom
   ========================================================= */

/* ---------- 1. Fonts & tokens (self-hosted variable fonts, Latin subset) ---------- */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@view-transition { navigation: auto; }


/* original top-bar typefaces (kept for the protected nav only) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/source-sans-3-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root {
  --bg: #f5f2ee; --primary: #1f1f1f; --text: #2e2b28; --muted: #5f574f;
  --accent: #6f4130; --accent-hover: #59331f; --accent-soft: #ebe4da;
  --secondary: #ffffff; --line: #d6ccbe; --ink: #292929; --taupe: #b5a493; --amber: #d99a4e;
  --shadow: 0 18px 40px -18px rgba(41, 41, 41, .22);
}

body { background: var(--bg) !important; color: var(--text); padding-top: 64px; }
::selection { background: var(--accent); color: #fff; }
.about-section { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
.hero-grid-bg { opacity: .35; }
.hero-badge, .hero-founder, .hero-caption { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn-primary, .btn-journey-arrow, .hero-nav-pill:hover, .method-card:hover .method-label, .method-card:hover .method-value { color: #fff; }
.right-dots { display: none; }              /* replaced by the top navigation */
.slideshow-container, .info-card, .nav-card { box-shadow: var(--shadow); }
.contact-panel { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow); }
.method-card { background: var(--bg) !important; }
.proj-top { color: var(--ink); } .proj-top h3 { color: var(--ink); }

/* ---------- top navigation (Centered) ---------- */
.site-nav { 
  position: fixed; inset: 0 0 auto 0; height: 64px; z-index: 2000; 
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; 
  padding: 0 24px; background: rgba(245, 242, 238, .95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); 
}
.site-nav .brand { grid-column: 1; font: 700 18px "Playfair Display", serif; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.site-nav .brand b { color: var(--accent); }
.nav-links { grid-column: 2; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.nav-links a { display: block; padding: 8px 10px; border-radius: 999px; font: 500 13px "Source Sans 3", sans-serif; color: var(--muted); text-decoration: none; transition: all .25s; white-space: nowrap; }
.nav-links-cta { display: none; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--accent-soft); }
.nav-cta-btn { grid-column: 3; background: var(--accent); color: #fff !important; padding: 8px 16px; border-radius: 999px; font: 600 13px "Source Sans 3", sans-serif; text-decoration: none; transition: all .25s; white-space: nowrap; }
.nav-cta-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.nav-toggle { display: none; grid-column: 3; justify-self: end; background: none; border: 1px solid var(--line); border-radius: 10px; width: 40px; height: 40px; font-size: 16px; color: var(--ink); cursor: pointer; }
.scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 2100; }

/* Mobile Menu */
@media (max-width: 1250px) {
  .site-nav { display: flex; justify-content: space-between; }
  .nav-toggle { display: block; }
  .nav-cta-btn { display: none; }
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; justify-content: flex-start; padding: 24px; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 20px 40px rgba(0,0,0,0.1); gap: 8px; z-index: 1999; }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a { padding: 14px 16px; font-size: 16px; border-radius: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .nav-links-cta { display: block; margin-top: 16px; }
  .nav-links .nav-links-cta a { padding: 16px; background: var(--accent); color: #fff; border-radius: 12px; text-align: center; font-weight: 600; font-size: 16px; border-bottom: 0; }
  .nav-links { visibility: hidden; transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear .35s; }   /* closed menu links are not keyboard-focusable */
  .nav-links.open { visibility: visible; transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }
}

/* ---------- video section ---------- */
.video-section .video-frame { position: relative; max-width: 960px; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(41, 41, 41, .45); border: 1px solid var(--line); transform-style: preserve-3d; transition: transform .2s ease-out; aspect-ratio: 16/9; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 28px; cursor: pointer; box-shadow: 0 0 0 12px rgba(255, 255, 255, .25); transition: transform .3s var(--ease), box-shadow .3s; }
.video-play:hover, .video-play:focus-visible { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(255, 255, 255, .22); outline: none; }
.video-frame.playing .video-play { opacity: 0; pointer-events: none; }

/* ---------- 3D tilt + reveal ---------- */
[data-tilt] { transition: transform .25s ease-out, box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.reveal-in { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-in.seen { opacity: 1; transform: none; }
.recognition-list-item { background: #fff !important; box-shadow: var(--shadow); }

/* ---------- distinct layout per section ---------- */
#international .recognition-list, #national .recognition-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
#international .recognition-list-item, #national .recognition-list-item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; min-height: 210px; border-radius: 22px; }
#international .recognition-item-cta, #national .recognition-item-cta { margin: auto 0 0; }
#international .recognition-list-item { background: linear-gradient(160deg, #fff, var(--accent-soft)) !important; }

#internship-research .recognition-list, #internships .recognition-list, #research .recognition-list, #activity .recognition-list { position: relative; padding-left: 38px; }
#internship-research .recognition-list::before, #internships .recognition-list::before, #research .recognition-list::before, #activity .recognition-list::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--line)); }
#internship-research .recognition-list-item::after, #internships .recognition-list-item::after, #research .recognition-list-item::after, #activity .recognition-list-item::after { content: ""; position: absolute; left: -35px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
#internship-research .recognition-list-item, #internships .recognition-list-item, #research .recognition-list-item, #activity .recognition-list-item { overflow: visible; }

#projects .recognition-list-item { padding: 34px 32px; border-radius: 22px; }
#projects .recognition-item-text h3 { font-size: 22px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 36px 28px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font: 14px var(--font-body); color: var(--muted); }
.site-footer a { color: var(--ink); text-decoration: none; margin-left: 18px; } .site-footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .reveal-in { opacity: 1; transform: none; transition: none; }
  [data-tilt], .video-frame { transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===== Modern Editorial theme ===== */
body { font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; }
.hero h1 { letter-spacing: -.03em; font-size: clamp(44px, 6vw, 64px); }
#national, #research, #projects, #activity { background: #fff; }
.hero-pill { display: inline-block; font: 600 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .75); margin-bottom: 22px; }
.btn-journey { background: var(--accent); border-color: var(--accent); }
.btn-journey span:first-child, .btn-journey:hover span:first-child { color: #fff; }
.btn-journey:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-journey-arrow, .btn-journey:hover .btn-journey-arrow { background: #fff; color: var(--accent); }
.status-tag { background: var(--accent-soft); border-color: var(--taupe); color: var(--accent); }
.credentials-strip span, .skill-chips span { background: #fff; }
.stack-card, .detail-media { background: linear-gradient(135deg, #cbbfae 0%, #b5a493 50%, #8f7e6b 100%); }
.right-dot::after { color: #fff; }

/* Intro screen matches the new ivory video */
.video-intro, .video-intro-media { background: #f5f2ee; }
.video-intro-veil { display: none; }
.video-skip { background: rgba(255, 255, 255, .85); color: var(--ink); border-color: var(--accent); }
.video-skip i { color: var(--accent); }
.video-skip:hover, .video-skip:hover i { background: var(--accent); color: #fff; }
@media (max-width: 860px) { .video-intro-media { object-fit: contain; } }

/* ===== Visibility: stronger contrast ===== */
.recognition-list-item, .info-card, .photo-frame, .credentials-strip span { border: 1px solid #d6ccbe; }
.recognition-list-item h3 { color: #1f1f1f; font-weight: 700; }
.recognition-item-text .short-form, .section-head p, .stat-label { color: var(--muted); }
.recognition-item-cta { opacity: 1; font-weight: 600; }
.eyebrow { font-size: 13px; }

/* ===== Hero photo ===== */
.pf-stage { position: relative; z-index: 2; width: min(100%, 480px, calc((100svh - 210px) * 0.75 + 24px)); }
.pf-back { position: absolute; inset: 0; border-radius: 32px; background: linear-gradient(145deg, #cbbfae, #b5a493); transform: translate(16px, 14px) rotate(4deg); opacity: .75; }
.photo-frame { position: relative; z-index: 1; background: #fff; border-radius: 30px; padding: 12px; box-shadow: 0 30px 60px -26px rgba(41, 41, 41, .45); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; animation: flyRight 1s .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.photo-frame.dragging { cursor: grabbing; box-shadow: 0 44px 70px -22px rgba(41, 41, 41, .5); }
.photo-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pf-media { border-radius: 22px; overflow: hidden; background: var(--accent-soft); aspect-ratio: 3 / 4; width: 100%; box-shadow: inset 0 0 0 1px rgba(41, 41, 41, .06); }
.pf-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; pointer-events: none; }
.pf-chip { position: absolute; left: -18px; bottom: 30px; display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--font-body); color: #fff; background: var(--accent); padding: 9px 15px; border-radius: 999px; box-shadow: 0 12px 24px -10px rgba(111, 65, 48, .6); }
.pf-badge { position: absolute; right: -14px; top: 34px; display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 8px 13px; border-radius: 999px; box-shadow: var(--shadow); }
.pf-badge i { color: var(--accent); }
@keyframes flyRight { from { opacity: 0; transform: translate3d(140px, 40px, -200px) perspective(900px) rotateY(-35deg); } }
@media (max-width: 860px) { .landing-page .hero .wrap { grid-template-columns: 1fr; } .hero-minimal { min-height: auto; padding: 48px 0; } }

/* ===== 3D fly-in ===== */
@keyframes fly3d {
  from { opacity: 0; transform: perspective(1100px) translate3d(var(--fx, 0), var(--fy, 70px), -320px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  to   { opacity: 1; transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0) rotateY(0); }
}
[data-fly] { opacity: 0; }
.fly-on [data-fly] { opacity: 1; animation: fly3d .95s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 85ms + 80ms); }
@media (prefers-reduced-motion: reduce) { [data-fly] { opacity: 1; } .fly-on [data-fly] { animation: none; } .photo-frame { animation: none; } }

/* ===== Contact ===== */
.contact-methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.method-card { min-width: 0; flex: initial; }
.method-content { min-width: 0; }
.method-value { overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.method-label { color: var(--muted); }
.method-card:hover, .method-card:focus-visible, .method-card:active { background: var(--accent) !important; border-color: var(--accent); outline: none; }
.method-card:hover .method-label, .method-card:focus-visible .method-label, .method-card:active .method-label { color: rgba(255, 255, 255, .85); }
.method-card:hover .method-value, .method-card:focus-visible .method-value, .method-card:active .method-value { color: #fff; }
.method-card:hover .method-icon, .method-card:focus-visible .method-icon, .method-card:active .method-icon { background: #fff; color: var(--accent); }

/* ===== One screen per section ===== */
.landing-page .screen > .wrap { width: 100%; }
.landing-page .screen:not(#contact) .section-id { display: none !important; }
.section-head h2 { line-height: 1.15; }
.credentials-strip span { font-size: 11.5px; padding: 7px 12px; }
@media (max-width: 860px) { .landing-page .hero-minimal { flex-direction: column; } .hero-minimal .credentials-strip { position: static; margin-top: 24px; } }

@media (min-width: 861px) and (min-height: 480px) {
  html:has(body.landing-page) { scroll-snap-type: y mandatory; }
  
  .landing-page .hero-minimal, .landing-page .screen:not(#contact) { 
    min-height: calc(100vh - 64px); 
    min-height: calc(100svh - 64px); 
    padding: 16px 0 !important; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    scroll-snap-align: start; 
    scroll-margin-top: 64px; 
  }
  
  .landing-page #contact { scroll-snap-align: start; scroll-margin-top: 64px; }
  .landing-page .site-footer { scroll-snap-align: end; }
  .landing-page .hero-minimal { position: relative; }
  .hero-minimal .credentials-strip { position: absolute; left: 0; right: 0; bottom: 10px; padding: 0; margin: 0; }
  
  .wrap { max-width: 1500px; } 
  
  .landing-page .screen:not(#contact) .section-head { margin-bottom: 12px; max-width: 100%; }
  .landing-page .screen:not(#contact) .section-head h2 { font-size: clamp(28px, 3vw, 36px); margin: 4px 0 6px; }
  .landing-page .screen:not(#contact) .section-head p { font-size: 15px; }
  
  /* ===== ABOUT GRID FIX ===== */
  .about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
  .about-left-col { display: flex; flex-direction: column; justify-content: center; }
  .about-head { margin-bottom: 24px; }
  .about-head h2 { font-size: clamp(32px, 3.5vw, 42px); margin: 8px 0 0; line-height: 1.15; }
  .about-content p { max-width: 100%; font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
  .about-stats { margin-top: 24px; gap: 40px; }
  .about-stats .stat-num { font-size: 34px; }
  .about-stats .stat-label { font-size: 13.5px; margin-top: 4px; }
  .info-card { background: linear-gradient(145deg, #fff 0%, var(--bg) 100%); border: 1px solid var(--line); border-radius: 20px; padding: 36px 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; justify-self: center; max-width: 480px; width: 100%; align-self: center; }
  .info-header { margin-bottom: 20px; }
  .info-header h3 { font-size: 22px; margin: 0; }
  .info-row { padding: 14px 0; gap: 16px; }
  .info-icon { width: 40px; height: 40px; font-size: 16px; }
  .info-row h4 { font-size: 12.5px; margin-bottom: 4px; }
  .info-row p { font-size: 14px; }
  /* ===== END ABOUT GRID FIX ===== */
  
  .video-section .video-frame { max-width: min(800px, calc((100svh - 250px) * 16 / 9)); }
  .char-canvas, .skills-world { height: min(460px, calc(100svh - 260px)); min-height: 260px; }

  /* International (4): plain divider list, no boxes */
  .landing-page #international .recognition-list { display: flex; flex-direction: column; gap: 0; }
  .landing-page #international .recognition-list .recognition-list-item { flex-direction: row; align-items: center; min-height: 0; padding: 16px 6px; gap: 16px; background: transparent !important; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .landing-page #international .recognition-list .recognition-list-item:first-child { border-top: 1px solid var(--line); }
  .landing-page #international .recognition-list-item::before { display: none; }
  .landing-page #international .recognition-list-item:hover { transform: translateX(8px); }
  .landing-page #international .recognition-item-cta { margin: 0 0 0 auto; }
  .landing-page #international .recognition-list-item h3 { font-size: 16px; }

  /* National / Activity: small horizontal cards */
  .landing-page #national .recognition-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .landing-page #national .recognition-list .recognition-list-item { flex: initial; min-height: 0; padding: 16px 20px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; border-radius: 20px; overflow: hidden; background: #fff !important; }
  .landing-page #national .recognition-item-icon { width: 44px; height: 44px; font-size: 16px; margin: 0; flex-shrink: 0; background: var(--accent-soft); border: 1px solid var(--accent); }
  .landing-page #national .recognition-item-text h3 { font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
  .landing-page #national .recognition-item-cta { margin: 0 0 0 auto; opacity: 0.6; transition: opacity 0.2s; }
  .landing-page #national .recognition-list-item:hover .recognition-item-cta { opacity: 1; }
  .landing-page #national .status-tag { font-size: 11px; padding: 3px 10px; }

  /* Internship & Research / Academic Journey */
  .landing-page #internship-research .recognition-list, .landing-page #academic-journey .recognition-list { gap: 8px; }
  .landing-page #internship-research .recognition-list-item, .landing-page #academic-journey .recognition-list-item { padding: 12px 18px; min-height: 0; }
  .landing-page #internship-research .recognition-list-item h3, .landing-page #academic-journey .recognition-list-item h3 { font-size: 15px; }
  .landing-page #internship-research .recognition-item-icon, .landing-page #academic-journey .recognition-item-icon { width: 34px; height: 34px; font-size: 13px; margin-right: 12px; }
  .landing-page #internship-research .status-tag, .landing-page #academic-journey .status-tag { font-size: 11px; padding: 2px 8px; }

  /* Projects */
  .landing-page #projects .recognition-list { flex-direction: row; gap: 20px; }
  .landing-page #projects .recognition-list .recognition-list-item { flex: 1; min-height: 0; padding: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Beyond the Lab */
  .landing-page #beyond-the-lab .recognition-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; overflow-x: visible !important; padding: 0 !important; max-width: 100%; }
  .landing-page #beyond-the-lab .recognition-list .recognition-list-item { flex: initial !important; min-height: 0 !important; padding: 16px !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; border-radius: 16px !important; background: #fff !important; gap: 8px !important; }
  .landing-page #beyond-the-lab .recognition-item-icon { width: 34px; height: 34px; font-size: 13px; margin-bottom: 6px; }
  .landing-page #beyond-the-lab h3 { font-size: 14px; margin-bottom: 4px; line-height: 1.2; }
  .landing-page #beyond-the-lab .status-tag { font-size: 11px; padding: 2px 6px; }
  .landing-page #beyond-the-lab .recognition-item-cta { margin: auto 0 0; font-size: 11px; }
}

/* ===== Round 5 tweaks ===== */
.landing-page .hero .credentials-strip .wrap { display: flex; grid-template-columns: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 40px; }
.playground-grid { grid-template-columns: 1.2fr 1fr; }
.char-canvas, .skills-world { border: 0 !important; background: transparent !important; border-radius: 0; }

@media (min-width: 861px) and (min-height: 480px) {
  .landing-page #activity .recognition-list { display: flex !important; flex-direction: column; gap: 14px; position: relative; padding: 0 0 0 38px; }
  .landing-page #activity .recognition-list::before, .landing-page #activity .recognition-list-item::after { display: block; }
  .landing-page #activity .recognition-list .recognition-list-item { flex-direction: row; align-items: center; padding: 20px 24px; border-radius: 16px; overflow: visible; gap: 0; }
  .landing-page #activity .recognition-item-icon { width: 40px; height: 40px; font-size: 15px; margin-right: 18px; }
  .landing-page #activity h3 { font-size: 17px; }
  .landing-page #activity .recognition-item-cta { margin: 0 0 0 16px; }
  .landing-page #activity .cta-label { display: inline; }
}

/* ===== Round 6 ===== */
@media (min-width: 861px) and (min-height: 480px) {
  .landing-page #projects .recognition-list { max-width: 1000px; gap: 20px; }
  .landing-page #projects .recognition-list .recognition-list-item { padding: 22px 24px; gap: 14px; border-radius: 20px; }
  .landing-page #projects .recognition-item-icon { width: 44px; height: 44px; font-size: 16px; margin: 0; }
  .landing-page #projects .recognition-item-text h3 { font-size: 18px; }
}

/* ===== Round 7 ===== */
@media (min-width: 861px) and (min-height: 480px) {
  .landing-page #projects .recognition-list { flex-direction: column; max-width: none; gap: 16px; }
  .landing-page #projects .recognition-list .recognition-list-item { flex: none; flex-direction: row; align-items: center; padding: 24px 28px; gap: 0; }
  .landing-page #projects .recognition-item-icon { margin: 0 18px 0 0; }
  .landing-page #projects .recognition-item-cta { margin: 0 0 0 16px; }
  .char-canvas, .skills-world { height: min(540px, calc(100svh - 150px)); min-height: 280px; }
}

@media (min-width: 861px) and (min-height: 480px) { .char-canvas, .skills-world { height: min(500px, calc(100svh - 270px)); min-height: 260px; } }

/* =========================================================
   SENSE GUARD SECTION (PERFECT ONE-SCREEN FIT)
   ========================================================= */
#senseguard { background: #fff; }

/* Main layout */
.sensecard-layout { 
  display: grid; 
  grid-template-columns: 1.1fr 0.9fr !important; 
  gap: clamp(20px, 3vw, 40px) !important; 
  align-items: center !important; 
  margin-bottom: 10px;
}
.sensecard-left { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.sensecard-intro { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 0; max-width: 520px; }

/* 2x2 Grid for Workflow */
.sensecard-workflow { 
  display: grid !important; 
  grid-template-columns: repeat(2, 1fr) !important; 
  gap: 12px !important; 
}
.workflow-step { 
  flex-direction: column !important; 
  align-items: flex-start !important; 
  justify-content: flex-start !important; 
  padding: 14px !important; 
  gap: 8px !important; 
  border-radius: 14px !important; 
  background: #fff !important; 
  border: 1px solid var(--line) !important; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; 
  height: 100%; 
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; 
}
.workflow-step:hover { 
  transform: translateY(-3px) !important; 
  box-shadow: 0 8px 20px rgba(111, 65, 48, 0.08) !important; 
  border-color: var(--accent) !important; 
}
.workflow-icon { 
  width: 32px !important; 
  height: 32px !important; 
  font-size: 14px !important; 
  border-radius: 9px !important; 
  background: var(--accent-soft) !important; 
  color: var(--accent) !important; 
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}
.workflow-step h3 { 
  flex-direction: row !important; 
  align-items: center !important; 
  gap: 6px !important; 
  font-size: 13.5px !important; 
  line-height: 1.3 !important; 
  margin: 0 !important; 
  display: flex; 
}
.workflow-num { font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.workflow-step p { 
  font-size: 12px !important; 
  line-height: 1.4 !important; 
  display: block !important; 
  margin: 0; 
  color: var(--muted) !important; 
}

/* Device Right Side */
.sensecard-right { display: flex; min-width: 0; min-height: 0; }
.sc-visual-container { position: relative; width: 100%; height: 100%; min-height: 280px; border-radius: 24px; background: none; overflow: visible; display: flex; align-items: center; justify-content: center; perspective: 1400px; cursor: pointer; touch-action: pan-y; }
.sc-device-stage { --S: clamp(150px, 25svh, 190px); --T: calc(var(--S) * .34); position: relative; width: var(--S); height: var(--S); transform-style: preserve-3d; will-change: transform; }
.sc-exploded { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.sc-part { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.8,.2,1); }

.sc-back { transform: translate3d(0,0,0); }
.sc-back i { position: absolute; inset: 0; border-radius: 15%; background: linear-gradient(140deg, #34343a, #212125); transform: translateZ(calc(var(--T) * (var(--k) / 15 - .5))); }
.sc-back i:first-of-type { box-shadow: 0 24px 40px rgba(0,0,0,.22); }
.sc-back i:nth-of-type(16) { background: linear-gradient(140deg, #46464c, #2c2c31); box-shadow: inset 0 0 0 2px rgba(255,255,255,.04); }
.back-side { position: absolute; background: #1b1b1f; }
.back-top    { left: 15%; width: 70%; top: 0; height: var(--T); transform: translateY(-50%) rotateX(90deg); }
.back-bottom { left: 15%; width: 70%; bottom: 0; height: var(--T); transform: translateY(50%) rotateX(90deg); }
.back-left   { top: 15%; height: 70%; left: 0; width: var(--T); transform: translateX(-50%) rotateY(90deg); }
.back-right  { top: 15%; height: 70%; right: 0; width: var(--T); transform: translateX(50%) rotateY(90deg); }
.back-vent { position: absolute; left: 22%; right: 22%; top: 26%; bottom: 26%; background: #000; border-radius: 3px; }
.back-port { position: absolute; left: 30%; right: 30%; top: 38%; bottom: 38%; background: #000; border-radius: 3px; box-shadow: 0 0 0 2px #2a2a2e; }

.sc-pcb { inset: 6% 13%; border-radius: 6px; background: linear-gradient(160deg, #2458d6, #1b40a8); box-shadow: 0 6px 18px rgba(0,0,0,.5); border: 1px solid #16348a; background-image: repeating-linear-gradient(180deg, transparent 0 11px, rgba(251,146,60,.35) 11px 12px), linear-gradient(160deg, #2458d6, #1b40a8); }
.sc-pcb span { position: absolute; display: block; }
.pcb-gold { left: 12%; top: 7%; width: 20%; height: 6%; background: #d4a02f; border-radius: 2px; }
.pcb-wifi { left: 10%; top: 17%; width: 36%; height: 26%; background: repeating-linear-gradient(90deg, #cfd4da 0 3px, #b3bac2 3px 4px); border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.pcb-sensor { left: 48%; top: 14%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #8f98a3 0 34%, #e1e5ea 36% 58%, #7a838e 60% 100%); box-shadow: 0 4px 8px rgba(0,0,0,.55); }
.pcb-buzzer { left: 8%; top: 56%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4b5563, #0b0f17 70%); box-shadow: 0 4px 8px rgba(0,0,0,.55); }
.pcb-led { left: 52%; top: 70%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.6); }
.pcb-pins { left: 50%; top: 82%; width: 40%; height: 10%; background: repeating-linear-gradient(90deg, #14161b 0 6px, #2e323b 6px 8px); border-radius: 2px; }

.sc-front i { position: absolute; inset: 0; border-radius: 15%; background: #cdd1d8; transform: translateZ(calc(var(--k) * 3px - 4px)); }
.sc-front i:first-of-type { box-shadow: 0 16px 30px rgba(0,0,0,.2); }
.front-face { position: absolute; inset: 0; border-radius: 15%; background: linear-gradient(145deg, #ffffff, #e6e8ed); border: 1px solid #d5d9e0; box-shadow: inset -6px -6px 18px rgba(0,0,0,.07); transform: translateZ(7px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sc-logo { width: 30%; height: auto; margin-top: -6%; }
.front-dot { width: 6px; height: 6px; border-radius: 50%; background: #111; margin-top: 14%; }

.sc-front { transform: translate3d(0, 0, calc(var(--T) / 2 + 6px)); }
.sc-pcb   { transform: translate3d(0, 0, calc(var(--T) * .12)); }
.sc-visual-container.is-open .sc-front { transform: translate3d(calc(var(--S) * -.68), 0, calc(var(--S) * .5)); }
.sc-visual-container.is-open .sc-pcb   { transform: translate3d(0, 0, calc(var(--S) * .04)); }
.sc-visual-container.is-open .sc-back  { transform: translate3d(calc(var(--S) * .68), 0, calc(var(--S) * -.5)); }

.sc-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; opacity: 0; transition: opacity .5s ease .25s; }
.sc-lines polyline { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .7; }
.sc-lines circle { fill: var(--accent); }
.sc-callouts { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; z-index: 30; }
.sc-callout { font-family: var(--font-body); font-size: 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.08); padding: 7px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; transform: translateX(18px); transition: transform .5s ease, opacity .5s ease; }
.sc-callout b { color: var(--accent); margin-right: 10px; }
.sc-callout:nth-child(2) { transition-delay: .06s; } .sc-callout:nth-child(3) { transition-delay: .12s; }
.sc-callout:nth-child(4) { transition-delay: .18s; } .sc-callout:nth-child(5) { transition-delay: .24s; } .sc-callout:nth-child(6) { transition-delay: .3s; }
.sc-visual-container.is-open .sc-callout { opacity: 1; transform: none; }
.sc-visual-container.is-open .sc-lines { opacity: 1; }

/* Milestones */
.sg-milestones { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  gap: 8px; 
  padding-top: 0; /* Line hatane ke baad padding 0 */
  margin-top: 12px; /* Gap adjust kiya */
  border-top: none; /* Line hata di */
  width: 100%; 
}
.sg-milestones-title { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; width: 100%; margin-bottom: 2px; }
.sg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 11.5px var(--font-body); cursor: pointer; transition: all .25s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sg-chip i { color: var(--accent); font-size: 12px; }
.sg-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(111, 65, 48, 0.2); }
.sg-chip:hover i { color: #fff; }

/* Strict Fit Adjustments for Laptops */
@media (min-width: 861px) and (min-height: 480px) {
  .landing-page section#senseguard.screen {
    height: auto !important; 
    min-height: calc(100svh - 64px) !important; 
    overflow: visible !important; 
    padding: 30px 0 !important;
    align-items: flex-start;
  }
  .landing-page section#senseguard.screen > .wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
  }
  #senseguard .section-head { margin-bottom: 16px; flex: none; }
  #senseguard .section-head p { display: block !important; }
}

/* Tablet / Mobile Layout */
@media (max-width: 992px) {
  .sensecard-layout { grid-template-columns: 1fr !important; gap: 20px; }
  .sensecard-workflow { grid-template-columns: 1fr !important; }
  .sc-visual-container { height: auto; aspect-ratio: 4 / 3; min-height: 250px; }
  .sc-callouts { right: 10px; gap: 6px; } .sc-callout { font-size: 11px; padding: 5px 8px; } .sc-device-stage { --S: 150px; }
}
@media (prefers-reduced-motion: reduce) { .sc-part, .sc-callout, .sc-lines { transition: none; } }

#senseguard { background: #fff; }
#internship-research { background: var(--bg); }

/* About Card */
@media (min-width: 861px) and (min-height: 480px) {
  .about-grid .info-card { align-self: center; justify-self: center; width: 100%; max-width: 420px; padding: 22px 24px; }
  .about-grid .info-header { margin-bottom: 8px; }
  .about-grid .info-header h3 { font-size: 18px; }
  .about-grid .info-row { padding: 10px 0; gap: 12px; align-items: center; }
  .about-grid .info-icon { width: 32px; height: 32px; font-size: 13px; }
  .about-grid .info-row h4 { font-size: 11px; margin-bottom: 2px; }
  .about-grid .info-row p { font-size: 12.5px; line-height: 1.35; }
}

.about-content p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* Hero */
@media (min-width: 861px) {
  .landing-page .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; column-gap: 40px; }
  .hero-minimal .hero-content h1 { font-size: clamp(56px, 6.4vw, 80px); }
  .hero-minimal .hero-role { font-size: clamp(13px, 1.1vw, 15px); }
  .hero-minimal .hero-intro { font-size: clamp(17px, 1.35vw, 20px); max-width: 620px; }
  .landing-page .hero .hero-visual { width: min(480px, calc((100svh - 210px) * 0.75 + 24px)); }
  .landing-page .hero .hero-content { max-width: 720px; justify-self: start; }
  .landing-page .hero .hero-visual { justify-self: end; }
  .landing-page .hero-minimal > .wrap { width: 100%; }
}

@media (min-width: 861px) {
  .landing-page .hero .wrap { grid-template-columns: 1.1fr 0.9fr; column-gap: 4vw; }
  .hero-minimal .hero-content h1 { font-size: clamp(60px, 7.4vw, 112px); white-space: nowrap; }
  .hero-minimal .hero-content h1 br { display: none; }
  .hero-minimal .hero-content h1 .accent-name { margin-left: .22em; }
  .hero-minimal .hero-role { font-size: clamp(13px, 1.15vw, 16px); margin-top: 26px; }
  .hero-minimal .hero-intro { font-size: clamp(18px, 1.5vw, 22px); max-width: 700px; margin-top: 26px; }
  .landing-page .hero .hero-content { max-width: none; padding-left: clamp(10px, 2vw, 40px); }
  .pf-stage { width: min(100%, 560px, calc((100svh - 190px) * 0.75 + 24px)); }
  .landing-page .hero .hero-visual { width: min(560px, calc((100svh - 190px) * 0.75 + 24px)); justify-self: center; }
}

.detail-info-grid { grid-template-columns: 1fr 1fr; }
.detail-info-grid.single-col { grid-template-columns: 1fr; }

/* Schedule Form */
.schedule-container { max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 40px; box-shadow: var(--shadow); }
.schedule-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 14px; font-weight: 600; color: var(--text); }
.form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-family: var(--font-body); font-size: 15px; color: var(--text); outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.btn-submit { align-self: flex-start; padding: 14px 28px; font-size: 16px; border: none; cursor: pointer; }
.form-success { display: none; text-align: center; padding: 40px; background: var(--accent-soft); border-radius: 16px; margin-top: 20px; }
.form-success h3 { color: var(--accent); margin-bottom: 10px; }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .schedule-container { padding: 24px; } }

/* =========================================================
   NATIONAL: 2-column grid, last odd card centered
   Keep this block at the very END of the file.
   ========================================================= */
@media (min-width: 861px) and (min-height: 480px) {
  .landing-page #national .recognition-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .landing-page #national .recognition-list .recognition-list-item { padding: 14px 20px; }

  /* odd one out (7th card) -> centered on its own row */
  .landing-page #national .recognition-list .recognition-list-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

/* Popup (detail + picture) */
.sg-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(29, 29, 29, .7); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sg-modal.active { opacity: 1; visibility: visible; }
.sg-modal-card { position: relative; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); transform: translateY(20px); transition: transform .3s; }
.sg-modal.active .sg-modal-card { transform: none; }
.sg-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.sg-modal-close:hover { background: var(--accent); color: #fff; }
.sg-modal-img { width: 100%; aspect-ratio: 16 / 9; max-height: 260px; background: var(--accent-soft); overflow: hidden; border-radius: 20px 20px 0 0; }
.sg-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-modal-body { padding: 26px 32px 32px; }
.sg-modal-body h2 { font-size: 26px; margin: 6px 0 14px; color: var(--ink); }
.sg-modal-body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.sg-modal-body ul { list-style: none; padding: 0; margin: 0; }
.sg-modal-body li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 15px; color: var(--text); }
.sg-modal-body li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--accent); }

/* Slideshow video slides (APICTA / FAST internship) */
.detail-media .slides video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 0; display: block; }
.detail-thumb .video-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; }

/* Sense Guard chips: full image(s) + video view */
.sg-modal-card.media-view { max-width: 860px; }
.sg-modal-media { display: flex; flex-direction: column; gap: 14px; padding: 56px 16px 16px; }
.sg-modal-media img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 10px; background: #f5f2ee; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.sg-modal-media video { display: block; width: 100%; height: auto; max-height: 70vh; border-radius: 10px; background: #000; }
#senseVideo { object-fit: contain; background: #000; }

/* =========================================================
   Sense Guard chips: compact slideshow popup
   (overrides the "media-view" rules above, keep at the END)
   ========================================================= */
.sg-modal-card.media-view { max-width: 720px; max-height: 92vh; overflow: hidden; }
.sg-modal-media { display: block; padding: 0; gap: 0; }

.sgs { padding: 16px 18px 14px; }
.sgs-title { font: 700 17px var(--font-head); color: var(--ink); padding: 2px 46px 12px 4px; line-height: 1.25; }

/* fixed-size stage: the whole image always fits, no scrolling */
.sgs-stage { position: relative; height: min(56vh, 430px); background: var(--bg); border-radius: 14px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sgs-stage img.sgs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity .6s ease; border-radius: 0; box-shadow: none; background: transparent; pointer-events: none; }
.sgs-stage img.sgs-slide.active { opacity: 1; }

.sgs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); transition: background .2s, color .2s; z-index: 2; }
.sgs-arrow.prev { left: 10px; }
.sgs-arrow.next { right: 10px; }
.sgs-arrow:hover, .sgs-arrow:focus-visible { background: var(--accent); color: #fff; outline: none; }

.sgs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 0; }
.sgs-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.sgs-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--taupe); opacity: .55; cursor: pointer; transition: all .25s; }
.sgs-dot.active { width: 24px; background: var(--accent); opacity: 1; }
.sgs-count { font: 600 12px var(--font-body); color: var(--muted); white-space: nowrap; }

@media (max-width: 600px) {
  .sgs { padding: 12px; }
  .sgs-stage { height: min(46vh, 320px); }
  .sgs-arrow { width: 32px; height: 32px; font-size: 12px; }
}

/* ---------- Sense Guard: compact workflow cards + link pills (was an inline <style> in index.html) ---------- */
#senseguard .sensecard-workflow { gap: 8px !important; }
#senseguard .workflow-step { padding: 9px 12px !important; gap: 5px !important; border-radius: 11px !important; }
#senseguard .workflow-icon { width: 26px !important; height: 26px !important; font-size: 12px !important; border-radius: 8px !important; }
#senseguard .workflow-step h3 { font-size: 12.5px !important; }
#senseguard .workflow-step p { font-size: 11.5px !important; line-height: 1.4 !important; }
.sg-links { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 2px; }
.sg-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--taupe); color: var(--accent); font: 600 clamp(11px, .85vw, 12.5px) var(--font-body); text-decoration: none; white-space: nowrap; flex: 0 1 auto; min-width: 0; transition: all .25s ease; }
.sg-link .sg-link-ic { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; transition: all .25s ease; }
.sg-link .sg-link-go { font-size: 8.5px; opacity: .7; transition: transform .25s ease; }
.sg-link:hover, .sg-link:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(111, 65, 48, .22); outline: none; }
.sg-link:hover .sg-link-ic, .sg-link:focus-visible .sg-link-ic { background: rgba(255, 255, 255, .95); color: var(--accent); }
.sg-link:hover .sg-link-go { transform: translate(2px, -2px); opacity: 1; }
@media (max-width: 560px) { .sg-links { flex-wrap: wrap; } }

/* =========================================================
   Additive fixes (no visual redesign)
   ========================================================= */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100001; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font: 600 14px var(--font-body); text-decoration: none; transition: top .2s; }
.skip-link:focus-visible { top: 12px; outline-color: #fff; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
section[id] { scroll-margin-top: 64px; }
#aboutVideo { object-fit: contain; background: #000; }   /* never crop the video if it is not exactly 16:9 */
::placeholder { color: #75695f; opacity: 1; }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111, 65, 48, .22); }
.btn-submit { color: #fff; font: 600 16px var(--font-body); }
.btn-submit:disabled { opacity: .7; cursor: progress; }
.form-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: #fbeceb; border: 1px solid #e3b4b0; color: #7a1f17; font-size: 14.5px; }
.form-error[hidden] { display: none; }
/* dormant legacy dialog: hidden until `.active` (it used to render as a stray unstyled button) */
.custom-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(29, 29, 29, .72); }
.custom-modal-overlay.active { display: flex; }
.custom-modal-content { position: relative; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.custom-modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--ink); cursor: pointer; }
.modal-body h2 { font-size: 26px; margin: 6px 0 14px; color: var(--ink); }
.modal-body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.modal-body ul { padding-left: 20px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Detail pages: the whole view (back button → photos/thumbnails) fits one screen on desktop ----------
   Same structure and text; only spacing and the photo stack scale with the window height. */
@media (min-width: 861px) {
  .screen:has(#recognitionDetail[style*="block"]) { min-height: calc(100svh - 64px); padding: clamp(10px, 2.2svh, 40px) 0 clamp(14px, 3svh, 48px); }
  #recognitionDetail { margin-top: 0; }
  #backBtnWrapper { margin-bottom: clamp(8px, 1.6svh, 18px) !important; }   /* wrapper carries an inline 20px margin */
  #backBtnWrapper .back-btn { margin-bottom: 0; padding: clamp(6px, 1svh, 10px) 20px; }
  #recognitionDetail { max-width: 1240px; }
  .detail-columns { gap: clamp(32px, 3.6vw, 50px); max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .detail-left { gap: clamp(8px, 1.5svh, 16px); }
  .detail-title { font-size: clamp(22px, min(2.7vw, 4.1svh), 34px); }
  .detail-meta-grid { padding: clamp(10px, 1.7svh, 16px); }
  .detail-info-block, .detail-highlights-block { padding: clamp(8px, 1.4svh, 14px) 16px; }
  .detail-highlights-list { gap: clamp(4px, .8svh, 7px); }
  .detail-media-stack { max-width: none; aspect-ratio: .95; width: min(100%, 620px, calc((94svh - 214px) * .95)); }   /* larger, squarer frame: landscape photos and certificates fill it */
  .detail-right .slideshow-dots { margin-top: clamp(10px, 2svh, 20px); }
  .detail-thumbs { margin-top: clamp(8px, 1.6svh, 16px); }
  #recognitionDetail .page-nav-bottom { margin-top: clamp(14px, 3svh, 46px); padding-top: clamp(14px, 2.6svh, 34px); }
}
@media (min-width: 861px) and (max-height: 800px) {
  .detail-columns { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-height: 700px) {
  .detail-left { gap: 6px; }
  .detail-left .status-tag { padding: 4px 12px; }
  .detail-title { font-size: 22px; line-height: 1.12; }
  .detail-meta-grid { padding: 8px 12px; }
  .detail-info-block, .detail-highlights-block { padding: 6px 14px; }
  .detail-info-head { margin-bottom: 4px; }
  .detail-highlights-list { margin-top: 4px; gap: 3px; }
  .detail-media-count { margin-top: 4px; }
}

/* Detail pages on tablet / phone: stack the text and the photos (desktop is unchanged) */
@media (max-width: 860px) {
  .detail-columns { grid-template-columns: 1fr; gap: 28px; }
  .detail-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-info-grid { grid-template-columns: 1fr; }
  .detail-media-stack { max-width: min(100%, 560px); aspect-ratio: .78; }
  .media-arrow.prev { left: -8px; }
  .media-arrow.next { right: -8px; }
}