/* ==========================================================
   V8 / COMPOSITION AND HOUSE-RULE REFINEMENTS
========================================================== */

.editorial-divider {
  background: var(--citric);
  color: var(--ink);
  border: 0;
  min-height: 65px;
}
.editorial-divider span { color: var(--fuchsia); }

.work-collage { gap: 8px; }
.work-collage figure {
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.work-collage figure:hover { border-color: transparent; }
.work-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter .2s ease;
}
.work-collage figure:hover img { filter: saturate(1.18); }
.work-collage figure:nth-child(4n+2) img {
  object-position: center 44%;
}
.work-collage figure:nth-child(4n+3) img {
  object-position: center 58%;
}

.hero-photo {
  object-fit: cover;
  object-position: center 45%;
  background: transparent;
  border: 0;
}
.direction img {
  display: block;
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center 46%;
  border: 0;
  background: transparent;
}
.direction:nth-child(2) img {
  object-position: center 50%;
}
.shop-grid { row-gap: 38px; }
.shop-item img {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  background: transparent;
}
.info-aside img {
  aspect-ratio: 4 / 5;
  max-height: none;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 0;
}
.contact-image img {
  aspect-ratio: 4 / 5;
  height: auto;
  max-height: none;
  width: 100%;
  object-fit: cover;
  border: 0;
}

.hero-dots-top {
  background-image: radial-gradient(
    circle, var(--aquamarine) 2.1px, transparent 2.5px
  );
}
.dot-trim {
  background-image: radial-gradient(
    circle, var(--electric-lilac) 2.1px, transparent 2.5px
  );
}
.last-note .dot-square {
  background-image: radial-gradient(
    circle, var(--aquamarine) 2.1px, transparent 2.5px
  );
}
.last-note .dot-square::before {
  content: '';
  display: block;
  width: 64px;
  height: 60px;
  transform: translate(65px, -25px);
  background: radial-gradient(
    circle, var(--fuchsia) 1.8px, transparent 2.5px
  ) 0 0 / 15px 15px;
}
.mini-dot-lines {
  background-image: radial-gradient(
    circle, var(--fuchsia) 2px, transparent 2.5px
  );
}
.contact-dots {
  background-image: radial-gradient(
    circle, var(--electric-lilac) 2px, transparent 2.5px
  );
}
.contact-image::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 4%;
  width: 82px;
  height: 76px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    circle, var(--citric) 2px, transparent 2.5px
  ) 0 0 / 16px 16px;
}

.book-read-copy a { text-decoration: none; }
.book-read-copy a:hover { color: var(--klein-blue); }

.studio-form .form-section legend {
  margin-bottom: 16px;
}
.form-intro-wrap {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  margin: 2px 0 28px;
  max-width: 740px;
}
.form-intro-symbol {
  color: var(--tangerine);
  font-size: 31px;
  line-height: 1;
  flex: 0 0 31px;
}
.form-intro-wrap .form-intro {
  margin: 0;
  max-width: 650px;
  font-size: 16px;
  line-height: 1.55;
}

.care-info .section-heading::after {
  content: '✳';
  font-size: clamp(32px, 5vw, 60px);
  color: var(--fuchsia);
  align-self: end;
  text-shadow: 4px 3px 0 var(--citric);
}
.care-grid p {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  padding-right: 17px;
}
.care-grid p:nth-child(3n+1) {
  border-color: var(--aquamarine);
}
.care-grid p:nth-child(3n+2) {
  border-color: var(--fuchsia);
}
.care-grid p:nth-child(3n) {
  border-color: var(--electric-lilac);
}
.care-grid span {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  height: 30px;
  background: var(--citric);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}
