/* ===== Design tokens ===== */
:root {
  --color-ivory: #faf7f2;
  --color-ivory-deep: #f1ebe0;
  --color-ink: #1b1715;
  --color-ink-soft: #272220;
  --color-text: #2a2521;
  --color-text-muted: #6b6358;
  --color-champagne: #b9975c;
  --color-champagne-light: #d8bd82;
  --color-champagne-deep: #795b1e;
  --color-line: rgba(27, 23, 20, 0.14);
  --color-line-soft: rgba(27, 23, 20, 0.08);
  --color-line-dark: rgba(250, 247, 242, 0.22);
  --color-control-border: #8a8075;
  --color-error: #a33228;

  --font-display: "Cormorant Garamond", "Noto Serif TC", "Noto Serif", serif;
  --font-body: "Noto Serif TC", "Cormorant Garamond", "Noto Serif", serif;

  --page-gutter: clamp(1rem, 4vw, 2rem);
  --max-width: 1140px;
  --max-width-narrow: 640px;

  --space-3xs: 0.4rem;
  --space-2xs: 0.75rem;
  --space-xs: 1.25rem;
  --space-sm: 2rem;
  --space-md: 3rem;
  --space-lg: 5rem;
  --space-xl: 7rem;

  --radius: 2px;
  --transition: 0.3s ease;
}

/* ===== Reset ===== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--color-ivory);
  color: var(--color-text);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

main,
section[id] {
  scroll-margin-top: 6rem;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}

p {
  margin: 0;
}

button {
  font-family: var(--font-body);
}

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-ivory);
  padding: 0.5rem 1rem;
  z-index: 200;
}

.skip-link:focus {
  left: 0;
}

/* ===== Focus visibility ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-champagne-deep);
  outline-offset: 2px;
}

.site-header :focus-visible,
.hero :focus-visible,
.contact :focus-visible {
  outline-color: var(--color-champagne-light);
}

/* ===== Scroll reveal (progressive enhancement) ===== */
.reveal {
  opacity: 1;
  transform: none;
}

/* Content stays readable even if observation fails or a large element never enters. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible {
    animation: reveal-enter 0.6s ease-out;
  }

  .reveal:focus-within {
    animation: none;
  }

  @keyframes reveal-enter {
    from { transform: translateY(12px); }
    to { transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Layout helpers ===== */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter);
}

.section-title {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-ink);
  text-align: center;
  margin-bottom: var(--space-md);
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--color-champagne);
  margin: 1.25rem auto 0;
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.9rem 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-champagne);
  cursor: pointer;
  background: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-ivory);
  border-color: var(--color-champagne);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-champagne-light);
  color: var(--color-ink);
  border-color: var(--color-champagne-light);
}

/* ===== Header ===== */
.site-header {
  position: relative;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  border-bottom: 1px solid var(--color-line-dark);
}

.nav-enhanced .site-header {
  position: sticky;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1rem var(--page-gutter);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-zh {
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.brand-en {
  color: var(--color-champagne-light);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-champagne-light);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.primary-nav {
  width: 100%;
  background: var(--color-ink);
  border-bottom: 1px solid var(--color-line-dark);
}

.nav-enhanced .primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
}

.primary-nav ul {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xs) var(--space-sm) var(--space-sm);
}

.primary-nav a {
  display: block;
  padding: 0.8rem 0;
  color: var(--color-ivory);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--color-line-dark);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-champagne-light);
}

/* ===== Hero ===== */
.hero {
  background:
    linear-gradient(165deg, rgba(20, 16, 13, 0.88) 0%, rgba(20, 16, 13, 0.78) 50%, rgba(20, 16, 13, 0.9) 100%),
    url("../images/hero-diamond-rings.jpg") center/cover no-repeat;
  color: var(--color-ivory);
  text-align: center;
  min-height: 86vh;
  display: flex;
  align-items: center;
  padding: var(--space-xl) var(--page-gutter);
}

.hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.hero-en {
  color: var(--color-champagne-light);
  font-family: var(--font-display);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: var(--space-xs);
}

.hero-title {
  font-size: 2.9rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--color-ivory);
  margin-bottom: var(--space-sm);
}

.hero-rule {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-champagne);
  margin: 0 auto var(--space-sm);
}

.hero-tagline {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
  color: var(--color-ivory);
  letter-spacing: 0.03em;
}

.hero-subtitle {
  font-size: 1rem;
  font-family: var(--font-display);
  color: var(--color-champagne-light);
  margin-bottom: var(--space-md);
  letter-spacing: 0.08em;
}

