/* Tru Service v3: styles for process.html, services.html and contact.html. Loaded after tru.css.
   Colors, type and radii come from the variables at the top of tru.css. */

/* ───────── shared by the three pages ───────── */
.f-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-nw { white-space: nowrap; }
.f-hero { padding: clamp(64px, 8.5vw, 124px) 0 clamp(52px, 6.5vw, 92px); text-align: center; }
.f-hero .display { margin-top: 26px; }
.f-hero .lede { margin: 26px auto 0; max-width: 31em; }
.f-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; margin-top: 34px; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1b222b; }
.foot-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.f-badge { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.f-badge svg { width: 11px; height: 11px; }

/* ───────── process: one list, start to finish ───────── */
.jr-sec { padding: 0 0 clamp(20px, 3vw, 40px); }
.jr { position: relative; --stage-h: min(640px, calc(100vh - 150px)); }
.beat { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.beat + .beat { margin-top: clamp(56px, 7vw, 96px); }
.beat-text .beat-when { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--amber-deep); }
.beat-text h2 { margin-top: 12px; }
.beat-text p { margin-top: 18px; max-width: 25em; font-size: clamp(17px, 1.35vw, 19px); text-wrap: pretty; }
.jr-note { margin-top: 22px; }

/* A scene: the stage for one step. The frame is the same stage, shared, when the page pins it. */
.scene, .jr-frame { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 600px; padding: 14px; border-radius: var(--r-panel); background: var(--panel); }
.scene-bg, .jr-frame .fbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.scene.has-photo::after, .jr-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,11,15,.06), rgba(8,11,15,.26)); }
.scene-tag { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--quiet); background: #fff; padding: 5px 9px; border-radius: 6px; }
.scene-art { flex: 1; display: grid; place-items: center; padding: 18px 8px 22px; }

/* The week under every scene */
.wk { background: #fff; border-radius: 16px; padding: 14px 16px 13px; box-shadow: 0 10px 30px rgba(15,20,26,.06); --run: 0%; --from: 0%; }
.wk .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wk .days span { text-align: center; font-size: 12px; font-weight: 600; color: var(--quiet); padding: 9px 0 8px; border-radius: 10px; background: var(--panel); transition: background .5s ease, color .5s ease; }
.wk .days b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; color: var(--ink); margin-top: 1px; }
.wk .days .shoot { background: var(--ink); color: rgba(255,255,255,.72); }
.wk .days .shoot b { color: #fff; }
.wk[data-step="1"] .days span:nth-child(1), .wk[data-step="2"] .days span:nth-child(2), .wk[data-step="3"] .days span:nth-child(2),
.wk[data-step="4"] .days span:nth-child(2), .wk[data-step="4"] .days span:nth-child(3), .wk[data-step="4"] .days span:nth-child(4),
.wk[data-step="5"] .days span:nth-child(4) { background: var(--amber-wash); color: var(--amber-deep); }
.wk .run { position: relative; height: 4px; border-radius: 4px; background: var(--panel); margin: 12px 0 10px; }
.wk .run i { position: absolute; inset: 0 auto 0 0; width: var(--run); border-radius: 4px; background: var(--amber-deep); transition: width 1.1s cubic-bezier(.3,.7,.2,1) .15s; }
.wk[data-step="1"] { --run: 10%; --from: 0%; } .wk[data-step="2"] { --run: 26%; --from: 10%; } .wk[data-step="3"] { --run: 34%; --from: 26%; }
.wk[data-step="4"] { --run: 70%; --from: 34%; } .wk[data-step="5"] { --run: 79%; --from: 70%; }
.wk .legend { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--quiet); }
.wk .legend b { color: var(--ink); font-weight: 600; }
.jr-frame .legend .l { display: none; }
.jr-frame .wk[data-step="1"] .l1, .jr-frame .wk[data-step="2"] .l2, .jr-frame .wk[data-step="3"] .l3, .jr-frame .wk[data-step="4"] .l4, .jr-frame .wk[data-step="5"] .l5 { display: inline; }
.anim .scene:not(.is-go) .wk .run i { width: var(--from); }