.care-grid p:nth-child(6n+2) span {
  background: var(--electric-lilac);
}
.care-grid p:nth-child(6n+3) span {
  background: var(--aquamarine);
}
.care-grid p:nth-child(6n+4) span {
  background: var(--acid-yellow);
}
.care-grid p:nth-child(6n+5) span {
  background: #ffc2e1;
}
.care-grid p:nth-child(6n+6) span {
  background: #ffb6a8;
}
.contact-email {
  font-size: clamp(21px, 2.5vw, 42px);
}

@media (max-width: 760px) {
  .work-collage { gap: 5px; }
  .work-collage figure {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
  }
  .work-collage img { object-fit: cover; }
  .direction img {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
  }
  .shop-item img {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
  }
  .hero-photo {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .contact-image img {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
  }
  .form-intro-wrap .form-intro { font-size: 14px; }
  .contact-email {
    font-size: clamp(19px, 5vw, 28px);
  }
  .care-grid p { border-top-width: 2px; }
  .last-note .dot-square::before {
    width: 30px;
    transform: translate(25px, -18px);
  }
}
@media (max-width: 430px) {
  .direction img {
    aspect-ratio: 4 / 5;
    height: auto;
  }
}

/* ==========================================
   V8 — PHOTO COMPOSITION
========================================== */

.work-collage figure:nth-child(14) img {
  transform: scale(1.16);
  transform-origin: center 49%;
  object-position: center 48%;
}
.work-collage figure:nth-child(3) img {
  object-position: center 58%;
}
.work-collage figure:nth-child(4) img {
  object-position: center 60%;
}
.work-collage figure:nth-child(10) img {
  object-position: center 55%;
}
.work-collage figure:nth-child(13) img {
  object-position: center 52%;
}
.work-collage figure:nth-child(15) img {
  object-position: center 48%;
}

.direction img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 50%;
}
.direction:nth-child(2) img {
  object-position: center 50%;
}

/* BOOK — DEPOSIT */

.deposit-note {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin: 28px var(--side) 0;
  padding: 24px 28px;
  background: #e8f8d9;
  border-left: 5px solid var(--citric);
}
.deposit-amount {
  display: inline-flex;
  gap: 8px;
  align-items: start;
  font-size: 57px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.07em;
}
.deposit-amount span {
  font-size: 18px;
  color: var(--fuchsia);
  letter-spacing: 0;
}
.deposit-note-copy strong {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: .07em;
}
.deposit-note-copy p {
  max-width: 800px;
  margin: 0;
  line-height: 1.65;
  font-size: 14px;
}

.booking-form-section + .bottom-callout {
  background: #def5ed;
  border-top-color: var(--aquamarine);
  border-bottom-color: var(--aquamarine);
}
.shop-explain + .bottom-callout {
  background: #eee2ff;
  border-top-color: var(--electric-lilac);
  border-bottom-color: var(--electric-lilac);
}
.privacy-notice + .bottom-callout {
  background: #f1f9cf;
  border-top-color: var(--citric);
  border-bottom-color: var(--citric);
}
.rules-closing {
  background: #ffe1ee;
  border-color: var(--fuchsia);
  padding: 28px 32px;
}
.rules-closing a {
  border-bottom-color: var(--fuchsia);
}
.rules-section-name h2 i,
.rules-house .rules-section-name h2 i {
  color: var(--klein-blue);
}

/* INFO FAQ */

.faq details:nth-of-type(8n+1) summary span {
  color: var(--fuchsia);
}
.faq details:nth-of-type(8n+2) summary span {
  color: var(--klein-blue);
}
.faq details:nth-of-type(8n+3) summary span {
  color: var(--tangerine);
}
.faq details:nth-of-type(8n+4) summary span {
  color: #009b82;
}
.faq details:nth-of-type(8n+5) summary span {
  color: #8e34ea;
}
.faq details:nth-of-type(8n+6) summary span {
  color: #c43c6f;
}
.faq details:nth-of-type(8n+7) summary span {
  color: #4f49dd;
}
.faq details:nth-of-type(8n+8) summary span {
  color: #ad6500;
}
.faq details:nth-of-type(3n+1) {
  border-top-color: var(--aquamarine);
}
.faq details:nth-of-type(3n+2) {
  border-top-color: var(--electric-lilac);
}
.faq details:nth-of-type(3n) {
  border-top-color: #ffc2e1;
}
.info-aside img {
  object-position: center 42%;
}

