@font-face {
  font-family: "Prints Charming";
  src: local("Prints Charming Oblique"), local("PrintsCharming-Oblique");
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("./assets/fonts/pinyon-script.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("./assets/fonts/bodoni-moda.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("./assets/fonts/poppins.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./assets/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --wine: #642230;
  --cream: #f5eee4;
  --script: "Pinyon Script", Georgia, serif;
  --serif: "Bodoni Moda", Georgia, serif;
  --sans: Poppins, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--wine); font: 400 16px/1.4 var(--sans); }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
main[id], main [id] { scroll-margin-block-start: calc(var(--header-top) + var(--header-height) + 16px); }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: absolute; z-index: 5; top: 8px; left: 8px; padding: 8px 12px; background: var(--cream); }

.page {
  --header-height: 68px;
  --header-top: clamp(12px, 1.25vw, 20px);
  --process-height: clamp(44px, 3.95cqw, 64px);
  --gutter: clamp(20px, 4vw, 56px);
  --diagram-ratio: 564 / 597;
  position: relative;
  container-type: inline-size;
}
.header {
  --header-gutter: clamp(16px, 2.6cqw, 48px);
  --header-expanded-width: min(calc(100cqw - 2 * var(--header-gutter)), 1440px);
  --header-compact-inset: max(
    clamp(8px, calc(24cqw - 174px), 224px),
    calc((var(--header-expanded-width) - 900px) / 2)
  );
  --header-inset: 0px;
  position: sticky;
  z-index: 3;
  top: var(--header-top);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2cqw, 32px);
  width: var(--header-expanded-width);
  height: var(--header-height);
  margin-inline: auto;
  margin-bottom: calc(-1 * var(--header-height));
  padding-inline: clamp(24px, 2.5cqw, 40px);
  color: var(--cream);
  pointer-events: none;
  filter: drop-shadow(0 5px 10px #26091038);
}
.header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--wine);
  clip-path: inset(0 var(--header-inset) round 20px);
  content: "";
}
.header.is-compact { --header-inset: var(--header-compact-inset); }
.header > * { pointer-events: auto; }
.brand { justify-self: start; transform: translateX(var(--header-inset)); }
.brand img { width: auto; height: 44px; }
.header :where(nav button) {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.header nav button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.75cqw, 28px); }
.site-nav :is(a, button) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: 10px;
  font: 400 clamp(14px, 1.2cqw, 17px)/1.25 "Plus Jakarta Sans", var(--sans);
  text-transform: uppercase;
  white-space: nowrap;
}
.header nav :is(a, button):hover { color: #f6d9d9; }
.header nav a[aria-current="location"] {
  background: #f5eee419;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.header-contact {
  justify-self: end;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding-inline: clamp(14px, 1.7cqw, 24px);
  border-radius: 12px;
  transform: translateX(calc(-1 * var(--header-inset)));
  background: var(--cream);
  color: var(--wine);
  font-size: 14px;
  white-space: nowrap;
}
.header-contact:hover { background: #f6d9d9; }
.header-contact[aria-current="location"] { text-decoration: underline; text-underline-offset: 4px; }
.header-contact:focus-visible { outline-color: var(--cream); }
@media (min-width: 761px) and (max-width: 860px) {
  .site-nav { gap: 8px; }
  .site-nav :is(a, button) { padding-inline: 7px; }
}

@media (prefers-reduced-motion: no-preference) {
  .header::before { transition: clip-path 500ms cubic-bezier(.4, 0, .2, 1); }
  .brand, .header-contact { transition: transform 500ms cubic-bezier(.4, 0, .2, 1); }
}

.hero {
  --hero-aspect: 1366 / 768;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 20px;
  min-height: 420px;
  aspect-ratio: var(--hero-aspect);
  padding: calc(var(--header-height) + var(--header-top)) var(--gutter)
    max(clamp(42px, 6cqw, 132px), calc(100cqw / (var(--hero-aspect)) - 100svh + 32px));
  background: var(--wine);
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-flower {
  position: absolute;
  pointer-events: none;
  --reveal-duration: 1400ms;
  --reveal-y: 10px;
  --reveal-scale: .94;
}
.hero-flower img { width: 100%; height: auto; }
.hero-flower-left {
  top: 20.3%;
  left: 0;
  width: 14.64cqw;
  transform-origin: left bottom;
  --reveal-x: -36px;
}
.hero-flower-right {
  bottom: 0;
  right: 0;
  width: 12.15cqw;
  transform-origin: right bottom;
  --reveal-x: 36px;
  --reveal-delay: 160ms;
}
.hero::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #230e1499 0%, #230e1466 38%, #230e1424 78%);
  pointer-events: none;
  content: '';
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 10px #190a0ca6;
}
.hero h1 {
  font: 400 clamp(48px, 7.6cqw, 104px)/1.03 "Prints Charming", var(--script);
  --blur-delay: 220ms;
  --blur-step: 120ms;
  --blur-duration: 1200ms;
}
.hero h1 > :is(.hero-title-line, em) { display: block; }
.hero h1 > em { font-style: normal; }
.hero-copy p { max-width: 52ch; margin: clamp(22px, 2.7cqw, 42px) auto 0; font-size: clamp(15px, 1.35cqw, 18px); text-wrap: balance; --reveal-delay: 660ms; }
.hero-prompt {
  overflow: hidden;
  height: 32px;
  margin-top: 7px;
  font-size: clamp(14px, 1.3cqw, 17px);
  color: #f5eee4e8;
  --reveal-delay: 770ms;
}
.hero-prompt-track span { display: flex; height: 32px; align-items: center; justify-content: center; gap: 10px; }
.hero-prompt svg {
  width: 21px;
  height: 21px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.consult-form {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  width: min(100%, 288px);
  padding: 4px;
  border: 1px solid #f5efe54d;
  border-radius: 18px;
  background: #503736;
  color: var(--cream);
}
.hero-consult { --reveal-delay: 860ms; }
.hero[data-hero-slide="photo"] .consult-form { background: #503736e6; }
.consult-form input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 0 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: 500 clamp(13px, 1.12vw, 14px)/1.2 var(--sans);
}
.consult-form input::placeholder { color: #e3d7cd; opacity: 1; }
.consult-form button {
  flex: none;
  min-height: 44px;
  padding: 0 clamp(10px, 1.15vw, 14px);
  border: 0;
  border-radius: 12px;
  background: var(--cream);
  color: var(--wine);
  cursor: pointer;
  font: 500 clamp(12px, 1.05vw, 13px)/1.1 var(--sans);
}
.consult-form button:hover { background: #fff9ee; }
.consult-form :is(input, button):focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@media (max-width: 480px) {
  .consult-form { width: min(82%, 288px); }
  .consult-form input[type="text"] { font-size: 16px; }
}

.process {
  display: flex;
  overflow: hidden;
  min-height: var(--process-height);
  border-block: 2px solid var(--wine);
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1;
  text-transform: uppercase;
}
.process-track { display: flex; flex: none; width: max-content; animation: process-slide 26s linear infinite; }
.process-set { display: grid; flex: none; grid-template-columns: repeat(6, minmax(0, 1fr)); width: max(100cqw, 570px); }
.process-set span { display: grid; place-items: center; padding: 4px; }
@media (hover: hover) {
  .process:hover .process-track { animation-play-state: paused; }
}
@keyframes process-slide { to { transform: translateX(-50%); } }

.about {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, .832fr) minmax(0, 1fr);
  align-items: start;
  gap: 8.27cqw;
  padding: 2.2cqw 5cqw 5.86cqw 10.83cqw;
  background: var(--cream) url("./assets/psd-tentang.webp") center top / 100% auto no-repeat;
}
.about-branch {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  --reveal-duration: 1400ms;
  --reveal-scale: .95;
}
.about-branch-top {
  top: 0;
  right: 0;
  width: 16.84cqw;
  --reveal-x: 24px;
}
.about-branch-bottom {
  right: 0;
  bottom: 0;
  width: 22.4cqw;
  --reveal-x: 18px;
}
.about-copy { position: relative; padding-top: 8.56cqw; }
.about h2 { font: 400 clamp(35px, 5.4cqw, 100px)/1.05 var(--serif); }
.about-copy p {
  max-width: 44ch;
  margin-top: clamp(14px, 3cqw, 52px);
  font-size: clamp(14px, 1.75cqw, 30px);
  line-height: 1.3;
  --reveal-delay: 150ms;
}
.about-diagram { justify-self: center; width: 100%; }
.diagram-slot { position: relative; aspect-ratio: var(--diagram-ratio); }
.production-diagram { position: relative; width: 100%; --reveal-delay: 140ms; }
.production-diagram, .comparison-diagram-fallback { container-type: inline-size; }
.production-diagram img, .comparison-diagram-fallback img { width: 100%; height: auto; }
.diagram-flight {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  pointer-events: none;
  overflow-anchor: none;
}
.page[data-diagram-transfer] .comparison-diagram-fallback { visibility: hidden; }
.diagram-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.diagram-orbit {
  --orbit-period: 24s;
  fill: var(--wine);
  stroke: var(--cream);
  stroke-width: 2px;
  transform-box: view-box;
  transform-origin: 0 0;
}
.diagram-orbit-inner { --orbit-period: 19s; fill: #9b6572; }
.diagram-labels { position: absolute; inset: 0; pointer-events: none; }
.diagram-labels span {
  position: absolute;
  font: 400 clamp(5px, 3.3cqi, 18px)/1 var(--serif);
  text-transform: uppercase;
}
.diagram-print, .diagram-fabric {
  left: 49.73%;
  transform: translateX(-50%);
}
.diagram-print { top: 19.6%; }
.diagram-fabric { top: 96.8%; }
.diagram-design, .diagram-sewing { top: 54.27%; }
.diagram-design { right: 96%; }
.diagram-sewing { left: 96%; }

.comparison {
  --comparison-art-column: clamp(150px, 20cqw, 248px);
  --comparison-panel-gap: clamp(10px, 1.8cqw, 24px);
  --comparison-columns: minmax(0, 1fr) var(--comparison-art-column) minmax(0, 1fr);
  --comparison-radius: clamp(14px, 2cqw, 22px);
  --comparison-inset: clamp(12px, 1.8cqw, 26px);
  --comparison-vendors-border: #b68e7e;
  position: relative;
  padding: clamp(44px, 6.2cqw, 96px) max(16px, 4cqw) clamp(52px, 7cqw, 104px);
  background: var(--cream) url("./assets/psd-perbandingan.webp") center / cover no-repeat;
}
.comparison-flower, .services-flower {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  --reveal-duration: 1400ms;
  --reveal-y: 8px;
  --reveal-scale: .96;
}
.comparison-side-flower {
  inset: 2.71cqw auto auto 0;
  width: 14.13cqw;
  transform-origin: left top;
  --reveal-x: -12px;
  --reveal-y: 0px;
}
.comparison-bloom {
  --bloom-width: 18.74cqw;
  /* The section boundary crosses the original flower 222px from its top. */
  inset: calc(-222 / 256 * var(--bloom-width)) auto auto 0;
  width: var(--bloom-width);
  transform-origin: left 57.5%;
  --reveal-x: -16px;
  --reveal-y: 0px;
}
.comparison-heading {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
}
.comparison-title {
  font: 400 clamp(33px, 4.3cqw, 62px)/1.05 var(--serif);
  text-wrap: balance;
}
.comparison-title > em { display: block; }
.comparison-lead {
  max-width: 55ch;
  margin: 16px auto 0;
  color: #74414c;
  font-size: clamp(14px, 1.16cqw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}
.comparison-body {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: clamp(28px, 4cqw, 52px) auto 0;
}
.comparison-table {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--comparison-columns);
  grid-template-rows: auto auto;
  column-gap: var(--comparison-panel-gap);
}
.comparison-table :is(thead, tbody) { grid-column: 1 / -1; }
/* The card surfaces stay still while their paired rows reveal. */
.comparison-table::before, .comparison-table::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  grid-row: 1 / -1;
  border: 1px solid #cfaca9;
  border-radius: var(--comparison-radius);
  background: #fff9f1;
  box-shadow: 0 3px 9px #6422300c;
  pointer-events: none;
  content: "";
}
.comparison-table::before { grid-column: 1 / 2; }
.comparison-table::after {
  grid-column: -2 / -1;
  border-color: var(--comparison-vendors-border);
  background: #f3e9dd;
}
.comparison-table tr {
  display: grid;
  grid-template-columns: var(--comparison-columns);
  column-gap: var(--comparison-panel-gap);
}
.comparison-table tbody tr {
  --reveal-y: 16px;
  --reveal-duration: 1200ms;
}
.comparison-table tbody tr:nth-child(2) { --reveal-delay: 260ms; }
.comparison-table tbody tr:nth-child(3) { --reveal-delay: 520ms; }
.comparison-table tbody tr:nth-child(4) { --reveal-delay: 650ms; }
.comparison-table tbody tr:nth-child(5) { --reveal-delay: 780ms; }
.comparison-lumia { grid-column: 1; }
.comparison-vendors { grid-column: -2; }
.comparison-table :where(th, td):not(.visually-hidden) {
  min-width: 0;
  padding: clamp(14px, 1.45cqw, 22px) var(--comparison-inset);
  text-align: start;
}
.comparison-table thead th {
  display: grid;
  place-items: center;
  border: 1px solid var(--comparison-vendors-border);
  border-radius: var(--comparison-radius) var(--comparison-radius) 0 0;
  background: #ecdfd2;
  font-size: clamp(15px, 1.55cqw, 23px);
  line-height: 1.3;
  text-align: center;
}
.comparison-table thead .comparison-lumia { border-color: var(--wine); background: var(--wine); color: #fff9f1; }
.comparison-table thead strong { font-weight: 600; }
.comparison-table tbody td {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(6px, .9cqw, 12px);
}
.comparison-table tbody tr:not(:last-child) td { border-bottom: 1px solid #64223020; }
.comparison-mark {
  width: clamp(14px, 1.6cqw, 20px);
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--wine);
  color: var(--cream);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.comparison-vendors .comparison-mark { background: #e6d6c8; color: #74414c; }
.comparison-table td p {
  color: #74414c;
  font-size: clamp(13px, 1.12cqw, 16px);
  line-height: 1.55;
  overflow-wrap: break-word;
}
.comparison-diagram {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: min(224px, calc(var(--comparison-art-column) * .91));
  height: max-content;
  margin: auto;
}
.comparison-diagram-slot { width: 100%; }

@media (max-width: 900px) {
  .comparison { --comparison-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-diagram {
    position: relative;
    inset: auto;
    width: clamp(128px, 25cqw, 172px);
    margin: 0 auto 24px;
  }
}

.services {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4cqw, 36px);
  padding: 9.15cqw 5.05cqw 7.69cqw 6.15cqw;
  background: var(--cream) url("./assets/psd-layanan.webp") center / 100% 100% no-repeat;
}
.services-flower-left {
  inset: 34.9% auto auto 0;
  width: 8.64cqw;
  transform-origin: left center;
  --reveal-x: -16px;
}
.services-bloom {
  --bloom-width: 17.06cqw;
  /* The original bouquet crosses into Services 455px from its top. */
  inset: calc(-455 / 233 * var(--bloom-width)) 0 auto auto;
  width: var(--bloom-width);
  transform-origin: right 77.4%;
  --reveal-y: 0px;
}
.service-card {
  --service-inset: clamp(16px, 2.4cqw, 36px);
  --reveal-y: 36px;
  --reveal-scale: .98;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: clamp(20px, 2.75cqw, 38px);
  background: var(--cream);
  color: var(--wine);
  box-shadow: 0 12px 28px #35141c24;
}
.service-card:nth-of-type(2) { --reveal-delay: 130ms; }
.service-card:nth-of-type(3) { --reveal-delay: 260ms; }
.service-media { position: relative; overflow: hidden; }
.service-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 72%, var(--cream));
  pointer-events: none;
  content: "";
}
.service-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.service-type {
  position: absolute;
  z-index: 1;
  inset: var(--service-inset) auto auto var(--service-inset);
  display: flex;
  max-width: calc(100% - var(--service-inset) * 2);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 100px;
  background: var(--wine);
  color: var(--cream);
  font: 500 clamp(12px, 1.1cqw, 16px)/1.25 var(--sans);
}
.service-type::before {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 1px solid #efb9ab;
  border-radius: 50%;
  content: "";
}
.service-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(14px, 1.5cqw, 20px);
  padding: clamp(24px, 2.6cqw, 40px) var(--service-inset) var(--service-inset);
}
.service-headline {
  font: 500 clamp(25px, 2.55cqw, 39px)/1.13 var(--serif);
  text-wrap: balance;
}
.service-copy details { width: 100%; }
.service-gallery-trigger { margin-block-start: auto; }
.service-copy summary, .service-gallery-trigger {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--wine);
  border-radius: 12px;
  background: var(--wine);
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  font: 500 13px/1.3 var(--sans);
  text-align: left;
}
summary::-webkit-details-marker { display: none; }
.service-arrow { flex: none; font-size: 18px; line-height: 1; }
.service-copy summary:focus-visible, .service-gallery-trigger:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.service-copy details p { margin-top: 12px; color: #74414c; font-size: 14px; }
.service-copy details[open] .service-arrow { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) {
  .service-copy summary {
    border-color: #996b75;
    background: transparent;
    color: var(--wine);
  }
  .service-card:is(:hover, :focus-within) summary,
  .service-copy details[open] summary {
    border-color: var(--wine);
    background: var(--wine);
    color: var(--cream);
  }
  .service-gallery-trigger {
    opacity: 0;
    pointer-events: none;
  }
  .service-card:is(:hover, :focus-within) .service-gallery-trigger {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .service-media img, .service-arrow {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1), rotate 300ms ease;
  }
  .service-copy summary, .service-gallery-trigger {
    transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, opacity 260ms ease;
  }
  .service-card:focus-within .service-media img { transform: scale(1.045); }
  .service-card:focus-within .service-arrow { transform: translateX(3px); }
  @media (hover: hover) and (pointer: fine) {
    .service-card:hover .service-media img { transform: scale(1.045); }
    .service-card:hover .service-arrow { transform: translateX(3px); }
  }
}

.design-gallery {
  --gallery-card-height: min(clamp(210px, 75vw, 440px), 54svh);
  --gallery-card: calc(var(--gallery-card-height) * .707);
  position: fixed;
  inset: 0;
  width: min(940px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(14px, 3vw, 32px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #64223022;
  border-radius: clamp(18px, 3vw, 28px);
  background: var(--cream);
  color: var(--wine);
}
.design-gallery::backdrop { background: #210b12ba; }
.gallery-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.gallery-header h2 { font: 400 clamp(26px, 5vw, 44px)/1.08 var(--serif); }
.gallery-header p { grid-column: 1 / -1; font-size: clamp(12px, 2.6vw, 14px); }
.gallery-header-actions { display: flex; gap: 8px; }
.gallery-status { margin: 28px 0; text-align: center; }
.gallery-stage {
  position: relative;
  height: calc(var(--gallery-card-height) + 36px);
  overflow: hidden;
  perspective: 900px;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.gallery-slide {
  position: absolute;
  top: 18px;
  left: 50%;
  width: var(--gallery-card);
  aspect-ratio: 2480 / 3508;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(8px, 2vw, 16px);
  background: #ebdfd3;
  box-shadow: 0 8px 18px #35172030;
  opacity: var(--slide-opacity, 0);
  pointer-events: none;
  transform: translateX(calc(-50% + var(--slide-shift, 0%) + var(--gallery-drag, 0px)))
    translateZ(var(--slide-depth, -170px)) rotateY(var(--slide-yaw, 0deg));
}
.gallery-slide[data-position] { pointer-events: auto; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery-slide[data-position="-2"], .gallery-slide[data-position="2"] {
  --slide-depth: -150px;
  --slide-opacity: .47;
  z-index: 1;
}
.gallery-slide[data-position="-1"], .gallery-slide[data-position="1"] {
  --slide-depth: -76px;
  --slide-opacity: .76;
  z-index: 2;
}
.gallery-slide[data-position="-2"] { --slide-shift: -84%; --slide-yaw: 53deg; }
.gallery-slide[data-position="-1"] { --slide-shift: -57%; --slide-yaw: 38deg; }
.gallery-slide[data-position="0"] { --slide-depth: 0px; --slide-opacity: 1; z-index: 3; }
.gallery-slide[data-position="1"] { --slide-shift: 57%; --slide-yaw: -38deg; }
.gallery-slide[data-position="2"] { --slide-shift: 84%; --slide-yaw: -53deg; }
.gallery-stage[data-gallery-dragging] { cursor: grabbing; }
.gallery-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gallery-dots {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.gallery-dots::-webkit-scrollbar { display: none; }
.gallery-dot {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wine);
  cursor: pointer;
}
.gallery-dot:first-child { margin-inline-start: auto; }
.gallery-dot:last-child { margin-inline-end: auto; }
.gallery-dot::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  content: "";
}
.gallery-dot:hover::before { opacity: .75; }
.gallery-dot[aria-current="true"]::before { opacity: 1; transform: scale(1.35); }
.gallery-icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #64223050;
  border-radius: 50%;
  background: var(--cream);
  color: var(--wine);
  cursor: pointer;
}
.gallery-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gallery-icon-button:not(:disabled):hover { background: var(--wine); color: var(--cream); }
.gallery-icon-button:disabled { opacity: .4; cursor: default; }
.gallery-icon-button:focus-visible, .gallery-dot:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.gallery-autoplay[hidden],
.gallery-autoplay[data-playing] .gallery-play-icon,
.gallery-autoplay:not([data-playing]) .gallery-pause-icon { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .design-gallery[open] { animation: gallery-open 420ms cubic-bezier(.22, 1, .36, 1) both; }
  .gallery-stage:not([data-gallery-dragging]) .gallery-slide {
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 250ms ease;
  }
}
@keyframes gallery-open {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}

.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  gap: clamp(56px, 7cqw, 108px);
  padding: clamp(48px, 6cqw, 88px) var(--gutter) clamp(48px, 5.5cqw, 84px);
  background: var(--cream);
}
.contact-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  mask-image: linear-gradient(#000 72%, transparent);
  pointer-events: none;
  --reveal-duration: 1400ms;
}
.faq {
  width: min(100%, 1120px);
  container-type: inline-size;
}
.faq-header { margin-bottom: clamp(16px, 2.4cqw, 28px); }
.faq-kicker { margin-bottom: 6px; font-size: clamp(14px, 1.6cqw, 18px); font-weight: 600; letter-spacing: .08em; }
.faq-header h2 { font: 400 clamp(29px, 5.1cqw, 56px)/1.07 var(--serif); text-wrap: balance; }
.faq-cards {
  display: grid;
  grid-template-columns:
    minmax(0, var(--faq-first, 1fr)) minmax(0, var(--faq-second, 1fr))
    minmax(0, var(--faq-third, 1fr)) minmax(0, var(--faq-fourth, 1fr));
  gap: clamp(12px, 1.6cqw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-cards[data-faq-current="1"] { --faq-first: 2fr; }
.faq-cards[data-faq-current="2"] { --faq-second: 2fr; }
.faq-cards[data-faq-current="3"] { --faq-third: 2fr; }
.faq-cards[data-faq-current="4"] { --faq-fourth: 2fr; }
.faq-cards[data-faq-current] { column-gap: 0; }
.faq-cards[data-faq-current] > .faq-card:not(:last-child) { margin-inline-end: -8px; }
.faq-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: clamp(190px, 22cqw, 236px);
  padding: clamp(16px, 2cqw, 22px);
  border: 1px solid #64223033;
  border-radius: clamp(14px, 2cqw, 22px);
  background: #fbf3e9;
}
.faq-card:nth-child(2) { background: #f0e1d5; }
.faq-card:nth-child(3) { background: #ecdcd8; }
.faq-card:nth-child(4) { background: #f6e9dc; }
.faq-card[data-active] { border-color: var(--wine); }
.faq-number {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
}
.faq-card[data-active] .faq-number { border-color: var(--wine); background: var(--wine); color: var(--cream); }
.faq-card h3 { margin: 0; font: 500 clamp(17px, 2.1cqw, 23px)/1.2 var(--serif); }
.faq-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.faq-card[data-compact] .faq-trigger::after {
  position: absolute;
  inset: 0;
  content: '';
}
.faq-trigger:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.faq-card p { margin-top: 8px; font-size: clamp(13px, 1.28cqw, 15px); line-height: 1.55; }
.faq-answer { display: grid; grid-template-rows: 1fr; }
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-card[data-compact] .faq-answer { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq-cards { transition: grid-template-columns 720ms cubic-bezier(.32, .08, .22, 1), gap 720ms ease; }
  .faq-card { transition: margin 720ms ease, border-color 360ms ease; }
  .faq-answer { transition: grid-template-rows 720ms cubic-bezier(.32, .08, .22, 1), opacity 320ms ease; }
  .faq-card[data-active] .faq-answer { transition-delay: 0ms, 180ms; }
}
@container (max-width: 920px) {
  .faq-cards { grid-template-columns: minmax(0, var(--faq-left, 1fr)) minmax(0, var(--faq-right, 1fr)); }
  .faq-cards:is([data-faq-current="1"], [data-faq-current="3"]) { --faq-left: 1.6fr; }
  .faq-cards:is([data-faq-current="2"], [data-faq-current="4"]) { --faq-right: 1.6fr; }
  .faq-cards[data-faq-current] > .faq-card:nth-child(even) { margin-inline-end: 0; }
}
@container (max-width: 500px) {
  .faq-cards { grid-template-columns: minmax(0, 1fr); }
  .faq-card { min-height: 0; }
  .faq-cards[data-faq-current] { row-gap: 0; }
  .faq-cards[data-faq-current] > .faq-card:not(:last-child) { margin-inline-end: 0; margin-block-end: -5px; }
}
.contact-copy { position: relative; width: min(100%, 520px); text-align: center; }
.contact-copy h2 { font: 400 clamp(36px, 4.65vw, 60px)/1.05 var(--serif); text-wrap: balance; }
.contact-copy > p { max-width: 36ch; margin: 16px auto; font-size: clamp(14px, 1.45vw, 17px); --reveal-delay: 150ms; }
.contact-consult {
  margin-inline: auto;
  --reveal-delay: 300ms;
}

.site-footer {
  padding: clamp(20px, 3cqw, 36px) var(--gutter) clamp(20px, 3.4cqw, 40px);
  background: var(--cream);
}
.footer-inner { max-width: 1120px; margin-inline: auto; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 clamp(24px, 3cqw, 32px)/1.1 var(--serif);
}
.footer-logo {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 10px;
  background: var(--wine);
}
.footer-logo img { width: auto; height: 34px; }
.footer-intro p {
  max-width: 48ch;
  margin-top: 14px;
  color: #74414c;
  font-size: clamp(13px, 1.4cqw, 15px);
  line-height: 1.6;
}
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #64223035;
  border-radius: 50%;
}
.footer-social a:hover { background: #6422300d; }
.footer-social svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 4cqw, 48px);
  margin-block: clamp(24px, 3.5cqw, 44px) clamp(18px, 2.6cqw, 32px);
}
.footer-nav h2 { margin-bottom: 6px; font-size: clamp(14px, 1.5cqw, 17px); font-weight: 600; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav :is(a, button) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #74414c;
  font: inherit;
  font-size: clamp(12px, 1.4cqw, 14px);
  text-align: start;
}
.footer-nav button { cursor: pointer; }
.footer-nav button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.footer-nav :is(a, button):hover, .footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid #64223026;
  color: #74414c;
  font-size: 12px;
}
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-flower, .hero-copy p, .hero-prompt, .hero-consult, .reveal-enter:not([data-reveal="blur"]) {
    animation: reveal-in var(--reveal-duration, 960ms) cubic-bezier(.25, .65, .35, 1) var(--reveal-delay, 0ms) both;
  }
  .reveal-enter .blur-reveal-segment {
    position: relative;
    animation: reveal-text var(--blur-duration, 720ms) cubic-bezier(.22, .65, .36, 1)
      calc(var(--blur-delay, 0ms) + var(--blur-index) * var(--blur-step, 27ms)) backwards;
  }
  .hero-prompt-track { animation: hero-prompt-cycle 9.6s ease-in-out infinite; }
  .hero-prompt:hover .hero-prompt-track { animation-play-state: paused; }
  .production-diagram.reveal-enter .diagram-orbit {
    animation: diagram-orbit-open 1.3s cubic-bezier(.22, .75, .32, 1) 120ms both,
      diagram-orbit-spin var(--orbit-period) linear infinite;
  }
  .production-diagram.reveal-enter .diagram-orbit circle {
    animation: diagram-dot-pop 800ms cubic-bezier(.22, .75, .35, 1.2) var(--dot-delay, 160ms) both;
  }
  .diagram-orbit circle:nth-child(2) { --dot-delay: 270ms; }
  .diagram-orbit circle:nth-child(3) { --dot-delay: 380ms; }
  .diagram-orbit circle:nth-child(4) { --dot-delay: 490ms; }
  .diagram-orbit circle:nth-child(5) { --dot-delay: 600ms; }
  .diagram-orbit circle:nth-child(6) { --dot-delay: 710ms; }
  .reveal-pending:not(:focus-within) { opacity: 0; }
  .reveal-enter:focus-within, .hero-consult:focus-within { animation: none; }
  .contact-art { --reveal-y: 0px; }
  .consult-form button { transition: background-color 150ms cubic-bezier(.22, 1, .36, 1); }
}
@keyframes diagram-orbit-spin { to { transform: rotate(1turn); } }
@keyframes diagram-orbit-open {
  0% { scale: .86; }
  72% { scale: 1.012; }
  100% { scale: 1; }
}
@keyframes diagram-dot-pop { from { r: 0px; } }
@keyframes hero-prompt-cycle {
  0%, 27% { transform: translateY(0); }
  33.333%, 60% { transform: translateY(-25%); }
  66.667%, 93% { transform: translateY(-50%); }
  100% { transform: translateY(-75%); }
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translate(var(--reveal-x, 0px), var(--reveal-y, 18px)) scale(var(--reveal-scale, 1));
  }
}
@keyframes reveal-text {
  from { opacity: 0; filter: blur(10px); inset-block-start: 10px; }
  to { opacity: 1; filter: none; inset-block-start: 0; }
}

@media (max-width: 760px) {
  .page { --header-height: 60px; --header-top: 10px; --process-height: 40px; }
  .header {
    --header-gutter: 10px;
    --header-compact-inset: 3px;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(10px, 3.4cqw, 20px);
    padding-inline: clamp(9px, 3.5cqw, 24px);
  }
  .brand { display: grid; place-items: center; min-width: 38px; min-height: 44px; }
  .brand img { height: 38px; }
  .site-nav {
    justify-content: space-evenly;
    gap: clamp(4px, 1.2cqw, 12px);
  }
  .site-nav :is(a, button) {
    padding-inline: 1px;
    font-size: clamp(10.5px, 3.35cqw, 15px);
  }
  .header nav a[aria-current="location"] { text-underline-offset: 2px; }
  .header-contact { display: none; }
  .hero {
    min-height: clamp(390px, calc(100svh - var(--process-height)), 640px);
    aspect-ratio: auto;
    padding: calc(var(--header-height) + 24px) var(--gutter) 48px;
    gap: 24px;
  }
  .hero-photo img { object-position: 60% 50%; }
  .hero::after { background: radial-gradient(ellipse at center, #230e1499, #230e1459 52%, #230e141c 90%); }
  .hero-flower-left { top: calc(var(--header-height) + 14px); bottom: auto; width: clamp(40px, 12vw, 78px); }
  .hero-flower-right { width: clamp(56px, 16vw, 108px); }
  .hero h1 { font-size: clamp(25px, 9cqw, 60px); line-height: 1.08; }
  .hero-copy p { max-width: 31ch; margin-top: 24px; font-size: 14px; }
  .hero-prompt { font-size: 13px; }
  .process-set { width: max(100cqw, 516px); }
  .about {
    --about-flower-space: clamp(64px, 17cqw, 90px);
    --about-side-padding: max(var(--gutter), 8cqw);
    --about-diagram-width: min(372px, calc(100cqw - 2 * max(var(--about-side-padding), 10cqw)));
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    gap: 18px;
    padding: 38px var(--about-side-padding) var(--about-flower-space);
    background: url("./assets/motif-tentang.webp") 36% center / auto 100% no-repeat;
  }
  .about::before {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 -10px;
    width: 23px;
    background: url("./assets/renda-tepi.webp") left top / 100% auto repeat-y;
    opacity: .65;
    content: "";
  }
  .about-branch-top {
    --sprig-width: clamp(96px, 36cqw, 156px);
    /* Align the visible petals with the upper edge of the diagram. */
    top: auto;
    bottom: calc(var(--about-flower-space) + var(--about-diagram-width) / (var(--diagram-ratio)) - 1.52 * var(--sprig-width));
    width: var(--sprig-width);
    --reveal-x: -8px;
    --reveal-y: 0px;
  }
  .about-branch-bottom {
    width: clamp(100px, 38cqw, 175px);
    --reveal-x: -8px;
    --reveal-y: 0px;
  }
  .about-copy { padding: 0; }
  .about h2 { font-size: clamp(33px, 8.5vw, 54px); }
  .about-copy p { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .about-diagram { width: var(--about-diagram-width); }
  .services {
    grid-template-columns: minmax(0, clamp(248px, 74cqw, 308px));
    justify-content: center;
    gap: 24px;
    padding: 32px var(--gutter);
    background:
      url("./assets/psd-layanan-latar-hp.webp") center bottom / 100% auto no-repeat,
      #686b5d url("./assets/psd-layanan-motif-hp.webp") center top / 15.47% auto repeat;
  }
  .comparison-side-flower { width: clamp(64px, 16cqw, 105px); }
  .comparison-bloom { --bloom-width: clamp(70px, 21cqw, 122px); }
  .services-flower-left { width: clamp(40px, 11cqw, 84px); }
  .services-bloom { --bloom-width: clamp(74px, 20cqw, 148px); }
  .service-card { --service-inset: 16px; }
  .service-copy { padding-top: 16px; }
  .service-headline { font-size: clamp(22px, 6cqw, 28px); }
  .contact { padding-block: 34px clamp(46px, 11cqw, 70px); }
  .contact-art { inset: auto 0 0; height: auto; }
  .contact-copy h2 { font-size: clamp(31px, 8.5vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .process-track { width: 100%; animation: none; }
  .process-set { width: 100%; }
  .process-set + .process-set { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .process-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-set span:nth-child(n+4) { display: none; }
}