/* Tema: gading hangat (bawaan), pasir (koleksi, tentang), espresso (kontak). Sudut membulat, foto besar. */
:root{
  --ivory:#F5F3EC;
  --sand:#DAE1E6;
  --sand-2:#B8B4AA;
  --paper:#FBFAF6;
  --espresso:#1A2438;
  --walnut:#2E4E8E;


  --display:'Fraunces', 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg:var(--ivory);
  --bg-2:var(--sand);
  --fg:var(--espresso);
  --muted:#566178;
  --line:#D3D1C8;
  --accent:var(--walnut);
  --btn-bg:var(--espresso);
  --btn-fg:var(--ivory);
  --btn-hover:var(--walnut);
  --ghost:rgba(26,36,56,.14);

  --r-lg:clamp(18px, 2.2vw, 28px);
  --r-md:14px;
  --pad:clamp(1.25rem, 4.5vw, 3.5rem);
  --max:1360px;
  --section:clamp(3.75rem, 8vw, 7rem);
  --gap:clamp(1rem, 2.5vw, 2rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:68px;
  --safe-top:env(safe-area-inset-top);
}

.theme-sand{ --bg:var(--sand); --bg-2:var(--ivory); --line:#BCC7D2; --ghost:rgba(26,36,56,.18); }
.theme-dark{
  --bg:var(--espresso);
  --bg-2:#222E47;
  --fg:#F5F3EC;
  --muted:#B8B4AA;
  --line:rgba(245,243,236,.18);
  --accent:#A9C0DC;
  --btn-bg:#F5F3EC;
  --btn-fg:var(--espresso);
  --btn-hover:#A9C0DC;
  --ghost:rgba(245,243,236,.2);
}
.theme-ivory, .theme-sand, .theme-dark{ background:var(--bg); color:var(--fg); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--safe-top) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
}
body.menu-open, body.lb-open{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3{ font-family:var(--display); font-weight:380; letter-spacing:-0.025em; line-height:1.08; }
h2, .head-title{ font-size:clamp(2rem, 4.6vw, 3.75rem); }
h3{ font-size:clamp(1.35rem, 2vw, 1.75rem); line-height:1.15; font-weight:400; letter-spacing:-0.015em; }
em{ font-style:normal; color:var(--accent); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

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

.skip{ position:absolute; left:var(--pad); top:-100px; z-index:100; background:var(--espresso); color:var(--ivory); padding:.75rem 1rem; border-radius:999px; }
.skip:focus{ top:.75rem; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section); }
.lede{ color:var(--muted); font-size:1.05rem; max-width:54ch; }
.caption{ margin-top:.9rem; font-size:.85rem; color:var(--muted); }
.tag-note{
  display:inline-block; font-size:.8rem; font-weight:600; color:var(--accent);
  border:1px dashed currentColor; border-radius:999px; padding:.25rem .85rem;
}

.sec-bar{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-bottom:clamp(1.25rem, 3vw, 2.25rem);
  font-size:.8rem; font-weight:600; color:var(--muted);
}
.sec-bar span:first-child{ letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Buttons & chips ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.8rem 1.6rem;
  font-weight:600; font-size:.95rem; text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn--primary:hover{ background:var(--btn-hover); color:#fff; }
.theme-dark .btn--primary:hover{ color:var(--espresso); }
.btn--ghost{ border-color:var(--fg); color:var(--fg); background:transparent; }
.btn--ghost:hover{ background:var(--fg); color:var(--bg); }
.btn--light{ background:var(--ivory); color:var(--espresso); }
.btn--light:hover{ background:#fff; }
.btn svg{ flex:none; }

.text-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; text-decoration:none; color:var(--fg);
  border-bottom:1px solid var(--accent); padding-bottom:2px; min-height:24px;
}
.text-link svg{ transition:transform .25s var(--ease); }
.text-link:hover svg{ transform:translateX(3px); }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  min-height:44px; padding:.5rem 1.15rem; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  font-weight:600; font-size:.9rem; color:var(--muted);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{ border-color:var(--fg); color:var(--fg); }
.chip[aria-pressed="true"]{ background:var(--fg); border-color:var(--fg); color:var(--bg); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(245,243,236,.96);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);
}
.site-header .wrap{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ width:40px; height:40px; object-fit:contain; }
.brand span{ font-family:var(--display); font-weight:500; font-size:1.2rem; line-height:1; letter-spacing:-0.02em; }

.nav-links{ display:flex; align-items:center; gap:clamp(1.25rem, 2.4vw, 2.25rem); }
.nav-links a{
  text-decoration:none; font-weight:600; font-size:.92rem; color:var(--muted);
  padding-block:.5rem; border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover{ color:var(--fg); border-color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.header-actions .btn{ min-height:44px; padding-inline:1.25rem; }

.lang{ display:flex; align-items:center; gap:.1rem; margin-right:.25rem; }
.lang a{
  min-width:40px; min-height:40px; padding:0 .5rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; text-decoration:none; font-size:.82rem; font-weight:600; color:var(--muted);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.lang a:hover{ color:var(--fg); }
.lang a[aria-current="true"]{ background:var(--fg); color:var(--bg); }
.lang-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.lang-list a{
  min-height:44px; padding:.5rem 1.1rem; display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:600; font-size:.9rem; color:var(--muted);
}
.lang-list a[aria-current="true"]{ background:var(--fg); border-color:var(--fg); color:var(--bg); }

.menu-btn{ display:none; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer; position:relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  position:absolute; width:22px; height:2px; background:var(--fg); border-radius:2px;
  transition:transform .3s var(--ease), background-color .2s;
}
.menu-btn span{ top:21px; left:11px; }
.menu-btn span::before, .menu-btn span::after{ content:''; left:0; }
.menu-btn span::before{ top:-7px; }
.menu-btn span::after{ top:7px; }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; position:fixed; inset:calc(var(--header-h) + var(--safe-top)) 0 0 0; z-index:59;
  background:var(--ivory);
  padding:1.5rem var(--pad) calc(2rem + env(safe-area-inset-bottom)); overflow-y:auto;
}
.mobile-menu.is-open{ display:block; }
.mobile-menu > a:not(.btn){
  display:block; padding:.8rem 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:-0.01em; text-decoration:none;
}
.mobile-menu .btn{ margin-top:1.75rem; width:100%; }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(.75rem, 1.6vw, 1.25rem) 0; }
.hero__media{
  position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff;
  min-height:clamp(540px, 84svh, 800px);
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  padding:clamp(1.1rem, 2.6vw, 2.25rem);
  background:var(--espresso);
}
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(26,36,56,.88) 0%, rgba(26,36,56,.64) 40%, rgba(26,36,56,.1) 78%); }
.hero__label, .hero__row{ position:relative; z-index:1; }
.hero__label{
  align-self:flex-start; font-size:.82rem; font-weight:600;
  padding:.4rem .9rem; border:1px solid rgba(255,255,255,.5); border-radius:18px; background:rgba(26,36,56,.25);
}
.hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(1.5rem, 4vw, 4rem); }
.hero__title{
  font-size:clamp(2.3rem, 6.2vw, 5.75rem); font-weight:380; line-height:1.02; letter-spacing:-0.03em;
  max-width:13ch; text-wrap:balance; color:#fff;
}
.hero__title em{ color:#A9C0DC; }
.hero__aside{ flex:0 1 380px; }
.hero__aside .lede{ color:rgba(255,255,255,.88); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.hero .btn--primary{ background:#F5F3EC; color:var(--espresso); }
.hero .btn--primary:hover{ background:#A9C0DC; color:var(--espresso); }
.hero .btn--ghost{ border-color:rgba(255,255,255,.7); color:#fff; }
.hero .btn--ghost:hover{ background:#fff; color:var(--espresso); }

/* ---------- Daftar besar "produk custom" ---------- */
.make{ text-align:center; font-size:clamp(1.9rem, 8vw, 6.75rem); font-weight:380; line-height:1.06; letter-spacing:-0.035em; }
.make__item{ display:block; }
.make-chip{
  display:inline-block; width:1.8em; height:.84em; vertical-align:-.06em; margin-left:.12em;
  border-radius:999px; overflow:hidden; background:var(--sand);
}
.make-chip img{ width:100%; height:100%; object-fit:cover; transform:scale(var(--zoom, 1)); transform-origin:var(--origin, 50% 50%); }

/* ---------- Section heads ---------- */
.section-head{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap);
  align-items:end; margin-bottom:clamp(1.5rem, 3vw, 2.5rem);
}
.section-head h2, .section-head .head-title{ grid-column:1 / span 7; }
.section-head .lede, .section-head__copy{ grid-column:8 / span 5; }
.section-head__copy .tag-note{ margin-top:.9rem; }

/* ---------- Portofolio ---------- */
.band{
  position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff;
  min-height:clamp(260px, 30vw, 400px);
  display:flex; align-items:flex-end; padding:clamp(1.1rem, 2.6vw, 2.25rem);
  background:var(--espresso);
}
.band__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.band__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(26,36,56,.86), rgba(26,36,56,.55) 45%, rgba(26,36,56,.1) 85%); }
.band__content{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; width:100%; }
.band h2{ color:#fff; font-size:clamp(2.2rem, 6vw, 5rem); }
.band .lede{ color:rgba(255,255,255,.9); max-width:34ch; }
.p-note-row{ margin-top:1rem; }

.p-jump{
  position:sticky; top:calc(var(--header-h) + var(--safe-top)); z-index:20;
  display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1); padding:.7rem var(--pad);
  margin-top:1.25rem;
  background:rgba(245,243,236,.96); border-bottom:1px solid var(--line);
}
.p-jump::-webkit-scrollbar{ display:none; }
.p-jump a{
  flex:none; min-height:44px; display:inline-flex; align-items:center; padding:.5rem 1.15rem;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.9rem; color:var(--muted);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.p-jump a:hover{ border-color:var(--fg); color:var(--fg); }
.p-jump a[aria-current="true"]{ background:var(--fg); border-color:var(--fg); color:var(--bg); }

.p-group{
  display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:start;
  padding-block:clamp(1.75rem, 3.5vw, 2.75rem) clamp(2.25rem, 4.5vw, 3.75rem);
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + var(--safe-top) + 72px);
}
.p-jump + .p-group{ border-top:0; padding-top:clamp(1.5rem, 3vw, 2.25rem); }
.p-group__head{ grid-column:1 / span 3; position:sticky; top:calc(var(--header-h) + var(--safe-top) + 92px); }
.p-group__head h3{ font-size:clamp(1.45rem, 2vw, 1.8rem); }
.p-group__head p{ margin-top:.6rem; color:var(--muted); font-size:.95rem; max-width:30ch; }
.p-group__head .p-group__count{ margin-top:1.1rem; font-size:.8rem; font-weight:600; color:var(--accent); }
.p-row{
  grid-column:4 / span 9;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 2.25rem) var(--gap);
}
.p-item__link{ display:block; text-decoration:none; }
.p-item__media{ display:block; overflow:hidden; border-radius:var(--r-md); background:var(--sand); aspect-ratio:4 / 5; }
.p-item__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.p-item__link:hover img{ transform:scale(1.035); }
.p-item__name{ display:block; margin-top:.75rem; min-height:2.3em; font-weight:600; font-size:.95rem; line-height:1.15; }

/* ---------- Lightbox ---------- */
.lightbox{
  width:100%; height:100%; max-width:100vw; max-height:100dvh; margin:0; padding:0; border:0;
  background:transparent; color:#F5F3EC;
}
.lightbox::backdrop{ background:rgba(26,36,56,.95); }
.lightbox[open]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:4rem var(--pad) 5.5rem; }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-width:100%; }
.lightbox img{ max-width:100%; max-height:calc(100dvh - 12rem); object-fit:contain; border-radius:var(--r-md); }
.lightbox figcaption{ font-family:var(--display); font-weight:400; letter-spacing:-0.01em; font-size:1.25rem; text-align:center; }
.lightbox figcaption small{ display:block; margin-top:.15rem; font:500 .8rem var(--sans); opacity:.75; }
.lb-btn{
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:rgba(245,243,236,.12); color:#F5F3EC; border:1px solid rgba(245,243,236,.3); border-radius:50%;
}
.lb-btn:hover{ background:rgba(245,243,236,.24); }
.lightbox :focus-visible{ outline-color:#F5F3EC; }
.lb-close{ position:absolute; top:max(1rem, var(--safe-top)); right:max(1rem, env(safe-area-inset-right)); }
.lb-nav{ position:absolute; left:0; right:0; bottom:max(1rem, env(safe-area-inset-bottom)); display:flex; justify-content:center; gap:1rem; }

/* ---------- Alur kerja ---------- */
.steps{ counter-reset:step; border-top:1px solid var(--fg); }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:repeat(12, 1fr); gap:.4rem var(--gap); align-items:start;
  padding-block:clamp(1.25rem, 2.6vw, 2rem); border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(step, decimal-leading-zero); grid-column:1 / span 3; grid-row:1 / span 2;
  font-family:var(--display); font-weight:300; letter-spacing:-0.03em; line-height:.9;
  font-size:clamp(2.5rem, 6vw, 5rem); color:var(--sand-2);
}
.steps h3{ grid-column:4 / span 4; font-size:clamp(1.25rem, 1.9vw, 1.6rem); }
.steps p{ grid-column:8 / span 5; color:var(--muted); max-width:46ch; }

/* ---------- Tentang ---------- */
.about-panel{ background:var(--sand); border-radius:var(--r-lg); padding:clamp(1.5rem, 4vw, 3.5rem); }
.about{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.about h2{ grid-column:1 / span 7; font-size:clamp(1.9rem, 4.4vw, 3.6rem); }
.about__text{ grid-column:8 / span 5; color:var(--muted); font-size:1.05rem; }
.about__text p + p{ margin-top:1rem; }

/* ---------- Kontak ---------- */
.contact-panel{ border-radius:var(--r-lg); padding:clamp(1.5rem, 4vw, 3.5rem); }
.contact{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.contact__text{ grid-column:1 / span 7; }
.contact__text h2{ margin-bottom:1.25rem; font-size:clamp(2.1rem, 5vw, 4.25rem); letter-spacing:-0.03em; line-height:1.04; }
.contact__text .meta{ margin-top:2rem; font-size:.95rem; color:var(--muted); }
.contact__text .meta strong{ display:block; color:var(--fg); font-family:var(--display); font-size:1.5rem; font-weight:400; letter-spacing:-0.01em; margin-bottom:.15rem; }
.contact__panel{ grid-column:8 / span 5; border-radius:var(--r-md); padding:clamp(1.1rem, 2.6vw, 1.75rem); background:var(--bg-2); }
.contact__panel fieldset{ border:0; margin:0; padding:0; min-width:0; }
.contact__panel legend{ font-weight:600; font-size:.95rem; padding:0; margin-bottom:.9rem; }
.pick{ display:flex; flex-wrap:wrap; gap:.5rem; }
.contact__panel .btn{ width:100%; margin-top:1.5rem; }
.contact__panel .hint{ margin-top:.9rem; font-size:.85rem; color:var(--muted); }

/* ---------- Footer ---------- */
.site-footer{ padding-block:clamp(2.5rem, 5vw, 4rem) 0; overflow:hidden; }
.site-footer .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem 3rem; align-items:flex-start; }
.footer-brand{ display:flex; gap:.75rem; align-items:center; }
.footer-brand img{ width:34px; height:34px; object-fit:contain; }
.footer-brand strong{ font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:-0.01em; line-height:1; }
.footer-brand small{ display:block; font-size:.8rem; color:var(--muted); }
.footer-links{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; }
.footer-links a{ text-decoration:none; font-size:.92rem; display:inline-flex; align-items:center; min-height:32px; color:var(--muted); }
.footer-links a:hover{ color:var(--fg); }
.footer-note{ font-size:.8rem; width:100%; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--muted); }
.footer-mark{
  margin-top:clamp(1rem, 3vw, 2.5rem);
  font-family:var(--display); font-weight:380; letter-spacing:-0.04em; line-height:.9; text-wrap:balance;
  font-size:clamp(2.6rem, 13.5vw, 13rem); white-space:normal; color:#A9C0DC;
  padding-bottom:calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom));
  user-select:none;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; z-index:70;
  right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:52px; padding:0 1.25rem 0 1rem;
  background:var(--espresso); color:#F5F3EC;
  border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem;
  box-shadow:0 8px 24px rgba(26,36,56,.3);
  transition:background-color .25s var(--ease), transform .15s var(--ease);
}
.wa-float:hover{ background:var(--walnut); }
.wa-float:active{ transform:translateY(1px); }
body.lb-open .wa-float{ display:none; }