/* ===== Story ===== */
.story {
  background: var(--color-ivory);
}

.story-text {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* ===== Service ===== */
.service {
  background:
    linear-gradient(rgba(250, 247, 242, 0.94), rgba(250, 247, 242, 0.94)),
    url("../images/atelier-caliper.jpg") center/cover no-repeat;
}

.service-intro {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  font-size: 1.15rem;
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.process-step {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-sm);
  text-align: left;
}

.step-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-champagne-deep);
  letter-spacing: 0.3em;
  margin-bottom: 0.6rem;
}

.step-title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  color: var(--color-ink);
}

.step-desc {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  max-width: 34em;
}

/* ===== Portfolio ===== */
.portfolio {
  background: var(--color-ivory);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md) var(--space-sm);
}

.portfolio-card {
  margin: 0;
}

/* ===== Booking ===== */
.booking {
  background: var(--color-ivory-deep);
}

.booking-location {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-size: 1rem;
}

.booking-location a {
  color: var(--color-champagne-deep);
  border-bottom: 1px solid var(--color-champagne-deep);
}

.booking-location a:hover,
.booking-location a:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.form-notice {
  background: var(--color-ivory);
  border: 1px solid var(--color-champagne);
  color: var(--color-ink-soft);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
}

.booking-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-xs);
}

.booking-form fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.booking-form legend {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.form-help {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: var(--space-md);
}

.form-field {
  margin-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
}

.form-field label {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--color-ink);
}

.required {
  color: var(--color-error);
}

.form-field input,
.form-field select,
.form-field textarea {
  min-width: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.1rem;
  border: none;
  border-bottom: 1px solid var(--color-control-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  transition: border-color var(--transition);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--color-champagne-deep);
  outline-offset: 2px;
  border-bottom-color: var(--color-champagne-deep);
  box-shadow: 0 1px 0 0 var(--color-champagne-deep);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-field textarea {
  resize: vertical;
}

.field-error {
  color: var(--color-error);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  min-height: 1.2em;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-bottom-color: var(--color-error);
}

.form-result {
  margin-top: var(--space-sm);
  font-size: 0.95rem;
  color: var(--color-ink);
}

/* ===== Contact ===== */
.contact {
  background:
    linear-gradient(rgba(18, 15, 13, 0.88), rgba(18, 15, 13, 0.88)),
    url("../images/lapis-stones.jpg") center/cover no-repeat;
  color: var(--color-ivory);
}

.contact .section-title {
  color: var(--color-ivory);
}

.contact-list {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-ivory);
  font-size: 1.05rem;
}

.contact-list li {
  padding: 0.6rem 0;
}

.contact-label {
  color: var(--color-champagne-light);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-ink);
  color: var(--color-champagne-light);
  text-align: center;
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  border-top: 1px solid var(--color-line-dark);
}

/* ===== Portfolio photos ===== */
.portfolio-photo {
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  padding: var(--space-3xs);
  display: block;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.portfolio-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.portfolio-photo figcaption {
  padding: 0.9rem 0.5rem 0.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
  background: var(--color-ivory);
}

.portfolio-grid--photos {
  grid-template-columns: minmax(0, 1fr);
}

/* ===== Tablet / Desktop ===== */
@media (min-width: 640px) {
  .booking-form {
    padding: var(--space-lg) var(--space-sm);
  }

  .portfolio-grid--photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-md);
  }
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav,
  .nav-enhanced .primary-nav {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    border-bottom: none;
  }

  .primary-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    gap: var(--space-sm);
  }

  .primary-nav a {
    padding: 0.4rem 0;
    border-bottom: none;
  }

  .hero {
    text-align: left;
  }

  .hero-inner {
    margin: 0 4vw 0 8vw;
  }

  .hero-rule {
    margin: 0 0 var(--space-sm);
  }

  .hero-title {
    font-size: 4rem;
  }

  .story-text {
    text-align: left;
    margin: 0 10% 0 0;
    border-left: 1px solid var(--color-champagne);
    padding-left: var(--space-md);
  }

  .process-list {
    max-width: none;
  }

  .process-step {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: var(--space-md);
    align-items: start;
  }

  .process-step:nth-child(even) {
    margin-left: 8%;
  }

  .step-number {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .step-title {
    grid-column: 2;
  }

  .step-desc {
    grid-column: 2;
  }

  .portfolio-grid--photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .portfolio-grid--photos .portfolio-card:nth-child(2n) {
    margin-top: var(--space-lg);
  }
}

