/* =========================================================
   Youi Zen Youi Zen — style.css
   ========================================================= */

:root {
  --bg: #F7F4EF;
  --bg-deep: #F0EBE3;
  --ink: #221F1B;
  --sub: #6E6A62;
  --line: #E3DFD6;
  --clay: #A8532F;
  --moss: #4B5842;
  --wood: #B89B7A;

  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 70px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
body { overflow-x: clip; }
a { color: inherit; }
p { margin: 0; }
figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 1px solid var(--clay); outline-offset: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 8px 14px; text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  --side: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--side) 18px;
  background: linear-gradient(180deg, rgba(247,244,239,.72), rgba(247,244,239,0));
  display: flex; align-items: center; gap: 32px;
  transition: background .6s var(--ease), padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(247, 244, 239, .97);
  border-bottom-color: var(--line);
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: 12px;
}
.logo {
  text-decoration: none; font-weight: 500; font-size: 1.05rem; letter-spacing: .32em;
  margin-right: auto;
}
.nav { display: flex; gap: 30px; font-size: .86rem; }
.nav a, .nav-line {
  text-decoration: none; color: var(--ink); position: relative; padding: 2px 0;
}
.nav a::after, .nav-line::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: currentColor; transition: right .5s var(--ease);
}
.nav a:hover::after, .nav-line:hover::after { right: 0; }
.nav-line { font-size: .86rem; color: var(--clay); }
@media (max-width: 900px) {
  .nav { display: none; }
}

/* ---------- shared ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(96px, 14vw, 180px) var(--pad) 0; }
.label {
  font-family: var(--serif); font-size: .95rem; letter-spacing: .24em; color: var(--moss);
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: clamp(48px, 7vw, 88px);
}
.label span { color: var(--clay); }

.btn {
  display: inline-block; text-decoration: none; font-size: .88rem; letter-spacing: .2em;
  padding: 15px 30px; border-radius: 2px;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn-dark { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn-dark:hover { background: var(--moss); border-color: var(--moss); }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }

.text-link {
  display: inline-block; text-decoration: none; font-size: .9rem; letter-spacing: .2em;
  color: var(--clay); border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: letter-spacing .5s var(--ease);
}
.text-link:hover { letter-spacing: .28em; }

/* image frames */
.ph { overflow: hidden; background: var(--bg-deep); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
figure:hover .ph img { transform: scale(1.035); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.load { opacity: 0; transform: translateY(10px); animation: rise 1.6s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: flex; align-items: flex-end; overflow: hidden;
}
@supports (height: 100svh) { .hero { min-height: 100svh; } }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
.hero-video::-webkit-media-controls { display: none !important; }
.hero-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247,244,239,.86) 0%, rgba(247,244,239,.62) 32%, rgba(247,244,239,0) 62%),
    linear-gradient(0deg, rgba(247,244,239,.55) 0%, rgba(247,244,239,0) 35%);
}
.hero-inner {
  position: relative; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 140px var(--pad) clamp(56px, 9vh, 104px);
}
.hero-place { font-size: .85rem; letter-spacing: .4em; color: var(--sub); margin-bottom: 18px; }
.hero-title {
  margin: 0; font-weight: 400; font-size: clamp(3.4rem, 8vw, 6.6rem);
  letter-spacing: .18em; line-height: 1.1;
}
.hero-en {
  margin-top: 22px; font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: .16em; line-height: 1.55; color: var(--ink);
}
.hero-copy { margin-top: 28px; font-size: .98rem; color: var(--ink); line-height: 2.1; }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 768px) {
  .hero { align-items: flex-end; }
  .hero-video { object-position: 50% 50%; }
  .hero-wash {
    background: linear-gradient(0deg, rgba(247,244,239,.94) 0%, rgba(247,244,239,.78) 34%, rgba(247,244,239,0) 58%);
  }
  .hero-inner { padding-top: 45vh; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
}

/* =========================================================
   01 ABOUT
   ========================================================= */
.about-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px;
  align-items: start;
}
.about-title {
  grid-column: 1 / span 5; margin: 0; font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.7; letter-spacing: .12em;
}
.about-body { grid-column: 7 / span 5; }
.about-body p { margin-bottom: 1.8em; font-size: 1.02rem; line-height: 2.2; }
.about-last { color: var(--moss); }
.about-photo { grid-column: 2 / span 3; margin-top: -40px; }
.about-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; width: 100%; }
.about-photo figcaption { margin-top: 12px; font-size: .8rem; color: var(--sub); }
@media (max-width: 900px) {
  .about-title, .about-body { grid-column: 1 / -1; }
  .about-photo { grid-column: 1 / span 8; margin-top: 0; }
}

