/* Property Media Japan: shared layer loaded after each page's own styles.
   Holds the site-wide fixes so they live in one place. */

/* Text colours tuned to pass WCAG AA (4.5:1) on ink, charcoal and steel */
:root {
  --stone: #9a968e;
  --mid: #8f8b84;
  --gold-dim: #a8874f;
}

/* Images keep their real proportions unless a component sets a ratio */
img { height: auto; }
img, video { max-width: 100%; }

/* Visually hidden text for screen readers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard focus */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:focus-visible, .nav-cta:focus-visible { outline-offset: 4px; }

/* Content stays visible if scripts fail; reveal only runs when JS is on */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-video-wrap video { display: none; }
}

/* ---------- Navigation ----------
   backdrop-filter on the bar made it the containing block for the fixed
   mobile menu, so the menu shrank to the bar's height. Removed here. */
nav, nav.scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
nav.scrolled { background: rgba(13, 12, 10, 0.97); }
.nav-logo { position: relative; z-index: 102; }
.nav-logo span { font-size: 0.62rem; }
.nav-links a { font-size: 0.72rem; }
.nav-cta { font-size: 0.7rem; }

.nav-toggle {
  -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0 -10px 0 0;
  width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  position: relative; z-index: 102; cursor: pointer; color: var(--cream);
}
.nav-toggle span { width: 24px; height: 1.5px; background: var(--cream); transition: transform 0.3s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
  nav { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .nav-links.open {
    position: fixed; inset: 0; height: 100vh; height: 100dvh; width: 100%;
    background: var(--ink); z-index: 101; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; padding: 6rem 1.5rem 3rem; margin: 0;
  }
  .nav-links.open li { list-style: none; }
  .nav-links.open a { display: inline-block; font-size: 0.95rem; letter-spacing: 0.2em; color: var(--cream); padding: 0.85rem 1rem; }
  .nav-links.open a::after { display: none; }
  .nav-links.open .nav-cta-mobile { display: block; margin-top: 1.2rem; }
  .nav-links.open .nav-cta-mobile a { background: var(--gold); color: var(--ink); padding: 1rem 2.6rem; }
  body.nav-open { overflow: hidden; }
  body.nav-open .sticky-cta { display: none !important; }
}

/* ---------- Legible small labels (were 8 to 10px) ---------- */
.section-label, .hero-label, .page-hero-label, .project-hero-label, .project-card-tag,
.project-meta-label, .page-hero-meta-label, .page-hero-stat-label, .project-detail-label,
.contact-detail-label, .contact-brands-label, .contact-related-label, .about-credential-label,
.advantages-stat-label, .gallery-item-label, .hotel-tag, .package-size, .package-price,
.pricing-row-value, .service-card-detail, .video-type-detail, .timeline-time span,
.ba-label, .ba-hint, .gallery-figure figcaption, .video-facade-label, .hero-scroll,
.package-card.featured::before, .project-intro-left .back-link, .project-card-link,
.service-card-link, .sticky-cta, .footer-legal, .footer-links a, .btn {
  font-size: max(0.72rem, 11.5px) !important;
}
.footer-legal span { font-size: max(0.68rem, 11px) !important; }

/* ---------- Comfortable tap targets ---------- */
.footer-links a, .project-intro-left .back-link, .service-card-link, .project-card-link,
.contact-detail-value a, .contact-related a, .contact-brands a {
  display: inline-block; padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.footer-links { row-gap: 0.2rem; }

/* ---------- Image proportions on phones and tablets ----------
   Portrait crops of landscape photos become landscape once the layout
   stacks, so photos are never tall and narrow. */
@media (max-width: 1024px) {
  .hotel-image-main, .advantages-image-wrap img, img.intro-image, .intro-image-wrap img,
  .about-image-wrap img, .turnaround-image img, .why-video-image-wrap img {
    aspect-ratio: 3 / 2 !important; height: auto !important;
  }
  .advantages-image-wrap, .hotel-image-wrap, .about-image-wrap, .turnaround-image { max-width: none !important; }
}
@media (max-width: 768px) {
  .advantages-image-wrap::before, .why-video-image-wrap::after, .about-image-wrap::before, .about-image-wrap::after { display: none !important; }
  .advantages-stat { position: static !important; margin-top: 0 !important; width: 100% !important; }
  .gallery-item.tall img { aspect-ratio: 4 / 5; }
  .gallery-masonry { column-count: 1 !important; }
  .gallery-full { aspect-ratio: 3 / 2 !important; }
  /* Project galleries: a row of three becomes one wide image and two halves, no empty cells */
  .project-gallery .gallery-grid { grid-template-columns: 1fr 1fr !important; }
  .project-gallery .gallery-grid > .gallery-item:first-child { grid-column: 1 / -1; }
  .project-gallery .gallery-grid-2 { grid-template-columns: 1fr !important; }
  .project-hero-bg::after { background: linear-gradient(to bottom, rgba(13,12,10,0.35) 0%, rgba(13,12,10,0.25) 35%, rgba(13,12,10,0.9) 100%) !important; }
  /* Contact rows stack so long labels never collide with values */
  .contact-detail { flex-direction: column; gap: 0.15rem !important; align-items: flex-start !important; }
  .contact-detail-label { min-width: 0 !important; }
}

/* ---------- Floorplan thumbnails show the whole plan ---------- */
.fp-grid-item.fp-plan img { object-fit: contain; background: #f8f5f0; filter: none; padding: 0.6rem; }
.fp-grid-item.fp-plan:hover img { transform: none; filter: none; }
.fp-grid-caption { font-size: 0.85rem; color: var(--stone); margin: -1.5rem 0 1.6rem; max-width: 70ch; }
.fp-grid-caption a, .why-video-caption a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Click to play video ---------- */
.video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; cursor: pointer; background: var(--charcoal); overflow: hidden; color: inherit; font: inherit; }
.video-facade img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; filter: brightness(0.75); transition: filter 0.3s; }
.video-facade:hover img, .video-facade:focus-visible img { filter: brightness(0.6); }
.video-facade-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(13,12,10,0.55); }
.video-facade-play::after { content: ''; position: absolute; left: 31px; top: 25px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--gold); }
.video-facade-label { position: absolute; left: 0; right: 0; bottom: 1.2rem; text-align: center; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); }
.video-wrap iframe, .why-video-sample iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.why-video-sample::after { display: none !important; }
.why-video-caption { font-size: 0.82rem; color: var(--stone); margin-top: 1rem; line-height: 1.7; }