/* Scene 1: the text */
.fl-text { padding-bottom: 18px; }
.msg-thread { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.msg-thread .msg-who { align-self: flex-end; font-size: 12px; color: var(--quiet); margin: 0 4px -2px; }
.msg { max-width: 86%; padding: 11px 15px; font-size: 15px; line-height: 1.38; border-radius: 18px; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.msg.is-out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.msg.msg-pic { padding: 0; overflow: hidden; width: 62%; border-radius: 18px 18px 6px 18px; }
.msg.msg-pic img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.msg.in { position: relative; align-self: flex-start; margin-top: 8px; background: var(--panel); color: var(--ink); border-bottom-left-radius: 6px; }
.msg .msg-dots { position: absolute; inset: 0; display: flex; align-items: center; gap: 5px; padding-left: 17px; border-radius: inherit; background: var(--panel); opacity: 0; pointer-events: none; }
.msg .msg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.anim .scene:not(.is-go) .msg, .anim .scene:not(.is-go) .msg-thread .msg-who { opacity: 0; transform: translateY(12px) scale(.98); }
.anim .msg-thread .msg-who { transition: opacity .4s ease, transform .4s ease; }
.anim .scene.is-go .msg.msg-pic { transition-delay: .15s; }
.anim .scene.is-go .msg.is-out:not(.msg-pic) { transition-delay: .5s; }
.anim .scene.is-go .msg.in { transition-delay: 1.2s; }
.anim .scene.is-go .msg .msg-dots { animation: typing 1.5s ease 1.2s both; }
.anim .scene.is-go .msg .msg-dots i { animation: blink 1s ease-in-out 1.2s 2; }
.anim .scene.is-go .msg .msg-dots i:nth-child(2) { animation-delay: 1.35s; } .anim .scene.is-go .msg .msg-dots i:nth-child(3) { animation-delay: 1.5s; }
@keyframes typing { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { 0%, 100% { background: var(--faint); } 50% { background: var(--quiet); } }

/* Scenes 2 to 5: the same fix list, in four states */
.fl { width: min(400px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.14), 0 2px 6px rgba(15,20,26,.06); padding: 16px 20px 6px; transform: rotate(-1.1deg); }
.fl header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fl header b { font-size: 15px; color: var(--ink); }
.fl header span { font-size: 12px; color: var(--quiet); }
.fl li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 43px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); transition: color .4s ease; }
.fl li.rest { color: var(--quiet); }
.fl footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 0; font-size: 13px; color: var(--quiet); }
.fl footer b { color: var(--ink); font-weight: 600; }
/* sorting */
.anim .scene:not(.is-go) .fl-sort .tag { opacity: 0; transform: scale(.7); }
.fl-sort .tag { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.2,1.2); }
.anim .scene:not(.is-go) .fl-sort li.rest { color: var(--ink); }
.anim .scene.is-go .fl-sort li:nth-child(1) .tag { transition-delay: .35s; } .anim .scene.is-go .fl-sort li:nth-child(2) .tag { transition-delay: .55s; }
.anim .scene.is-go .fl-sort li:nth-child(3) .tag { transition-delay: .75s; } .anim .scene.is-go .fl-sort li:nth-child(4) .tag { transition-delay: .95s; }
.anim .scene.is-go .fl-sort li:nth-child(5) .tag { transition-delay: 1.15s; } .anim .scene.is-go .fl-sort li:nth-child(6) .tag { transition-delay: 1.45s; }
.anim .scene.is-go .fl-sort li.rest { transition-delay: 1.5s; }
.anim .scene:not(.is-go) .fl-sort footer span { opacity: 0; }
.fl-sort footer span { transition: opacity .5s ease 1.7s; }
/* one price */
.fl-sum { display: grid; grid-template-columns: minmax(0, 1fr) 16px auto; column-gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.fl-sum li:last-child { border-bottom: 0; }
.fl-sum .f-brace { align-self: stretch; margin: 12px 0; border: 2px solid var(--amber-deep); border-left: 0; border-radius: 0 10px 10px 0; transition: clip-path .6s ease .35s; clip-path: inset(0); }
.fl-sum .f-one { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); padding-right: 2px; transition: opacity .5s ease .85s, transform .5s ease .85s; }
.fl-sum .f-one small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--quiet); margin-top: 6px; }
.anim .scene:not(.is-go) .fl-sum .f-brace { clip-path: inset(50% 0 50% 0); }
.anim .scene:not(.is-go) .fl-sum .f-one { opacity: 0; transform: translateX(-8px); }
.fl-price .f-badge { transition: opacity .4s ease 1.5s, transform .5s cubic-bezier(.2,.9,.2,1.2) 1.5s; }
.anim .scene:not(.is-go) .fl-price .f-badge { opacity: 0; transform: scale(.8); }
/* the work */
.fl-ck { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--faint); display: grid; place-items: center; color: var(--ink); transition: background .3s ease, border-color .3s ease; }
.fl-ck svg { width: 12px; height: 12px; transition: opacity .25s ease, transform .3s ease; }
.fl li.done { color: var(--quiet); text-decoration: line-through; text-decoration-color: var(--faint); }
.fl li.done .fl-ck { background: var(--amber); border-color: var(--amber); }
.fl li.doing .fl-ck { border-color: var(--amber-deep); }
.fl li.doing .fl-ck::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-deep); }
.anim .scene.is-go .fl li.doing .fl-ck::after { animation: pulse 1.4s ease-in-out 2.2s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: none; opacity: 1; } }
.fl-meter { flex: none; width: 112px; height: 4px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.fl-meter i { display: block; height: 100%; width: 60%; border-radius: 4px; background: var(--amber-deep); transition: width 1.4s cubic-bezier(.3,.7,.2,1) .4s; }
.fl-meter.is-full i { width: 100%; }
.anim .scene:not(.is-go) .fl-work li.done, .anim .scene:not(.is-go) .fl-walk li.late { color: var(--ink); text-decoration-color: transparent; }
.anim .scene:not(.is-go) .fl-work li.done .fl-ck, .anim .scene:not(.is-go) .fl-walk li.late .fl-ck { background: #fff; border-color: var(--faint); }
.anim .scene:not(.is-go) .fl-work li.done .fl-ck svg, .anim .scene:not(.is-go) .fl-walk li.late .fl-ck svg { opacity: 0; transform: scale(.5); }
.anim .scene:not(.is-go) .fl-work .fl-meter i { width: 0; }
.anim .scene:not(.is-go) .fl-walk .fl-meter i { width: 60%; }
.anim .scene.is-go .fl-work li:nth-child(1), .anim .scene.is-go .fl-work li:nth-child(1) .fl-ck, .anim .scene.is-go .fl-work li:nth-child(1) .fl-ck svg { transition-delay: .4s; }
.anim .scene.is-go .fl-work li:nth-child(2), .anim .scene.is-go .fl-work li:nth-child(2) .fl-ck, .anim .scene.is-go .fl-work li:nth-child(2) .fl-ck svg { transition-delay: .9s; }
.anim .scene.is-go .fl-work li:nth-child(3), .anim .scene.is-go .fl-work li:nth-child(3) .fl-ck, .anim .scene.is-go .fl-work li:nth-child(3) .fl-ck svg { transition-delay: 1.4s; }
.anim .scene.is-go .fl-walk li:nth-child(4), .anim .scene.is-go .fl-walk li:nth-child(4) .fl-ck, .anim .scene.is-go .fl-walk li:nth-child(4) .fl-ck svg { transition-delay: .35s; }
.anim .scene.is-go .fl-walk li:nth-child(5), .anim .scene.is-go .fl-walk li:nth-child(5) .fl-ck, .anim .scene.is-go .fl-walk li:nth-child(5) .fl-ck svg { transition-delay: .75s; }
/* you walk it */
.fl-pile { position: relative; width: min(400px, 100%); margin-bottom: 30px; }
.fl-pile .fl { width: 100%; }
.fl-walk header .f-badge { transition: opacity .4s ease 1.2s, transform .5s cubic-bezier(.2,.9,.2,1.2) 1.2s; }
.anim .scene:not(.is-go) .fl-walk header .f-badge { opacity: 0; transform: scale(.8); }
.fl-slip { position: absolute; z-index: 1; right: -12px; bottom: -34px; width: min(262px, 78%); background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(15,20,26,.2), 0 2px 6px rgba(15,20,26,.08); padding: 12px 14px 13px; transform: rotate(2deg); transition: opacity .5s ease 1.7s, transform .7s cubic-bezier(.2,.8,.2,1.1) 1.7s; }
.fl-slip header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fl-slip header b { font-size: 14.5px; color: var(--ink); }
.fl-slip header span { font-size: 12px; color: var(--quiet); }
.fl-slip p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.anim .scene:not(.is-go) .fl-slip { opacity: 0; transform: rotate(5deg) translateY(-22px); }
.jr.is-pin .fl-pile { margin-bottom: 0; }

/* Pinned: the stage holds still, the five scenes change inside it, and a level bubble rides the line beside the steps. */
.jr-frame { display: none; }
.jr.is-pin { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: clamp(32px, 6vw, 96px); }
.jr.is-pin .beat { display: contents; }
.jr.is-pin .beat-text { grid-column: 1; min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding-left: 58px; opacity: .4; transition: opacity .5s ease; }
.jr.is-pin .beat[data-beat="1"] .beat-text { grid-row: 1; } .jr.is-pin .beat[data-beat="2"] .beat-text { grid-row: 2; } .jr.is-pin .beat[data-beat="3"] .beat-text { grid-row: 3; }
.jr.is-pin .beat[data-beat="4"] .beat-text { grid-row: 4; } .jr.is-pin .beat[data-beat="5"] .beat-text { grid-row: 5; }
.jr.is-pin .beat.is-on .beat-text { opacity: 1; }
.jr.is-pin .scene, .jr.is-pin .jr-frame { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: calc((100vh - var(--stage-h)) / 2 + 31px); height: var(--stage-h); min-height: 0; }
.jr.is-pin .jr-frame { display: flex; justify-content: space-between; z-index: 1; }
.jr.is-pin .jr-frame .fbg { opacity: 0; transition: opacity .7s ease; }
.jr.is-pin .jr-frame::after { opacity: 0; transition: opacity .7s ease; }
.jr[data-step="2"] .fbg[data-for="2"], .jr[data-step="4"] .fbg[data-for="4"], .jr[data-step="5"] .fbg[data-for="5"] { opacity: 1; }
.jr[data-step="2"] .jr-frame::after, .jr[data-step="4"] .jr-frame::after, .jr[data-step="5"] .jr-frame::after { opacity: 1; }
.jr.is-pin .scene { z-index: 2; background: transparent; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.jr.is-pin .scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease .1s; }
.jr.is-pin .scene .scene-bg, .jr.is-pin .scene::after { display: none; }
.jr.is-pin .scene > .scene-tag, .jr.is-pin .scene > .wk { visibility: hidden; }
.jr-rail { position: absolute; left: 13px; width: 2px; border-radius: 2px; background: var(--line); }
.jr-rail .jr-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--amber-deep); transform-origin: top; transform: scaleY(var(--p, 0)); }
.jr-rail .jr-dot { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2px solid var(--faint); transition: border-color .3s ease, background .3s ease; }
.jr-rail .jr-dot.past { border-color: var(--amber-deep); background: var(--amber-deep); }
.jr-rail .jr-bub { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 6px 18px rgba(15,20,26,.18); }
.jr:not(.is-pin) .jr-rail { display: none; }
@media (max-height: 840px) {
  .jr.is-pin .fl li { min-height: 38px; }
  .jr.is-pin .fl-slip { bottom: -26px; }
  .jr.is-pin .scene-art { padding-top: 12px; padding-bottom: 16px; }
  .jr.is-pin .msg.msg-pic { width: 54%; }
}

