:root {
  --bg: #101010;
  --panel: #191816;
  --gold: #c5a059;
  --bright: #e4c98e;
  --text: #f1eee6;
  --muted: #b0aca2;
  --line: #c5a0592e
}
* {
  box-sizing: border-box
}
[hidden] {
  display: none !important
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.85
}
body.menu-open {
  overflow: hidden
}
a {
  color: inherit;
  text-decoration: none
}
button, input, select, textarea {
  font: inherit
}
button {
  cursor: pointer
}
img {
  max-width: 100%
}
.wrap {
  width: min(1180px, calc(100% - 88px));
  margin: auto
}
header {
  height: 116px;
  position: sticky;
  top: 0;
  background: #101010f5;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(15px)
}
.nav, .header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 35px
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px
}
.brand img {
  object-fit: contain
}
.brand strong {
  display: block;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 3px;
  line-height: 1.4
}
.brand small {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold)
}
.contact-link {
  font-size: 14px;
  color: var(--bright)
}
.menu {
  background: none;
  color: var(--text);
  border: 0;
  border-left: 1px solid var(--line);
  height: 32px;
  padding: 0 0 0 28px;
  display: flex;
  align-items: center;
  gap: 18px
}
.menu span {
  font-size: 10px;
  letter-spacing: 2px
}
.menu i {
  width: 23px;
  height: 9px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  display: block
}
.menu-shade {
  position: fixed;
  inset: 116px 0 0;
  background: #0009;
  border: 0;
  z-index: 20;
  backdrop-filter: blur(4px)
}
.side-menu {
  position: fixed;
  top: 116px;
  right: 0;
  bottom: 0;
  width: max(28vw, 355px);
  max-width: 100%;
  z-index: 25;
  background: #1a1916;
  border-left: 1px solid var(--line);
  padding: 40px;
  transform: translateX(100%);
  transition: transform .3s;
  overflow: auto;
  visibility: hidden
}
.side-menu.open {
  transform: translateX(0);
  visibility: visible
}
.side-menu > a {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px
}
.side-menu > a small {
  font: italic 13px Georgia;
  color: var(--gold)
}
.side-menu p {
  font-size: 12px;
  color: var(--muted);
  margin: 28px 0 15px
}
.side-menu .menu-line {
  font-size: 12px;
  color: var(--bright);
  border: 0
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  line-height: 1.8
}
.eyebrow:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 1px;
  background: var(--gold);
  margin-right: 15px
}
h1, h2, h3, p {
  margin-top: 0
}
h1, h2, h3 {
  font-weight: 500
}
h2 {
  font-size: 38px;
  line-height: 1.6;
  letter-spacing: 1px;
  margin: 20px 0 25px
}
h2 em {
  font-style: normal;
  color: var(--bright)
}
p {
  color: var(--muted);
  font-size: 16px
}
.text-link, .morelink {
  display: inline-block;
  font-size: 14px;
  color: var(--bright);
  border-bottom: 1px solid #c5a05966;
  padding: 6px 0
}
.text-link:hover, .morelink:hover {
  color: #fff
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background: var(--gold);
  color: #14130f;
  border: 1px solid var(--gold);
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: .2s
}
.btn:hover {
  background: var(--bright);
  border-color: var(--bright);
  transform: translateY(-2px)
}
.btn.outline {
  background: transparent;
  color: var(--bright);
  border-color: #c5a05966
}
.btn.outline:hover {
  background: #c5a05916
}
.buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0
}
.opening-hero {
  padding: 76px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #c5a05910, transparent 65%);
  border-bottom: 1px solid var(--line)
}
.hero-label {
  display: inline-block;
  color: var(--bright);
  background: #c5a05912;
  border: 1px solid #c5a05930;
  padding: 5px 18px;
  font-size: 13px;
  letter-spacing: .5px;
  border-radius: 30px
}
.opening-hero h1 {
  font-size: clamp(30px, 3.65vw, 48px);
  font-weight: 750;
  letter-spacing: 1px;
  margin: 24px 0 22px;
  line-height: 1.5;
  color: var(--text)
}
.opening-hero h1 span {
  color: var(--bright)
}
.opening-hero > div > p {
  font-size: 17px;
  line-height: 1.85;
  max-width: 740px;
  margin: 0 auto;
  color: #c7c2b6
}
.opening-hero .buttons {
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 0
}
.hero-footnote {
  display: block;
  font-size: 14px;
  color: #8e887b;
  margin-top: 43px
}
.section {
  padding: 100px 0
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 40px
}
.section-head h2 {
  margin-bottom: 0
}
.section-head > p {
  margin: 0;
  font-size: 13px;
  max-width: 330px
}
.care-section {
  padding: 95px 0;
  background: #191816
}
.care-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 100px;
  align-items: start
}
.care-copy {
  padding-top: 25px;
  max-width: 480px
}
.care-copy p {
  line-height: 2.1
}
.care-copy .lead {
  font-size: 23px;
  line-height: 1.8;
  color: #ded7c6;
  margin-bottom: 22px
}
.service-rows {
  border-top: 1px solid var(--line)
}
.service-rows > a {
  display: grid;
  grid-template-columns: 65px 1fr 35px;
  gap: 32px;
  align-items: center;
  padding: 35px 0;
  border-bottom: 1px solid var(--line)
}
.num {
  font: italic 28px Georgia;
  color: var(--gold)
}
.service-rows h3 {
  font-size: 25px;
  margin: 0 0 8px
}
.service-rows p {
  margin: 0
}
.row-arrow {
  color: var(--gold);
  font-size: 29px;
  transition: .2s
}
.service-rows > a:hover .row-arrow {
  transform: translate(3px, -3px)
}
.works-band {
  border-block: 1px solid var(--line);
  background: #171715
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}
.case-card {
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line)
}
.case-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  object-position: top;
  filter: saturate(.65);
  transition: filter .2s, transform .2s
}
.case-card:hover img {
  filter: saturate(1);
  transform: translateY(-4px)
}
.case-card h3 {
  font-size: 16px;
  margin: 17px 0 7px
}
.case-card p {
  font-size: 11px;
  letter-spacing: .3px;
  margin: 0
}
.price-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line)
}
.price-panels article {
  padding: 34px 28px 22px;
  border-right: 1px solid var(--line)
}
.price-panels article:last-child {
  border: 0;
  background: #c5a0590b
}
.price-panels article > small {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px
}
.price-panels h3 {
  font-size: 19px;
  margin: 20px 0 18px
}
.amount {
  font-size: 40px;
  line-height: 1.5;
  color: var(--bright);
  font-weight: 400;
  letter-spacing: -1px
}
.amount small {
  font-size: 12px;
  letter-spacing: 0
}
.price-panels p {
  font-size: 14px
}
.price-panels ul {
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  margin-top: 25px
}
.price-panels li {
  font-size: 16px;
  color: var(--muted);
  margin: 10px 0
}
.price-panels li:before {
  content: "＋";
  margin-right: 10px;
  color: var(--gold)
}
.pricing-note {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 22px;
  align-items: flex-start
}
.pricing-note p {
  font-size: 14px;
  max-width: 710px;
  line-height: 1.9
}
.pricing-note strong {
  color: var(--bright);
  font-weight: 400
}
.pricing-note a {
  white-space: nowrap;
  font-size: 14px
}
.commerce-band {
  background: #191816
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px
}
.step {
  border-top: 1px solid var(--gold);
  padding-top: 20px
}
.step small {
  color: var(--gold);
  font-size: 14px
}
.step h3 {
  font-size: 22px;
  margin: 22px 0 13px
}
.step p {
  font-size: 16px
}
.faq-band {
  background: #171715;
}
.faq {
  display: grid;
  grid-template-columns: .85fr 1.2fr;
  gap: 80px
}
details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0
}
summary {
  cursor: pointer;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 25px
}
summary:after {
  content: "＋";
  color: var(--gold)
}
details[open] summary:after {
  content: "−"
}
details p {
  margin: 18px 0 0;
  font-size: 16px
}
.closing {
  padding: 85px 0;
  background: #c5a0590d;
  border-top: 1px solid var(--line)
}
.closing h2 {
  font-size: clamp(40px, 5vw, 65px);
  font-weight: 400;
  line-height: 1.4;
  margin: 28px 0 35px;
  color: var(--bright)
}
.closing-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px
}
.closing-bottom p {
  margin: 0
}
.closing-bottom .btn {
  min-width: 280px;
  justify-content: space-between
}
footer {
  padding: 52px 0 22px;
  background: #0b0b0b
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 55px
}
.footer-top p {
  font-size: 12px;
  margin: 22px 0 0
}
.footer-top a {
  font-size: 12px
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 25px;
  align-content: start
}
.footer-links a {
  color: var(--muted)
}
.footer-links a:hover {
  color: var(--bright)
}
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1px;
  color: #8c877b
}
.pagehero {
  padding: 75px 0 40px
}
.pagehero h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.5;
  margin: 25px 0
}
.pagehero p {
  max-width: 740px
}
.flowmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
  margin: 30px 0
}
.flowmap article {
  padding: 30px;
  border-right: 1px solid var(--line)
}
.flowmap article:first-child {
  padding-left: 0
}
.flowmap article:last-child {
  border: 0
}
.flowmap h3 {
  font-size: 20px;
  color: var(--bright);
  margin: 20px 0 15px
}
.flowmap p {
  font-size: 16px;
  text-align: justify;
}
.editorial {
  max-width: 820px;
  margin: auto
}
.editorial p {
  font-size: 16px;
  line-height: 2.2
}
.editorial h2 {
  font-size: 30px;
  margin-top: 35px
}
.editorial h3 {
  font-size: 22px
}
.pricing-section, .story-band {
  background: #191816;
  border-block: 1px solid var(--line)
}
.price-caption {
  font-size: 12px
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px
}
.contact-box {
  border-top: 1px solid var(--gold);
  padding: 30px;
  background: #191816
}
.contact-box h2 {
  font-size: 24px;
  margin: 0 0 15px
}
.contact-box p {
  font-size: 12px
}
.contact-box label {
  display: block;
  font-size: 12px;
  color: #d4cbb7;
  margin: 18px 0 0
}
input, select, textarea {
  display: block;
  width: 100%;
  padding: 12px;
  background: #101010;
  color: var(--text);
  border: 1px solid #c5a05955;
  margin-top: 6px;
  font-size: 16px;
  border-radius: 0
}
textarea {
  min-height: 110px;
  resize: vertical
}
.legacy-content {
  padding: 65px 0;
  max-width: 1000px
}
.legacy-content h1 {
  font-size: 36px;
  color: var(--bright)
}
.legacy-content h2 {
  font-size: 25px;
  color: var(--bright)
}
.legacy-content h3, .legacy-content h4 {
  color: var(--bright)
}
.legacy-content img {
  height: auto;
  max-width: 100%
}
.legacy-content .row {
  display: flex;
  flex-wrap: wrap;
  gap: 25px
}
.legacy-content .single_gallery_item {
  width: calc(33.333% - 17px)
}
.legacy-content .single_gallery_item img {
  width: 100%
}
.legacy-content .single-blog-area {
  width: 100%;
  max-width: 900px;
  margin: 45px auto 65px
}
.legacy-content .single-blog-area img {
  width: 100%;
  display: block
}
.legacy-content .sonar-treasure-sidebar-area, .legacy-content .backEnd-content, .legacy-content .dots {
  display: none
}
.legacy-content iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto
}
.legacy-content a {
  color: var(--bright)
}
.legacy-content a.btn {
  color: #14130f
}
.legacy-content .section-padding-100 {
  padding: 35px 0
}
.legacy-content li {
  color: var(--muted)
}
.legacy-content table {
  width: 100%;
  border-collapse: collapse
}
.legacy-content td {
  padding: 12px;
  border: 1px solid var(--line)
}
.skip {
  position: fixed;
  left: 15px;
  top: -100px;
  z-index: 100;
  background: var(--gold);
  color: #111;
  padding: 10px
}
.skip:focus {
  top: 10px
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--bright);
  outline-offset: 5px
}
.morelink {
  margin-top: 24px
}
@media(max-width:1050px) {
  .wrap {
    width: calc(100% - 56px)
  }
  .care-layout {
    gap: 50px
  }
  h2 {
    font-size: 32px
  }
  .price-panels article {
    padding: 27px 20px
  }
  .amount {
    font-size: 34px
  }
  .footer-top {
    gap: 30px
  }
  .faq {
    gap: 40px
  }
}
@media(max-width:760px) {
  .wrap {
    width: calc(100% - 40px)
  }
  header {
    height: 116px
  }
  .brand strong {
    font-size: 16px;
    letter-spacing: 2px
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 2px
  }
  .brand {
    gap: 9px
  }
  .brand img {
    width: 100px;
    height: 100px;
    flex-shrink: 0
  }
  .header-right {
    gap: 15px
  }
  .contact-link {
    display: none
  }
  .menu {
    padding-left: 15px;
    gap: 10px
  }
  .side-menu {
    top: 116px;
    width: min(88vw, 390px);
    padding: 30px
  }
  .menu-shade {
    top: 116px
  }
  .opening-hero {
    padding: 60px 0
  }
  .hero-label {
    font-size: 11px;
    padding: 5px 14px
  }
  .opening-hero h1 {
    font-size: 31px;
    line-height: 1.6;
    letter-spacing: 0
  }
  .opening-hero h1 .hero-cross {
    display: block;
    line-height: 1.1;
    font-size: 22px;
    margin: 5px 0
  }
  .opening-hero > div > p {
    font-size: 16px
  }
  .opening-hero .buttons {
    gap: 12px
  }
  .btn {
    font-size: 13px;
    padding: 13px 20px;
    gap: 18px
  }
  .hero-footnote {
    margin-top: 30px;
    font-size: 9px;
    letter-spacing: 1px
  }
  .section, .care-section {
    padding: 65px 0
  }
  .care-layout, .faq {
    grid-template-columns: 1fr;
    gap: 20px
  }
  h2 {
    font-size: 28px;
    margin: 15px 0 20px
  }
  .care-copy {
    padding-top: 0;
    max-width: none
  }
  .care-copy .lead {
    font-size: 20px
  }
  .section-head {
    display: block;
    margin-bottom: 30px
  }
  .section-head > p {
    margin-top: 20px;
    max-width: none
  }
  .section-head > .text-link {
    margin-top: 20px
  }
  .service-rows > a {
    grid-template-columns: 30px 1fr 20px;
    gap: 15px;
    padding: 27px 0
  }
  .service-rows h3 {
    font-size: 20px
  }
  .service-rows p {
    font-size: 12px
  }
  .num {
    font-size: 23px
  }
  .case-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .case-card img {
    aspect-ratio: 1.6
  }
  .case-card h3 {
    font-size: 16px
  }
  .price-panels {
    grid-template-columns: 1fr
  }
  .price-panels article {
    padding: 27px;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }
  .amount {
    font-size: 39px
  }
  .price-panels ul {
    padding-top: 15px;
    margin-top: 20px
  }
  .pricing-note {
    display: block
  }
  .pricing-note p {
    font-size: 12px
  }
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px
  }
  .step h3 {
    font-size: 17px
  }
  .step p {
    font-size: 14px
  }
  .closing {
    padding: 60px 0
  }
  .closing-bottom {
    display: block
  }
  .closing-bottom .btn {
    margin-top: 25px;
    min-width: 0
  }
  .closing h2 {
    font-size: 43px
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .footer-links {
    gap: 15px
  }
  .footer-bottom {
    font-size: 9px
  }
  .pagehero {
    padding: 50px 0 25px
  }
  .flowmap {
    grid-template-columns: 1fr
  }
  .flowmap article, .flowmap article:first-child {
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }
  .flowmap article:last-child {
    border: 0
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .contact-box {
    padding: 25px 20px
  }
  .editorial h2 {
    font-size: 26px
  }
  .editorial p {
    font-size: 16px
  }
  .legacy-content h1 {
    font-size: 28px
  }
  .legacy-content .single_gallery_item {
    width: 100%
  }
  .legacy-content .row {
    gap: 20px
  }
  .legacy-content {
    padding-top: 40px
  }
  summary {
    font-size: 16px
  }
  .legacy-content .btn {
    margin-bottom: 10px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  * {
    transition: none !important
  }
}
.special-services .flowmap {
  grid-template-columns: 1fr 1fr
}
.special-services .text-link {
  margin-top: 12px
}
@media(max-width:760px) {
  .special-services .flowmap {
    grid-template-columns: 1fr
  }
}
header .brand img {
  width: 100px;
  height: 100px;
  min-width: 100px;
  max-width: 100px;
  flex-shrink: 0;
  object-fit: contain
}
.special-services article h2 {
  font-size: 28px;
  margin: 22px 0 16px
}
.special-services article ul {
  padding-left: 20px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 13px
}
.special-services article .btn {
  margin-top: 10px;
  max-width: 100%
}
/* Footer text enlarged by exactly 2px at each breakpoint. */
footer .brand strong {
  font-size: 19px
}
footer .brand small {
  font-size: 11px
}
.footer-top p, .footer-top a {
  font-size: 14px
}
.footer-bottom {
  font-size: 12px
}
.home-editorial-image {
  margin-top: 50px;
  margin-bottom: 65px
}
.home-editorial-image img {
  display: block;
  width: 100%;
  height: 390px;
  object-fit: cover;
  object-position: center 55%
}
.home-editorial-image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8
}
.home-editorial-image figcaption span {
  color: #8c877b;
  white-space: nowrap
}
.home-industry {
  background: #191816;
}
.industry-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center
}
.industry-layout figure {
  margin: 0
}
.industry-layout img {
  display: block;
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover
}
.industry-layout figcaption {
  font-size: 11px;
  color: #8c877b;
  margin-top: 10px
}
.industry-layout h2 {
  font-size: 31px
}
.industry-layout p {
  font-size: 16px;
  line-height: 2
}
@media(max-width:760px) {
  footer .brand strong {
    font-size: 18px
  }
  footer .brand small {
    font-size: 10px
  }
  .footer-bottom {
    font-size: 11px;
    gap: 18px;
    flex-wrap: wrap
  }
  .footer-top > div {
    min-width: 0
  }
  .footer-top > div > a[href^="mailto:"] {
    overflow-wrap: anywhere
  }
  .home-editorial-image {
    margin-top: 30px;
    margin-bottom: 40px
  }
  .home-editorial-image img {
    height: auto;
    aspect-ratio: 1.5;
    object-fit: cover
  }
  .home-editorial-image figcaption {
    font-size: 11px;
    display: block
  }
  .home-editorial-image figcaption span {
    display: block;
    margin-top: 4px
  }
  .industry-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .industry-layout img {
    aspect-ratio: 1.5
  }
  .industry-layout h2 {
    font-size: 27px
  }
}
.home-industry .industry-layout img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover
}
/* Scoped services page adjustments. */
.services-cooperation .flowmap {
  grid-template-columns: 1fr 1fr
}
.pagehero .services-intro-singleline {
  max-width: none
}
@media(min-width:1000px) {
  .pagehero .services-intro-singleline {
    white-space: nowrap
  }
}
@media(max-width:760px) {
  .services-cooperation .flowmap {
    grid-template-columns: 1fr
  }
}
/* Rental page only: simplified cooperation and single-line desktop introduction. */
.rental-cooperation .flowmap {
  grid-template-columns: 1fr 1fr
}
.pagehero .rental-intro-singleline {
  max-width: none
}
@media(min-width:1000px) {
  .pagehero .rental-intro-singleline {
    white-space: nowrap
  }
}
@media(max-width:760px) {
  .rental-cooperation .flowmap {
    grid-template-columns: 1fr
  }
  .pagehero .rental-intro-singleline {
    white-space: normal
  }
}
/* Inner-page brand and situation imagery. */
.inner-page-visual {
  margin-top: 0;
  margin-bottom: 45px
}
.inner-page-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.75;
  display: block;
  object-fit: cover;
  object-position: center
}
.inner-page-visual figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted)
}
.inner-page-visual figcaption span {
  color: #8c877b;
  white-space: nowrap
}
.transformation-visual-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 65px;
  align-items: center
}
.transformation-visual-intro figure {
  margin: 0
}
.transformation-visual-intro img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover
}
.transformation-visual-intro figcaption, .contact-page-visual figcaption {
  font-size: 14px;
  color: #8c877b;
  margin-top: 10px;
  line-height: 1.8
}
.contact-page-visual {
  margin: 0 0 30px
}
.contact-page-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.8;
  object-fit: cover
}
@media(max-width:760px) {
  .inner-page-visual {
    margin-bottom: 25px
  }
  .inner-page-visual img {
    aspect-ratio: 1.5
  }
  .inner-page-visual figcaption {
    display: block;
    font-size: 11px
  }
  .inner-page-visual figcaption span {
    display: block;
    margin-top: 4px
  }
  .transformation-visual-intro {
    grid-template-columns: 1fr;
    gap: 25px
  }
  .transformation-visual-intro figure {
    max-width: 460px
  }
  .contact-page-visual {
    margin-bottom: 25px
  }
}
/* Homepage client reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}
.review-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #1a1a1a;
  border: 1px solid rgba(197, 160, 89, .26)
}
.review-mark {
  color: #c5a059;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  height: 42px
}
.review-card blockquote {
  margin: 10px 0 30px;
  flex: 1
}
.review-card blockquote p {
  margin: 0;
  color: #f5f5f5;
  font-size: 16px;
  line-height: 1.95
}
.review-card figcaption {
  border-top: 1px solid rgba(197, 160, 89, .2);
  padding-top: 20px
}
.review-card figcaption a {
  display: inline-block;
  color: #e4c98e;
  font-size: 16px;
  line-height: 1.7;
  text-decoration: none
}
.review-card figcaption a:hover, .review-card figcaption a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px
}
.review-person {
  display: block;
  color: #a0a0a0;
  font-size: 16px;
  margin-top: 8px
}
@media(max-width:900px) {
  .reviews-grid {
    grid-template-columns: 1fr
  }
  .review-card {
    padding: 26px
  }
  .review-card blockquote {
    margin-bottom: 24px
  }
}
/* Homepage studio quality commitment */
.quality-commitment {
  margin-top: 32px;
  padding: 28px 32px;
  border-left: 2px solid #e4c98e;
  background: rgba(197, 160, 89, .05)
}
.quality-commitment h3 {
  margin: 0 0 12px;
  color: #e4c98e;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6
}
.quality-commitment p {
  margin: 0;
  color: #c5c5c5;
  font-size: 16px;
  line-height: 1.95
}
.quality-commitment strong {
  color: #f5f5f5;
  font-weight: 600
}
@media(max-width:760px) {
  .quality-commitment {
    padding: 24px 22px;
    margin-top: 24px
  }
  .quality-commitment h3 {
    font-size: 20px
  }
}
/* Search-friendly service context and visible information */
.seo-service-label{font-size:16px!important;line-height:1.7!important;color:#c5a059!important;margin:12px 0 16px!important;max-width:none!important}
.seo-breadcrumb{display:flex;gap:12px;align-items:center;padding-top:25px;font-size:16px;color:#a0a0a0;flex-wrap:wrap}.seo-breadcrumb a{color:#c5a059}
.seo-guide{border-top:1px solid rgba(197,160,89,.2)}.seo-guide>p{max-width:900px;font-size:16px;line-height:1.95;color:#a0a0a0}
.seo-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin-top:35px}.seo-faq h3{font-size:21px;line-height:1.7;color:#f5f5f5}.seo-faq p{font-size:16px;line-height:1.95;color:#a0a0a0}.seo-faq a{color:#c5a059;display:inline-block}
@media(max-width:760px){.seo-faq{grid-template-columns:1fr;gap:20px}.seo-breadcrumb{padding-top:20px}.seo-service-label{font-size:16px!important}}

.form-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.form-consent{display:flex!important;gap:12px;align-items:flex-start;margin:22px 0;font-size:16px}.form-consent input{width:18px!important;height:18px!important;flex:0 0 18px;margin-top:6px}.form-consent a{color:#c5a059;text-decoration:underline}.form-data-note{font-size:16px;line-height:1.8;color:#a0a0a0}#contact-brief button:disabled{opacity:.55;cursor:not-allowed}#human-verification{min-height:65px;margin-top:20px}

/* Simple numerical contact verification */
.math-verification { margin-top: 18px; }
.math-verification label { display:block; margin-bottom: 10px; }
.math-verification label strong { color:var(--bright); font-size: 17px; font-weight: 650; }
.math-verification-row { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.math-verification-row input { flex:1 1 130px; min-width:0; max-width:210px; margin:0; }
.math-verification-row button { flex:0 0 auto; margin:0; white-space:nowrap; }
@media(max-width:480px) { .math-verification-row input { flex:1 1 100%; max-width:none; } .math-verification-row button { flex:1 1 100%; } }

/* Contact form: centered consent, compact math verification and clear submit spacing (2026-11-03) */
#contact-brief .form-consent {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px auto 20px;
  max-width: 100%;
  text-align: left;
  line-height: 1.65;
}
#contact-brief .form-consent input[type="checkbox"] {
  margin: 0;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
}
#human-verification {
  min-height: 0;
  margin: 18px auto 0;
  text-align: center;
}
#human-verification > label {
  margin: 0 0 10px;
  text-align: center;
}
#human-verification .math-verification-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
#human-verification .math-verification-row input,
#human-verification .math-verification-row button {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  padding: 0 14px;
  line-height: normal;
  font-size: 15px;
}
#human-verification .math-verification-row input {
  flex: 0 1 205px;
  width: 205px;
  min-width: 0;
  max-width: 205px;
  appearance: textfield;
  -moz-appearance: textfield;
}
#human-verification .math-verification-row input::-webkit-outer-spin-button,
#human-verification .math-verification-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#human-verification .math-verification-row button {
  flex: 0 0 auto;
  white-space: nowrap;
}
#contact-brief .contact-submit {
  display: flex;
  width: fit-content;
  margin: 24px auto 0;
  color: #14130f;
  text-align: center;
}
#contact-brief .contact-submit:hover,
#contact-brief .contact-submit:focus-visible,
#contact-brief .contact-submit:disabled { color: #14130f; }
#contact-brief #status {
  margin: 22px auto 0;
  text-align: center;
  color: var(--bright);
  line-height: 1.7;
}
@media (max-width: 480px) {
  #contact-brief .form-consent { align-items: flex-start; }
  #contact-brief .form-consent input[type="checkbox"] { margin-top: 3px; }
  #human-verification .math-verification-row { flex-wrap: nowrap; gap: 8px; }
  #human-verification .math-verification-row input {
    flex: 1 1 auto;
    width: 0;
    max-width: none;
  }
  #human-verification .math-verification-row button { flex: 0 0 auto; }
}

/* Contact form requested field label sizing (2026-11-03) */
#contact-brief .contact-primary-label { font-size: 16px; }

/* Contact form label type and select spacing - 2026-11-03 */
#contact-brief .contact-secondary-label { font-size: 16px; }
#contact-brief .form-consent,
#contact-brief .form-consent span,
#contact-brief .form-consent a { font-size: 14px; }
#contact-brief .form-consent { line-height: 1.65; }
#contact-brief #goal {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f1ede5' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px 16px;
}