/* =========================================================
   SPACE
   ========================================================= */
.space-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px;
  align-items: end;
}
.space-text { grid-column: 1 / span 4; align-self: center; }
.space-en {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: .2em;
  font-size: 1rem; color: var(--moss); margin-bottom: 24px; line-height: 1.6;
}
.space-title { margin: 0 0 36px; font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.8; letter-spacing: .1em; }
.space-addr { font-size: 1rem; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.space-addr span { display: block; color: var(--sub); font-size: .9rem; }
.space-note { color: var(--sub); font-size: .92rem; margin-bottom: 32px; }
.space-media { grid-column: 6 / span 7; }
.space-video { width: 100%; aspect-ratio: 1080 / 1172; object-fit: cover; background: var(--bg-deep); }
.space-stills { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.space-stills img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.space-stills figure:last-child { margin-top: 48px; }
@media (max-width: 900px) {
  .space-text, .space-media, .space-stills { grid-column: 1 / -1; }
  .space-media { margin-inline: calc(var(--pad) * -1); }
  .space-video { aspect-ratio: 4 / 5; }
}

/* =========================================================
   02 OBJECTS — editorial spreads
   ========================================================= */
.objects-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: clamp(64px, 9vw, 120px);
}
.objects-head h2 { grid-column: 1 / span 5; margin: 0; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: .16em; }
.objects-head p { grid-column: 7 / span 5; color: var(--sub); font-size: .95rem; }
@media (max-width: 900px) {
  .objects-head h2, .objects-head p { grid-column: 1 / -1; }
  .objects-head h2 { margin-bottom: 18px; }
}

.spread {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px;
  align-items: start; margin-bottom: clamp(96px, 13vw, 176px);
}
.cat-en { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: .06em; line-height: 1.1; font-style: italic; }
.spread-head h3 { margin: 10px 0 20px; font-weight: 400; font-size: 1.1rem; letter-spacing: .3em; color: var(--clay); }
.cat-list { font-size: .9rem; color: var(--sub); line-height: 2.1; padding-top: 16px; border-top: 1px solid var(--line); max-width: 16em; }

.obj figcaption { margin-top: 14px; font-size: .88rem; line-height: 1.8; transition: transform .6s var(--ease); }
.obj:hover figcaption { transform: translateX(4px); }
.obj figcaption b { display: block; font-weight: 500; letter-spacing: .1em; }
.obj figcaption span { color: var(--sub); }

.obj-xl .ph { aspect-ratio: 4 / 5; }
.obj-md .ph { aspect-ratio: 1 / 1; }
.obj-sm .ph, .obj-sm2 .ph, .obj-sm3 .ph { aspect-ratio: 3 / 4; }

/* spread A: head | big | small; medium drops low */
.spread-a .spread-head { grid-column: 1 / span 3; grid-row: 1; }
.spread-a .obj-xl { grid-column: 5 / span 5; grid-row: 1 / span 2; }
.spread-a .obj-sm { grid-column: 10 / span 3; grid-row: 1; margin-top: 140px; }
.spread-a .obj-md { grid-column: 1 / span 3; grid-row: 2; margin-top: 40px; }

/* spread B: mirrored */
.spread-b .spread-head { grid-column: 10 / span 3; grid-row: 1; text-align: left; }
.spread-b .obj-md  { grid-column: 1 / span 4; grid-row: 1; margin-top: 80px; }
.spread-b .obj-xl  { grid-column: 5 / span 5; grid-row: 1 / span 2; }
.spread-b .obj-sm  { grid-column: 10 / span 3; grid-row: 2; }
.spread-b .obj-sm2 { grid-column: 2 / span 3; grid-row: 2; margin-top: 40px; }
.spread-b .obj-sm3 { grid-column: 10 / span 2; grid-row: 3; margin-top: -24px; }

/* spread C */
.spread-c .spread-head { grid-column: 1 / span 3; grid-row: 1; }
.spread-c .obj-sm  { grid-column: 4 / span 3; grid-row: 1; margin-top: 180px; }
.spread-c .obj-xl  { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.spread-c .obj-md  { grid-column: 2 / span 4; grid-row: 2; margin-top: 24px; }

@media (max-width: 900px) {
  .spread { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; row-gap: 36px; }
  .spread .spread-head { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .spread .obj { grid-row: auto !important; margin-top: 0 !important; }
  .spread .obj-xl { grid-column: 1 / -1 !important; }
  .spread .obj-md { grid-column: 1 / span 4 !important; }
  .spread .obj-sm { grid-column: 3 / span 4 !important; }
  .spread .obj-sm2 { grid-column: 1 / span 3 !important; }
  .spread .obj-sm3 { grid-column: 4 / span 3 !important; margin-top: 56px !important; }
  .spread .obj-xl .ph { aspect-ratio: 4 / 4.6; }
}

.tiles-teaser {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline;
  text-decoration: none; padding: 40px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.tiles-teaser .cat-en { grid-column: 1 / span 4; }
.tt-zh { grid-column: 5 / span 2; letter-spacing: .3em; color: var(--clay); }
.tt-list { grid-column: 7 / span 4; font-size: .88rem; color: var(--sub); line-height: 2; }
.tt-go { grid-column: 11 / span 2; justify-self: end; font-size: .85rem; letter-spacing: .2em; transition: transform .6s var(--ease); }
.tiles-teaser:hover .tt-go { transform: translateY(4px); }
@media (max-width: 900px) {
  .tiles-teaser { grid-template-columns: 1fr; row-gap: 8px; }
  .tiles-teaser > * { grid-column: 1 / -1 !important; justify-self: start !important; }
}

/* =========================================================
   03 LENORMAND — focal
   ========================================================= */
.handcraft { position: relative; }
.handcraft { isolation: isolate; }
.handcraft::before {
  content: ""; position: absolute; z-index: -1;
  top: clamp(56px, 8vw, 120px); bottom: -80px; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--bg-deep);
}
.len-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start;
}
.len-text { grid-column: 1 / span 4; }
.len-en {
  font-family: var(--serif); font-size: clamp(2.4rem, 4.2vw, 3.7rem); line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 28px;
}
.len-title { margin: 0 0 32px; font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.85; letter-spacing: .1em; }
.len-text > p { margin-bottom: 1.6em; line-height: 2.2; }
.len-text > p.len-en { line-height: 1; margin-bottom: 28px; }
.len-spec { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--sub); }
.len-spec li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.len-main { grid-column: 6 / span 7; grid-row: 1 / span 2; }
.len-main .ph { aspect-ratio: 5 / 6; }
.len-side { grid-column: 2 / span 3; grid-row: 3; margin-top: 8px; }
.len-side .ph { aspect-ratio: 1 / 1; }
.len-side figcaption { margin-top: 14px; font-size: .88rem; line-height: 1.8; }
.len-side figcaption b { display: block; font-weight: 500; letter-spacing: .1em; }
.len-side figcaption span { color: var(--sub); }

.gift {
  grid-column: 7 / span 5; grid-row: 3;
  background: var(--bg); border: 1px solid var(--ink);
  padding: 36px 40px 34px; position: relative; margin-top: -72px;
  box-shadow: 8px 8px 0 var(--line);
}
.gift::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); pointer-events: none;
}
.gift-en { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--clay); letter-spacing: .08em; margin-bottom: 14px; }
.gift-main { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 400; line-height: 1.7; letter-spacing: .16em; margin-bottom: 18px; }
.gift-sub { font-size: .86rem; color: var(--sub); line-height: 1.9; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .len-text, .len-main, .len-side, .gift { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .len-main { margin-inline: calc(var(--pad) * -1); }
  .len-main .ph { aspect-ratio: 4 / 5; }
  .len-side { grid-column: 1 / span 8; }
  .gift { padding: 30px 26px; box-shadow: 6px 6px 0 var(--line); }
}

/* =========================================================
   04 TAROT
   ========================================================= */
.tarot { padding-top: clamp(160px, 18vw, 240px); }
.tarot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.tarot-en {
  grid-column: 1 / span 7; margin: 0; font-family: var(--serif); font-weight: 400;
  text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: .02em;
}
.tarot-body { grid-column: 8 / span 4; padding-top: 12px; }
.tarot-body p { margin-bottom: 1.6em; line-height: 2.2; }
.tarot-zh { font-size: 1.2rem; font-weight: 400; letter-spacing: .14em; }
.tarot-way {
  margin-top: 2.4em; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--serif); text-transform: uppercase; letter-spacing: .3em; line-height: 1.9; color: var(--moss);
}
@media (max-width: 900px) {
  .tarot-en, .tarot-body { grid-column: 1 / -1; }
}