@media (min-width: 1100px) {
  .hero-inner {
    margin: 0 4vw 0 12vw;
  }
}

/* A sticky header should not consume most of a short landscape viewport. */
@media (max-height: 480px) {
  .nav-enhanced .site-header {
    position: relative;
  }
}

.brand-logo { display:block; height:56px; width:auto; }
.footer-logo { display:block; width:200px; height:auto; margin:0 auto 1.25rem; opacity:.95; }
@media (max-width:600px){ .brand-logo{ height:46px; } }

/* intro + compact process grid */
.service-intro { font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.7; letter-spacing:.12em; font-style:normal; color:var(--color-ink); max-width:none; margin-bottom:var(--space-md); }
.service-intro span { display:block; }
.process-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 2rem; max-width:1100px; margin:0 auto; }
.process-step, .process-step:nth-child(even) { display:block; margin-left:0; padding-top:1rem; }
.step-number { margin-bottom:.35rem; }
.step-title { font-size:1.2rem; margin-bottom:.4rem; }
.step-desc { font-size:.93rem; line-height:1.75; max-width:none; }
@media (max-width:900px){ .process-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; } }
@media (max-width:600px){ .service-intro{ font-size:1.2rem; letter-spacing:.06em; } .process-list{ gap:.9rem 1rem; } .step-title{ font-size:1.05rem; } .step-desc{ font-size:.82rem; line-height:1.6; } }
@media (min-width:901px){ .process-list{ grid-template-columns:repeat(6,minmax(0,1fr)); } .process-step{ grid-column:span 2; } .process-step:nth-child(4){ grid-column:2 / span 2; } }