/* Kept in the loop: three updates */
.f-feed { width: min(400px, 100%); display: flex; flex-direction: column; gap: 10px; }
.f-ping { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(15,20,26,.09), 0 1px 3px rgba(15,20,26,.06); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.f-ping > svg { width: 40px; height: 40px; padding: 12px 8px; border-radius: 11px; background: var(--ink); color: var(--amber); }
.f-ping span { font-size: 14.5px; line-height: 1.35; color: var(--text); }
.f-ping span b { display: block; font-size: 13px; color: var(--ink); }
.f-ping time { align-self: start; font-size: 12px; color: var(--quiet); padding-top: 2px; }
.f-ping img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.f-ping:nth-child(1) { transform: rotate(-1deg); } .f-ping:nth-child(2) { transform: rotate(.8deg) translateX(10px); } .f-ping:nth-child(3) { transform: rotate(-.6deg); }
.f-feed small { text-align: center; font-size: 12px; color: var(--quiet); margin-top: 8px; }
.js.anim .vis:not(.seen) .f-ping { opacity: 0; transform: translateY(18px) scale(.97); }
.js.anim .vis.seen .f-ping:nth-child(2) { transition-delay: .5s; } .js.anim .vis.seen .f-ping:nth-child(3) { transition-delay: 1s; }

/* ───────── services ───────── */
.outs-sec { padding: 0; }
.f-outs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.f-out { position: relative; isolation: isolate; overflow: hidden; grid-column: span 4; min-height: 400px; border-radius: var(--r-panel); background: #1a1d20; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 14px; }
.f-out.is-wide { grid-column: span 7; min-height: 460px; }
.f-out.is-mid { grid-column: span 5; min-height: 460px; }
.f-out > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.f-out:hover > img { transform: scale(1.04); }
.f-out::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,11,15,.10) 0%, rgba(8,11,15,0) 34%, rgba(8,11,15,.44) 100%); }
.f-by { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 6px 10px; border-radius: 8px; }
.f-by svg { width: 13px; height: 13px; }
.f-out-card { align-self: stretch; padding: 16px 18px 18px; border-radius: 16px; color: #fff; background: rgba(15,20,26,.5); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.f-out-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.3vw, 31px); letter-spacing: -0.015em; line-height: 1.1; }
.f-out-card p { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.9); margin-top: 8px; max-width: 34em; }
.f-out.is-wide .f-out-card { align-self: flex-start; max-width: 470px; }
.outs-sec .note { margin-top: 18px; }
.js .f-out[data-r]:nth-of-type(4) { transition-delay: .1s; } .js .f-out[data-r]:nth-of-type(5) { transition-delay: .2s; }