/* =========================================================
   05 VISIT
   ========================================================= */
.visit-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: end; }
.visit-photo { grid-column: 1 / span 5; }
.visit-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; }
.visit-text { grid-column: 7 / span 6; padding-bottom: 8px; }
.visit-en { font-family: var(--serif); text-transform: uppercase; letter-spacing: .24em; color: var(--moss); margin-bottom: 18px; }
.visit-name { margin: 0 0 28px; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: .2em; line-height: 1.2; }
.visit-text address { font-size: 1.05rem; line-height: 2; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit-text address span { display: block; margin-top: 8px; color: var(--sub); font-size: .92rem; }
.visit-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 900px) {
  .visit-photo { grid-column: 1 / span 10; }
  .visit-text { grid-column: 1 / -1; }
  .visit-cta .btn { flex: 1 1 auto; text-align: center; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  max-width: var(--max); margin: clamp(120px, 14vw, 180px) auto 0;
  padding: 48px var(--pad) 56px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; row-gap: 6px; column-gap: 24px;
  font-size: .82rem; color: var(--sub);
}
.f-name { color: var(--ink); font-size: 1rem; letter-spacing: .32em; }
.f-en { font-family: var(--serif); text-transform: uppercase; letter-spacing: .22em; font-size: .9rem; }
.f-city { grid-column: 2; grid-row: 1; justify-self: end; font-family: var(--serif); letter-spacing: .12em; font-size: .95rem; }
.f-copy { grid-column: 2; grid-row: 2; justify-self: end; }
@media (max-width: 600px) {
  .site-footer { grid-template-columns: 1fr; }
  .f-city, .f-copy { grid-column: 1; grid-row: auto; justify-self: start; }
  .f-city { margin-top: 18px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .load { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .ph img, .obj figcaption { transition: none !important; }
}


/* Woodcraft detail beside the tile collection */
@media (min-width: 901px) {.len-side {grid-column: 6 / span 5; grid-row: 3;}}

/* Quiet brand frontispiece and editorial window photograph */
.hero {min-height: auto; background: var(--bg); align-items: center;}
.hero-inner {padding: 120px var(--pad) 86px; text-align: center; max-width: 960px;}
.hero-place {margin-bottom: 18px; font-size: 14px;}
.hero-title {line-height: 0; letter-spacing: 0;}
.brand-sign {display: block; width: clamp(230px, 27vw, 340px); height: auto; margin: 0 auto; mix-blend-mode: multiply;}
.hero-en {font-size: 16px; margin-top: 26px; letter-spacing: .14em;}
.hero-copy {font-size: 16px; margin-top: 20px;}
.hero-cta {justify-content: center; margin-top: 28px;}
.about-grid {grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start;}
.about-title {grid-column: 1 / span 6; grid-row: 1; padding-top: 32px;}
.about-body {grid-column: 1 / span 5; grid-row: 2;}
.brand-window {grid-column: 8 / span 5; grid-row: 1 / span 2; margin: 0;}
.brand-window img {display: block; width: 100%; height: auto;}
.visit-photo img {object-position: center;}
@media(max-width:900px){
 .hero-inner {padding-top: 100px; padding-bottom: 58px;}
 .about-title {grid-column:1 / -1; grid-row:auto; padding-top:0;}
 .about-body {grid-column:1 / -1; grid-row:auto;}
 .brand-window {grid-column:2 / span 10; grid-row:auto; margin-top:8px;}
 .hero-cta .btn {flex:0 1 auto;}
}

.service-intro {margin-bottom:56px;} .service-intro h2,.work-gallery h2 {font-size:clamp(1.7rem,3vw,2.5rem);font-weight:400;letter-spacing:.08em;} .service-intro p {color:var(--sub);margin-top:16px;}
.service-row {display:grid;grid-template-columns:1fr 1.4fr;gap:64px;padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:100px;}
.service-index {font-size:13px;letter-spacing:.12em;color:var(--clay);margin-bottom:16px;}
.service-row h3 {font-weight:400;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.7;letter-spacing:.06em;}
.service-detail p {line-height:2;margin-bottom:24px;font-size:16px;} .service-detail dl {margin:0;}
.service-detail dl>div {display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.7;} .service-detail dd {margin:0;text-align:right;} .service-detail dt {color:var(--sub);}
.card-heading {font-weight:500;} .custom-contact {margin-top:48px;padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.gallery-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;}.gallery-grid figure {margin:0;}.gallery-grid img {display:block;width:100%;aspect-ratio:1;object-fit:cover;}
@media(max-width:768px){.service-row {grid-template-columns:1fr;gap:24px;padding:36px 0;}.service-detail dl>div {gap:16px;}.gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.custom-contact {align-items:flex-start;flex-direction:column;}}

.service-summary {font-size:16px;line-height:2;color:var(--sub);margin-top:20px;max-width:360px;}
.service-examples {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;}.service-examples figure {margin:0;}.service-examples img {width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.service-examples figure:only-child {grid-column:1 / -1;max-width:440px;}
.service-detail .example-note {font-size:13px;color:var(--sub);margin-top:12px;line-height:1.7;}
.custom-card-visual {margin:28px 0 0;}.custom-card-visual img {display:block;width:100%;height:auto;}
.imported-cards {border-top:1px solid var(--line);padding-top:64px;}.imported-cards h2 {font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;line-height:1.8;letter-spacing:.06em;max-width:850px;}.imported-cards .gallery-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:768px){.imported-cards .gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.service-summary {max-width:none;}}

.pricing h2{font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:32px;letter-spacing:.08em;}.price-scroll{overflow-x:auto;}.price-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.8;text-align:left;}.price-table th,.price-table td{padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;}.price-table thead{background:var(--bg-deep);}.price-table th{font-weight:500;}.price-table td:last-child{white-space:nowrap;}.price-table tbody th{width:30%;}.price-table tbody td:nth-child(2){color:var(--sub);}@media(max-width:600px){.price-table th,.price-table td{padding:14px 10px;font-size:14px;}.price-table tbody th{min-width:110px;}.price-table{min-width:480px;}}

/* Product image directly below each custom-service title */
.service-row {grid-template-columns:1.1fr 1fr;align-items:start;gap:64px;}.service-row h3{margin-bottom:24px;}.service-examples{margin-top:0;}.custom-card-visual{margin:0;}.service-detail{padding-top:42px;}.import-note{font-size:16px;line-height:2;color:var(--sub);margin-top:16px;}.service-row .service-examples figure:only-child{max-width:none;}
@media(max-width:768px){.service-row{grid-template-columns:1fr;gap:24px;}.service-detail{padding-top:0;}}