/* ═══════════════════════════════════════════════════════════
   THE PEARL — shared styles (used by website.html and all
   explore-*.html pages). Edit colours & fonts here once.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:      #FFFEFA;   /* page background (warm near-white) */
  --ink:     #12120E;   /* main text (near-black) */
  --muted:   #8C8C86;   /* small grey labels */
  --line:    rgba(18,18,14,0.12);
  --white:   #ffffff;
  --maxw:    1500px;

  /* Type: Noto Sans throughout — light weights for display, regular for body */
  --serif: 'Noto Sans', system-ui, -apple-system, sans-serif;  /* display */
  --sans:  'Noto Sans', system-ui, -apple-system, sans-serif;  /* UI + body */
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; scrollbar-gutter: stable; }
html.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── display type scale (matched to the original site's sizes) ── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 200;
  margin: 0;
  letter-spacing: -0.012em;
}

/* huge centred section word — THE PEARL / SERVICES / PROCESS  (~130px @ 1707px)
   Noto Sans is wider than the original display face, so the very large sizes are
   dialled back slightly and tracking tightened to keep them on one line. */
.d-word  { font-size: clamp(2.9rem, 7.6vw, 10rem); font-weight: 200; line-height: .96; letter-spacing: -0.04em; }
/* hero headline (~70px @ 1707px) */
.d-hero  { font-size: clamp(2.3rem, 4.1vw, 4.7rem); font-weight: 200; line-height: 1.1; letter-spacing: -0.028em; }
/* large headings — welcome line, what-we-do, card titles (~52px @ 1707px) */
.d-lg    { font-size: clamp(1.8rem, 3vw, 3.3rem); font-weight: 200; line-height: 1.24; letter-spacing: -0.022em; }
/* medium headings — services & process steps */
.d-md    { font-size: clamp(1.45rem, 2.2vw, 2.2rem); font-weight: 300; line-height: 1.24; letter-spacing: -0.018em; }
/* footer wordmark — sized to fit the container in Noto Sans */
.d-foot  { font-size: clamp(2.4rem, 12.6vw, 13.5rem); font-weight: 200; line-height: .86; letter-spacing: -0.045em; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* Fluid gutter — grows with the window so content never hugs the edges.
   Uses logical padding so a shorthand elsewhere can't wipe it out. */
.wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding-inline: clamp(20px, 4.5vw, 64px);
}

/* ── small grey label with leading dot (18px, wide tracking) ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: clamp(0.74rem, 1.02vw, 1.06rem);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.4em; color: var(--muted); line-height: 2.1;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ── pill button with black circular arrow ── */
.pill-btn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 10px 10px 27px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink); cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.pill-btn .arw {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease;
}
.pill-btn .arw svg { width: 14px; height: 14px; }
.pill-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill-btn:hover .arw { background: var(--white); color: var(--ink); transform: rotate(45deg); }

.pill-btn.on-dark { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.pill-btn.on-dark .arw { background: #fff; color: var(--ink); }
.pill-btn.on-dark:hover { background: #fff; color: var(--ink); }

/* ── scroll reveal ── */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── header / nav ── */
/* ── Header layers ──
   The navigation stays fixed above two independent surfaces: progressive
   glass underneath and a solid warm-white panel above it. JavaScript maps the
   first 120px of page scroll to these custom properties, sliding the white
   panel up while fading the glass in. */
.site-head {
  --header-white-y: 0%;
  --header-white-opacity: 1;
  --header-blur-opacity: 0;
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding: 20px 0;
  background: transparent;
}
.site-head::before {
  content: ''; position: absolute; inset: 0 0 -2px; z-index: 0; pointer-events: none;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: linear-gradient(180deg, rgba(255,254,250,0.04) 0%, rgba(255,254,250,0) 100%);
  -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 45%);
          mask: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 45%);
  opacity: var(--header-blur-opacity);
  will-change: transform, opacity;
  transform: translateZ(0);
}
.site-head::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg);
  opacity: var(--header-white-opacity);
  transform: translateY(var(--header-white-y));
  will-change: transform, opacity;
}
/* Navigation stays fully opaque above the independently masked glass layer. */
.site-head > * { position: relative; z-index: 1; }
/* browsers without backdrop-filter get a soft tint fade instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head::before {
    background: linear-gradient(to bottom, rgba(255,254,250,0.85) 0%, rgba(255,254,250,0.6) 55%, rgba(255,254,250,0) 100%);
  }
}
/* Anchor targets sit below the fixed header when jumped to (incl. cross-page
   #hash links), so the section title never tucks up behind the bar. */
#explore, #services, #process, #top { scroll-margin-top: 100px; }

/* Frosted glass (page transitions, refresh, Back) — its styles live INLINE in
   every page's <head> (<style id="pearl-glass-css">) so the panel shows from the
   very first paint, even on a slow first load. Behaviour: assets/pearl.js. */

/* momentary blur nudge (toggled from JS) to wake a dormant backdrop-filter
   after the page loads already scrolled to a #section */
.site-head.bf-kick::before { backdrop-filter: blur(24.5px); -webkit-backdrop-filter: blur(24.5px); }

/* Reduced motion: scroll reveals fade only (no slide) */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity .6s ease; }
}

.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo-img { height: 42px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 0.82rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.16em; position: relative; padding-bottom: 3px;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; position: relative;
}
.burger span {
  display: block; position: absolute; left: 10px; width: 24px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .28s ease, width .4s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 18px; }