/* ---------- Objects of Craft ---------- */
.craft-intro{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap);
  align-items:end; margin-bottom:clamp(2rem, 4vw, 3rem);
}
.craft-intro__main{ grid-column:1 / span 7; }
.craft-intro__copy{ grid-column:8 / span 5; }
.craft-note{ margin-top:.5rem; font-size:.95rem; color:var(--muted); }

.craft__track{
  position:relative; display:flex; gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
  padding-bottom:.25rem; cursor:grab;
}
.craft__track::-webkit-scrollbar{ display:none; }
.craft__track.is-dragging{ scroll-snap-type:none; cursor:grabbing; user-select:none; }
.craft-card{ flex:0 0 auto; width:min(480px, 38vw); scroll-snap-align:start; }

.craft-card__stage{ position:relative; aspect-ratio:3 / 4; background:var(--paper); border-radius:var(--r-lg); overflow:hidden; transition:box-shadow .3s var(--ease); }
.craft-card:hover .craft-card__stage{ box-shadow:0 0 0 2px var(--espresso); }
.craft-card__stage img{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .35s var(--ease); user-select:none; -webkit-user-drag:none;
}
.craft-card__stage img.is-active{ opacity:1; }
.craft-card__stage img[data-view="lifestyle"]{ object-fit:cover; }
.craft-card__stage img[data-view="studio"],
.craft-card__stage img[data-view="exploded"]{ object-fit:contain; background:var(--paper); }