@media (max-width: 760px) {
  .direction img { aspect-ratio: 4 / 5; }
  .deposit-note {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 19px 22px;
    margin-top: 24px;
  }
  .deposit-amount { font-size: 43px; }
  .deposit-note-copy p { font-size: 13px; }
  .rules-closing { padding: 24px 20px; }
}
@media (max-width: 430px) {
  .direction img { aspect-ratio: 4 / 5; }
}

/* ==========================================
   V9 — EDITORIAL DESIGN & FREESTYLE
========================================== */

.hero {
  min-height: 0;
  padding-top: 58px;
  padding-bottom: 62px;
}
.hero-title-wrap {
  margin-top: clamp(65px, 7vw, 98px);
}
.hero-pretitle {
  font-size: clamp(36px, 4.4vw, 73px);
}
.hero h1 {
  font-size: clamp(58px, 7.7vw, 134px);
}
.work-section { padding-top: 96px; }
.directions {
  padding-top: 102px;
  padding-bottom: 85px;
}
.section-heading { margin-bottom: 30px; }
.section-heading h2 {
  font-size: clamp(42px, 4.85vw, 73px);
}
.inner-intro {
  padding-top: 80px;
  padding-bottom: 73px;
}
.inner-intro h1 {
  font-size: clamp(56px, 7.55vw, 124px);
}
.rules-section {
  padding-top: 70px;
  padding-bottom: 62px;
}
.rules-section-name h2 {
  font-size: clamp(35px, 3.45vw, 58px);
}
.shop-explain { margin-bottom: 85px; }

/* HERO BUTTON HOVERS */

.main-actions .action {
  padding: 9px 0;
  transition:
    border-color .2s,
    background .2s,
    color .2s;
}
.main-actions .action:first-child:hover,
.main-actions .action:first-child:focus-visible {
  background: rgba(159, 240, 224, .18);
  border-bottom-color: #78cdbd;
  padding: 9px 0;
}
.main-actions .action:last-child:hover,
.main-actions .action:last-child:focus-visible {
  background: rgba(198, 139, 250, .15);
  border-bottom-color: #b992d2;
  padding: 9px 0;
}
.main-actions .action span {
  transition: transform .2s;
}
.main-actions .action:hover span {
  transform: translate(2px, -2px);
}

/* TAKE YOUR PICK */

.directions .section-heading h2 {
  font-size: clamp(41px, 4.9vw, 73px);
}
.direction-grid {
  gap: clamp(22px, 3.6vw, 56px);
  border-top: 0;
}
.direction {
  border-top: 1px solid var(--ink);
  padding-top: 17px;
}
.direction-no {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .13em;
  font-weight: 800;
}
.direction:first-child .direction-no {
  color: #447c76;
}
.direction:last-child .direction-no {
  color: #a058a1;
}
.direction h3 {
  font-size: clamp(41px, 4.5vw, 70px);
  margin: 18px 0 8px;
  letter-spacing: -.068em;
  color: var(--ink);
}
.direction:hover h3,
.direction:first-child:hover h3,
.direction:last-child:hover h3 {
  color: var(--ink);
}
.direction h3 span {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 24px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  margin-right: 0;
  transition: transform .2s, background .2s;
}
.direction:first-child:hover h3 span {
  background: #e0f5f0;
  transform: rotate(45deg);
}
.direction:last-child:hover h3 span {
  background: #f4e6ff;
  transform: rotate(45deg);
}
.direction p {
  font-size: 14px;
  line-height: 1.55;
  min-height: 0;
  margin: 0 0 24px;
}
.direction img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* POLICIES */