.burger span:nth-child(3) { top: 27px; }
/* the three lines fold into a cross */
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-links, .head-cta { display: none; }
  .burger { display: block; }
}
/* While the mobile menu is open the header is held solid white (JS sets the
   header vars + `.menu-open`); this makes the bar and the dropdown read as one
   white sheet. `.menu-anim` — added only around the toggle — fades the white
   panel / glass so the change is smooth without slowing scroll updates. */
.site-head.menu-anim::before,
.site-head.menu-anim::after { transition: opacity .42s ease; }

/* the panel opens by growing its height, so the page beneath slides down */
.mobile-menu {
  overflow: hidden; max-height: 0; border-top: 0 solid var(--line); background: var(--bg);
  transition: max-height .62s cubic-bezier(.16,1,.3,1), border-top-width .4s ease, border-color .4s ease;
}
.mobile-menu.open { max-height: 420px; border-top-width: 1px; border-top-color: var(--line); }
@media (min-width: 1101px) {
  .mobile-menu { display: none; }
}
.mobile-menu ul {
  list-style: none; margin: 0; padding: 10px 0 26px;
  padding-inline: clamp(20px, 4.5vw, 64px);
}
.mobile-menu li {
  /* each row rises into place, one after the next */
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open li { opacity: 1; transform: none; }
.mobile-menu.open li:nth-child(1) { transition-delay: .10s; }
.mobile-menu.open li:nth-child(2) { transition-delay: .16s; }
.mobile-menu.open li:nth-child(3) { transition-delay: .22s; }
.mobile-menu.open li:nth-child(4) { transition-delay: .28s; }
.mobile-menu.open li:nth-child(5) { transition-delay: .34s; }
.mobile-menu.open li:nth-child(6) { transition-delay: .40s; }
.mobile-menu a, .mobile-menu button {
  display: block; width: 100%; text-align: left; padding: 14px 0; border: 0; background: none;
  font-family: var(--serif); font-weight: 200; font-size: 1.6rem;
  letter-spacing: -0.01em; text-transform: none; cursor: pointer; color: var(--ink);
}
.mobile-menu li + li { border-top: 1px solid var(--line); }

/* ── big section title block (eyebrow / huge word / [01] / ©year) ── */
.sec-head { position: relative; text-align: center; padding: 24px 0 10px; }
.sec-head .big { margin: 18px 0 0; }
/* the [01] / ©year margin notes were removed — numbering now lives only
   on the Services list, where it reads as a sequence rather than decoration */
.sec-head .side { display: none; }
.sec-note {
  max-width: 660px; margin: 40px auto 0; text-align: center;
  color: rgba(18,18,14,.62); font-size: 1.04rem; line-height: 1.85; font-weight: 400;
}

/* ── explore cards ── */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 78px 46px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; gap: 54px; } }
.card-img { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16/9; background: #ECEAE3; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.card:hover .card-img img { transform: scale(1.06); }
.card h3 { margin-top: 30px; }
.card p { color: rgba(18,18,14,.62); font-size: 1.02rem; line-height: 1.75; margin: 14px 0 26px; }

/* ── services ── */
.svc { border-top: 1px solid var(--line); padding: 46px 0; display: grid; grid-template-columns: 96px 1fr 360px; gap: 44px; align-items: center; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; } }
.svc .n { font-size: .88rem; color: var(--muted); letter-spacing: .1em; }
.svc p { color: rgba(18,18,14,.62); font-size: 1rem; line-height: 1.75; margin: 12px 0 0; max-width: 62ch; }
.svc-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: #ECEAE3; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.svc:hover .svc-img img { transform: scale(1.05); }

/* ── process timeline (white background, animated line) ── */
.proc { position: relative; padding-left: 100px; }
@media (max-width: 700px) { .proc { padding-left: 58px; } }
.proc-track, .proc-fill { position: absolute; left: 29px; top: 6px; bottom: 6px; width: 1px; }
@media (max-width: 700px) { .proc-track, .proc-fill { left: 16px; } }
.proc-track { background: var(--line); }
.proc-fill { background: var(--ink); transform: scaleY(0); transform-origin: top; }
.proc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 54px; }
.proc li { position: relative; }
.proc .dot {
  position: absolute; left: -100px; top: -4px; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center;
  font-family: var(--sans); font-weight: 300; font-size: 1.1rem; color: var(--ink);
}
@media (max-width: 700px) { .proc .dot { left: -58px; width: 36px; height: 36px; font-size: .95rem; } }
.proc p { color: rgba(18,18,14,.62); font-size: 1rem; line-height: 1.75; margin: 10px 0 0; max-width: 58ch; }

/* ── trust marquee ── */
.marquee-wrap { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.marquee { display: flex; white-space: nowrap; user-select: none; }
.marquee > div { display: flex; align-items: center; animation: marquee 42s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee .item { display: flex; align-items: center; }
.marquee .item span {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(1.45rem, 2.7vw, 2.3rem); color: rgba(255,255,255,.92);
}
.marquee .item i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); margin: 0 34px; flex: none; }