.craft-card__view{ display:flex; justify-content:space-between; gap:1rem; margin-top:.75rem; font-size:.85rem; color:var(--muted); }
.craft-card__view [data-view-name]{ font-weight:600; color:var(--fg); }

.craft-card__selector{
  display:grid; grid-template-columns:repeat(3, 1fr); margin-top:.6rem;
  border:1px solid var(--espresso); border-radius:999px; overflow:hidden;
}
.craft-card__selector button{
  min-height:48px; padding:.4rem .35rem; cursor:pointer;
  background:transparent; border:0; border-right:1px solid var(--line);
  font-weight:600; font-size:.82rem; line-height:1.2; color:var(--muted);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.craft-card__selector button:last-child{ border-right:0; }
.craft-card__selector button:hover{ color:var(--fg); }
.craft-card__selector button[aria-pressed="true"]{ background:var(--espresso); color:var(--ivory); }
.craft-card__selector button:focus-visible{ outline-offset:-4px; }

.craft-card__meta{ margin-top:1.25rem; }
.craft-card__cat{ font-size:.8rem; font-weight:600; color:var(--accent); }
.craft-card__meta h3{ margin:.2rem 0 .8rem; font-size:clamp(1.35rem, 2vw, 1.7rem); }

.craft__controls{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:clamp(1.25rem, 3vw, 2rem); }
.craft__count{ font-size:.95rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.craft__count [data-craft-current]{ color:var(--fg); }
.craft__arrows{ display:flex; gap:.6rem; }
.craft-btn{
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--fg); border:1px solid var(--fg); border-radius:50%;
  transition:background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.craft-btn:hover:not(:disabled){ background:var(--fg); color:var(--bg); }
.craft-btn:disabled{ opacity:.35; cursor:default; }

/* ---------- Motion ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal-img img{ transform:scale(1.06); opacity:0; transition:transform 1.2s var(--ease), opacity .9s var(--ease); }
.js .reveal-img.is-in img{ transform:none; opacity:1; }
.js .p-item__link:hover .reveal-img.is-in img{ transform:scale(1.035); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .reveal-img img{ opacity:1; transform:none; transition:none; }
  .p-item__media img, .btn, .chip, .craft-card__stage img, .craft-card__stage, .craft-btn, .craft-card__selector button{ transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-links, .lang, .header-actions .btn{ display:none; }
  .menu-btn{ display:block; }
}

@media (max-width:1000px){

  .hero__row{ flex-direction:column; align-items:flex-start; }
  .hero__aside{ flex:none; max-width:46ch; }
  .section-head h2, .section-head .head-title, .section-head .lede, .section-head__copy{ grid-column:1 / -1; }
  .section-head{ align-items:start; }


  .p-group{ display:block; }
  .p-group__head{ position:static; margin-bottom:1.25rem; }
  .p-group__head p{ max-width:56ch; }
  .p-row{ grid-template-columns:repeat(2, 1fr); }
  .band__content{ flex-direction:column; align-items:flex-start; gap:.75rem; }

  .steps li::before{ grid-column:1 / span 12; grid-row:auto; margin-bottom:.4rem; }
  .steps h3, .steps p{ grid-column:1 / -1; }

  .about h2, .about__text{ grid-column:1 / -1; }
  .contact__text, .contact__panel{ grid-column:1 / -1; }

  .craft-intro__main, .craft-intro__copy{ grid-column:1 / -1; }
  .craft-intro{ align-items:start; }
  .craft-card{ width:min(440px, 62vw); }
}

@media (max-width:700px){
  :root{ --header-h:60px; }
  .brand{ gap:.55rem; }
  .brand span{ font-size:1.02rem; }

  .hero__media{ min-height:max(560px, 78svh); }
  .hero__cta .btn{ width:100%; }


  .p-row{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76%;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    gap:1rem; padding-bottom:.25rem;
  }
  .p-row::-webkit-scrollbar{ display:none; }
  .p-item{ scroll-snap-align:start; }
  .p-item__name{ min-height:0; }

  .craft-card{ width:82vw; }

  .lightbox[open]{ padding-top:4.5rem; }
  .lightbox img{ max-height:calc(100dvh - 13rem); }

  .wa-float .wa-float__label{ display:none; }
  .wa-float{ padding:0; width:56px; height:56px; justify-content:center; }
  .footer-mark{ padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Mandarin (zh-Hans) ---------- */
html[lang="zh-Hans"]{
  --display:'Fraunces', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --sans:'Plus Jakarta Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
html[lang="zh-Hans"] body *{ letter-spacing:normal; }
html[lang="zh-Hans"] body{ line-height:1.8; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] .make, html[lang="zh-Hans"] .hero__title{ line-height:1.25; }
html[lang="zh-Hans"] .footer-mark{ line-height:.9; }
@media (min-width:701px){
  html[lang="zh-Hans"] .hero__title em{ display:inline-block; white-space:nowrap; }
}

/* ---------- Global Reach ---------- */
.global-head{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap);
  align-items:end; margin-bottom:clamp(2rem, 4vw, 3rem);
}
.global-head h2{ grid-column:1 / span 7; }
.global-head .lede{ grid-column:8 / span 5; }
.global-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.global-photos{ grid-column:1 / span 6; }
.global-globe{ grid-column:7 / span 6; }
.global-label{ margin-bottom:.9rem; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.export-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(.75rem, 1.5vw, 1.25rem); }
.export-tile{ margin:0; }
.export-tile .export-link{ display:block; overflow:hidden; border-radius:var(--r-md); background:var(--sand-2); }
.export-tile img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; transition:transform .9s var(--ease); }
.export-tile .export-link:hover img{ transform:scale(1.03); }
.export-tile figcaption{ margin-top:.55rem; font-size:.85rem; color:var(--muted); }
.export-tile--main{ grid-column:1 / -1; }
.export-tile--a{ grid-column:1 / span 7; }
.export-tile--b{ grid-column:8 / span 5; margin-top:clamp(1rem, 3.5vw, 3rem); }
.global-photos__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:1.25rem; }
button.text-link{ background:none; border:0; border-bottom:1px solid var(--accent); padding:0 0 2px; font:inherit; font-weight:600; cursor:pointer; }