.rules-section:not(.rules-house)
.rules-section-name h2 i {
  color: #6b32d8;
}
.rules-house .rules-section-name h2 i {
  color: #f16a51;
}
.rules-intro h1 i {
  color: var(--ink);
}
.rules-closing {
  background: #fff0df;
  border-color: #ec9a71;
  margin-top: 72px;
  margin-bottom: 88px;
  padding: 25px 30px;
}
.rules-closing-star { color: #9e60c8; }
.rules-closing a {
  border-bottom-color: #f16a51;
}
.rules-closing a:hover { color: #9145a4; }

/* SHOP — HOW TO ORDER */

.shop-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.shop-steps > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 180px;
  padding: 22px 8px 22px 0;
  border-top: 2px dotted #cf99d4;
  border-bottom: 1px solid var(--line);
}
.shop-steps > div > span {
  display: block;
  margin: 0 28px 19px 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: #7542ae;
}
.shop-steps > div p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 260px;
}
.shop-steps > div::after {
  content: '✳';
  position: absolute;
  top: 12px;
  right: 2px;
  font-size: 24px;
  font-weight: 400;
  color: #c496d9;
}
.shop-steps > div:nth-child(2) {
  border-top-color: #ff9bab;
}
.shop-steps > div:nth-child(2) > span {
  color: #bc4685;
}
.shop-steps > div:nth-child(2)::after {
  color: #ff9bab;
}
.shop-steps > div:nth-child(3) {
  border-top-color: #afe174;
}
.shop-steps > div:nth-child(3) > span {
  color: #4a8451;
}
.shop-steps > div:nth-child(3)::after {
  color: #8fd478;
}
.shop-steps > div:nth-child(4) {
  border-top-color: #88d2cb;
}
.shop-steps > div:nth-child(4) > span {
  color: #327f80;
}
.shop-steps > div:nth-child(4)::after {
  color: #88d2cb;
}
.shop-micro-grid {
  gap: 32px;
  margin-top: 42px;
}
.shop-micro-grid > div {
  border-top: 2px dotted transparent;
  padding-top: 12px;
}
.shop-micro-grid > div:nth-child(1) {
  border-top-color: #e5a6be;
}
.shop-micro-grid > div:nth-child(2) {
  border-top-color: #b0dc9c;
}
.shop-micro-grid > div:nth-child(3) {
  border-top-color: #baa6e8;
}
.shop-micro-grid b {
  font-size: 12px;
  letter-spacing: .04em;
}
.shop-micro-grid p { line-height: 1.65; }
.shop-explain + .bottom-callout {
  background: #f9ebfc;
  border-color: #d4a3d5;
}

/* FREESTYLE */

.freestyle-panel[hidden],
.standard-ideas[hidden] {
  display: none !important;
}
.freestyle-panel {
  margin: 0 0 30px;
  padding: 24px 0 0;
  border-top: 2px dotted #cbb0e7;
}
.freestyle-panel-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 25px;
}
.freestyle-panel-head .micro {
  color: #6c3ab5;
}
.freestyle-icon {
  font-size: 31px;
  color: #9a65c9;
  line-height: 1;
}
.freestyle-panel-head p {
  max-width: 640px;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
}
.freestyle-theme { margin-top: 23px; }
.freestyle-panel .field { margin-bottom: 0; }

@media (max-width: 1000px) {
  .rules-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rules-lead { max-width: 540px; }
  .shop-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 30px;
  }
}