.portfolio-photo figcaption .piece-title{ display:block; font-size:1.05rem; letter-spacing:.3em; }
.portfolio-photo figcaption .piece-line{ display:block; font-size:.8rem; letter-spacing:.12em; opacity:.8; margin-top:.3rem; }
@media (max-width:600px){
 .portfolio-grid--photos{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.6rem!important; }
 .portfolio-grid--photos .portfolio-card{ margin-top:0!important; }
 .portfolio-grid--photos img{ aspect-ratio:3/4; height:auto; max-height:30vh; width:100%; object-fit:cover; }
 .portfolio-photo figcaption .piece-title{ font-size:.85rem; letter-spacing:.2em; }
 .portfolio-photo figcaption .piece-line{ font-size:.66rem; letter-spacing:.04em; }
}
/* mobile timeline */
@media (max-width:600px){
 .service-intro{ font-size:1.18rem; line-height:1.9; letter-spacing:.1em; margin:0 auto 2.25rem; }
 .service-intro span + span{ margin-top:.15rem; }
 .process-list{ display:block; max-width:22rem; margin:0 auto; position:relative; }
 .process-step, .process-step:nth-child(even){ display:grid; grid-template-columns:3.6rem 1fr; column-gap:1.1rem; border-top:0; padding:0 0 1.9rem; position:relative; margin:0; }
 .process-step:last-child{ padding-bottom:0; }
 .process-step::before{ content:""; position:absolute; left:1.8rem; top:2.9rem; bottom:.4rem; width:1px; background:linear-gradient(var(--color-champagne,#b9975c),rgba(185,151,92,.15)); }
 .process-step:last-child::before{ display:none; }
 .step-number{ grid-column:1; grid-row:1 / 3; text-align:center; font-size:2.1rem; font-weight:400; line-height:1; letter-spacing:.02em; color:#b9975c; margin:0; padding-top:.1rem; }
 .step-title{ grid-column:2; font-size:1.08rem; letter-spacing:.32em; margin:.25rem 0 .45rem; }
 .step-desc{ grid-column:2; font-size:.86rem; line-height:1.85; letter-spacing:.03em; }
}
/* mobile compact service */
@media (max-width:600px){
 section.service{ padding:1.4rem 0 1.2rem!important; min-height:0!important; }
 #service .section-inner{ padding-top:0!important; padding-bottom:0!important; }
 #service .section-title{ font-size:1.5rem!important; margin-bottom:.5rem!important; }
 #service .section-title::after{ margin-top:.5rem!important; }
 #service .service-intro{ font-size:1.02rem!important; line-height:1.7!important; margin:0 auto 1rem!important; }
 #service .process-step{ grid-template-columns:2.6rem 1fr!important; column-gap:.85rem!important; padding-bottom:.8rem!important; }
 #service .process-step:last-child{ padding-bottom:0!important; }
 #service .process-step::before{ left:1.3rem; top:2.1rem; bottom:.3rem; }
 #service .step-number{ font-size:1.55rem!important; }
 #service .step-title{ font-size:.98rem!important; letter-spacing:.28em!important; margin:.1rem 0 .2rem!important; }
 #service .step-desc{ font-size:.8rem!important; line-height:1.65!important; letter-spacing:.02em!important; }
}
@media (min-width:901px){ #service .service-intro{ margin-bottom:2rem!important; } #service .section-inner{ padding-top:88px!important; padding-bottom:88px!important; } }
/* ===== Booking redesign ===== */
.booking{ background:#1a1412; }
.booking-inner{ max-width:760px; margin:0 auto; }
.booking-head{ text-align:center; margin-bottom:2.6rem; }
.booking-eyebrow{ font-family:var(--font-display); font-style:italic; color:#b9975c; letter-spacing:.32em; font-size:.85rem; margin:0 0 .6rem; text-transform:uppercase; }
.booking-lead{ color:var(--color-text-muted); letter-spacing:.12em; font-size:1rem; margin:.9rem 0 .7rem; }
.booking .booking-form{ background:transparent; border:0; box-shadow:none; padding:0; }
.booking .hp{ position:absolute; left:-9999px; }
#bookingFields{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2.6rem; border:0; padding:0; margin:0; min-width:0; }
#bookingFields .form-field{ margin:0; min-width:0; }
#bookingFields .field-wide{ grid-column:1 / -1; }
#bookingFields label{ display:block; font-size:.74rem; letter-spacing:.24em; color:#8a7a5f; margin-bottom:.35rem; }
#bookingFields .required{ color:#b9975c; }
#bookingFields input, #bookingFields select, #bookingFields textarea{ width:100%; box-sizing:border-box; background:transparent; border:0; border-bottom:1px solid rgba(27,23,21,.25); border-radius:0; padding:.45rem 0; font:inherit; font-size:1rem; color:var(--color-ink); letter-spacing:.06em; box-shadow:none; transition:border-color .3s; -webkit-appearance:none; appearance:none; }
#bookingFields select{ background:linear-gradient(45deg,transparent 50%,#b9975c 50%) right 6px center/6px 6px no-repeat; }
#bookingFields textarea{ resize:vertical; min-height:2.4rem; line-height:1.7; }
#bookingFields input:focus, #bookingFields select:focus, #bookingFields textarea:focus{ outline:none; border-bottom-color:#b9975c; }
#bookingFields ::placeholder{ color:#b5ab9b; }
#bookingFields .field-error{ font-size:.7rem; color:#a0523d; margin:.25rem 0 0; }
#bookingFields .field-error:empty{ display:none; }
.form-actions{ text-align:center; margin-top:.6rem; }
.btn-booking{ background:#1b1715; color:#f3e6cc; border:1px solid #b9975c; padding:.95rem 3.6rem; font:inherit; font-size:.86rem; letter-spacing:.42em; cursor:pointer; transition:background .35s,color .35s; }
.btn-booking:hover, .btn-booking:focus-visible{ background:#b9975c; color:#1b1715; }
.btn-booking:disabled{ opacity:.6; cursor:wait; }
.form-result{ text-align:center; font-size:.8rem; color:#a0523d; }
.booking-thanks{ text-align:center; padding:3rem 1rem; border-top:1px solid rgba(185,151,92,.4); border-bottom:1px solid rgba(185,151,92,.4); outline:none; }
.booking-thanks .thanks-mark{ color:#b9975c; display:block; margin-bottom:.8rem; }
.booking-thanks h3{ font-weight:400; letter-spacing:.32em; font-size:1.3rem; margin:0 0 .8rem; }
.booking-thanks p{ color:var(--color-text-muted); letter-spacing:.12em; line-height:2; margin:0; }
@media (max-width:600px){
 section.booking{ padding:1.8rem 0 1.6rem!important; }
 #booking .section-inner{ padding:0 1.4rem!important; }
 .booking-head{ margin-bottom:1.3rem; }
 .booking-eyebrow{ font-size:.68rem; margin-bottom:.3rem; }
 .booking .section-title{ font-size:1.55rem!important; margin-bottom:.4rem!important; }
 .booking-lead{ font-size:.8rem; letter-spacing:.06em; margin:.55rem 0 .4rem; }
 #bookingFields{ gap:1rem 1.2rem; }
 #bookingFields label{ font-size:.66rem; letter-spacing:.16em; margin-bottom:.1rem; }
 #bookingFields input, #bookingFields select, #bookingFields textarea{ font-size:16px; padding:.3rem 0; height:auto!important; min-height:0; }
 #bookingFields textarea{ min-height:2rem!important; height:auto!important; }
 #bookingFields .btn-booking, .btn-booking{ width:100%; padding:.85rem 1rem; }
 .form-actions{ margin-top:.3rem; }
}
/* mobile timeline v2 */
@media (max-width:600px){
 #service .service-intro{ font-size:.86rem!important; font-weight:300; color:#8a7f70!important; letter-spacing:.24em!important; line-height:2!important; margin:0 auto .5rem!important; }
 #service .service-intro::after{ content:"◇"; display:block; color:#b9975c; font-size:.55rem; letter-spacing:0; margin-top:.6rem; }
 #service .process-list{ position:relative; max-width:21rem; margin:1rem auto 0; padding-left:0; }
 #service .process-list::before{ content:""; position:absolute; left:2.35rem; top:.55rem; bottom:.9rem; width:1px; background:linear-gradient(rgba(185,151,92,.15),#b9975c 15%,#b9975c 85%,rgba(185,151,92,.15)); }
 #service .process-step{ grid-template-columns:2rem 1fr!important; column-gap:1.5rem!important; padding-bottom:1rem!important; }
 #service .process-step::before{ display:block!important; content:""; position:absolute; left:2.35rem; top:.55rem; bottom:auto; width:5px; height:5px; margin-left:-2px; border-radius:50%; background:#b9975c; box-shadow:0 0 0 3px #1a1412; }
 #service .step-number{ grid-row:1!important; font-size:.95rem!important; font-weight:300!important; letter-spacing:.12em!important; text-align:left!important; color:#b9975c; line-height:1.4!important; padding-top:.05rem!important; font-style:italic; }
 #service .step-title{ grid-row:1; font-size:.95rem!important; letter-spacing:.34em!important; margin:0 0 .2rem!important; line-height:1.4!important; }
 #service .step-desc{ grid-row:2; font-size:.78rem!important; color:#7c7366; line-height:1.7!important; }
}

/* ===== Spacing rhythm + portfolio one-screen (mobile) ===== */
@media (max-width:600px){
 #story .section-inner, #contact .section-inner{ padding-top:3.4rem; padding-bottom:3.4rem; }

 section.portfolio{ padding:1.5rem 0 1.3rem; }
 #portfolio .section-inner{ padding-top:0; padding-bottom:0; }
 #portfolio .section-title{ font-size:1.5rem; margin-bottom:.7rem; }
 #portfolio .section-title::after{ margin-top:.55rem; }
 .portfolio-grid--photos{ gap:.5rem!important; }
 .portfolio-photo figcaption{ padding:.55rem .4rem .3rem; }
}

/* ===== Spacing rhythm + one-screen budgets (desktop) ===== */
@media (min-width:901px){
 #portfolio .section-inner{ padding-top:4.5rem; padding-bottom:4.5rem; }
 #portfolio .section-title{ margin-bottom:2.25rem; }
 .portfolio-grid--photos .portfolio-card:nth-child(2n){ margin-top:3rem; }

 #story .section-inner, #contact .section-inner{ padding-top:5.5rem; padding-bottom:5.5rem; }

 #booking .section-inner{ padding-top:2.2rem; padding-bottom:1.8rem; }
 .booking-head{ margin-bottom:1rem; }
 .booking-lead{ margin:.6rem 0 .5rem; }
 #bookingFields{ gap:.7rem 2.6rem; }
 #bookingFields label{ margin-bottom:.2rem; }
 #bookingFields input, #bookingFields select, #bookingFields textarea{ padding:.35rem 0; }
 #bookingFields textarea{ min-height:1.4rem; line-height:1.4; }
 .form-actions{ margin-top:.2rem; }
 .btn-booking{ padding:.8rem 3.6rem; }
}

/* ===== Contact v2 ===== */
.contact{ background:#1b1715; color:#faf7f2; }
.contact .section-inner.contact-inner{ text-align:center; padding-top:4.5rem!important; padding-bottom:4.5rem!important; max-width:640px; }
.contact-eyebrow{ font-family:var(--font-display); font-style:italic; text-transform:uppercase; letter-spacing:.34em; font-size:.78rem; color:#b9975c; margin:0 0 .5rem; }
.contact .section-title{ color:#faf7f2; margin-bottom:1.1rem!important; }
.contact-addr{ font-size:.9rem; letter-spacing:.12em; color:#d9cdb8; margin:0 0 1.2rem; }
.contact-links{ list-style:none; padding:0; margin:0 0 1.4rem; display:flex; justify-content:center; gap:2.2rem; flex-wrap:wrap; }
.contact-links li[hidden]{ display:none; }
.contact-links .contact-label{ display:block; font-family:var(--font-display); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:#b9975c; margin-bottom:.2rem; }
.contact-links .contact-value{ color:#faf7f2; letter-spacing:.08em; }
.contact-cta{ display:inline-block; border:1px solid #b9975c; color:#e8d7b5; padding:.7rem 2.6rem; letter-spacing:.4em; font-size:.82rem; transition:background .3s,color .3s; }
.contact-cta:hover,.contact-cta:focus-visible{ background:#b9975c; color:#1b1715; }
@media (max-width:600px){
 .contact .section-inner.contact-inner{ padding:2.4rem 1.4rem!important; }
 .contact-eyebrow{ font-size:.66rem; }
 .contact .section-title{ font-size:1.45rem!important; margin-bottom:.7rem!important; }
 .contact-addr{ font-size:.78rem; letter-spacing:.06em; margin-bottom:1rem; }
 .contact-cta{ padding:.6rem 2rem; font-size:.76rem; }
}
/* ===== LINE float ===== */
.line-float{ position:fixed; right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:90; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem .55rem .8rem; background:rgba(27,23,21,.92); color:#e8d7b5; border:1px solid #b9975c; border-radius:999px; font-family:var(--font-display); font-size:.74rem; letter-spacing:.24em; box-shadow:0 6px 20px rgba(27,23,21,.25); backdrop-filter:blur(6px); transition:opacity .3s,transform .3s,background .3s,color .3s; }
.line-float svg{ color:#b9975c; }
.line-float:hover,.line-float:focus-visible{ background:#b9975c; color:#1b1715; }
.line-float:hover svg,.line-float:focus-visible svg{ color:#1b1715; }
.line-float.is-hidden{ opacity:0; transform:translateY(12px); pointer-events:none; }
@media (max-width:600px){ .line-float{ right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); padding:.5rem .8rem .5rem .7rem; font-size:.68rem; } }

.contact-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid #b9975c; border-radius:50%; color:#b9975c; transition:background .3s,color .3s; }
.contact-icon:hover,.contact-icon:focus-visible{ background:#b9975c; color:#1b1715; }
.line-float{ width:48px; height:48px; padding:0!important; justify-content:center; gap:0; }
.line-float svg{ width:22px; height:22px; }
@media (max-width:600px){ .line-float{ width:44px; height:44px; } }

/* ===== Booking: one-screen mobile + aligned fields ===== */
#bookingFields input, #bookingFields select{ display:block; height:2.6rem; min-height:2.6rem; line-height:1.4; margin:0; }
#bookingFields input[type=date]{ -webkit-appearance:none; appearance:none; text-align:left; min-width:0; }
#bookingFields input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; }
#bookingFields input[type=date]::-webkit-calendar-picker-indicator{ opacity:.45; }
@media (max-width:600px){
 section.booking{ padding:1.4rem 0 1.2rem!important; }
 .booking-head{ margin-bottom:.9rem; }
 .booking .section-title{ font-size:1.4rem!important; margin-bottom:.2rem!important; }
 .booking .section-title::after{ margin-top:.45rem!important; }
 .booking-lead{ font-size:.76rem; margin:.45rem 0 0; }
 #bookingFields{ gap:.75rem 1.1rem; }
 #bookingFields input, #bookingFields select{ height:2.3rem!important; min-height:2.3rem; padding:0 !important; line-height:2.3rem; }
 #bookingFields textarea{ min-height:2.3rem!important; height:2.3rem!important; padding:.35rem 0!important; line-height:1.6; resize:none; }
 #bookingFields .field-email, #bookingFields .field-note{ grid-column:auto; }
 .form-actions{ margin-top:.2rem; }
 #bookingFields .btn-booking, .btn-booking{ padding:.8rem 1rem; }
}

/* ===== Official LINE logo icons ===== */
.contact-icon{ width:60px!important; height:60px!important; border:0!important; border-radius:14px!important; background:none!important; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .3s; }
.contact-icon:hover,.contact-icon:focus-visible{ transform:translateY(-2px); }
.contact-icon svg{ width:60px; height:60px; display:block; }
.line-float{ width:56px!important; height:56px!important; background:none!important; border:0!important; border-radius:14px!important; backdrop-filter:none; box-shadow:0 6px 18px rgba(0,0,0,.28); overflow:hidden; }
.line-float svg{ width:56px!important; height:56px!important; display:block; }
@media (max-width:600px){ .line-float{ width:52px!important; height:52px!important; } .line-float svg{ width:52px!important; height:52px!important; } }

/* ===== Process step titles prominent + LINE palette ===== */
@media (max-width:600px){
 #service .step-title{ font-size:1.4rem!important; font-weight:600!important; color:#f3e6cc!important; letter-spacing:.28em!important; line-height:1.35!important; margin:0 0 .45rem!important; }
 #service .step-number{ font-size:1.05rem!important; padding-top:.3rem!important; }
 #service .process-step::before{ top:.85rem!important; }
}
.contact-icon,.line-float{ border-radius:14px!important; }

/* ===== Haute couture dark theme (A) + gallery (C) ===== */
:root{
  --color-ink:#1a1412; --color-ink-soft:#221b18;
  --color-text:#e9e0d2; --color-text-muted:#b3a794;
  --color-line:rgba(185,151,92,.28); --color-line-soft:rgba(185,151,92,.14);
  --color-control-border:rgba(233,224,210,.35);
}
body{ background:#1a1412; color:var(--color-text); }
h1,h2,h3,.section-title{ color:#f3e6cc; }
.section-title{ letter-spacing:.32em; }
.section-title::after{ background:#b9975c!important; }
.story{ background:#1a1412; }
.story-text,.story-text p{ color:var(--color-text); }
.service{ background:linear-gradient(rgba(26,20,18,.9),rgba(26,20,18,.94)),url("../images/atelier-caliper.jpg") center/cover no-repeat; }
.service-intro{ color:#f3e6cc; }
#service .step-title,.step-title{ color:#f3e6cc; }
.step-number{ color:#b9975c; }
.step-text,.process-step p{ color:var(--color-text-muted); }
/* Gallery */
.portfolio{ background:#120e0c; }
.portfolio .container,.portfolio>div{ max-width:1320px; }
.portfolio-grid--photos{ display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:6px!important; }
.portfolio-photo{ position:relative; background:#120e0c!important; border:0!important; box-shadow:none!important; margin:0; overflow:hidden; }
.portfolio-photo img{ width:100%; aspect-ratio:2/3; height:auto; object-fit:cover; display:block; transition:transform 1.2s ease; }
.portfolio-photo:hover img{ transform:scale(1.03); }
.portfolio-photo figcaption{ position:absolute!important; left:0; right:0; bottom:0; padding:2.4rem 1rem 1rem!important; background:linear-gradient(transparent,rgba(18,14,12,.85))!important; color:#e8d7b5!important; text-align:center; }
.portfolio-photo figcaption .piece-title{ font-size:.9rem; letter-spacing:.4em; color:#d8bd82; }
.portfolio-photo figcaption .piece-line{ font-size:.72rem; color:#e9e0d2; opacity:.75; }
@media (max-width:600px){
  .portfolio-grid--photos{ grid-template-columns:1fr 1fr!important; gap:4px!important; }
  .portfolio-grid--photos .portfolio-photo:first-child{ grid-column:1/-1; }
  .portfolio-grid--photos .portfolio-photo:first-child img{ aspect-ratio:4/5; }
  .portfolio-photo img{ aspect-ratio:3/4; }
  .portfolio-photo figcaption{ padding:1.6rem .5rem .6rem!important; }
  .portfolio-photo figcaption .piece-line{ display:block; font-size:.68rem; letter-spacing:.12em; color:#e8d7b5; opacity:.95; margin-top:0; text-shadow:0 1px 6px rgba(0,0,0,.6); }
}
/* Booking invitation */
.booking{ background:#1a1412!important; }
.booking-inner{ max-width:560px; }
.booking-lead,.booking-thanks p{ color:var(--color-text-muted); }
.booking-form legend,.booking-form label,#bookingFields label{ color:#d8bd82; }
#bookingFields input,#bookingFields select,#bookingFields textarea{ color:#f3e6cc; border-bottom:1px solid rgba(233,224,210,.28); }
#bookingFields input::placeholder,#bookingFields textarea::placeholder{ color:rgba(233,224,210,.4); }
#bookingFields input:focus,#bookingFields select:focus,#bookingFields textarea:focus{ outline:none; border-bottom-color:#b9975c; }
#bookingFields select option{ background:#1a1412; color:#f3e6cc; }
.btn-booking{ background:transparent; color:#e8d7b5; }
.booking-thanks h3{ color:#f3e6cc; }
.contact{ background:#120e0c; }
.site-footer,footer{ background:#120e0c; color:var(--color-text-muted); }
.form-notice{ background:transparent; color:var(--color-text-muted); border-color:rgba(185,151,92,.3); }
.booking .booking-form{ background:transparent!important; }

/* ===== Inspiration stock photos: tame white backgrounds on dark page ===== */
.portfolio-insp img{ filter:brightness(.86) contrast(1.06) saturate(1.05); }
.portfolio-insp::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 70px 18px rgba(18,14,12,.75); }
.portfolio-insp figcaption{ z-index:2; }
.portfolio-insp figcaption .piece-title{ text-shadow:0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 768px){ .portfolio-grid--photos .portfolio-photo:last-child{ grid-column:1/-1; } .portfolio-grid--photos .portfolio-photo:last-child img{ aspect-ratio:4/5; } }

/* ===== Editorial irregular gallery (no captions) ===== */
#portfolio .portfolio-grid--photos{ display:grid!important; grid-template-columns:repeat(4,1fr)!important; grid-auto-rows:clamp(45px,5.5vw,85px)!important; grid-auto-flow:dense; gap:6px!important; }
#portfolio .portfolio-grid--photos .portfolio-photo{ margin:0!important; height:100%; }
#portfolio .portfolio-grid--photos .portfolio-photo img{ width:100%!important; height:100%!important; max-height:none!important; aspect-ratio:auto!important; object-fit:cover; }
#portfolio .portfolio-photo:nth-child(n){ grid-column:span 1!important; }
#portfolio .portfolio-photo:nth-child(1){ grid-column:span 2!important; grid-row:span 6; }
#portfolio .portfolio-photo:nth-child(2),#portfolio .portfolio-photo:nth-child(4){ grid-row:span 3; }
#portfolio .portfolio-photo:nth-child(3){ grid-row:span 6; }
#portfolio .portfolio-photo:nth-child(5){ grid-column:span 2!important; grid-row:span 4; }
#portfolio .portfolio-photo:nth-child(6),#portfolio .portfolio-photo:nth-child(7){ grid-row:span 4; }
@media (max-width:768px){
 #portfolio .portfolio-grid--photos{ grid-template-columns:1fr 1fr!important; grid-auto-rows:30vw!important; gap:4px!important; }
 #portfolio .portfolio-photo:nth-child(n){ grid-column:span 1!important; grid-row:span 3; }
 #portfolio .portfolio-photo:nth-child(1),#portfolio .portfolio-photo:nth-child(5){ grid-column:span 2!important; }
 #portfolio .portfolio-photo:nth-child(2),#portfolio .portfolio-photo:nth-child(5){ grid-row:span 2; }
 #portfolio .portfolio-photo:nth-child(4){ grid-row:span 1; }
}

/* ===== Contact: horizontal title left / LINE right ===== */
#contact .contact-inner{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:2rem; max-width:760px; margin:0 auto; text-align:left!important; }
#contact .contact-head{ text-align:left; }
#contact .contact-head .contact-eyebrow{ text-align:left; margin-left:0; }
#contact .contact-head .section-title{ text-align:left!important; margin:0!important; }
#contact .contact-head .section-title::after{ margin-left:0!important; margin-right:auto!important; }
#contact .contact-links{ margin:0!important; padding:0; display:flex; justify-content:flex-end; flex:0 0 auto; }
@media (max-width:768px){
 #contact .contact-inner{ gap:1rem; padding-left:1.5rem; padding-right:1.5rem; }
 #contact .contact-links svg{ width:52px; height:52px; }
}
#contact .contact-links li{ display:flex; }

/* ===== Brand story poem ===== */
#story .story-poem{ text-align:center!important; max-width:34rem; margin:0 auto; color:#efe6d6; font-size:1.08rem; line-height:2.1; letter-spacing:.18em; }
#story .story-poem .story-stanza{ margin:0 0 2.2rem; }
#story .story-poem .story-stanza:last-child{ margin-bottom:0; color:#d8bd82; }
@media (max-width:768px){ #story .story-poem{ font-size:.98rem; line-height:2; letter-spacing:.14em; } #story .story-poem .story-stanza{ margin-bottom:1.7rem; } }