.f-menu { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 68px); }
.svc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.svc-rows li:last-child { border-bottom: 1px solid var(--line); }
.svc-rows h3 { font-size: 18.5px; font-weight: 600; color: var(--ink); }
.svc-rows p { font-size: 15px; color: var(--quiet); margin-top: 4px; max-width: 29em; text-wrap: pretty; }
.f-from { font-family: var(--serif); font-size: clamp(30px, 2.9vw, 40px); letter-spacing: -0.025em; line-height: 1; color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.f-from small { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; color: var(--quiet); margin-right: 8px; }
.f-from.is-word { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.015em; }
.f-menu .note { margin-top: 18px; max-width: 36em; }
.f-menu-vis { position: sticky; top: 96px; min-height: 0; padding: clamp(24px, 3vw, 44px) clamp(18px, 2.6vw, 36px); }
.wl { width: min(420px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); padding: 18px 20px 12px; transform: rotate(1.1deg); }
.wl header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wl header b { font-size: 15px; color: var(--ink); }
.wl header span { font-size: 12px; color: var(--quiet); }
.wl-body { display: grid; grid-template-columns: minmax(0, 1fr) 16px auto; column-gap: 12px; align-items: center; }
.wl li { padding: 10px 8px 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line); border-radius: 8px; transition: background .25s ease, opacity .25s ease; }
.wl li:last-child { border-bottom: 0; }
.wl li span { display: block; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.wl li small { display: block; font-size: 12.5px; font-weight: 600; color: var(--amber-deep); margin-top: 2px; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.2,1.1); }
.wl.has-hot li { opacity: .42; }
.wl.has-hot li.hot { opacity: 1; background: var(--amber-wash); border-bottom-color: transparent; }
.wl .f-brace { align-self: stretch; margin: 14px 0; border: 2px solid var(--amber-deep); border-left: 0; border-radius: 0 10px 10px 0; clip-path: inset(0); transition: clip-path .7s ease 1.5s; }
.wl .f-one { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); transition: opacity .5s ease 2s, transform .5s ease 2s; }
.wl .f-one small { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--quiet); margin-top: 6px; }
.js.anim .vis:not(.seen) .wl li small { opacity: 0; transform: translateY(-4px); }
.js.anim .vis:not(.seen) .wl .f-brace { clip-path: inset(50% 0 50% 0); }
.js.anim .vis:not(.seen) .wl .f-one { opacity: 0; transform: translateX(-8px); }
.js.anim .vis.seen .wl li:nth-child(1) small { transition-delay: .3s; } .js.anim .vis.seen .wl li:nth-child(2) small { transition-delay: .5s; }
.js.anim .vis.seen .wl li:nth-child(3) small { transition-delay: .7s; } .js.anim .vis.seen .wl li:nth-child(4) small { transition-delay: .9s; }
.js.anim .vis.seen .wl li:nth-child(5) small { transition-delay: 1.1s; } .js.anim .vis.seen .wl li:nth-child(6) small { transition-delay: 1.3s; }

