/* Component theme and page placement. Interaction states belong to Web Awesome. */
:root {
  --wa-font-family-body: var(--font);
  --wa-font-family-heading: var(--font);
  --wa-font-size-m: 1rem;
  --wa-font-weight-action: 500;
  --wa-form-control-height: 3rem;
  --wa-form-control-padding-inline: 1.125rem;
  --wa-form-control-border-radius: .625rem;
  --wa-panel-border-radius: 1rem;
  --wa-color-neutral-fill-loud: #202224;
  --wa-color-neutral-on-loud: #fff;
  --wa-color-focus: #2d5ad8;
  scroll-padding-top: 96px;
}
body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
/* Scope the recommended control height after the library's size utility. */
:where(button, .wa-button, input, select, textarea, wa-dialog, wa-radio-group, wa-slider) {
  --wa-form-control-height: 3rem;
}
:where(button, .wa-button) { touch-action: manipulation; }
.wa-button { min-height: var(--wa-form-control-height); height: auto; padding-block: 12px; white-space: normal; }
.site-header {
  position: absolute;
  z-index: 50;
  inset: 0 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header .brand { width: 148px; padding-block: 14px; }
.site-header nav { display: flex; gap: 4px; align-items: center; }
.site-header .wa-button { font-size: 14px; }
.hero-actions .wa-button { min-width: 168px; }
.hero-image-label { border-radius: 10px; box-shadow: none; }
.hero-fashion { border-radius: 0; }
.hero-detail span { display: inline-block; }

/* Captions are ordinary library buttons; the entire photograph also opens it. */
.works { --wa-color-focus: #f1f2f3; --wa-focus-ring: solid 2px var(--wa-color-focus); }
.work { height: auto; overflow: visible; background: transparent; }
.work .work-image { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; }
.work .work-screen { bottom: 8%; }
.work-caption {
  /* The gallery uses the library's complete dark theme, including state fills. */
  --wa-color-neutral-on-quiet: var(--wa-color-text-normal);
  display: flex;
  width: 100%;
  height: auto;
  min-height: 80px;
  padding: 18px 12px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  text-align: left;
  white-space: normal;
}
.work-caption > span:first-child { display: grid; gap: 4px; min-width: 0; }
.work-caption small { color: #b6b7b9; font-size: 12px; font-weight: 400; }
.work-caption strong { font: 500 clamp(22px, 2.1vw, 32px)/1.3 var(--display); letter-spacing: -.035em; }
.work-open-label { flex-shrink: 0; font-size: 13px; color: #e9e9ea; }
.creative-heading h2, .creative-heading h2 em {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.055em;
  line-height: 1.5;
}
.creative-heading h2 em { color: #626970; }
.creative-heading .eyebrow { display: flex; gap: 16px; align-items: center; }
.study-label { font: 12px var(--font); letter-spacing: .03em; color: #626970; }
.creative-intro { display: grid; gap: 24px; justify-items: start; padding-bottom: 12px; }
.creative-intro p { color: #505861; font-size: 16px; line-height: 1.9; width: 100%; }
.creative-footer { display: flex; align-items: center; justify-content: space-between; }
.creative-footer > p:first-child { font: 400 clamp(18px, 2vw, 26px)/1.7 var(--font); letter-spacing: -.025em; }
.creative-play { position: absolute; bottom: 24px; right: 24px; }

.atelier .service-label, .atelier .atelier-creative .compact-copy > .service-label {
  color: #505861; font-size: 14px; font-weight: 400; letter-spacing: .015em; margin-bottom: 16px;
}
.atelier .estimate {
  display: grid; grid-template-columns: auto 1fr auto; gap: 40px;
  align-items: center; justify-content: start;
  padding: 40px; margin-top: 32px; border-radius: 24px;
  background: linear-gradient(115deg, #dde4e9, #e5e6ed);
  color: #202a35;
}
.atelier .estimate .estimate-label { font: 400 14px/1.7 var(--font); color: #475563; align-self: start; padding-top: 8px; }
.atelier .estimate h3 { font: 500 clamp(24px, 2.5vw, 34px)/1.55 var(--font); letter-spacing: -.045em; }
.atelier .estimate div > p { font-size: 15px; color: #475563; margin-top: 12px; }
.atelier .estimate .wa-button { --wa-color-neutral-fill-normal: #ffffffba; --wa-color-neutral-on-normal: #202a35; }

.question-list { display: grid; gap: 8px; }
.question-list details { margin: 0; background: #f6f7f8; border: 0; border-radius: 12px; }
.question-list summary { min-height: 64px; padding: 20px 24px; font-size: 16px; line-height: 1.7; font-weight: 500; }
.question-list details > p { padding: 0 24px 24px; margin: 0; font-size: 16px; line-height: 1.9; color: #505861; }

.booking-panel { margin-top: 40px; display: grid; justify-items: start; gap: 12px; }
.booking-panel p { font-size: 15px; }
.booking-panel small { font-size: 13px; color: #505861; }
.contact-form label { display: grid; gap: 9px; grid-template-columns: auto 1fr; align-items: baseline; font-size: 15px; font-weight: 500; color: #202224; }
.contact-form label > span { color: #626970; font-size: 12px; font-weight: 400; }
.contact-form label > :is(input, select, textarea) { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0; font-size: 16px; font-family: var(--font); color: #202224; background-color: #fff; }
.contact-form textarea { min-height: 168px; line-height: 1.8; resize: vertical; }
.contact-form { scroll-margin-top: 16px; }
.contact-form h3 { margin: 0; font: 500 24px/1.5 var(--font); letter-spacing: -.025em; }
.contact-form h3:focus { outline: none; }
.contact-form :is(input, select, textarea) { scroll-margin-block: 96px 24px; }
.contact-form textarea::placeholder { color: #6b7177; opacity: 1; }
.contact-form [data-submit] { width: 100%; }
.form-notice { font-size: 13px; line-height: 1.8; }
.form-status:empty { display: none; }

/* The native dialog/focus behavior is supplied by Web Awesome, including iOS. */
wa-dialog:not(:defined) { display: none; }
wa-dialog {
  --width: min(1120px, calc(100vw - 64px));
  --spacing: 24px;
  --backdrop-filter: blur(12px);
  --wa-panel-border-width: 0;
  --wa-panel-border-radius: 16px;
}
wa-dialog::part(header) { background: #fff; }
wa-dialog::part(title) { font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
wa-dialog::part(close-button__base) { min-width: 48px; min-height: 48px; }
wa-dialog::part(body) { padding-top: 0; overscroll-behavior: contain; }
wa-dialog::part(footer) { background: #fff; }
.screen-tabs { --indicator-color: #202224; --track-color: #e8eaed; --track-width: 2px; }
.screen-tabs::part(tabs) { margin-bottom: 20px; }
.screen-tabs wa-tab::part(base) { min-height: 48px; padding: 12px 20px; font-size: 14px; }
.screen-tabs wa-tab-panel::part(base) { padding: 0; }
.dialog-desktop > img, .dialog-detail img { width: 100%; border-radius: 8px; }
.dialog-mobile img { width: min(100%, 430px); margin-inline: auto; border-radius: 8px; }
.dialog-detail { margin-top: 24px; }
.dialog-detail > p, .dialog-note { font-size: 13px; color: #646b72; margin: 16px 0 0; }
.dialog-detail > p { margin-bottom: 12px; }
.creative-dialog { --width: min(1120px, calc(100vw - 64px)); }
.creative-dialog .lab-stage { width: 100%; min-height: 0; margin: 0; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.creative-dialog .lab-stage picture, .creative-dialog .lab-stage img { width: 100%; height: 100%; object-fit: cover; }
.light-controls { display: grid; gap: 24px; padding-top: 24px; }
.light-controls wa-radio-group { width: fit-content; }
.light-controls wa-slider { width: min(100%, 420px); }
.light-controls wa-slider::part(slider) { padding-block: 20px; }
.lab-note, .lab-unavailable { padding: 16px 0 0; }

@media (max-width: 760px) {
  :root { --gutter: 20px; scroll-padding-top: 88px; }
  .site-header {
    position: sticky;
    top: 0;
    min-height: 72px;
    padding: 8px max(20px, env(safe-area-inset-left));
    gap: 12px;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header .brand { width: 108px; padding-block: 16px; }
  .site-header .nav-service { display: none; }
  .site-header .wa-button { --wa-form-control-padding-inline: 12px; font-size: 14px; }
  .site-header nav { gap: 4px; }
  .hero-visual { height: calc(100svh - 72px); min-height: 520px; max-height: 960px; }
  .hero-image-label { left: 16px; bottom: 16px; padding: 12px 16px; }
  .hero-editorial { padding: 48px 20px 72px; }
  .hero-detail { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 300px; width: 100%; margin-inline: auto; }
  .hero-actions .wa-button { width: 100%; }
  .hero-bottom { font-size: 10px; }
  .work-caption { min-height: 76px; padding-top: 16px; gap: 12px; }
  .work .work-image { height: auto; aspect-ratio: 16 / 10; }
  .work-caption strong { font-size: 24px; }
  .work-open-label { font-size: 12px; }
  .creative-play { bottom: 16px; right: 16px; font-size: 14px; }
  .creative-intro { margin-top: 24px; padding-bottom: 0; gap: 20px; }
  .creative-footer { display: grid; grid-template-columns: 1fr; justify-content: stretch; gap: 20px; }
  .creative-footer > p:first-child { font-size: 18px; }
  .creative-footer .wa-button { justify-self: start; }
  .creative-heading h2 { font-size: clamp(36px, 10vw, 50px); }
  .question-list summary { padding: 18px 20px; }
  .question-list details > p { padding: 0 20px 22px; }
  .booking-panel { margin-top: 32px; }
  .booking-panel .wa-button { width: 100%; }
  .contact .contact-form { padding: 24px 20px; border-radius: 20px; gap: 24px; }
  .contact-form textarea { min-height: 200px; }
  .form-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-copy > .eyebrow { font-size: 14px; }
  .contact h2 { font-size: clamp(32px, 8.5vw, 48px); }
  .site-footer { flex-wrap: wrap; gap: 20px 28px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .site-footer > a:not(.brand) { min-height: 48px; display: flex; align-items: center; }
  wa-dialog {
    --width: 100vw;
    --spacing: 20px;
    --wa-panel-border-radius: 0;
  }
  wa-dialog::part(dialog) { height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0; }
  wa-dialog::part(header) { padding: max(8px, env(safe-area-inset-top)) 20px 8px; }
  wa-dialog::part(body) { padding: 0 20px 20px; }
  wa-dialog::part(footer) { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
  wa-dialog::part(title) { font-size: 18px; }
  .dialog-external { width: 100%; }
  .screen-tabs wa-tab::part(base) { font-size: 14px; padding-inline: 18px; }
  .creative-dialog { --width: 100vw; }
  .creative-dialog .lab-stage { aspect-ratio: 3 / 4; max-height: 50svh; }
  .light-controls { padding-top: 20px; gap: 20px; }
  .light-controls wa-radio-group { --wa-form-control-padding-inline: 12px; }
}
@media (max-width: 600px) {
  .atelier { padding: 56px 20px 40px; }
  .atelier .atelier-field { padding: 8px; border-radius: 24px; }
  .atelier .atelier-launch, .atelier .atelier-renew, .atelier .atelier-creative { padding: 24px 20px; }
  .atelier :is(.atelier-launch-foot, .compact-foot) { width: 100%; }
  .atelier .wa-button { width: 100%; }
  .atelier .scope-list, .atelier .atelier-launch-foot .scope-list { font-size: 15px; }
  .atelier .atelier-launch-copy h3, .atelier .compact-copy h3, .atelier .atelier-creative .compact-copy h3 { font-size: 26px; line-height: 1.5; letter-spacing: -.04em; }
  .atelier .atelier-store { margin: 28px 0; }
  .atelier .estimate { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .atelier .estimate h3 { font-size: 26px; }
  .atelier .estimate .estimate-label { padding: 0; }
  .atelier .service-label, .atelier .atelier-creative .compact-copy > .service-label { font-size: 13px; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .site-header { padding-inline: 16px; gap: 8px; }
  .site-header .brand { width: 86px; }
  .site-header .wa-button { --wa-form-control-padding-inline: 10px; font-size: 13px; }
  .atelier { padding-inline: 16px; }
  .atelier .atelier-field { padding: 6px; }
  .atelier .atelier-launch, .atelier .atelier-renew, .atelier .atelier-creative { padding: 24px 16px; }
  .atelier .atelier-launch-copy h3, .atelier .compact-copy h3, .atelier .atelier-creative .compact-copy h3 { font-size: 24px; }
  .contact .contact-form { padding-inline: 16px; }
  .creative-play { position: relative; inset: auto; width: 100%; border-radius: 0; }
  .light-controls wa-radio-group { --wa-form-control-padding-inline: 10px; font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 540px) and (orientation: landscape) {
  .hero-visual { height: 100svh; min-height: 360px; max-height: 520px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  wa-dialog { --width: 100vw; --spacing: 12px; --wa-panel-border-radius: 0; }
  wa-dialog::part(dialog) { height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0; }
  wa-dialog::part(header) { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  wa-dialog::part(body) { padding: 0 max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
  wa-dialog::part(footer) { padding: 8px 20px max(8px, env(safe-area-inset-bottom)); }
  wa-dialog::part(title) { font-size: 18px; }
  .screen-tabs::part(tabs) { margin-bottom: 8px; }
  .screen-tabs wa-tab::part(base) { min-height: 48px; padding: 8px 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  wa-dialog { --backdrop-filter: none; }
}