@media (max-width: 760px) {
  .hero { padding: 42px 0 60px; }
  .hero-title-wrap { margin-top: 60px; }
  .hero-pretitle { font-size: 12vw; }
  .hero h1 { font-size: 13.4vw; }
  .work-section { padding-top: 78px; }
  .directions {
    padding-top: 82px;
    padding-bottom: 65px;
  }
  .section-heading h2 {
    font-size: clamp(38px, 8.3vw, 59px);
  }
  .inner-intro h1 {
    font-size: clamp(55px, 10.6vw, 85px);
  }
  .rules-section-name h2 {
    font-size: clamp(35px, 8vw, 55px);
  }
  .direction h3 {
    font-size: clamp(35px, 6.5vw, 56px);
  }
  .direction h3 span {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
  .direction p { font-size: 13px; }
  .shop-steps { gap: 17px; }
  .shop-steps > div { min-height: 160px; }
  .rules-closing { padding: 22px 20px; }
  .freestyle-panel-head p { font-size: 14px; }
}

@media (max-width: 430px) {
  .direction-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .direction h3 {
    font-size: clamp(40px, 12vw, 58px);
  }
  .shop-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .shop-steps > div {
    min-height: 0;
    padding-bottom: 25px;
  }
  .shop-micro-grid { gap: 0; }
  .freestyle-panel-head { gap: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-actions .action span,
  .direction h3 span { transition: none; }
}

/* ==========================================
   V10 — SPACING
========================================== */

.form-submit-area {
  padding-bottom: 16px;
}
.booking-form-section {
  margin-bottom: 42px;
}
.form-message:empty { display: none; }
.form-message:not(:empty) {
  margin-top: 18px;
}
.presson-list {
  margin-bottom: 76px;
}
.shop-explain {
  margin-bottom: 48px;
}
.shop-notice {
  margin-bottom: 78px;
}
.info-columns {
  margin-bottom: 85px;
}
.care-info {
  margin-bottom: 75px;
}
.privacy-notice {
  margin-bottom: 46px;
}
.rules-closing {
  margin-top: 46px;
  margin-bottom: 68px;
}
.last-note {
  margin-bottom: 72px;
}
.contact-layout {
  margin-bottom: 82px;
}
.bottom-callout {
  margin-bottom: 68px;
}

@media (max-width: 760px) {
  .form-submit-area {
    padding-bottom: 12px;
  }
  .booking-form-section {
    margin-bottom: 30px;
  }
  .presson-list {
    margin-bottom: 58px;
  }
  .shop-notice {
    margin-bottom: 60px;
  }
  .shop-explain {
    margin-bottom: 38px;
  }
  .info-columns {
    margin-bottom: 65px;
  }
  .care-info {
    margin-bottom: 54px;
  }
  .privacy-notice {
    margin-bottom: 36px;
  }
  .rules-closing {
    margin-top: 34px;
    margin-bottom: 52px;
  }
  .last-note {
    margin-bottom: 55px;
  }
  .contact-layout {
    margin-bottom: 62px;
  }
  .bottom-callout {
    margin-bottom: 52px;
  }
}

/* ==========================================
   V11–12 — MOBILE & EDITORIAL
========================================== */

@media (max-width: 760px) {
  .studio-form input:not([type="checkbox"]):not([type="file"]),
  .studio-form select,
  .studio-form textarea {
    font-size: 16px;
    min-height: 48px;
  }
  .studio-form .form-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-form .field,
  .studio-form .calendar-shell,
  .studio-form .select-shell {
    min-width: 0;
    max-width: 100%;
  }
  .studio-form input[type="file"] {
    max-width: 100%;
    font-size: 14px;
  }
  .booking-form-section .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .form-agree { line-height: 1.6; }
  .main-nav a { min-height: 46px; }
  .book-read-all {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .book-read-first {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .form-submit-btn { min-height: 50px; }
}

.editorial-work {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(22px, 5vw, 85px);
  margin: 0 var(--side) 74px;
  padding: 45px 0 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.editorial-work-heading .micro {
  display: block;
  margin-bottom: 18px;
}
.editorial-work-heading h2 {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 70px);
  font-weight: 850;
  line-height: .99;
  letter-spacing: -.065em;
}
.editorial-work-heading h2 i {
  color: #7550bd;
}
.editorial-work-content {
  position: relative;
  min-width: 0;
  padding-right: 64px;
}
.editorial-work-content p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 490px;
  margin: 0 0 15px;
}
.editorial-work-content a {
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}
.editorial-work-content a:hover {
  border-color: #7550bd;
  color: #7550bd;
}
.editorial-work-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 51px;
  height: 102px;
  background: radial-gradient(
    circle, var(--aquamarine) 2px, transparent 2.4px
  ) 0 0 / 15px 15px;
  pointer-events: none;
}

@media (max-width: 760px) {
  .editorial-work {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 37px 0;
    margin-bottom: 55px;
  }
  .editorial-work-heading h2 {
    font-size: clamp(38px, 8vw, 60px);
  }
  .editorial-work-content {
    padding-right: 54px;
  }
  .editorial-work-content p {
    font-size: 14px;
  }
  .editorial-work-dots {
    width: 42px;
    height: 70px;
  }
}

/* ==========================================
   V16 — CONSISTENT HEADER AND LABEL
========================================== */

@media (min-width: 761px) {
  .site-header .main-nav {
    gap: clamp(11px, 1.5vw, 24px);
  }
  .site-header .main-nav a {
    font-size: clamp(9px, .8vw, 11px);
    line-height: normal;
  }
  .site-header .small-logo .big-logo {
    font-size: clamp(22px, 2.2vw, 31px);
  }
}

.pink-tape {
  background: #9ff0e0;
  box-shadow: 5px 5px 0 #f637a5;
  color: #161616;
}

/* ==========================================
   V18 — BUILT-IN FULLSCREEN PHOTO VIEWER
========================================== */

.sv-zoomable,
.gallery-page-grid .gallery-tile {
  cursor: zoom-in;
}

.sv-zoomable:focus-visible,
.gallery-page-grid .gallery-tile:focus-visible {
  outline: 3px solid #f637a5;
  outline-offset: 4px;
}

.sv-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fcfbf8;
  background: #101014;
  overflow: hidden;
  overscroll-behavior: contain;
}
.sv-viewer::backdrop {
  background: rgba(10, 8, 13, .93);
}
.sv-viewer,
.sv-viewer * {
  box-sizing: border-box;
}
.sv-viewer__layout {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 66px;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.sv-viewer__head,
.sv-viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 3.1vw, 54px);
}
.sv-viewer__head {
  border-bottom: 1px solid #ffffff2b;
}
.sv-viewer__brand {
  font: 800 11px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .15em;
  white-space: nowrap;
}
.sv-viewer__brand em {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.025em;
}
.sv-viewer__brand b {
  color: #9ff0e0;
  font-size: 15px;
  margin-left: 6px;
}