/* ---------- FAQ blocks ---------- */
.pm-faq { padding: var(--section-pad); background: var(--charcoal); }
.pm-faq-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: start; max-width: var(--max-w); margin: 0 auto; }
.pm-faq-intro { font-size: 0.9rem; color: var(--stone); line-height: 1.8; margin-top: 1.4rem; max-width: 40ch; }
.pm-faq .faq-item { border-bottom: 1px solid var(--steel); }
.pm-faq .faq-item:first-child { border-top: 1px solid var(--steel); }
.pm-faq .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--warm-white); font-family: var(--font-display); font-size: 1.25rem; font-weight: 300; line-height: 1.3; }
.pm-faq .faq-question:hover { color: var(--gold-light); }
.pm-faq .faq-icon { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
.pm-faq .faq-icon::before, .pm-faq .faq-icon::after { content: ''; position: absolute; background: var(--gold); left: 50%; top: 50%; transition: transform 0.3s, opacity 0.3s; }
.pm-faq .faq-icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.pm-faq .faq-icon::after { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.pm-faq .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.pm-faq .faq-answer { display: none; padding: 0 0 1.5rem; }
.pm-faq .faq-item.open .faq-answer { display: block; }
html:not(.js) .pm-faq .faq-answer { display: block; }
.pm-faq .faq-answer p { font-size: 0.9rem; color: var(--stone); line-height: 1.85; max-width: 62ch; }
@media (max-width: 900px) { .pm-faq-inner { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (max-width: 768px) { .pm-faq { padding: 5rem 1.5rem; } .pm-faq .faq-question { font-size: 1.1rem; } }


/* Sticky quote bar hides while the contact form is visible */
.sticky-cta.is-hidden { display: none !important; }

/* Before and after slider works with touch drag without scrolling the page sideways */
[data-slider] { touch-action: pan-y; }
.ba-slider-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Logo is a comfortable tap target and its tagline stays legible */
.nav-logo { display: block; padding: 0.35rem 0; }
.nav-logo span { font-size: max(0.7rem, 11px) !important; }

/* Floorplans are never cropped: show the whole drawing on paper white */
img[src*="/images/floorplans/"] { object-fit: contain !important; background: #f8f5f0; }

/* Labels and copy that sit on photos stay readable */
.hero-label, .page-hero-label, .project-hero-label, .hero-sub, .page-hero-sub, .project-meta-label,
.page-hero-meta-label, .hero-headline, .project-hero h1, .page-hero h1 { text-shadow: 0 1px 12px rgba(13, 12, 10, 0.55); }
.why-video-stat-num, .page-hero-stat-num, .stat-num { white-space: nowrap; }

/* Inline caption links get a taller hit area */
.why-video-caption a, .fp-grid-caption a { display: inline-block; padding: 0.55rem 0; }
/* Portfolio card overlay label */
.project-card-overlay span { font-size: max(0.72rem, 11.5px) !important; }
/* Wide + tall pair: the landscape is 3:2 so its height matches a 3:4 portrait and nothing is cropped narrow */
.project-gallery .gallery-grid-2 > .gallery-item:not(.tall) img { aspect-ratio: 3 / 2; }
.project-gallery .gallery-grid-2 > .gallery-item.tall img { aspect-ratio: 3 / 4; }

/* Section lead image on sectioned project galleries (hotel pages) */
.project-gallery .gallery-full.gallery-lead { aspect-ratio: 16 / 9; }
.project-gallery .gallery-heading h2 em { font-style: italic; color: var(--gold); }
@media (max-width: 768px) { .project-gallery .gallery-heading { padding: 2.5rem 1.25rem 1rem; } }

/* Homepage hotel section: tag above the photo, project links visible */
.hotel-tag { z-index: 2; }
.hotel-recent a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hotel-recent a:hover, .hotel-recent a:focus-visible { color: var(--cream); }

/* Project hero photo is a real responsive image (faster on phones) */
.project-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }

/* Intro copy under the hero headings is lighter so it reads over photos */
.hero-sub, .page-hero-sub { color: #d6d1c8 !important; }

/* Project hero on phones: photo at its real 3:2 shape, title below it */
@media (max-width: 768px) {
  .project-hero { display: block !important; height: auto !important; min-height: 0 !important; padding-top: 0; }
  .project-hero-bg { position: relative !important; inset: auto !important; aspect-ratio: 3 / 2; margin-top: 64px; }
  .project-hero-bg::after { background: linear-gradient(to bottom, rgba(13,12,10,0) 55%, rgba(13,12,10,0.6) 100%) !important; }
  .project-hero-content { padding: 1.8rem 1.5rem 2.6rem !important; }
  .project-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem) !important; }
}
/* Decorative card and step numbers come from data-n (not read out, not text content) */
[data-n]::before { content: attr(data-n); }

/* ================= Audit pass 2: legibility and layout ================= */
/* Home hero: eyebrow readable over the sky, text side of the photo darker, outline button on a backdrop */
.hero-label { color: var(--gold-light) !important; }
.hero-label::before { background: var(--gold-light) !important; }
.hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(13,12,10,0.6) 0%, rgba(13,12,10,0.28) 45%, rgba(13,12,10,0) 72%); }
.hero .btn:not(.btn-solid) { background: rgba(13,12,10,0.4); }
@media (max-width: 768px) { .hero-bg::after { background: linear-gradient(to bottom, rgba(13,12,10,0.15) 0%, rgba(13,12,10,0.5) 100%); } }

/* Project hero: label and meta labels readable over busy photos */
.project-hero-label { color: var(--gold-light) !important; }
.project-hero-label::before { background: var(--gold-light) !important; }
.project-meta-label { color: var(--gold-light) !important; }
@media (min-width: 769px) {
  .project-hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(13,12,10,0.6) 0%, rgba(13,12,10,0.25) 45%, rgba(13,12,10,0) 70%); }
}