/* ── footer ── */
.site-foot { border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; padding: 90px 0 44px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 {
  font-family: var(--sans); font-size: .78rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .28em; color: var(--muted); margin-bottom: 20px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-grid a, .foot-grid li { font-size: .98rem; color: rgba(18,18,14,.72); }
.foot-phone { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; margin-top: 12px; display: block; }
.foot-word { font-family: var(--serif); font-weight: 200; padding: 24px 0 12px; }
.foot-base { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 0; font-size: .8rem; color: var(--muted); }

::selection { background: var(--ink); color: var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F2F0E9; }
::-webkit-scrollbar-thumb { background: #C9C6BC; border-radius: 6px; }

/* ── inquiry modal ── */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
@media (max-width: 640px) { .modal { padding: 0; align-items: stretch; } }
.modal-bd { position: absolute; inset: 0; background: rgba(18,18,14,.7); backdrop-filter: blur(4px); }
.modal-card { position: relative; width: 100%; max-width: 700px; max-height: 88vh; max-height: 88svh; display: flex; flex-direction: column; background: var(--bg); border-radius: 14px; overflow: hidden; }
@media (max-width: 640px) { .modal-card { max-height: 100%; border-radius: 0; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 32px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 1.75rem; font-weight: 300; margin-top: 8px; }
.x-btn { border: 0; background: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.x-btn:hover { background: rgba(18,18,14,.06); color: var(--ink); }
.modal-body { overflow-y: auto; padding: 24px 32px; flex: 1; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-top: 1px solid var(--line); }
.bar { height: 2px; background: rgba(18,18,14,.1); border-radius: 2px; overflow: hidden; }
.bar > div { height: 100%; background: var(--ink); transition: width .5s ease; }
.flabel { display: block; margin-bottom: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.field { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 13px 15px; font-size: 16px; color: var(--ink); outline: none; transition: border-color .25s; font-family: var(--sans); }
.field:focus { border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { border: 1px solid var(--line); background: #fff; color: rgba(18,18,14,.72); border-radius: 999px; padding: 9px 17px; font-size: .88rem; cursor: pointer; transition: all .2s; font-family: var(--sans); }
.chip:hover { border-color: rgba(18,18,14,.4); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fstep { display: none; }
.fstep.on { display: grid; gap: 22px; }
.btn-solid { border: 0; border-radius: 999px; background: var(--ink); color: #fff; padding: 14px 32px; font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; cursor: pointer; font-family: var(--sans); }
.btn-ghost { border: 0; background: none; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; cursor: pointer; font-family: var(--sans); }
.btn-ghost:hover { color: var(--ink); }

/* ── explore detail page bits ── */
.detail-hero { padding: 170px 0 0; }
.detail-hero h1 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); line-height: 1.02; letter-spacing: -0.035em; }
.detail-block { display: grid; grid-template-columns: 240px 1fr; gap: 44px; padding: 64px 0 0; }
@media (max-width: 800px) { .detail-block { grid-template-columns: 1fr; gap: 14px; } }
.detail-block p {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.7;
  color: rgba(18,18,14,.84); max-width: 60ch;
}
.detail-figure { margin: 50px 0 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; background: #ECEAE3; }
.detail-figure img { width: 100%; height: 100%; object-fit: cover; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 800px) { .trio { grid-template-columns: 1fr; } }
.trio > div { aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; background: #ECEAE3; }
.trio img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.trio > div:hover img { transform: scale(1.05); }
.prevnext { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 90px; padding: 38px 0 100px; }
.prevnext .lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .24em; color: var(--muted); display: block; margin-bottom: 8px; }
.prevnext strong { font-family: var(--serif); font-weight: 300; font-size: 1.55rem; }

/* ── applied sizes for the generated blocks (kept here so the
      markup stays clean and every page inherits the same scale) ── */
.sec-head .big { font-size: clamp(2.9rem, 7.6vw, 10rem); font-weight: 200; line-height: .96; letter-spacing: -0.04em; }
.card h3      { font-size: clamp(1.8rem, 3vw, 3.3rem); font-weight: 200; line-height: 1.24; letter-spacing: -0.022em; }
.svc h3       { font-size: clamp(1.45rem, 2.2vw, 2.2rem); font-weight: 300; line-height: 1.24; letter-spacing: -0.018em; }
.proc h3      { font-size: clamp(1.45rem, 2.2vw, 2.2rem); font-weight: 300; line-height: 1.24; letter-spacing: -0.018em; }
.foot-word    { font-size: clamp(2.4rem, 12.6vw, 13.5rem); font-weight: 200; line-height: .86; letter-spacing: -0.045em; }

/* image placeholder (for photos missing from the old template) */
.ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #ECEAE3 0 12px, #E4E1D8 12px 24px);
  color: #A5A199; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  font-family: var(--sans);
}


/* ═══════════ touch / small-screen refinements ═══════════ */

/* iOS: respect the notch and home-bar areas (height constant, no shrink) */
.site-head { padding-top: max(20px, env(safe-area-inset-top)); }
.wrap {
  padding-left: max(clamp(20px, 4.5vw, 64px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 4.5vw, 64px), env(safe-area-inset-right));
}
.foot-base { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* momentum scrolling inside the booking form */
.modal-body { -webkit-overflow-scrolling: touch; }
.modal-card { padding-bottom: env(safe-area-inset-bottom); }

/* the booking form's paired fields stack on narrow screens */
.two-col { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .two-col { grid-template-columns: 1fr; gap: 16px; } }

@media (hover: none) {
  /* fingers need bigger targets than cursors — 44px is Apple's guidance */
  .chip { min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; }
  .pill-btn { padding: 12px 12px 12px 26px; }
  .mobile-menu a, .mobile-menu button { padding: 15px 0; }
  .foot-grid a, .foot-grid button { display: inline-block; padding: 4px 0; }
  * { -webkit-tap-highlight-color: rgba(18,18,14,.06); }
  /* hover-only flourishes would stick on touch, so switch them off */
  .card:hover .card-img img, .svc:hover .svc-img img, .trio > div:hover img { transform: none; }
  .pill-btn:hover { background: var(--white); color: var(--ink); border-color: var(--line); }
  .pill-btn:hover .arw { background: var(--ink); color: var(--white); transform: none; }
}

/* tablets: keep the three detail photos side by side rather than stacking */
@media (min-width: 560px) and (max-width: 800px) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .trio > div { aspect-ratio: 3/4; }
}

@media (max-width: 700px) {
  /* the [01] / ©year margin notes collide with the big word on phones */
  .sec-head .side { display: none; }
  .detail-hero { padding-top: 120px; }
  .sec-head { padding-top: 8px; }
  .foot-grid { padding-top: 54px; }
}


/* ═══════════ Services — sticky stacking cards ═══════════
   Each card pins to the top of the viewport as you scroll, and the next one
   slides up over it like a dealt deck. `top` is offset per card so the stack
   sits slightly lower each time and you can still see the edges beneath. */
.svc-stack { position: relative; }
.svc-card {
  position: sticky;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg);
  padding: 40px; margin-bottom: 26px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 42%; gap: 44px; align-items: center;
  min-height: 340px;
  box-shadow: 0 -18px 40px -30px rgba(18,18,14,.35);
}
.svc-card:last-child { margin-bottom: 0; }
.svc-card .n {
  font-size: .86rem; color: var(--muted); letter-spacing: .12em;
  display: block; margin-bottom: 14px;
}
.svc-card p { color: rgba(18,18,14,.62); font-size: 1rem; line-height: 1.75; margin: 12px 0 0; max-width: 46ch; }
.svc-card .shot { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; background: #ECEAE3; }
.svc-card .shot img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .svc-card {
    grid-template-columns: 1fr; gap: 22px; padding: 26px; min-height: 0;
    border-radius: 14px;
  }
  .svc-card .shot { aspect-ratio: 16/10; order: -1; }
}

/* Stacking needs a real scroll container height; on very short screens the
   pinning is more annoying than nice, so it falls back to a plain list. */
@media (max-height: 620px) {
  .svc-card { position: relative; top: auto !important; box-shadow: none; }
}

/* ═══════════ Contact — the short panel (separate from trip planning) ═══════════ */
.contact-grid { display: grid; gap: 30px; }
.contact-row { display: grid; gap: 6px; }
.contact-row .lbl {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .24em; color: var(--muted);
}
.contact-row .val { font-family: var(--serif); font-weight: 200; font-size: 1.6rem; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-socials a {
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px;
  font-size: .84rem; transition: background .3s, color .3s, border-color .3s;
}
.contact-socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact-note {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 22px;
  font-size: .93rem; line-height: 1.7; color: rgba(18,18,14,.62);
}
.contact-note .pill-btn { margin-top: 14px; }


/* ═══════════ Contact message form ═══════════ */
.contact-form { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.contact-form .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .24em; color: var(--muted); }
.contact-form .pill-btn { justify-self: start; margin-top: 4px; }
.form-error { color: #B3261E; font-size: .88rem; margin: 0; }

.contact-sent { padding: 64px 30px; text-align: center; }
.contact-sent .tick {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto;
  background: var(--ink); color: #fff; display: grid; place-items: center;
}
.contact-sent h3 { font-size: 1.9rem; margin-top: 22px; }
.contact-sent p {
  max-width: 420px; margin: 12px auto 0; font-size: .93rem;
  line-height: 1.7; color: rgba(18,18,14,.66);
}
.contact-sent .pill-btn { margin-top: 26px; }

/* enquiry form — "indicative, USD" helper line under budget selectors */
.budget-note { font-size: .74rem; color: var(--muted); margin: 8px 0 0; }

/* ── enquiry form: optional badge, collapsible, WhatsApp helper ── */
.opt-badge { display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.more-options { border:1px solid var(--line); border-radius:10px; padding:0 14px; }
.more-options > summary { cursor:pointer; list-style:none; padding:13px 2px; font-size:.82rem; font-weight:500; color:var(--ink); display:flex; align-items:center; justify-content:space-between; }
.more-options > summary::-webkit-details-marker { display:none; }
.more-options > summary::after { content:'+'; font-size:1.15rem; color:var(--muted); line-height:1; }
.more-options[open] > summary::after { content:'\2013'; }
.more-options .more-inner { display:grid; gap:18px; padding:4px 0 16px; }
.foot-left { display:flex; align-items:center; gap:14px; }
.wa-help { display:flex; align-items:center; gap:8px; }
.wa-help > span { font-size:.76rem; color:var(--muted); }
.wa-btn { font-size:.74rem; font-weight:500; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:6px 12px; white-space:nowrap; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.wa-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
@media (max-width:560px){ .wa-help > span { display:none; } }

/* ── Language (EN / 日本語) ── */
html:lang(ja){ --serif:'Noto Sans JP','Noto Sans',system-ui,-apple-system,sans-serif; --sans:'Noto Sans JP','Noto Sans',system-ui,-apple-system,sans-serif; }
/* Language switch pinned to the far RIGHT of the header (outside the content
   frame on wide screens). The header reserves room on the right so the Contact
   button (desktop) / burger (mobile) sit to its left and never collide. */
.head-in{ padding-right: calc(clamp(20px, 4.5vw, 64px) + 52px); }
.lang-switch{ position:absolute; top:50%; right:clamp(14px, 2vw, 30px); transform:translateY(-50%); z-index:3; }
.lang-cur{ display:flex; align-items:center; gap:5px; background:none; border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer; font:inherit; font-size:.74rem; font-weight:500; letter-spacing:.06em; color:var(--ink); transition:border-color .25s ease; }
.lang-cur:hover{ border-color:var(--ink); }
.lang-caret{ font-size:.58rem; color:var(--muted); }
.lang-menu{ position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px; min-width:130px; box-shadow:0 12px 32px rgba(18,18,14,.14); display:none; z-index:80; }
.lang-switch.open .lang-menu{ display:block; }
.lang-opt{ display:block; width:100%; text-align:left; background:none; border:0; border-radius:7px; padding:9px 11px; cursor:pointer; font:inherit; font-size:.84rem; color:var(--ink); }
.lang-opt:hover{ background:rgba(18,18,14,.05); }
.lang-opt.on{ font-weight:600; }

/* "What we do" two-line label: 一期一会 / Ichigo ichie (いちごいちえ) */
.wwd-eye{ align-items:center; }
.wwd-eye-lines{ display:flex; flex-direction:column; gap:2px; }
.wwd-eye-top{ font-family:'Noto Sans JP','Noto Sans',sans-serif; text-transform:none; letter-spacing:.1em; font-size:1.3em; line-height:1.25; color:var(--muted); }
.wwd-eye-sub{ font-size:1em; line-height:1.4; }

/* hero video: never show native iOS controls / play-button overlay */
.hero-vid::-webkit-media-controls-start-playback-button,
.hero-vid::-webkit-media-controls-play-button,
.hero-vid::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.hero-vid::-webkit-media-controls-overlay-play-button { display: none !important; }

/* ═══════════ SHAPE YOUR JOURNEY — Stage 1 (two doors + island map) ═══════════
   Everything here is prefixed .jd- (the two doors) or .jr- (the map) so it
   never touches existing styles. Logic: assets/journey.js · data: journey-map.js */
:root{ --jr-sea:#12120E; --jr-ivory:#F3EDE0; --jr-ivory-2:rgba(243,237,224,.62); --jr-ivory-3:rgba(243,237,224,.22); }

/* — the two doors — */
.jd-card{ position:relative; width:100%; max-width:960px; max-height:92vh; max-height:92svh; overflow-y:auto; background:var(--bg); border-radius:14px; padding:34px 34px 30px; }
@media (max-width:640px){ .jd-card{ max-height:100%; border-radius:0; padding:22px 18px 26px; } }
.jd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:26px; }
.jd-head h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:200; margin-top:8px; }
.jd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .jd-grid{ grid-template-columns:1fr; gap:14px; } }
.jd-door{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; min-height:330px; padding:72px 30px 30px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; cursor:pointer; overflow:hidden; font-family:var(--sans); transition:border-color .4s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.jd-door:hover{ border-color:rgba(18,18,14,.4); transform:translateY(-2px); }
.jd-door:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.jd-num{ position:absolute; top:26px; left:30px; font-size:.72rem; letter-spacing:.3em; color:var(--muted); }
.jd-t{ font-size:clamp(1.45rem,2.1vw,1.9rem); font-weight:200; letter-spacing:-.015em; line-height:1.15; position:relative; z-index:1; }
.jd-p{ font-size:.9rem; line-height:1.7; color:rgba(18,18,14,.62); max-width:34ch; position:relative; z-index:1; }
.jd-go{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; margin-top:6px; position:relative; z-index:1; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.jd-go svg{ width:14px; height:14px; }
.jd-door:hover .jd-go{ transform:rotate(45deg); }
.jd-door.dark{ background:var(--jr-sea); border-color:var(--jr-sea); color:var(--jr-ivory); }
.jd-door.dark .jd-num{ color:var(--jr-ivory-2); }
.jd-door.dark .jd-p{ color:var(--jr-ivory-2); }
.jd-door.dark .jd-go{ background:var(--jr-ivory); color:var(--ink); }
.jd-isle{ position:absolute; right:-6%; top:6%; height:94%; width:auto; opacity:.95; pointer-events:none; }
@media (max-width:760px){ .jd-door{ min-height:210px; padding:58px 24px 24px; } .jd-num{ top:20px; left:24px; } .jd-isle{ right:-4%; top:4%; height:92%; } .jd-door.dark .jd-p{ max-width:22ch; } }

/* — the map overlay — */
.jr-map{ position:fixed; inset:0; z-index:110; display:none; flex-direction:column; background:var(--jr-sea); color:var(--jr-ivory); font-family:var(--sans); }
.jr-map.open{ display:flex; animation:jrIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes jrIn{ from{ opacity:0; } to{ opacity:1; } }
.jr-map::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 62% 45%, rgba(243,237,224,.045), rgba(243,237,224,0) 70%); }
.jr-top{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 28px; }
.jr-top .eyebrow{ color:var(--jr-ivory-2); }
.jr-ghost{ border:0; background:none; color:var(--jr-ivory-2); font:inherit; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; padding:8px 0; }
.jr-ghost:hover, .jr-ghost:focus-visible{ color:var(--jr-ivory); }
.jr-x{ border:0; background:none; width:40px; height:40px; border-radius:50%; color:var(--jr-ivory-2); cursor:pointer; display:grid; place-items:center; }
.jr-x:hover, .jr-x:focus-visible{ background:rgba(243,237,224,.08); color:var(--jr-ivory); }
.jr-body{ position:relative; z-index:1; flex:1; min-height:0; display:grid; grid-template-columns:minmax(330px,430px) 1fr; grid-template-areas:"panel map"; gap:0 32px; padding:0 28px; }
.jr-mapcol{ grid-area:map; display:flex; flex-direction:column; min-height:0; }
.jr-stage{ position:relative; flex:1; min-height:0; }
.jr-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.jr-panel{ grid-area:panel; overflow-y:auto; padding:6px 4px 30px 0; display:flex; flex-direction:column; gap:30px; }
.jr-panel h2{ font-size:clamp(1.7rem,2.6vw,2.6rem); font-weight:200; line-height:1.15; letter-spacing:-.02em; margin:0; max-width:14ch; }
.jr-sec{ display:grid; gap:14px; }
.jr-lab{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--jr-ivory-2); }
.jr-hint{ font-size:.82rem; font-weight:300; color:rgba(243,237,224,.48); margin:-6px 0 0; }
.jr-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.jr-chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--jr-ivory-3); background:transparent; color:rgba(243,237,224,.8); border-radius:999px; padding:9px 16px; font:inherit; font-size:.86rem; font-weight:300; cursor:pointer; transition:background .45s ease, color .45s ease, border-color .45s ease; }
.jr-chip:hover{ border-color:rgba(243,237,224,.5); color:var(--jr-ivory); }
.jr-chip:focus-visible{ outline:1px solid var(--jr-ivory); outline-offset:3px; }
.jr-chip[aria-pressed="true"]{ background:var(--jr-ivory); color:var(--ink); border-color:var(--jr-ivory); }
.jr-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--c, var(--jr-ivory)); box-shadow:0 0 10px 1px var(--c, transparent); flex:none; }
.jr-under{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0 4px; position:relative; }
.jr-open{ border:1px solid var(--jr-ivory-3); background:transparent; color:rgba(243,237,224,.8); border-radius:999px; padding:10px 22px; font:inherit; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:all .45s ease; }
.jr-open:hover{ border-color:rgba(243,237,224,.55); color:var(--jr-ivory); }
.jr-open:focus-visible{ outline:1px solid var(--jr-ivory); outline-offset:3px; }
.jr-open[aria-pressed="true"]{ background:var(--jr-ivory); color:var(--ink); border-color:var(--jr-ivory); }
.jr-credit{ position:absolute; right:0; bottom:6px; font-size:.62rem; letter-spacing:.06em; color:rgba(243,237,224,.32); text-decoration:none; }
.jr-credit:hover{ color:var(--jr-ivory-2); }
.jr-foot{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid rgba(243,237,224,.1); }
.jr-sum{ font-size:.8rem; font-weight:300; letter-spacing:.06em; color:var(--jr-ivory-2); margin:0; }
.jr-foot .pill-btn{ white-space:nowrap; }

/* map label + Flavours line (HTML over the SVG, so they stay legible on phones) */
.jr-label{ position:absolute; left:0; top:0; transform:translate(-50%,-140%); pointer-events:none; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400; color:var(--jr-ivory); white-space:nowrap; opacity:0; transition:opacity .5s ease; text-shadow:0 0 14px rgba(18,18,14,.9); }
.jr-label.on{ opacity:1; }
.jr-flav{ position:absolute; left:0; right:0; bottom:1%; text-align:center; margin:0; font-size:.86rem; font-weight:200; letter-spacing:.04em; color:#F4E3B8; opacity:0; transform:translateY(6px); transition:opacity 1.4s ease, transform 1.4s ease; pointer-events:none; }
.jr-flav.on{ opacity:.92; transform:none; }

/* SVG layers */
.jr-svg .isle{ fill:var(--jr-ivory); fill-opacity:.11; }
.jr-svg .coast{ fill:none; stroke:var(--jr-ivory); stroke-opacity:.5; stroke-width:.9; vector-effect:non-scaling-stroke; }
.jr-svg .shim{ fill:none; stroke:var(--jr-ivory); stroke-linejoin:round; }
.jr-svg .shim.s1{ stroke-width:7;  stroke-opacity:.05; animation:jrShim 9s ease-in-out infinite; }
.jr-svg .shim.s2{ stroke-width:18; stroke-opacity:.03; animation:jrShim 11s ease-in-out -3s infinite; }
.jr-svg .shim.s3{ stroke-width:34; stroke-opacity:.018; animation:jrShim 13s ease-in-out -6s infinite; }
.jr-svg .glint{ fill:none; stroke:#F7EBCB; stroke-width:1.3; stroke-linecap:round; stroke-dasharray:.5 11; stroke-opacity:.42; animation:jrGlint 90s linear infinite; }
.jr-svg .sheen{ animation:jrSheen 38s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes jrShim{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes jrGlint{ to{ stroke-dashoffset:-460; } }
@keyframes jrSheen{ from{ transform:translate(-6%,-4%); } to{ transform:translate(6%,5%); } }
.jr-svg .glow{ opacity:0; transition:opacity 1.9s ease; }
.jr-svg .glow.on{ opacity:1; }
.jr-svg .glow circle{ mix-blend-mode:screen; transform-box:fill-box; transform-origin:center; animation:jrBreathe 8s ease-in-out infinite; }
.jr-svg .glow circle:nth-child(2n){ animation-delay:-3s; }
.jr-svg .glow circle:nth-child(3n){ animation-delay:-5.5s; }
@keyframes jrBreathe{ 0%,100%{ transform:scale(1); opacity:.86; } 50%{ transform:scale(1.07); opacity:1; } }
.jr-svg .spark{ opacity:0; transition:opacity 1.6s ease; }
.jr-svg .spark.on{ opacity:1; }
.jr-svg .spark circle{ fill:#F4E3B8; opacity:0; animation:jrTwinkle 6s ease-in-out infinite; }
@keyframes jrTwinkle{ 0%,100%{ opacity:0; } 45%,55%{ opacity:.95; } }
.jr-svg .av{ fill:var(--jr-ivory); opacity:0; transition:opacity .6s ease; }
.jr-svg .av.hov{ opacity:.08; }
.jr-svg .av.sel{ opacity:.15; }
.jr-svg .av.sel.hov{ opacity:.19; }
.jr-svg .hit{ fill:transparent; cursor:pointer; outline:none; }
.jr-svg .park .pd{ fill:var(--jr-ivory); opacity:0; transition:opacity .6s ease; }
.jr-svg .park .pr{ fill:url(#jrParkGlow); opacity:0; transition:opacity .9s ease; }
.jr-svg .park.hov .pd{ opacity:.55; }
.jr-svg .park.sel .pd{ opacity:.95; }
.jr-svg .park.sel .pr{ opacity:1; }
.jr-svg .park .ph{ fill:transparent; cursor:pointer; }
.jr-svg [role="button"]{ outline:none; }

/* mobile: map on top (sticky), choices scroll beneath it */
@media (max-width:860px){
  .jr-top{ padding:10px 14px; }
  .jr-top .eyebrow{ font-size:.66rem; }
  .jr-body{ display:block; overflow-y:auto; padding:0 18px; -webkit-overflow-scrolling:touch; }
  .jr-mapcol{ position:sticky; top:0; z-index:2; height:min(52svh,480px); background:var(--jr-sea); padding-bottom:6px; box-shadow:0 14px 20px -8px var(--jr-sea); }
  .jr-panel{ overflow:visible; padding:18px 0 26px; gap:24px; }
  .jr-panel h2{ font-size:1.5rem; max-width:none; }
  .jr-foot{ padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .jr-sum{ display:none; }
  .jr-foot .pill-btn{ width:100%; justify-content:space-between; gap:12px; padding-left:22px; font-size:.74rem; letter-spacing:.1em; }
  .jr-foot .pill-btn > span:first-child{ white-space:normal; text-align:left; line-height:1.4; }
  .jr-open{ white-space:nowrap; font-size:.68rem; letter-spacing:.16em; padding:10px 18px; }
  .jr-credit{ position:static; white-space:nowrap; font-size:.58rem; }
  .jr-under{ justify-content:space-between; }
}

/* reduced motion: no shimmer, breathing, twinkle or drifting — still beautiful, just still */
@media (prefers-reduced-motion: reduce){
  .jr-map.open{ animation:none; }
  .jr-svg .shim, .jr-svg .glint, .jr-svg .sheen, .jr-svg .glow circle{ animation:none !important; }
  .jr-svg .spark circle{ animation:none !important; opacity:.7; }
  .jr-svg .glow, .jr-svg .spark, .jr-svg .av, .jr-flav, .jr-label{ transition-duration:.01s; }
  .jd-door, .jd-go{ transition:none; }
}
/* Japanese: break lines at natural phrase boundaries */
html:lang(ja) .jd-head h3, html:lang(ja) .jd-t, html:lang(ja) .jd-p, html:lang(ja) .jr-panel h2, html:lang(ja) .jr-hint, html:lang(ja) .jr-flav{ word-break:auto-phrase; text-wrap:balance; }
/* only animate what is visible (lighter on phones) */
.jr-svg .glow:not(.on) circle, .jr-svg .spark:not(.on) circle{ animation-play-state:paused; }

/* honeypot fields (anti-spam): off-screen for people, still "visible" to bots */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════ SHAPE YOUR JOURNEY — Stage 2 (options + indicative range) ═══════════ */
.jr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jr-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--jr-ivory-3); border-radius: 12px; padding: 10px 10px 10px 16px; }
.jr-opt-l { font-size: .82rem; font-weight: 300; color: rgba(243,237,224,.82); letter-spacing: .02em; }
.jr-step { display: flex; align-items: center; gap: 4px; }
.jr-sbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--jr-ivory-3); background: transparent; color: var(--jr-ivory); font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: border-color .3s ease, opacity .3s ease; }
.jr-sbtn:hover { border-color: rgba(243,237,224,.6); }
.jr-sbtn:focus-visible { outline: 1px solid var(--jr-ivory); outline-offset: 2px; }
.jr-sbtn:disabled { opacity: .25; cursor: default; }
.jr-sval { min-width: 2.2ch; text-align: center; font-size: 1.15rem; font-weight: 200; color: var(--jr-ivory); }
.jr-style { display: grid; gap: 10px; }
.jr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; --p: 33.333%; }
.jr-range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--jr-ivory) var(--p), rgba(243,237,224,.25) var(--p)); }
.jr-range::-moz-range-track { height: 1px; background: rgba(243,237,224,.25); }
.jr-range::-moz-range-progress { height: 1px; background: var(--jr-ivory); }
.jr-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--jr-ivory); border: 0; box-shadow: 0 0 0 6px rgba(243,237,224,.08); transition: box-shadow .3s ease; }
.jr-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--jr-ivory); border: 0; }
.jr-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(243,237,224,.22); }
.jr-range:focus-visible { outline: none; }
.jr-ticks { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .72rem; font-weight: 300; color: rgba(243,237,224,.42); letter-spacing: .03em; }
.jr-ticks span { cursor: pointer; transition: color .4s ease; }
.jr-ticks span:nth-child(2) { text-align: center; transform: translateX(-16%); }
.jr-ticks span:nth-child(3) { text-align: center; transform: translateX(16%); }
.jr-ticks span:last-child { text-align: right; }
.jr-ticks span.on { color: var(--jr-ivory); }
.jr-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(243,237,224,.1); }
.jr-note { margin: 4px 0 0; font-size: .74rem; font-weight: 300; line-height: 1.55; color: rgba(243,237,224,.45); max-width: 34ch; }
.jr-switch { display: inline-flex; align-items: center; gap: 10px; flex: none; border: 0; background: none; color: rgba(243,237,224,.8); font: inherit; font-size: .78rem; font-weight: 300; cursor: pointer; padding: 4px 0; text-align: left; max-width: 46%; }
.jr-switch .jr-knob { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; border: 1px solid var(--jr-ivory-3); transition: background .35s ease, border-color .35s ease; }
.jr-switch .jr-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(243,237,224,.7); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease; }
.jr-switch[aria-checked="true"] .jr-knob { background: var(--jr-ivory); border-color: var(--jr-ivory); }
.jr-switch[aria-checked="true"] .jr-knob::after { transform: translateX(16px); background: var(--ink); }
.jr-switch:focus-visible { outline: 1px solid var(--jr-ivory); outline-offset: 4px; border-radius: 6px; }