.sv-viewer__close,
.sv-viewer__nav {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff73;
  border-radius: 0;
  background: transparent;
  color: #fcfbf8;
  cursor: pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.sv-viewer__close {
  gap: 13px;
  min-height: 42px;
  padding: 8px 12px;
  font: 800 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}
.sv-viewer__close span {
  color: #f637a5;
  font: 400 25px/17px Arial, Helvetica, sans-serif;
}
.sv-viewer__close:hover,
.sv-viewer__nav:hover {
  background: #9ff0e0;
  color: #101014;
  border-color: #9ff0e0;
}
.sv-viewer__close:focus-visible,
.sv-viewer__nav:focus-visible {
  outline: 3px solid #f637a5;
  outline-offset: 3px;
}

.sv-viewer__stage {
  min-height: 0;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 12px clamp(66px, 8vw, 124px);
  touch-action: pan-y;
}
.sv-viewer__picture {
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sv-viewer__image {
  width: auto;
  height: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.99);
  transition: opacity .18s ease, transform .18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.sv-viewer__image--ready {
  opacity: 1;
  transform: scale(1);
}
.sv-viewer__error {
  position: absolute;
  text-align: center;
  color: #ffffffa6;
  font: 13px/1.5 Arial, Helvetica, sans-serif;
}

.sv-viewer__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font: 400 26px/1 Arial, Helvetica, sans-serif;
}
.sv-viewer__prev {
  left: clamp(16px, 3vw, 50px);
}
.sv-viewer__next {
  right: clamp(16px, 3vw, 50px);
}
.sv-viewer__foot {
  border-top: 1px solid #ffffff2b;
  font: 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
}
.sv-viewer__caption {
  min-width: 0;
  flex: 1;
  color: #f4f1ec;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sv-viewer__tip {
  color: #ffffff82;
  white-space: nowrap;
}
.sv-viewer__counter {
  color: #9ff0e0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[hidden].sv-viewer__nav,
[hidden].sv-viewer__error {
  display: none !important;
}

@media (max-width: 760px) {
  .sv-viewer__layout {
    grid-template-rows: 61px minmax(0, 1fr) 75px;
  }
  .sv-viewer__head,
  .sv-viewer__foot {
    padding-left: max(17px, env(safe-area-inset-left));
    padding-right: max(17px, env(safe-area-inset-right));
  }
  .sv-viewer__head {
    padding-top: env(safe-area-inset-top);
  }
  .sv-viewer__brand {
    font-size: 9px;
    letter-spacing: .09em;
  }
  .sv-viewer__close {
    font-size: 10px;
    min-height: 41px;
  }
  .sv-viewer__stage {
    padding: 7px 9px 60px;
  }
  .sv-viewer__nav {
    top: auto;
    bottom: 7px;
    transform: none;
    width: 46px;
    height: 43px;
    font-size: 25px;
  }
  .sv-viewer__prev { left: 17px; }
  .sv-viewer__next { right: 17px; }
  .sv-viewer__foot {
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    font-size: 10px;
  }
  .sv-viewer__tip { display: none; }
  .sv-viewer__caption {
    line-height: 1.45;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-viewer__image,
  .sv-viewer__close,
  .sv-viewer__nav {
    transition: none;
  }
}

/* ==========================================
   V18 — FINAL DESKTOP SCALE
========================================== */

@media (min-width: 761px) {
  .site-header { min-height: 83px; }
  .site-header .small-logo .big-logo {
    font-size: clamp(22px, 2.05vw, 29px);
  }
  .site-header .main-nav a {
    font-size: clamp(9px, .76vw, 10.5px);
  }
  .site-header .main-nav {
    gap: clamp(11px, 1.3vw, 21px);
  }

  .hero {
    min-height: 0;
    padding-top: 54px;
    padding-bottom: 57px;
    gap: clamp(28px, 4.2vw, 75px);
  }
  .hero-title-wrap {
    margin-top: clamp(52px, 6vw, 84px);
  }
  .hero-pretitle {
    font-size: clamp(34px, 4vw, 66px);
  }
  .hero h1 {
    font-size: clamp(55px, 7.25vw, 121px);
  }
  .hero-description {
    font-size: clamp(15px, 1.2vw, 17px);
    margin: 31px 0 25px;
  }
  .hero-photo {
    height: clamp(420px, 40vw, 554px);
    object-position: center 49%;
  }

  .work-section { padding-top: 84px; }
  .directions {
    padding-top: 84px;
    padding-bottom: 66px;
  }
  .section-heading { margin-bottom: 27px; }
  .section-heading h2,
  .directions .section-heading h2 {
    font-size: clamp(39px, 4.45vw, 69px);
  }
  .direction h3 {
    font-size: clamp(39px, 4.05vw, 65px);
  }
  .direction p { font-size: 14px; }
  .last-note {
    padding-top: 49px;
    padding-bottom: 48px;
    margin-bottom: 58px;
    min-height: 0;
    grid-template-columns: 125px minmax(0, 1fr) 70px;
  }
  .last-note > div:nth-child(2) > p {
    font-size: clamp(24px, 2.65vw, 38px);
  }
  .last-note .dot-square {
    width: 110px;
    height: 108px;
  }
  .last-star { font-size: 62px; }

  .inner-intro {
    padding-top: 72px;
    padding-bottom: 63px;
  }
  .inner-intro h1 {
    font-size: clamp(53px, 7.2vw, 113px);
    margin-bottom: 29px;
  }
  .inner-intro > p {
    font-size: clamp(16px, 1.3vw, 18px);
  }
  .rules-section {
    padding-top: 65px;
    padding-bottom: 54px;
  }
  .rules-section-name h2 {
    font-size: clamp(34px, 3.15vw, 53px);
  }
  .rules-lead {
    font-size: clamp(16px, 1.3vw, 19px);
  }
  .rules-accordions summary {
    padding-top: 19px;
    padding-bottom: 19px;
  }
  .three-steps {
    margin-top: 55px;
    margin-bottom: 65px;
  }
  .three-steps > div { min-height: 145px; }
  .shop-notice {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .shop-explain .section-heading h2 {
    font-size: clamp(38px, 4.45vw, 68px);
  }
  .shop-steps > div { min-height: 155px; }
  .faq summary {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .care-info { margin-bottom: 63px; }
  .editorial-work-heading h2 {
    font-size: clamp(35px, 4vw, 63px);
  }
  .editorial-work {
    padding-top: 39px;
    padding-bottom: 40px;
  }
  .contact-big {
    font-size: clamp(27px, 3.15vw, 50px);
  }

  .price-page .price-intro {
    padding-top: 70px;
    padding-bottom: 60px;
  }
  .price-page .price-intro h1 {
    font-size: clamp(60px, 8vw, 128px);
  }
  .price-page .price-section {
    padding-top: 58px;
    padding-bottom: 52px;
  }
  .price-page .price-section-header h2 {
    font-size: clamp(37px, 4.7vw, 70px);
  }
  .price-page .price-freestyle h2 {
    font-size: clamp(35px, 4.2vw, 62px);
  }
  .price-page .price-secondary {
    padding-top: 56px;
    padding-bottom: 55px;
  }
  .price-page .price-secondary h2 {
    font-size: clamp(33px, 3.8vw, 55px);
  }
  .price-page .price-other-panel h2 {
    font-size: clamp(29px, 3.1vw, 46px);
  }
  .price-page .price-other-work {
    margin-top: 52px;
    margin-bottom: 56px;
  }
}

/* MOBILE — SMALLER HEADINGS, READABLE FIELDS */

@media (max-width: 760px) {
  .inner-intro h1 {
    font-size: clamp(49px, 10vw, 78px);
  }
  .section-heading h2 {
    font-size: clamp(35px, 8.3vw, 58px);
  }
  .rules-section-name h2 {
    font-size: clamp(34px, 8vw, 53px);
  }
  .price-page .price-intro h1 {
    font-size: clamp(52px, 11vw, 80px);
  }
  .price-page .price-section-header h2 {
    font-size: clamp(37px, 8vw, 62px);
  }
  .price-page .price-freestyle h2 {
    font-size: clamp(36px, 9vw, 50px);
  }
  .sv-viewer__stage { padding-bottom: 58px; }
  .sv-viewer__caption { font-size: 13px; }
  .sv-viewer__counter { font-size: 9px; }
}

/* VIEWER — NUMBERS INSTEAD OF PHOTO TITLES */

.sv-viewer__caption {
  flex: 0 0 auto;
  font-weight: 850;
  font-size: 14px;
  color: #9ff0e0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sv-viewer__counter {
  color: #fcfbf8;
  font-size: 10px;
  letter-spacing: .09em;
}
.sv-viewer__image {
  max-width: min(100%, 1180px);
  max-height: min(100%, 750px);
}