.globe-card{ background:var(--ivory); border-radius:var(--r-lg); padding:clamp(.75rem, 2vw, 1.5rem); }
.globe{ display:block; width:100%; max-width:560px; height:auto; margin-inline:auto; overflow:visible; }
.globe__grat{ fill:none; stroke:#2E4E8E; stroke-width:.7; opacity:.25; }
.globe__land{ fill:none; stroke:#1A2438; stroke-width:.8; stroke-linejoin:round; opacity:.5; }
.globe__idn{ fill:#2E4E8E; fill-opacity:.35; stroke:#1A2438; stroke-width:1; stroke-linejoin:round; }
.globe__rim{ fill:none; stroke:#1A2438; stroke-width:1.2; opacity:.7; }
.globe__route{ fill:none; stroke:#2E4E8E; stroke-width:2.4; stroke-linecap:round; }
.globe__travel{
  fill:none; stroke:#1A2438; stroke-width:3.6; stroke-linecap:round;
  stroke-dasharray:7 93; stroke-dashoffset:7;
  animation:globeTravel 4.8s ease-in-out infinite;
}
@keyframes globeTravel{ from{ stroke-dashoffset:7; } to{ stroke-dashoffset:-100; } }

.globe__marker{ cursor:default; outline:none; }
.globe__ring{
  fill:none; stroke-width:1.6; opacity:.7;
  transform-box:fill-box; transform-origin:center;
  animation:globePulse 3.4s ease-out infinite;
}
.globe__marker--home .globe__ring{ stroke:#1A2438; }
.globe__marker--market .globe__ring{ stroke:#2E4E8E; animation-delay:1.1s; }
.globe__dot{ transition:transform .25s var(--ease); transform-box:fill-box; transform-origin:center; }
.globe__marker--home .globe__dot{ fill:#1A2438; stroke:#F5F3EC; stroke-width:2; }
.globe__marker--market .globe__dot{ fill:#2E4E8E; stroke:#F5F3EC; stroke-width:2; }
.globe__marker:hover .globe__dot, .globe__marker:focus-visible .globe__dot{ transform:scale(1.3); }
.globe__marker:focus-visible .globe__ring{ stroke-width:3; opacity:1; }
.globe__label{ font:600 22px var(--sans); fill:#1A2438; paint-order:stroke; stroke:#FBFAF6; stroke-width:5px; stroke-linejoin:round; }
@keyframes globePulse{ 0%{ transform:scale(.8); opacity:.7; } 70%,100%{ transform:scale(1.9); opacity:0; } }

.globe-legend{ display:grid; gap:.65rem; margin-top:1.1rem; }
.globe-legend li{ display:flex; gap:.7rem; align-items:baseline; font-size:.95rem; color:var(--muted); }
.globe-legend strong{ color:var(--fg); font-weight:600; }
.globe-legend span{ flex:none; width:12px; height:12px; border-radius:50%; transform:translateY(1px); }
.globe-legend__home span{ background:#1A2438; }
.globe-legend__market span{ background:#2E4E8E; }
.globe-note{ margin-top:.7rem; font-size:.8rem; color:var(--muted); }

.global-exp{
  margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:1.25rem; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(12, 1fr); gap:.5rem var(--gap);
}
.global-exp .global-label{ grid-column:1 / span 4; margin:0; }
.global-exp__body{
  grid-column:5 / span 8; font-family:var(--display); font-weight:380;
  font-size:clamp(1.2rem, 2vw, 1.7rem); line-height:1.4; letter-spacing:-0.01em;
}

.global-cta{
  margin-top:clamp(2.5rem, 5vw, 4rem); padding:clamp(1.5rem, 4vw, 3rem); border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
}
.global-cta h3{ font-size:clamp(1.6rem, 3vw, 2.4rem); }
.global-cta p{ margin-top:.4rem; color:var(--muted); max-width:46ch; }

@media (max-width:1000px){
  .global-head h2, .global-head .lede{ grid-column:1 / -1; }
  .global-head{ align-items:start; }
  .global-photos, .global-globe{ grid-column:1 / -1; }
  .global-globe{ margin-top:clamp(1.5rem, 4vw, 2.5rem); }
  .globe{ max-width:460px; }
  .global-exp .global-label, .global-exp__body{ grid-column:1 / -1; }
}
@media (max-width:700px){
  .export-tile--a, .export-tile--b{ grid-column:span 6; margin-top:0; }
  .export-tile--b{ margin-top:clamp(.75rem, 4vw, 1.5rem); }
  .globe__label{ font-size:26px; }
  .global-cta .btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .globe__travel, .globe__ring{ animation:none; }
  .globe__ring{ opacity:.5; }
  .export-tile img, .globe__dot{ transition:none; }
}