/* ============ TOKENS ============ */
:root{
  --bg: #ffffff;
  --fg: #14140f;
  --muted: #6b6b63;
  --border: #e8e6de;
  --accent: #f5c518;
  --accent-fg: #14140f;
  --dark-bg: #17171a;
  --dark-fg: #f5f5f0;
  --dark-border: #2c2c2f;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --header-h: 72px;
  --sidebar-w: 264px;
  --sidebar-w-mobile: 260px;
  --side-pad: 48px;
  --font: 'Google Sans Flex', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5{ margin:0; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
.icon{ width:18px; height:18px; flex-shrink:0; }

:focus-visible{ outline: 2px solid var(--fg); outline-offset: 2px; }

/* ============ HEADER ============ */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
.header-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.header-avatar{
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  object-position: 50% 15%;
  flex-shrink:0;
}
.header-id{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.header-name{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-role{ font-size:12.5px; color:var(--muted); font-weight:400; }

.header-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Icon pills: fixed icon box that never moves + label that reveals on hover */
.icon-pill{
  display:inline-flex; align-items:center;
  height:38px;
  border-radius:999px;
  overflow:hidden;
  max-width:38px;
  background:transparent;
  color:var(--fg);
  transition: max-width .25s ease, background .15s ease;
  flex-shrink:0;
}
.icon-pill:hover{ max-width:220px; background:#f4f3ee; }

.icon-pill-hit{ display:inline-flex; align-items:center; min-width:0; }
.icon-box{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pill-label{
  font-size:13px; font-weight:600;
  white-space:nowrap;
  padding-right:14px;
  opacity:0;
  transition: opacity .15s ease .05s;
}
.icon-pill:hover .pill-label{ opacity:1; }

.icon-pill--email{ max-width:38px; }
.icon-pill--email:hover{ max-width:280px; }
.copy-btn{
  width:0; opacity:0;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--muted);
  transition: opacity .15s ease, width .15s ease;
  pointer-events:none;
  margin-right:8px;
}
.icon-pill--email:hover .copy-btn{ width:22px; opacity:1; pointer-events:auto; }
.copy-btn:hover{ color:var(--fg); }
.copy-btn .icon{ width:15px; height:15px; }
.icon-copy-done{ display:none; }
.copy-btn.is-copied .icon-copy-default{ display:none; }
.copy-btn.is-copied .icon-copy-done{ display:block; color:#22c55e; }

.contact-pill{
  display:inline-flex; align-items:center;
  height:38px;
  padding:0;
  border-radius:999px;
  background:var(--fg);
  color:#fff;
  overflow:hidden;
  max-width:38px;
  transition: max-width .25s ease;
  flex-shrink:0;
}
.contact-pill .icon-box{ color:#fff; }
.contact-pill:hover{ max-width:170px; }
.contact-pill:hover .pill-label{ opacity:1; }

@media (hover: none){
  .pill-label{ opacity:1; padding-right:14px; }
  .icon-pill--email .copy-btn{ width:22px; opacity:1; pointer-events:auto; }
}

.nav-toggle{
  display:none;
  width:36px; height:36px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:50%;
  flex-shrink:0;
}
.nav-toggle span{ display:block; width:16px; height:2px; background:var(--fg); border-radius:2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============ SIDEBAR ============ */
.sidebar{
  position: fixed;
  top: var(--header-h);
  right:0;
  bottom:0;
  width: var(--sidebar-w);
  border-left:1px solid var(--border);
  background: var(--bg);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 24px 20px;
  overflow-y:auto;
  z-index: 150;
}
.sidebar-nav{ display:flex; flex-direction:column; gap:28px; }
.nav-group{ display:flex; flex-direction:column; gap:2px; }
.nav-label{
  font-size:11px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:8px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius: var(--radius-sm);
  font-size:14px;
  font-weight:400;
  color: var(--fg);
  transition: background .15s ease;
}
.nav-item:hover{ background:#f4f3ee; }
.nav-item.is-active{ background: var(--fg); color:#fff; }

.nav-logo{
  width:24px; height:24px;
  border-radius:7px;
  object-fit:cover;
  flex-shrink:0;
}
.nav-icon{
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  background:#f4f3ee;
  color:var(--fg);
}
.nav-icon svg{ width:14px; height:14px; }
.nav-item.is-active .nav-icon{ background:rgba(255,255,255,.12); color:#fff; }

.sidebar-bottom{ padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lang-switch{ display:flex; background:#f4f3ee; border-radius: 999px; padding:3px; gap:2px; width:fit-content; }
.lang-btn{ height:28px; padding:0 14px; border-radius:999px; font-size:12px; font-weight:700; color:var(--muted); }
.lang-btn.is-active{ background:var(--fg); color:#fff; }

.download-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px;
  border-radius:999px;
  border:none;
  background:transparent;
  font-size:12px; font-weight:700;
  color:var(--fg);
  flex-shrink:0;
  transition: background .15s ease;
}
.download-btn:hover{ background:#f4f3ee; }
.download-btn .icon{ width:14px; height:14px; }

.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(20,20,15,.4); z-index:140; }

/* ============ MAIN LAYOUT ============ */
.main{ margin-top: var(--header-h); margin-right: var(--sidebar-w); }

.section{ padding: 80px var(--side-pad); }
.section--dark{ background:var(--dark-bg); color:var(--dark-fg); }
.section--dark .section-title{ color: var(--dark-fg); }
.section-title{ font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 40px; }

/* ============ HERO ============ */
.hero{
  min-height: calc(100vh - var(--header-h));
  padding: var(--side-pad);
  display:flex;
  align-items:stretch;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:40px;
  width:100%;
}
.hero-content{ display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.hero-top{ display:flex; flex-direction:column; gap:12px; }

.hero-meta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  padding:7px 14px 7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12.5px; font-weight:600;
}
.status-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); flex-shrink:0; }

.hero-title{ font-size: clamp(38px, 4.6vw, 60px); line-height:1.02; }
.hero-subtitle{ font-size: clamp(19px, 2vw, 24px); font-weight:600; color:var(--muted); }
.hero-bio{ font-size:15.5px; line-height:1.6; color:#3d3d36; max-width:50ch; }

.tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-size:12px; font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:#f4f3ee;
  color:#3d3d36;
}

.hero-stats{ display:flex; gap:12px; flex-wrap:wrap; }
.stat-card{
  background: var(--fg);
  color:#fff;
  border-radius: var(--radius-md);
  padding:16px 18px;
  flex: 1 1 210px;
  display:flex; flex-direction:column; gap:6px;
}
.stat-num{ font-size:16px; font-weight:700; }
.stat-desc{ font-size:12.5px; color:#c9c9c2; line-height:1.4; }

.hero-location{
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:var(--muted); font-weight:500;
}
.hero-location .icon{ width:15px; height:15px; }

.hero-visual{
  position:relative;
  background:var(--accent);
  border-radius: var(--radius-lg);
  display:flex;
  align-items:flex-end;
  padding: 40px 16px 8px;
  overflow:hidden;
  cursor:default;
}
.hero-spotlight{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
  background: radial-gradient(circle 320px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.75), rgba(255,255,255,0) 72%);
  mix-blend-mode: overlay;
}
.hero-visual:hover .hero-spotlight{ opacity:1; }

.hero-slogan{
  position:relative; z-index:1;
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight:800;
  line-height:1.06;
  color: var(--accent-fg);
  cursor:default;
}
.hero-slogan .word{
  display:inline-block;
  opacity:0;
  transform: translateY(.4em);
  animation: word-in .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes word-in{
  to{ opacity:1; transform: translateY(0); }
}

.rotator-word{
  display:inline-block;
  transition: opacity .3s ease, transform .3s ease;
}
.rotator-word.is-leaving{ opacity:0; transform: translateY(-.3em); }
.rotator-word.is-entering{ opacity:0; transform: translateY(.3em); }

.rotator-phrase{
  display:inline-block;
  width:100%;
  transition: opacity .3s ease, transform .3s ease;
}
.rotator-phrase.is-leaving{ opacity:0; transform: translateY(-.3em); }
.rotator-phrase.is-entering{ opacity:0; transform: translateY(.3em); }

/* ============ LATEST EXPERIENCE — SCROLL-PINNED CARD STACK ============ */
.experience-stack{
  position:relative;
  background:#fff;
}

.preview-outer{ position:relative; height:150vh; --progress: 0; }
#emergentx{ height:135vh; }
#a6lab, #whitebit{ background: var(--dark-bg); }

.preview-sticky{
  --expand: var(--progress);
  position:sticky;
  top: calc(var(--header-h) + 6vh * (1 - var(--expand)));
  height: calc(100vh - var(--header-h) - 12vh * (1 - var(--expand)));
  display:flex; align-items:flex-start;
  padding: 0;
  overflow:visible;
}

#emergentx .preview-sticky{ z-index:10; }
#a6lab .preview-sticky{ z-index:20; }
#whitebit .preview-sticky{ z-index:30; }

.preview-card{
  --expand: var(--progress);
  --reveal: min(1, max(0, calc((var(--progress) - 0.35) / 0.65)));
  --text-mixed: var(--card-text-start);
  --text-mixed: color-mix(in srgb, var(--card-text-start) calc((1 - var(--expand)) * 100%), #fff);

  position:relative;
  width:100%;
  height:100%;
  margin: 0 calc(var(--side-pad) * (1 - var(--expand)));
  background: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) calc((1 - var(--expand)) * 100%), var(--dark-bg));
  border-radius: calc(40px * (1 - var(--expand)));
  display:flex; align-items:flex-start;
  padding: clamp(32px, 5vw, 64px);
  overflow:hidden;
}

.preview-inner{
  position:relative; z-index:1;
  width:100%;
  display:flex; flex-direction:column; gap:22px;
}
.preview-head{ display:flex; align-items:center; gap:18px; }
.preview-logo{ width:56px; height:56px; border-radius:15px; object-fit:cover; flex-shrink:0; }
.preview-head h3{ font-size:clamp(22px, 2.6vw, 30px); color:var(--text-mixed); }
.preview-type{ font-weight:500; font-size:0.75em; color:var(--text-mixed); opacity:.7; }
.preview-dates{ font-size:14px; font-weight:600; color:var(--text-mixed); opacity:.7; }
.preview-description{ font-size:clamp(15px, 1.3vw, 17px); line-height:1.65; color:var(--text-mixed); max-width:90ch; }
.preview-detail{
  font-size:clamp(15px, 1.3vw, 17px); line-height:1.65; color:var(--text-mixed); max-width:90ch;
  padding-top:24px;
  border-top: 1px solid color-mix(in srgb, var(--text-mixed) 20%, transparent);
  opacity: var(--reveal);
  transform: translateY(calc(14px * (1 - var(--reveal))));
}

.preview-columns{ display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:none; }
.preview-product h4{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-mixed); opacity:.85; margin-bottom:12px;
}
.preview-product ul{ display:flex; flex-direction:column; gap:9px; }
.preview-product li{
  font-size:14.5px; line-height:1.5; color:var(--text-mixed);
  padding-left:16px; position:relative;
}
.preview-product li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.5;
}

.preview-list{ display:flex; flex-direction:column; gap:11px; }
.preview-list li{
  font-size:14.5px; line-height:1.6; color:var(--text-mixed);
  padding-left:18px; position:relative;
}
.preview-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.5;
}

/* ============ TIMELINE ============ */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:6px; top:0; bottom:20px; width:1px; background:var(--dark-border); }
.timeline-item{
  position:relative;
  display:flex; align-items:center; gap:24px;
}
.timeline-item::after{
  content:""; position:absolute; left:-26px; top:50%;
  transform: translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:#57575c; border:2px solid var(--dark-bg);
}
.timeline-item.is-current::after{
  width:12px; height:12px; left:-27.5px;
  top:35%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(245,197,24,.15);
}
.timeline-year{
  flex:0 0 110px;
  padding:20px 0;
  font-size:13px; font-weight:700; color:#9a9a94;
}
.timeline-item.is-current .timeline-year{ color:var(--accent); }
.timeline-body .now-badge{
  font-size:10px; font-weight:800; letter-spacing:.04em;
  background:var(--accent); color:#14140f;
  padding:2px 7px; border-radius:999px;
}
.timeline-body{
  flex:1; padding:20px 0; border-top:1px solid var(--dark-border);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:inherit; text-decoration:none;
}
.timeline-item:first-child .timeline-year,
.timeline-item:first-child .timeline-body{ padding-top:0; }
.timeline-item:first-child .timeline-body{ border-top:none; }
.timeline-item:last-child .timeline-year,
.timeline-item:last-child .timeline-body{}
.timeline-body h4{ display:flex; align-items:center; gap:8px; font-size:16px; color:var(--dark-fg); margin-bottom:4px; }
.timeline-body span{ font-size:13.5px; color:#a8a8a2; }
.timeline-external{
  width:17px; height:17px; color:#9a9a94; flex-shrink:0;
  opacity:0; transform: translate(-4px,4px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
a.timeline-body:hover{ color:inherit; }
a.timeline-body:hover .timeline-external{ opacity:1; transform: translate(0,0); color:var(--accent); }

/* ============ SKILLS — BENTO ============ */
.bento{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-areas:
    "large research platform"
    "collab collab languages";
  gap:16px;
}
.bento-card{
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:28px;
}
.bento-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; color:var(--muted); }

.bento-card--large{ grid-area:large; background:var(--accent); border-color:var(--accent); }
.bento-card--large h3{ color:#5c4a00; }
.bento-card--large .chip{ background:rgba(20,20,15,.08); color:#14140f; }

.bento-card:nth-child(2){ grid-area:research; }
.bento-card:nth-child(3){ grid-area:platform; }
.bento-card:nth-child(4){ grid-area:collab; }
.bento-card:nth-child(5){ grid-area:languages; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size:12.5px; font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  background:#f4f3ee;
  color:#3d3d36;
}

/* ============ EDUCATION ============ */
.section-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.section-head-row .section-title{ margin-bottom:0; }
.degree-count{ font-size:14px; font-weight:600; color:var(--muted); }
.degree-count b{ font-size:20px; font-weight:800; color:var(--fg); }

.education-list{ display:flex; flex-direction:column; }
.edu-row{
  display:flex; gap:16px; align-items:center;
  padding:20px 0;
  border-top:1px solid var(--border);
}
.edu-row:first-child{ border-top:none; padding-top:0; }
.edu-row:last-child{ padding-bottom:0; }
.edu-logo{
  width:60px; height:60px; object-fit:contain;
  flex-shrink:0;
  background:#f4f3ee;
  border-radius:14px;
  padding:16px;
}
.edu-row h4{ font-size:15px; margin-bottom:4px; }
.edu-row p{ font-size:13.5px; color:var(--muted); line-height:1.5; }

/* ============ OTHER CASES ============ */
.cases-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.is-hidden{ display:none; }
.case-card{
  background: var(--dark-bg);
  border-radius: var(--radius-lg);
  padding:24px;
  display:flex; flex-direction:column; gap:6px;
}
.case-card h4{ font-size:16px; margin-bottom:2px; color:var(--dark-fg); }
.case-card > p{ font-size:14px; line-height:1.55; color:#a8a8a2; margin-bottom:12px; flex:1; }
.case-pill{
  align-self:flex-start;
  font-size:12.5px; font-weight:700;
  color:#14140f;
  background:#fff;
  padding:8px 14px;
  border-radius:999px;
  transition: opacity .2s ease;
}
.case-pill:hover{ opacity:.8; }

/* ============ FOOTER ============ */
.footer{ padding:32px var(--side-pad) 56px; font-size:13px; color:var(--muted); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  :root{ --side-pad:32px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-bottom:40px; }
  .hero-visual{ min-height:260px; }
  .cases-grid{ grid-template-columns:1fr 1fr; }
  .bento{ grid-template-columns:1fr 1fr; grid-template-areas: "large large" "research platform" "collab languages"; }
}

@media (max-width: 900px){
  :root{ --sidebar-w:0px; --side-pad:22px; }
  .nav-toggle{ display:flex; }
  .main{ margin-right:0; }
  .section{ padding:56px var(--side-pad); }
  .hero{ padding: 28px var(--side-pad) 32px; }

  .preview-outer{ height:auto!important; }
  #a6lab, #whitebit{ background: #fff; }
  .preview-sticky{ position:static; height:auto; padding:0; }
  .preview-card{
    height:auto !important;
    min-height:auto !important;
    border-radius:24px;
    padding:32px 24px;
    margin: 0 var(--side-pad) 20px;
  }
  .preview-detail{ opacity:1 !important; transform:none !important; }
  #emergentx .preview-card{ margin-top:20px; }
  .preview-head h3{ font-size:24px; }
  .preview-description, .preview-detail{ font-size:15px; }

  .sidebar{
    top:0;
    width: var(--sidebar-w-mobile);
    max-width:80vw;
    transform: translateX(100%);
    transition: transform .25s ease;
    padding-top: calc(var(--header-h) + 20px);
    box-shadow: -8px 0 24px rgba(0,0,0,.08);
  }
  .sidebar.is-open{ transform: translateX(0); }
  .sidebar-overlay.is-open{ display:block; }
  .site-header{ padding: 0 16px; }
}

@media (max-width: 640px){
  .bento{ grid-template-columns:1fr; grid-template-areas:"large" "research" "platform" "collab" "languages"; }
  .cases-grid{ grid-template-columns:1fr; gap:16px; }
  .timeline-item{ gap:14px; }
  .timeline-year{ flex-basis:92px; font-size:12px; }
  .preview-columns{ grid-template-columns:1fr; gap:24px; }
}

/* ============ CONTACT MODAL ============ */
.modal-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,20,15,.5);
  z-index:300;
  align-items:center; justify-content:center;
  padding:24px;
}
.modal-overlay.is-open{ display:flex; }

.modal{
  position:relative;
  background:#fff;
  border-radius:28px;
  padding:40px;
  width:100%;
  max-width:440px;
  max-height:90vh;
  overflow-y:auto;
}
.modal-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  transition: background .15s ease;
}
.modal-close:hover{ background:#f4f3ee; color:var(--fg); }
.modal-close .icon{ width:18px; height:18px; }

.modal-photo{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  object-position: 50% 15%;
  margin-bottom:16px;
}
.modal h3{ font-size:24px; margin-bottom:10px; }
.modal-subtitle{ font-size:14px; line-height:1.55; color:var(--muted); margin-bottom:28px; }

#contactForm{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:flex; flex-direction:column; gap:7px; }
.form-row label{ font-size:12.5px; font-weight:700; color:var(--muted); }
.form-row input, .form-row textarea{
  font-family:inherit;
  font-size:14.5px;
  color:var(--fg);
  background:#f4f3ee;
  border:1.5px solid transparent;
  border-radius:12px;
  padding:12px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.form-row textarea{
  resize:none;
  overflow:hidden;
  min-height:calc(1.5em * 3 + 24px);
  line-height:1.5;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none;
  border-color:var(--fg);
  background:#fff;
}

.form-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px;
  border-radius:999px;
  background:var(--fg);
  color:#fff;
  font-size:14.5px; font-weight:700;
  transition: opacity .15s ease;
}
.form-submit:hover{ opacity:.88; }
.form-submit:disabled{ opacity:.6; cursor:default; }
.form-submit .icon{ width:16px; height:16px; }

.form-status{ font-size:13px; text-align:center; line-height:1.5; min-height:1px; }
.form-status--pending{ color:var(--muted); }
.form-status--success{ color:#1a8a4a; font-weight:600; }
.form-status--error{ color:var(--muted); }

.form-row--hp{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  left:-9999px;
}

.form-fallback{
  margin-top:14px;
  font-size:13px; text-align:center; line-height:1.5;
  color:var(--muted);
}
.form-fallback a{ font-weight:700; color:var(--fg); text-decoration:underline; }

@media (max-width: 560px){
  .modal{ padding:28px 24px; border-radius:22px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
  .preview-detail{ opacity:1 !important; transform:none !important; }
  .hero-slogan .word{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero-spotlight{ display:none !important; }
}