/* Service page heroes: the photo on the right is visible, fading into the text side */
.page-hero:not(.page-hero-plan)::after { opacity: 0.5 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); }
.page-hero-intro { color: #d6d1c8 !important; text-shadow: 0 1px 12px rgba(13,12,10,0.6); }

/* Headings: forced line breaks only on wide screens */
@media (max-width: 600px) { .section-title br, .page-hero h1 br { display: none; } }

/* Back link keeps its dash beside the text */
.project-intro-left .back-link { display: inline-flex !important; align-items: center; gap: 0.7rem; }

/* Project pages on tablet and phone: the story first, then the details */
@media (max-width: 1024px) { .project-intro-right { order: -1; } }

/* Only real floorplans sit on paper white; CGI renders fill their frame */
img[src*="/images/floorplans/3d-cgi"], img[src*="/images/floorplans/virtual-staging"] { object-fit: cover !important; background: none !important; }

/* Before and after hint sits clear of the handle */
.ba-hint { top: 1rem !important; transform: translateX(-50%) !important; }

/* Floorplan examples: an even grid with no empty cells, readable on phones */
.fp-grid { grid-template-columns: repeat(3, 1fr) !important; }
.fp-grid-item:first-child { grid-column: auto !important; }
.fp-grid-item:first-child img { aspect-ratio: 4 / 3 !important; }
@media (max-width: 1024px) { .fp-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .fp-grid { grid-template-columns: 1fr !important; } }

/* Package buttons never wrap onto three lines */
@media (max-width: 600px) {
  .package-card { padding: 2.4rem 1.6rem !important; }
  .package-card .btn { display: block; width: 100%; text-align: center; padding-left: 0.8rem; padding-right: 0.8rem; letter-spacing: 0.16em; }
}

/* Pricing rows stack on phones */
@media (max-width: 600px) {
  .pricing-row { grid-template-columns: 1fr !important; gap: 0.4rem !important; }
}

/* Recent work on the photography page: an even grid of real 3:2 photos, every tile links to its project */
.gallery-masonry { columns: auto !important; column-count: auto !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.gallery-masonry-item { margin: 0 !important; display: block; overflow: hidden; }
.gallery-masonry-item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@media (max-width: 1024px) { .gallery-masonry { grid-template-columns: 1fr 1fr; } .gallery-masonry-item:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .gallery-masonry { grid-template-columns: 1fr; } }
/* Links inside project write-ups: visible and easy to tap */
.project-intro-right p a { display: inline-block; padding: 0.55rem 0; color: var(--gold-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Why us hero: intro copy overlaps the photo, so the photo sits further back */
.page-hero:has(.page-hero-right)::after { opacity: 0.3 !important; }

/* Footer credit */
.footer-credit { display: inline-block; margin-top: 0.15rem; }
.footer-credit a { display: inline-block; padding: 0.45rem 0; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--gold-light, var(--stone)); }