/* ───────── contact ───────── */
.ct { padding: clamp(36px, 5vw, 76px) 0 clamp(36px, 5vw, 64px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 88px); align-items: start; }
.ct-side { align-self: stretch; display: flex; flex-direction: column; }
.ct-head h1 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(38px, 4.5vw, 62px); margin-top: 22px; text-wrap: balance; }
.ct-head .lede { margin-top: 20px; max-width: 26em; }
.ct-stick { position: sticky; top: 92px; margin-top: 30px; }
.ct-ways { border-top: 1px solid var(--line); }
.ct-ways a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ct-ways svg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--panel); color: var(--ink); transition: background .2s ease, color .2s ease; }
.ct-ways a:hover svg { background: var(--ink); color: #fff; }
.ct-ways b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.ct-ways li:first-child b { font-family: var(--serif); font-weight: 400; font-size: 29px; letter-spacing: -0.02em; line-height: 1.05; }
.ct-ways small { display: block; font-size: 13.5px; color: var(--quiet); margin-top: 2px; }
.tk { margin: 28px 8px 0 2px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); padding: 16px 18px 14px; transform: rotate(-1.1deg); }
.tk header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.tk header b { font-size: 15px; color: var(--ink); }
.tk header em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--quiet); background: var(--panel); padding: 4px 8px; border-radius: 6px; transition: background .3s ease, color .3s ease; }
.tk.is-booked header em, .tk.is-wait header em { background: var(--amber); color: var(--ink); }
.tk dl { margin: 0; }
.tk dl div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 39px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tk dt { color: var(--quiet); }
.tk dd { margin: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk dd:empty::before { content: ""; display: block; width: 58%; height: 10px; border-radius: 5px; background: var(--panel); }
.tk p { font-size: 12.5px; line-height: 1.45; color: var(--quiet); padding-top: 11px; }

.rq, .rq-nojs, .ct-after { --f-quiet: #5b6169; }
.rq, .rq-nojs { background: var(--panel); border-radius: var(--r-panel); padding: clamp(20px, 3vw, 38px); }
.rq, #book { scroll-margin-top: 88px; }
.rq-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.rq-top h2, .rq-nojs h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.5vw, 33px); letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); }
.rq-top p { font-size: 13.5px; font-weight: 600; color: var(--amber-deep); }
.rq-g { min-width: 0; border: 0; margin: 30px 0 0; padding: 0; }
.rq-g legend, .rq-g-label { display: block; padding: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.rq-hint { font-size: 13.5px; line-height: 1.45; color: var(--f-quiet); margin-top: 10px; }
.rq-hint a, .rq-fine a, .rq-status a { color: var(--ink); text-underline-offset: 3px; }
.rq-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rq-opt { position: relative; display: block; }
.rq-opt input, .rq-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rq-opt span { display: flex; align-items: center; height: 100%; min-height: 64px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rq-opt:hover span, .rq-seg label:hover span { border-color: var(--faint); }
.rq-opt input:checked + span, .rq-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.rq-opt input:focus-visible + span, .rq-seg input:focus-visible + span { outline: 2px solid var(--amber-deep); outline-offset: 3px; }
.rq-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-seg label { position: relative; display: block; }
.rq-seg span { display: flex; align-items: center; min-height: 44px; padding: 0 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rq-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rq-f label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rq-f label em { font-style: normal; font-weight: 400; color: var(--f-quiet); }
.rq input[type="text"], .rq input[type="tel"], .rq input[type="date"], .rq textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .15s ease; }
.rq textarea { min-height: 116px; resize: vertical; }
.rq input:hover, .rq textarea:hover { border-color: var(--faint); }
.rq input:focus, .rq textarea:focus { border-color: var(--ink); }
.rq ::placeholder { color: var(--f-quiet); opacity: 1; }
.rq [aria-invalid="true"] { border-color: #a8321f; box-shadow: 0 0 0 1px #a8321f; }
.rq-err { font-size: 13.5px; font-weight: 600; color: #a8321f; }
.rq-err::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 1px; border-radius: 50%; background: currentColor; }
.rq-g > .rq-err { margin-top: 10px; }
.rq-date { flex-direction: row; align-items: center; gap: 12px; margin-top: 12px; transition: opacity .2s ease; }
.rq-date label { white-space: nowrap; }
.rq .rq-date input { width: 200px; flex: none; }
.rq-date.is-off { opacity: .4; }
#g-list .rq-two { margin-top: 20px; }
.rq-about { font-size: 14px; color: var(--text); margin: -4px 0 10px; }
.rq-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.rq-check input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--faint); border-radius: 7px; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.rq-check input:checked { background: var(--amber); border-color: var(--amber); }
.rq-check input:checked::after { content: ""; width: 11px; height: 6px; border-left: 2.2px solid var(--ink); border-bottom: 2.2px solid var(--ink); transform: translateY(-1.5px) rotate(-45deg); }
.rq-daynav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rq-daynav .rq-range { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.rq-daynav button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.rq-daynav button:disabled { opacity: .35; cursor: default; }
.rq-daynav svg { width: 15px; height: 15px; }
.rq-dayrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rq-day { margin: 0; padding: 10px 0 9px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: center; font: inherit; color: #5b6169; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rq-day span { display: block; font-size: 12px; font-weight: 600; }
.rq-day b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--ink); }
.rq-day small { display: block; font-size: 11.5px; }
.rq-day:hover, .rq-slot:hover:not(:disabled) { border-color: var(--faint); }
.rq-day.is-sel, .rq-slot.is-sel { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.74); }
.rq-day.is-sel b { color: #fff; }
.rq-day:disabled { opacity: .35; cursor: default; }
.rq-slots-label { font-size: 14px; color: var(--f-quiet); margin: 16px 0 8px; }
.rq-slots-label b { color: var(--ink); font-weight: 600; }
.rq-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rq-slot { min-height: 46px; margin: 0; padding: 4px 2px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rq-slot.is-sel { color: #fff; }
.rq-slot:disabled { opacity: .42; cursor: default; }
.rq-slot small { display: block; font-size: 11px; font-weight: 500; }
.rq-slot.is-taken { opacity: .62; }
.rq-slot s { text-decoration-color: var(--quiet); }
#g-when.has-err .rq-dayrow, #g-when.has-err .rq-slots { border-radius: 14px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px #a8321f; }
.rq-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rq-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rq-send-row { margin-top: 30px; }
#rq-send { width: 100%; justify-content: center; min-height: 58px; font-size: 17px; }
.rq.is-busy #rq-send { opacity: .72; cursor: progress; transform: none; }
.rq-fine { font-size: 12.5px; line-height: 1.5; color: var(--f-quiet); margin-top: 12px; text-align: center; }
.rq-status { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--amber-wash); font-size: 15px; font-weight: 500; line-height: 1.45; color: #4a2f0c; }
.rq-status:focus { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.rq.is-done > :not(.rq-done) { display: none; }
.rq-done h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin-top: 18px; outline: none; }
.rq-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 6px 10px; border-radius: 8px; }
.rq-badge svg { width: 12px; height: 12px; }
.rq-badge-wait { background: #fff; border: 1px solid var(--faint); }
.rq-lead { font-size: 17px; color: var(--text); margin-top: 14px; max-width: 30em; }
.rq-lead b { color: var(--ink); }
.rq-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 18px; border-radius: 16px; background: #fff; }
.rq-next p { flex: 1 0 100%; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.rq-next b { color: var(--ink); }
.rq-sum { margin: 22px 0 0; padding: 4px 18px; border-radius: 16px; background: #fff; }
.rq-sum div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rq-sum div:last-child { border-bottom: 0; }
.rq-sum dt { color: var(--quiet); }
.rq-sum dd { margin: 0; color: var(--ink); font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.rq-done-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rq-done .btn-line, .rq-nojs .btn-line { background: #fff; }
.rq-nojs p { margin-top: 14px; max-width: 30em; }
.rq-nojs .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.ct-after { background: var(--panel); border-radius: var(--r-panel); padding: clamp(28px, 4vw, 52px); }
.ct-after-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.ct-after h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.015em; color: var(--ink); }
.ct-after .textlink { font-size: 15.5px; border-color: var(--faint); }
.ct-after ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: clamp(24px, 3vw, 36px); }
.ct-after li { border-top: 1px solid var(--faint); padding-top: 16px; }
.ct-after li b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ct-after li span { display: block; font-size: 14.5px; color: var(--f-quiet); margin-top: 6px; }

.ct-bar { display: none; }

/* ───────── smaller screens ───────── */
@media (max-width: 1120px) {
  .ct-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); box-shadow: 0 -1px 0 var(--line); transition: transform .3s ease, visibility 0s; }
  .ct-bar.is-off { transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .ct-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: var(--r-btn); border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .ct-bar a:first-child { background: var(--ink); border-color: var(--ink); color: #fff; }
  .ct-page footer { padding-bottom: 132px; }
}
@media (max-width: 900px) {
  .beat { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .beat + .beat { margin-top: 64px; }
  .scene { min-height: 0; padding: 12px; }
  .scene-art { padding: 22px 4px 24px; min-height: 300px; }
  .fl { padding: 14px 16px 4px; }
  .fl-sum { column-gap: 9px; }
  .fl-sum .f-one { font-size: 22px; }
  .fl-slip { right: -6px; width: 214px; }
  .fl-slip p { gap: 5px; }
  .fl-slip .tag { font-size: 11.5px; padding: 4px 7px; }
  .wk { padding: 12px 12px 11px; }
  .wk .legend { font-size: 12.5px; }
  .f-outs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .f-out, .f-out.is-wide, .f-out.is-mid { grid-column: auto; min-height: 372px; }
  .f-out.is-wide .f-out-card { align-self: stretch; max-width: none; }
  .f-menu { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .f-menu-vis { position: static; }
  .svc-rows li { gap: 8px 16px; padding: 18px 0; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ct-stick { position: static; margin-top: 24px; }
  .ct-ways { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 8px; border-top: 0; }
  .ct-ways a { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; height: 100%; }
  .ct-ways svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; }
  .ct-ways b, .ct-ways li:first-child b { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
  .ct-ways small { font-size: 12.5px; }
  .ct-ways li:nth-child(1) small, .ct-ways li:nth-child(2) small { display: none; }
  .ct-ways li:nth-child(3) { grid-column: 1 / -1; }
  .tk { display: none; }
  .ct-after ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .rq-opts { grid-template-columns: minmax(0, 1fr); }
  .rq-opt span { min-height: 52px; }
  .rq-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-body { grid-template-columns: minmax(0, 1fr); }
  .wl .f-brace { display: none; }
  .wl li:last-child { border-bottom: 1px solid var(--line); }
  .wl .f-one { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding: 12px 0 4px; border-top: 2px solid var(--amber-deep); }
  .wl .f-one small { margin-top: 0; font-size: 13px; }
  .f-actions { flex-direction: column; }
  .rq-seg { gap: 6px; }
  .rq-seg span { padding: 0 12px; font-size: 14.5px; }
  .rq-two, .rq-three { grid-template-columns: minmax(0, 1fr); }
  .rq-day b { font-size: 22px; }
  .rq .rq-date input { width: auto; flex: 1; min-width: 0; }
  .ct-after ol { grid-template-columns: minmax(0, 1fr); }
  .rq-sum div { grid-template-columns: 104px minmax(0, 1fr); }
  .msg { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk .run i, .msg, .fl li, .fl-ck, .fl-ck svg, .fl-meter i, .fl-slip, .f-ping, .wl li small, .wl .f-brace, .wl .f-one, .ct-bar, .f-out > img { transition: none; }
  .f-out:hover > img { transform: none; }
}