.jr-est { padding: 22px 22px 18px; border: 1px solid rgba(243,237,224,.14); border-radius: 14px; background: linear-gradient(180deg, rgba(243,237,224,.045), rgba(243,237,224,0)); }
.jr-for { margin: 0; font-size: .78rem; font-weight: 300; color: rgba(243,237,224,.55); letter-spacing: .03em; }
.jr-total { margin: 2px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 200; letter-spacing: -.01em; line-height: 1.15; color: var(--jr-ivory); font-variant-numeric: lining-nums; }
.jr-incl { margin: 0; font-size: .8rem; font-weight: 300; line-height: 1.6; color: rgba(243,237,224,.72); }
.jr-disc { margin: 0; font-size: .72rem; font-weight: 300; line-height: 1.6; color: rgba(243,237,224,.42); }
.jr-bd > summary { cursor: pointer; list-style: none; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,224,.7); display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.jr-bd > summary::-webkit-details-marker { display: none; }
.jr-bd > summary::after { content: '+'; font-size: .95rem; letter-spacing: 0; color: rgba(243,237,224,.5); }
.jr-bd[open] > summary::after { content: '\2013'; }
.jr-bd > summary:focus-visible { outline: 1px solid var(--jr-ivory); outline-offset: 4px; border-radius: 4px; }
.jr-bdl { margin: 10px 0 0; display: grid; gap: 0; }
.jr-bdl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(243,237,224,.08); font-size: .82rem; font-weight: 300; }
.jr-bdl dt { color: rgba(243,237,224,.6); }
.jr-bdl dd { margin: 0; color: var(--jr-ivory); text-align: right; font-variant-numeric: tabular-nums; }
/* figures change with a soft fade, never a counting animation */
.jr-for, .jr-total, .jr-sum, .jr-bdl dd { transition: opacity .2s ease; }
.jr-swap { opacity: 0; }
.jr-sum { font-size: .95rem; font-weight: 200; letter-spacing: .02em; color: var(--jr-ivory); }
@media (max-width: 860px) {
  .jr-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .jr-sum { display: block; text-align: center; font-size: .9rem; }
  .jr-opts { grid-template-columns: 1fr; }
  .jr-switch { max-width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-for, .jr-total, .jr-sum, .jr-bdl dd, .jr-switch .jr-knob, .jr-switch .jr-knob::after, .jr-ticks span { transition: none; }
}

/* enquiry form: the map's indicative range (Stage 2 hand-off) */
.est-block { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: #fff; }
.est-block .est-range { margin: 2px 0 6px; font-size: 1.35rem; font-weight: 200; letter-spacing: -.01em; color: var(--ink); }

/* Shape your journey — language + currency switches (segmented, ivory on dark) */
.jr-tools { display: flex; align-items: center; gap: 10px; }
.jr-seg { display: inline-flex; border: 1px solid var(--jr-ivory-3); border-radius: 999px; padding: 2px; }
.jr-seg-b { border: 0; background: transparent; color: rgba(243,237,224,.62); font: inherit; font-size: .7rem; letter-spacing: .12em; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: background .35s ease, color .35s ease; }
.jr-seg-b:hover { color: var(--jr-ivory); }
.jr-seg-b[aria-pressed="true"] { background: var(--jr-ivory); color: var(--ink); }
.jr-seg-b:focus-visible { outline: 1px solid var(--jr-ivory); outline-offset: 2px; }
.jr-seg-b[lang="ja"] { letter-spacing: .04em; }
.jr-est-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .jr-top .eyebrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .jr-seg-b { transition: none; } }
.jr-total.is-long { font-size: clamp(1.45rem, 2.1vw, 1.85rem); }