@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500&display=swap");

/*
Theme Name: HOUSE EN Theme
Theme URI: https://house-en.com
Author: HOUSE EN Dev Team
Description: Custom WordPress theme for HOUSE EN with semantic CSS architecture.
Version: 2.1.2
*/

/* ==========================================================================
   0. Reset CSS (Tailwind Preflight Equivalent)
   ========================================================================== */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: theme("fontFamily.sans",
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Noto Sans",
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   1. Variables & Utilities
   ========================================================================== */

:root {
  /* Colors */
  --color-bg-base: #1a1a1a;
  --color-bg-dark: #111111;
  --color-bg-black: #000000;
  --color-text-white: #ffffff;
  --color-text-black: #000000;
  --color-text-gray-300: #d1d5db;
  --color-text-gray-400: #9ca3af;
  --color-text-gray-500: #6b7280;

  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-medium: rgba(255, 255, 255, 0.2);
  --color-border-white-5: rgba(255, 255, 255, 0.05);

  /* Fonts */
  --font-primary: "Antonio", sans-serif;
  /* beckman */
  --font-secondary: "Noto Sans JP", sans-serif;
  /* noto */

  /* Spacing & Layout */
  --header-height: 80px;
  /* Approximate */
}

/* Utility: Visibility */
.u-hidden {
  display: none;
}

.u-block {
  display: block;
}

@media (min-width: 768px) {
  .u-md-block {
    display: block;
  }

  .u-md-hidden {
    display: none;
  }

  .u-md-flex {
    display: flex;
  }
}

.c-heading-jp {
  font-weight: 400;
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--color-text-white);
  line-height: 1.8;
  margin: 1.5rem 0 1.5rem;
}

@media (min-width: 768px) {
  .c-heading-jp {
    font-size: 1.6rem;
    line-height: 2;
  }
}

/* Utility: Hero Title (Standardized H1) */
.c-hero-title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl equivalent approximately */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  color: #ffffff;
}

@media (min-width: 768px) {
  .c-hero-title {
    font-size: 6rem;
    /* text-8xl equivalent approximately */
  }
}

/* Utility: Image Fit */
.u-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-img-gray {
  filter: grayscale(100%);
  transition: filter 0.7s ease, transform 0.7s ease;
}

/* Utility: Text */
.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-text-justify {
  text-align: justify;
}

/* Filter Utility for Maps */
.map-dark-mode {
  filter: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   2. Base Styles
   ========================================================================== */

body.l-body {
  background-color: var(--color-bg-base);
  color: var(--color-text-white);
  font-family: var(--font-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.l-body--light {
  background-color: #f5f5f5;
  color: #333333;
}

body.l-body--neutral {
  background-color: #e5e5e5;
  color: #1a1a1a;
}

body.l-body--dark {
  background-color: #111111;
  color: white;
}

::selection {
  background-color: var(--color-text-white);
  color: var(--color-text-black);
}

/* Global Backgrounds */
.l-global-bg {
  position: fixed;
  inset: 0;
  /* top:0, right:0, bottom:0, left:0 */
  z-index: 0;
  pointer-events: none;
}

.l-global-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.l-global-bg__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.l-noise-texture {
  position: fixed;
  inset: 0;
  z-index: 1;
  /* z-[1] */
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-repeat: repeat;
}

/* ==========================================================================
   3. Layout: Header & Footer
   ========================================================================== */

/* Header */
.l-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  padding: 1rem 1.5rem;
  /* py-4 px-6 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: var(--color-text-white);
  transition: background-color 0.3s ease;
}

.l-header__logo {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
  /* font-bold */
  letter-spacing: 0.2em;
  /* tracking-widest */
  position: relative;
  z-index: 50;
  display: block;
}

.l-header__nav {
  display: none;
  /* hidden */
}

@media (min-width: 768px) {
  .l-header__nav {
    display: flex;
    gap: 2rem;
    /* gap-8 */
    align-items: center;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    letter-spacing: 0.2em;
    /* tracking-widest */
  }
}

.l-header__link {
  transition: opacity 0.3s;
}

.l-header__link:hover {
  opacity: 0.6;
}

.l-header__link-btn {
  border: 1px solid var(--color-text-white);
  padding: 0.5rem 1.5rem;
  /* px-6 py-2 */
  font-weight: 700;
  transition: background-color 0.3s, color 0.3s;
}

.l-header__link-btn:hover {
  background-color: var(--color-text-white);
  color: var(--color-text-black);
}

/* Mobile Menu Button */
.l-header__menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  /* gap-1.5 */
  width: 2rem;
  /* w-8 */
  height: 2rem;
  /* h-8 */
  position: relative;
  z-index: 50;
}

@media (min-width: 768px) {
  .l-header__menu-btn {
    display: none;
  }
}

.l-header__menu-line {
  width: 100%;
  height: 1px;
  background-color: var(--color-text-white);
  transition: transform 0.3s;
  transform-origin: right;
}

/* Hover effects for menu lines (group-hover default behavior in CSS needs parent selector or JS) */
.l-header__menu-btn:hover .l-header__menu-line:nth-child(1),
.l-header__menu-btn:hover .l-header__menu-line:nth-child(3) {
  transform: scaleX(0.75);
}

.l-header__menu-btn:hover .l-header__menu-line:nth-child(2) {
  transform: scaleX(1);
}

/* Mobile Menu Container */
.l-mobile-menu {
  position: fixed;
  inset: 0;
  /* top:0; left:0; width:100%; height:100%; と同義 */

  /* ボタンより低い値を設定 */
  z-index: 9999;

  /* 念のため背景色を指定 */
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  /* hidden */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Fix: Global styling for hamburger button to force override */
#js-hamburger {
  /* 画面のどこにいても追従させる */
  position: fixed;
  right: 20px;
  /* 右端からの距離 */
  top: 20px;
  /* 上端からの距離 */

  /* 【最重要】メニュー本体より確実に高い値を設定 */
  z-index: 2147483647;
  /* 32bit整数の最大値に近い値で強制的に最前面へ */

  /* クリック判定を確実にする */
  cursor: pointer;
}

/* Force hide on PC */
@media (min-width: 768px) {
  #js-hamburger {
    display: none !important;
  }
}

/* Fix: White color when active (Close button state) */
#js-hamburger.is-active .l-header__menu-line {
  background-color: #ffffff !important;
  /* 強制的に白にする */
}

/* Hamburger Animation (X Shape) */
#js-hamburger.is-active .l-header__menu-line {
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s;
}

#js-hamburger.is-active .l-header__menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#js-hamburger.is-active .l-header__menu-line:nth-child(2) {
  opacity: 0;
}

#js-hamburger.is-active .l-header__menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.l-mobile-menu.is-active {
  display: flex !important;
}

.l-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* gap-8 */
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.875rem;
  /* text-3xl */
  letter-spacing: 0.2em;
}

.l-mobile-menu__link {
  transition: color 0.3s;
}

.l-mobile-menu__link:hover {
  color: var(--color-text-gray-400);
}

/* Layout Container */
.l-container {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .l-container {
    padding-left: 3rem;
    /* md:px-12 */
    padding-right: 3rem;
  }
}

.l-container--max {
  max-width: 1800px;
}

/* Footer */
.l-footer {
  background-color: var(--color-bg-black);
  padding: 3rem 0;
  border-top: 1px solid var(--color-border-light);
  position: relative;
  z-index: 10;
}

.l-footer__container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .l-footer__container {
    flex-direction: row;
    max-width: 1280px;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.l-footer__brand {
  text-align: center;
}

@media (min-width: 768px) {
  .l-footer__brand {
    text-align: left;
  }
}

.l-footer__logo {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  /* text-2xl */
  letter-spacing: 0.1em;
  /* tracking-widest */
  margin-bottom: 0.5rem;
  /* mb-2 */
  font-weight: 700;
}

.l-footer__address {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* text-xs */
  color: var(--color-text-gray-500);
}

.l-footer__social {
  display: flex;
  justify-content: center;
  /* Center on mobile */
  gap: 1.5rem;
  /* gap-6 */
  font-family: var(--font-primary);
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.1em;
  /* tracking-widest */
  color: var(--color-text-gray-400);
}

@media (min-width: 768px) {
  .l-footer__social {
    justify-content: flex-start;
    /* Left on PC */
  }
}

.l-footer__link {
  transition: color 0.3s;
}

.l-footer__link:hover {
  color: white;
}

.l-footer__copy {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  /* text-[10px] */
  color: #4b5563;
  /* text-gray-600 */
}

/* ==========================================================================
   4. Page: Company
   ========================================================================== */

/* Main Wrapper */
.p-top-main {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
}

/* Company Hero */
.p-company-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6rem;
  /* mb-24 */
}

@media (min-width: 768px) {
  .p-company-hero {
    margin-bottom: 8rem;
    /* md:mb-32 */
  }
}

.p-top-hero__bg {
  position: absolute;
  inset: 0;
}

.p-top-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-company-hero__img {
  filter: grayscale(100%);
  opacity: 0.6;
}

.p-top-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.p-top-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
}

.p-top-hero__sub {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  margin-top: 1rem;
  /* text-sm */
  letter-spacing: 0.2em;
  line-height: 2.4;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .p-top-hero__sub {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    /* md:text-base */
  }
}

/* Company Grid */
.p-company-info {
  padding: 0 1.5rem;
  /* px-6 */
  max-width: 1600px;
  margin: 0 auto 8rem;
  /* mb-32 */
}

@media (min-width: 768px) {
  .p-company-info {
    padding: 0 3rem;
    /* md:px-12 */
    margin-bottom: 12rem;
    /* md:mb-48 */
  }
}

.p-company-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* gap-16 */
}

@media (min-width: 1024px) {
  .p-company-grid {
    flex-direction: row;
    gap: 8rem;
    /* lg:gap-32 */
  }
}

.p-company-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .p-company-col {
    width: 50%;
  }
}

.p-company-section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  /* text-2xl */
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 3rem;
  /* mb-12 */
}

.p-company-intro {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  line-height: 2;
  /* leading-loose */
  text-align: justify;
  margin-bottom: 3rem;
  color: var(--color-text-gray-300);
}

.p-company-dl {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  border-top: 0.5px solid rgba(255, 255, 255, 0.2);
}

.p-company-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 0;
  /* py-4 */
  align-items: baseline;
}

.p-company-dt {
  color: var(--color-text-gray-500);
  font-weight: 300;
}

.p-company-address {
  font-family: var(--font-primary);
  letter-spacing: 0.05em;
}

/* Map */
.p-company-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background-color: #222;
}

@media (min-width: 768px) {
  .p-company-map {
    aspect-ratio: 4 / 3;
  }
}

.p-company-map__iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.p-company-map-overlay {
  display: none !important;
  position: absolute;
  inset: 0;
  /* background-color: rgba(30, 58, 138, 0.2); REMOVED */
  /* blue-900 with opacity */
  /* mix-blend-mode: overlay; REMOVED */
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Team */
.p-company-team-container {
  max-width: 1800px;
  margin-bottom: 4rem;
  /* mb-16 */
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .p-company-team-container {
    padding: 0 3rem;
  }
}

.p-company-team-title {
  font-size: 2.25rem;
  /* text-4xl */
  opacity: 0.1;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.2em;
}

@media (min-width: 768px) {
  .p-company-team-title {
    font-size: 3.75rem;
    /* text-6xl */
    text-align: left;
  }
}

.p-company-staff {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 80vh;
  /* Critical Stabilzation */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@media (min-width: 768px) {
  .p-company-staff {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-company-staff {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-staff-card {
  position: relative;
  /* Mobile: Flexbox for dynamic height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: auto;
  min-height: 500px;
  /* Use px instead of vh to prevent address bar resize jank */
  overflow: visible;
  /* Allow content to flow */
  border-right: 1px solid var(--color-border-white-5);
  border-bottom: 1px solid var(--color-border-white-5);
  /* CRITICAL FIX: Force GPU Acceleration & Static Rendering */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
  /* Disable background-attachment fixed on mobile just in case inheritance issues */
  background-attachment: scroll !important;
}

@media (min-width: 768px) {
  .p-staff-card {
    display: block;
    /* Restore PC layout */
    height: 80vh;
    overflow: hidden;
    /* Restore PC hover effect constraint */
    /* Check if we need to reset transforms for PC or keep them for smoothness? 
       Keeping GPU accel is generally fine, but 'will-change' might be overkill on PC if not needed. 
       Let's leave GPU accel enabled as it helps smoothness universally. */
  }
}

/* Remove border-right for last item or based on grid logic if needed, 
   but grid lines often look better consistent. 
   Tailwind had last:border-r-0 etc. */
.p-staff-card:last-child {
  border-right: none;
}

/* Replicating tailwind specific border logic for grid might be complex, 
   ignoring precise border removal for now as it's aesthetic detail. */

.p-staff-card__img {
  position: absolute;
  /* Background for mobile too */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  /* Mobile: No filter for better performance */
  transition: none;
  /* Mobile: No transition to prevent jank */
  /* Force visibility/opacity static */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0;
}

@media (min-width: 768px) {
  .p-staff-card__img {
    filter: grayscale(100%);
    /* PC: Grayscale default */
    transition: all 0.7s ease-out;
    will-change: auto;
    /* Reset */
  }

  .p-staff-card:hover .p-staff-card__img {
    filter: grayscale(0);
    transform: scale(1.05);
  }
}

.p-staff-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.2),
      transparent);
  opacity: 0.8;
  transition: opacity 0.3s;
  z-index: 1;
}

@media (min-width: 768px) {
  .p-staff-card:hover .p-staff-card__overlay {
    opacity: 0.6;
  }
}

.p-staff-card__info {
  /* Mobile: flow content */
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2rem 2rem 5rem 2rem;
  /* Added bottom padding for space */
  transform: none;
  /* No transform on mobile */
  transition: none;
  /* Mobile: No transition to prevent jank */
}

@media (min-width: 768px) {
  .p-staff-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
    transform: translateY(1rem);
    padding-bottom: 2rem;
    transition: transform 0.5s ease;
    /* Desktop only transition */
  }

  .p-staff-card:hover .p-staff-card__info {
    transform: translateY(0);
  }
}

.p-staff-card__role {
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.p-staff-card__name {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.p-staff-card__bg {
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

@media (min-width: 768px) {
  .p-staff-card:hover .p-staff-card__bg {
    height: auto;
    /* Helper max-height for transition if needed, but height auto works in basic CSS for visibility, 
         just doesn't animate smoothly without max-height trick. */
    max-height: 200px;
  }
}

.p-staff-card__text {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* text-xs */
  line-height: 2;
  color: var(--color-text-gray-300);
  opacity: 1;
  /* Mobile: Always visible */
  transition: none;
}

@media (min-width: 768px) {
  .p-staff-card__text {
    opacity: 0;
    transition: opacity 0.5s ease 0.1s;
  }

  .p-staff-card:hover .p-staff-card__text {
    opacity: 1;
  }
}

/* ==========================================================================
   5. Components (Generic)
   ========================================================================== */

.c-label-en {
  font-family: var(--font-primary);
  /* other styles usually defined in context or global labels */
}

/* ==========================================================================
   6. Page: Concept
   ========================================================================== */

/* Preview Layer */
.p-concept-preview {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
}

.p-concept-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 8s ease-out;
  transform: scale(1);
}

.p-concept-preview__img.active {
  opacity: 1;
  transform: scale(1.05);
}

.p-concept-preview__overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Hero */
.p-concept-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .p-concept-hero {
    height: 70vh;
  }
}

.p-concept-hero__bg {
  position: absolute;
  inset: 0;
}

.p-concept-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-concept-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.p-concept-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1.5rem;
}

.p-concept-hero__title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-concept-hero__title {
    font-size: 8rem;
    /* text-9xl */
  }
}

.p-concept-hero__subtitle {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  /* text-xl */
  font-weight: 300;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-concept-hero__subtitle {
    font-size: 1.5rem;
    /* text-2xl */
  }
}

.p-concept-hero__desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.1em;
  opacity: 0.8;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-concept-hero__desc {
    font-size: 0.875rem;
    /* text-sm */
  }
}

.p-concept-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
}

.p-concept-hero__scroll-text {
  font-size: 0.625rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-concept-hero__scroll-line {
  width: 1px;
  height: 3rem;
  background-color: white;
}

/* Container */
.p-concept-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 6rem;
  position: relative;
  z-index: 5;
  /* pt-24 */
}

@media (min-width: 768px) {
  .p-concept-container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Intro */
.p-concept-intro {
  margin-bottom: 8rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .p-concept-intro {
    text-align: left;
  }
}

.p-concept-intro__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-200);
  text-align: justify;
}

@media (min-width: 768px) {
  .p-concept-intro__text {
    font-size: 1rem;
    text-align: center;
  }
}

/* List */
.p-concept-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8rem;
}

/* Accordion Item */
.p-concept-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.p-concept-item__trigger {
  width: 100%;
  text-align: left;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: none;
  color: white;
  transition: padding-left 0.5s;
}

@media (min-width: 768px) {
  .p-concept-item:hover .p-concept-item__trigger {
    padding-left: 1rem;
  }

  .p-concept-item__trigger {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.p-concept-item__title {
  font-family: var(--font-primary);
  font-size: 3rem;
  /* text-5xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.3s;
}

.p-concept-item:hover .p-concept-item__title {
  color: var(--color-text-white);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

@media (min-width: 768px) {
  .p-concept-item__title {
    font-size: 6rem;
    /* text-8xl */
  }
}

.p-concept-item__num {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.3s;
}

.p-concept-item:hover .p-concept-item__num {
  opacity: 1;
}

@media (min-width: 768px) {
  .p-concept-item__num {
    font-size: 1.25rem;
    /* text-xl */
  }
}

/* Accordion Content */
.p-concept-item__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease-out;
}

.p-concept-item.active .p-concept-item__content {
  max-height: 100vh;
  opacity: 1;
}

.p-concept-item__inner {
  padding-bottom: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-concept-item__inner {
    padding-left: 2rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-concept-item__heading {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.p-concept-item__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  /* Keep base color, ensure high contrast in overrides if needed */
  text-align: justify;
  transition: color 0.3s;
  opacity: 0.9;
  /* Added opacity */
}

.p-concept-item:hover .p-concept-item__desc {
  color: var(--color-text-white);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-concept-item__desc {
    font-size: 1rem;
  }
}

.p-concept-item__media {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.p-concept-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0);
  transition: filter 0.7s;
}

/* Hover effect removed as per request */
.p-concept-item__media:hover .p-concept-item__img,
.p-concept-item__media-grid:hover .p-concept-item__img {
  filter: grayscale(0);
}

.p-concept-item__media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Output Section Specifics */
.p-concept-item__inner--full {
  display: block;
}

.p-concept-item__desc--wide {
  max-width: 42rem;
  margin-bottom: 3rem;
}

/* Slider */
.p-concept-slider {
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.p-concept-slider:active {
  cursor: grabbing;
}

.p-concept-slider__track {
  display: flex;
  gap: 1rem;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-concept-slide {
  min-width: 300px;
  aspect-ratio: 4/3;
  background-color: #1f2937;
  position: relative;
}

@media (min-width: 768px) {
  .p-concept-slide {
    min-width: 400px;
  }
}

.p-concept-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0);
  transition: filter 0.7s;
}

.p-concept-slide:hover .p-concept-slide__img {
  filter: grayscale(0);
}

/* Movie Section */
.p-concept-movie {
  padding-top: 6rem;
  padding-bottom: 6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
  background-color: #111;
}

@media (min-width: 768px) {
  .p-concept-movie {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.p-concept-movie__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1.5rem;
}

.p-concept-movie__label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}

.p-concept-movie__title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-concept-movie__title {
    font-size: 3.75rem;
    /* text-6xl */
  }
}

.p-concept-movie__inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.p-concept-movie__video {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #111;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.p-concept-movie__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.5s;
}

.p-concept-movie__video:hover .p-concept-movie__cover {
  opacity: 0.4;
}

.p-concept-movie__play {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-concept-movie__play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
  cursor: pointer;
}

.p-concept-movie__video:hover .p-concept-movie__play-btn {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.1);
}

.p-concept-movie__play-icon {
  width: 2rem;
  height: 2rem;
  fill: white;
}

.p-concept-movie__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
}

@media (min-width: 768px) {
  .p-concept-movie__caption {
    bottom: 2rem;
    left: 2rem;
  }
}

.p-concept-movie__caption p {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-gray-300);
}

/* CTA */
.p-concept-cta {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  background-color: #111;
}

@media (min-width: 768px) {
  .p-concept-cta {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-concept-cta__item {
  position: relative;
  height: 50vh;
  overflow: hidden;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .p-concept-cta__item {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .p-concept-cta__item:last-child {
    border-right: none;
  }
}

.p-concept-cta__bg {
  position: absolute;
  inset: 0;
}

.p-concept-cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s, opacity 0.5s, filter 0.5s;
  opacity: 1;
  filter: grayscale(0);
}

@media (min-width: 768px) {
  .p-concept-cta__img {
    opacity: 0.6;
    filter: grayscale(100%);
  }
}

.p-concept-cta__item:hover .p-concept-cta__img {
  transform: scale(1.1);
  opacity: 0.4;
  filter: grayscale(0);
}

.p-concept-cta__content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

.p-concept-cta__title {
  font-family: var(--font-primary);
  font-size: 3rem;
  /* text-5xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(1rem);
  transition: transform 0.5s;
}

@media (min-width: 768px) {
  .p-concept-cta__title {
    font-size: 4.5rem;
    /* text-7xl */
  }
}

.p-concept-cta__item:hover .p-concept-cta__title {
  transform: translateY(0);
}

.p-concept-cta__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
  opacity: 1;
  transition: opacity 0.5s 0.1s;
}

@media (min-width: 768px) {
  .p-concept-cta__text {
    opacity: 0;
  }

  .p-concept-cta__item:hover .p-concept-cta__text {
    opacity: 1;
  }
}

.p-concept-hero__subtitle {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  /* text-xl */
  font-weight: 300;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  /* tracking-wider */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-concept-hero__subtitle {
    font-size: 1.5rem;
    /* md:text-2xl */
  }
}

.p-concept-intro {
  padding: 6rem 1.5rem;
  /* pt-24 ... */
  max-width: 1200px;
  margin: 0 auto;
}

.p-concept-intro__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  line-height: 2;
  color: #e5e5e5;
  /* gray-200 */
  text-align: justify;
  margin-bottom: 8rem;
  /* mb-32 */
}

@media (min-width: 768px) {
  .p-concept-intro__text {
    font-size: 1rem;
    text-align: center;
  }
}

/* Accordion */
.p-accordion {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8rem;
}

.p-accordion__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.p-accordion__btn {
  width: 100%;
  text-align: left;
  padding: 3rem 0;
  /* py-12 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: padding-left 0.5s ease;
}

@media (min-width: 768px) {
  .p-accordion__btn {
    padding: 4rem 0;
  }
}

.p-accordion__item:hover .p-accordion__btn {
  padding-left: 1rem;
}

.p-accordion__title {
  font-family: var(--font-primary);
  font-size: 3rem;
  /* text-5xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  transition: color 0.3s;
}

.p-accordion__item:hover .p-accordion__title {
  color: var(--color-text-gray-300);
}

@media (min-width: 768px) {
  .p-accordion__title {
    font-size: 6rem;
    /* text-8xl */
  }
}

.p-accordion__num {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s;
}

@media (min-width: 768px) {
  .p-accordion__num {
    font-size: 1.25rem;
  }
}

.p-accordion__item:hover .p-accordion__num {
  opacity: 1;
}

/* Accordion Custom Transition Logic (Matches JS) */
.p-accordion__content {
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.p-accordion__item.active .p-accordion__content {
  max-height: 100vh;
  opacity: 1;
}

.p-accordion__inner {
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-accordion__inner {
    padding-left: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.p-accordion__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  text-align: justify;
}

/* Slider Track */
.p-slider-container {
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.p-slider-container:active {
  cursor: grabbing;
}

.p-slider-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-slider-item {
  min-width: 300px;
  aspect-ratio: 4/3;
  position: relative;
  background-color: #333;
}

@media (min-width: 768px) {
  .p-slider-item {
    min-width: 400px;
  }
}

.p-slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.7s;
}

.p-slider-item:hover .p-slider-img {
  filter: grayscale(0);
}

/* Movie Section */
.p-movie-section {
  padding: 6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 10;
}

.p-movie-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #111;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1024px;
  margin: 0 auto;
}

.p-movie-play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  transition: transform 0.5s, background-color 0.5s;
}

.p-movie-wrapper:hover .p-movie-play-btn {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
}

/* CTA Grid */
.p-next-actions {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
  background-color: #111;
}

@media (min-width: 768px) {
  .p-next-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.p-action-block {
  position: relative;
  height: 50vh;
  overflow: hidden;
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .p-action-block {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .p-action-block:first-child {
    border-left: none;
  }
}

.p-action-block__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s, opacity 0.7s, filter 0.7s;
  filter: grayscale(0);
}

@media (min-width: 768px) {
  .p-action-block__img {
    opacity: 0.6;
    filter: grayscale(100%);
  }
}

.p-action-block:hover .p-action-block__img {
  transform: scale(1.1);
  opacity: 0.4;
  filter: grayscale(0);
}

.p-action-block__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-action-block__title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  transform: translateY(1rem);
  transition: transform 0.5s;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.p-action-block:hover .p-action-block__title {
  transform: translateY(0);
}

.p-action-block__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
  opacity: 1;
  transition: opacity 0.5s 0.1s;
}

@media (min-width: 768px) {
  .p-action-block__text {
    opacity: 0;
  }

  .p-action-block:hover .p-action-block__text {
    opacity: 1;
  }
}

/* ==========================================================================
   7. Page: Lineup
   ========================================================================== */

.p-lineup-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
}




.p-lineup-hero__title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-lineup-hero__title {
    font-size: 6rem;
  }
}

.p-model-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}

@media (min-width: 768px) {
  .p-model-section {
    padding: 0;
  }
}

.p-model-section--silence {
  background-color: #f5f5f5;
  color: #333;
}

.p-model-section--heat {
  background-color: #222;
  color: white;
}

.p-model-section--neutral {
  background-color: #e5e5e5;
  color: #1a1a1a;
}

.p-model-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .p-model-content {
    flex-direction: row;
  }

  .p-model-content--reverse {
    flex-direction: row-reverse;
  }
}

.p-model-info {
  width: 100%;
}

@media (min-width: 768px) {
  .p-model-info {
    width: 50%;
  }
}

.p-model-visual {
  width: 100%;
  height: 50vh;
  position: relative;
}

@media (min-width: 768px) {
  .p-model-visual {
    width: 50%;
    height: 60vh;
  }
}

.p-model-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.p-model-title {
  font-family: var(--font-primary);
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: -0.05em;
  margin-bottom: 2rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .p-model-title {
    font-size: 8rem;
  }
}

.p-model-title--heat {
  background: linear-gradient(to right, #e5e7eb, #4b5563);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 700;
}

.p-model-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  opacity: 0.8;
  text-align: justify;
}

.p-model-btn {
  display: inline-block;
  margin-top: 3rem;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  transition: opacity 0.3s;
}

.p-model-btn:hover {
  opacity: 0.5;
}

/* Neutral Grid Images */
.p-neutral-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ==========================================================================
   8. Page: Magazine
   ========================================================================== */

.p-magazine-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 5rem;
}

@media (min-width: 768px) {
  .p-magazine-header {
    flex-direction: row;
  }
}

.p-magazine-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-magazine-title {
    font-size: 6rem;
  }
}

.p-magazine-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-text-gray-400);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* Category Tabs */
.p-category-tabs {
  display: flex;
  gap: 2rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .p-category-tabs {
    margin-top: 0;
    padding-bottom: 0;
  }
}

.p-category-tab {
  background: none;
  border: none;
  color: white;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
  padding-bottom: 0.25rem;
}

.p-category-tab:hover,
.p-category-tab.active {
  opacity: 1;
}

.p-category-tab.active {
  border-bottom: 2px solid white;
}

/* Grid System */
.p-magazine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-magazine-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    /* gap-8 */
  }
}

.p-magazine-item {
  display: block;
  grid-column: span 12;
  cursor: pointer;
  group: hover;
}

/* Spans */
@media (min-width: 768px) {
  .p-magazine-item--large {
    grid-column: span 8;
  }

  .p-magazine-item--tall {
    grid-column: span 4;
  }

  .p-magazine-item--std {
    grid-column: span 4;
  }
}

.p-magazine-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
}

.p-magazine-item--large .p-magazine-thumb {
  aspect-ratio: 16/9;
}

.p-magazine-item--tall .p-magazine-thumb {
  aspect-ratio: 3/4;
}

.p-magazine-item--std .p-magazine-thumb {
  aspect-ratio: 4/3;
}

.p-magazine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-magazine-item:hover .p-magazine-img {
  transform: scale(1.05);
}

.p-magazine-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  opacity: 0.6;
}

.p-magazine-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 10;
  color: white;
}

@media (min-width: 768px) {
  .p-magazine-content {
    padding: 2.5rem;
  }
}

.p-magazine-label {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.p-magazine-heading {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  /* text-xl */
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

@media (min-width: 768px) {
  .p-magazine-item--large .p-magazine-heading {
    font-size: 2.25rem;
  }

  .p-magazine-item--tall .p-magazine-heading {
    font-size: 1.25rem;
  }
}

.p-magazine-item:hover .p-magazine-heading {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.p-magazine-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-400);
  font-weight: 700;
  padding: 0 0.25rem;
}

/* Pagination */
.p-pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.p-pagination__link {
  opacity: 0.5;
  transition: opacity 0.3s;
  padding-bottom: 0.25rem;
}

.p-pagination__link:hover,
.p-pagination__link.current {
  opacity: 1;
}

.p-pagination__link.current {
  border-bottom: 2px solid white;
}

/* ==========================================================================
   8. Page: Magazine
   ========================================================================== */

.p-magazine-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 5rem;
}

@media (min-width: 768px) {
  .p-magazine-header {
    flex-direction: row;
  }
}

.p-magazine-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-magazine-title {
    font-size: 6rem;
  }
}

.p-magazine-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-text-gray-400);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* Category Tabs */
.p-category-tabs {
  display: flex;
  gap: 2rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .p-category-tabs {
    margin-top: 0;
    padding-bottom: 0;
  }
}

.p-category-tab {
  background: none;
  border: none;
  color: white;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
  padding-bottom: 0.25rem;
}

.p-category-tab:hover,
.p-category-tab.active {
  opacity: 1;
}

.p-category-tab.active {
  border-bottom: 2px solid white;
}

/* Grid System */
.p-magazine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-magazine-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    /* gap-8 */
  }
}

.p-magazine-item {
  display: block;
  grid-column: span 12;
  cursor: pointer;
  group: hover;
}

/* Spans */
@media (min-width: 768px) {
  .p-magazine-item--large {
    grid-column: span 8;
  }

  .p-magazine-item--tall {
    grid-column: span 4;
  }

  .p-magazine-item--std {
    grid-column: span 4;
  }
}

.p-magazine-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
}

.p-magazine-item--large .p-magazine-thumb {
  aspect-ratio: 16/9;
}

.p-magazine-item--tall .p-magazine-thumb {
  aspect-ratio: 3/4;
}

.p-magazine-item--std .p-magazine-thumb {
  aspect-ratio: 4/3;
}

.p-magazine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-magazine-item:hover .p-magazine-img {
  transform: scale(1.05);
}

.p-magazine-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  opacity: 0.6;
}

.p-magazine-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 10;
  color: white;
}

@media (min-width: 768px) {
  .p-magazine-content {
    padding: 2.5rem;
  }
}

.p-magazine-label {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.p-magazine-heading {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  /* text-xl */
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

@media (min-width: 768px) {
  .p-magazine-item--large .p-magazine-heading {
    font-size: 2.25rem;
  }

  .p-magazine-item--tall .p-magazine-heading {
    font-size: 1.25rem;
  }
}

.p-magazine-item:hover .p-magazine-heading {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.p-magazine-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-400);
  font-weight: 700;
  padding: 0 0.25rem;
}

/* Pagination */
.p-pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.p-pagination__link {
  opacity: 0.5;
  transition: opacity 0.3s;
  padding-bottom: 0.25rem;
}

.p-pagination__link:hover,
.p-pagination__link.current {
  opacity: 1;
}

.p-pagination__link.current {
  border-bottom: 2px solid white;
}

/* ==========================================================================
   9. Page: Open House
   ========================================================================== */

.p-openhouse-header {
  text-align: center;
  margin-bottom: 6rem;
}

.p-openhouse-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* tracking-tighter */
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-openhouse-title {
    font-size: 6rem;
  }
}

.p-openhouse-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  font-weight: 500;
}

/* Event List */
.p-ticket-list {
  max-width: 56rem;
  /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  /* space-y-12 -> gap-12 */
}

/* Ticket Component */
.p-ticket {
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.p-ticket__inner {
  background-color: rgba(34, 34, 34, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s;
}

@media (min-width: 768px) {
  .p-ticket__inner {
    flex-direction: row;
  }
}

.p-ticket:hover .p-ticket__inner {
  transform: translateY(-0.5rem);
}

/* Visual Section */
.p-ticket__visual {
  height: 16rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .p-ticket__visual {
    height: auto;
    width: 33.333%;
    border-bottom: none;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
  }
}

.p-ticket__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-ticket:hover .p-ticket__img {
  transform: scale(1.05);
}

/* Info Section */
.p-ticket__info {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .p-ticket__info {
    width: 66.666%;
    padding-left: 3rem;
    /* pl-12 */
  }
}

/* Cutouts */
.p-ticket__cutout {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-bg-base);
  border-radius: 50%;
  z-index: 10;
}

/* Positions handled via modifier classes or specific positioning in specific usages if generic is hard,
   but here we have a repeatable pattern.
   Let's use specific classes for the 4 cutouts.
*/
.p-ticket__cutout--visual-left {
  top: 50%;
  left: -0.75rem;
}

.p-ticket__cutout--visual-right-pc {
  top: 50%;
  right: -0.75rem;
  display: none;
}

.p-ticket__cutout--info-top-sp {
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.p-ticket__cutout--info-right {
  top: 50%;
  right: -0.75rem;
}

@media (min-width: 768px) {
  .p-ticket__cutout--visual-right-pc {
    display: block;
  }

  .p-ticket__cutout--info-top-sp {
    display: none;
  }
}

/* Status Badge */
.p-ticket__badge {
  padding: 0.25rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.625rem;
  /* text-[10px] */
  font-weight: 700;
  letter-spacing: 0.2em;
}

.p-ticket__badge--recruiting {
  background-color: white;
  color: black;
}

.p-ticket__badge--few {
  background-color: #4b5563;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.p-ticket__badge--closed {
  background-color: transparent;
  border: 1px solid #4b5563;
  color: #6b7280;
}

.p-ticket__date {
  font-size: 0.75rem;
  color: var(--color-text-gray-400);
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-left: 1rem;
}

.p-ticket__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .p-ticket__title {
    font-size: 2.25rem;
  }
}

.p-ticket:hover .p-ticket__title {
  color: #d1d5db;
}

/* Closed State */
.p-ticket--closed {
  opacity: 0.5;
}

.p-ticket--closed:hover {
  opacity: 1;
}

.p-ticket--closed .p-ticket__inner {
  filter: grayscale(100%);
}

/* Button */
.p-ticket__btn {
  display: inline-block;
  border: 1px solid white;
  padding: 0.75rem 2rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  transition: background-color 0.3s, color 0.3s;
}

.p-ticket:hover .p-ticket__btn {
  background-color: white;
  color: black;
}

.p-ticket--closed .p-ticket__btn {
  border-color: #374151;
  color: #374151;
  cursor: not-allowed;
  background-color: transparent !important;
  color: #374151 !important;
}

/* ==========================================================================
   10. Page: Works
   ========================================================================== */

.p-works-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  /* gap-8 */
  margin-bottom: 4rem;
  /* mb-16 */
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .p-works-header {
    flex-direction: row;
  }
}

.p-works-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .p-works-title {
    font-size: 6rem;
  }
}

.p-works-subtitle {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text-gray-400);
}

@media (min-width: 768px) {
  .p-works-subtitle {
    font-size: 1.125rem;
  }
}

/* Filters */
.p-works-filters {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.p-works-filter-btn {
  background: none;
  border: none;
  color: white;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
  padding-bottom: 0.25rem;
}

.p-works-filter-btn:hover,
.p-works-filter-btn.active {
  opacity: 1;
}

.p-works-filter-btn.active {
  border-bottom: 2px solid white;
}

/* Masonry Grid */
.p-works-masonry {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  column-count: 1;
}

@media (min-width: 768px) {
  .p-works-masonry {
    column-count: 2;
    column-gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .p-works-masonry {
    column-count: 3;
  }
}

.p-works-card {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  break-inside: avoid;
  cursor: pointer;
}

/* Aspect Ratios for images */
.p-works-card__img-container {
  overflow: hidden;
  width: 100%;
}

.p-works-card--tall .p-works-card__img-container {
  aspect-ratio: 3/4;
}

.p-works-card--square .p-works-card__img-container {
  aspect-ratio: 1/1;
}

.p-works-card--wide .p-works-card__img-container {
  aspect-ratio: 16/9;
}

.p-works-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-works-card:hover .p-works-card__img {
  transform: scale(1.1);
}

/* Overlay & Hover Effects */
.p-works-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .p-works-card__overlay {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    /* Hidden by default on desktop */
    justify-content: center;
  }

  .p-works-card:hover .p-works-card__overlay {
    opacity: 1;
  }
}

/* Animate content on hover (desktop) */
.p-works-card__label,
.p-works-card__title,
.p-works-card__meta {
  transition: transform 0.5s;
}

@media (min-width: 768px) {

  .p-works-card__label,
  .p-works-card__title,
  .p-works-card__meta {
    transform: translateY(1rem);
  }

  .p-works-card:hover .p-works-card__label,
  .p-works-card:hover .p-works-card__title,
  .p-works-card:hover .p-works-card__meta {
    transform: translateY(0);
  }
}

/* Delays */
.p-works-card:hover .p-works-card__title {
  transition-delay: 0.075s;
}

.p-works-card:hover .p-works-card__meta {
  transition-delay: 0.1s;
}

.p-works-card__label {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  border: 1px solid white;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
  /* mobile mb-2 */
}

@media (min-width: 768px) {
  .p-works-card__label {
    margin-bottom: 1rem;
  }
}

.p-works-card__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-works-card__title {
    font-size: 2.25rem;
  }
}

.p-works-card__meta {
  font-family: var(--font-secondary);
  font-size: 0.625rem;
  color: var(--color-text-gray-400);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .p-works-card__meta {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   11. Page: Company
   ========================================================================== */

.p-company-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6rem;
  /* mb-24 */
}

@media (min-width: 768px) {
  .p-company-hero {
    margin-bottom: 8rem;
    /* mb-32 */
  }
}

.p-company-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.6;
}

.p-company-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.p-company-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-company-hero__title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-company-hero__title {
    font-size: 6rem;
    /* text-8xl */
  }
}

.p-company-hero__subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .p-company-hero__subtitle {
    font-size: 1rem;
  }
}

/* Company Info Grid */
.p-company-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8rem;
}

@media (min-width: 768px) {
  .p-company-container {
    padding-left: 3rem;
    padding-right: 3rem;
    margin-bottom: 12rem;
  }
}

.p-company-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* gap-16 */
}

@media (min-width: 1024px) {
  .p-company-grid {
    flex-direction: row;
    gap: 8rem;
    /* lg:gap-32 */
  }
}

.p-company-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .p-company-col {
    width: 50%;
  }
}

.p-company-section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  /* text-2xl */
  letter-spacing: 0.2em;
  margin-bottom: 3rem;
  /* mb-12 */
  font-weight: 700;
}

.p-company-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  /* leading-loose */
  text-align: justify;
  margin-bottom: 3rem;
  color: var(--color-text-gray-300);
}

.p-company-list {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  border-top: 0.5px solid rgba(255, 255, 255, 0.2);
}

.p-company-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 0;
  align-items: baseline;
}

.p-company-dt {
  color: var(--color-text-gray-500);
  font-weight: 300;
}

/* Map */
.p-company-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background-color: #222;
}

@media (min-width: 768px) {
  .p-company-map {
    aspect-ratio: 4 / 3;
  }
}

.p-company-map iframe {
  filter: grayscale(100%) invert(92%) contrast(83%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Staff Section */
.p-company-staff-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-company-staff-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.p-company-staff-title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.1;
  text-align: center;
}

@media (min-width: 768px) {
  .p-company-staff-title {
    font-size: 3.75rem;
    /* text-6xl */
    text-align: left;
  }
}

.p-company-staff-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 80vh;
}

@media (min-width: 768px) {
  .p-company-staff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-company-staff-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-staff-card {
  position: relative;
  height: 60vh;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
  .p-staff-card {
    height: 80vh;
  }
}

@media (min-width: 1024px) {
  .p-staff-card:last-child {
    border-right: none;
  }
}

.p-staff-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.7s ease-out;
}

.p-staff-card:hover .p-staff-card__img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.p-staff-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.2),
      transparent);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.p-staff-card:hover .p-staff-card__overlay {
  opacity: 0.6;
}

.p-staff-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  /* p-8 */
  transform: translateY(1rem);
  transition: transform 0.5s;
}

.p-staff-card:hover .p-staff-card__info {
  transform: translateY(0);
}

.p-staff-card__role {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.p-staff-card__name {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.p-staff-card__desc-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}

.p-staff-card:hover .p-staff-card__desc-wrapper {
  height: auto;
}

.p-staff-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  opacity: 0;
  transition: opacity 0.5s 0.1s;
}

.p-staff-card:hover .p-staff-card__desc {
  opacity: 1;
}

/* ==========================================================================
   12. Page: Works Detail
   ========================================================================== */

.p-work-detail-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6rem;
  /* pb-24 */
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-work-detail-hero {
    padding-bottom: 8rem;
  }
}

.p-work-detail-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.8),
      transparent,
      rgba(0, 0, 0, 0.2));
}

.p-work-detail-hero__content {
  position: relative;
  z-index: 10;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-work-detail-hero__content {
    padding-left: 5rem;
    /* px-20 -> ~5rem */
    padding-right: 5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-work-detail-tags {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.p-work-detail-tag {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.p-work-detail-year {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  font-weight: 700;
}

.p-work-detail-title {
  font-family: var(--font-secondary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-work-detail-title {
    font-size: 3rem;
    /* text-5xl */
  }
}

@media (min-width: 1024px) {
  .p-work-detail-title {
    font-size: 4.5rem;
    /* text-7xl */
  }
}

.p-work-detail-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  /* text-lg */
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .p-work-detail-subtitle {
    font-size: 1.5rem;
  }
}

.p-work-detail-specs {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  line-height: 2;
  /* leading-loose */
  opacity: 0.7;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 1.5rem;
  display: none;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-work-detail-specs {
    display: block;
  }
}

/* Concept Section */
.p-work-detail-concept {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8rem;
  /* mb-32 */
}

@media (min-width: 768px) {
  .p-work-detail-concept {
    padding-left: 5rem;
    /* px-20 */
    padding-right: 5rem;
    margin-bottom: 16rem;
    /* mb-64 */
  }
}

.p-work-detail-concept__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-work-detail-concept__inner {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8rem;
  }
}

.p-work-detail-concept__heading-wrapper {
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .p-work-detail-concept__heading-wrapper {
    height: 400px;
    width: auto;
    justify-content: flex-end;
  }
}

.p-work-detail-concept__heading {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  /* text-2xl */
  line-height: 1.625;
  text-align: left;
  font-weight: 700;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
}

@media (min-width: 768px) {
  .p-work-detail-concept__heading {
    font-size: 2.25rem;
    /* text-4xl */
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    padding-bottom: 0;
    padding-right: 3rem;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    width: auto;
    text-align: right;
  }
}

.p-work-detail-concept__text {
  max-width: 42rem;
  /* max-w-2xl */
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  text-align: justify;
}

@media (min-width: 768px) {
  .p-work-detail-concept__text {
    font-size: 1rem;
  }
}

.p-work-detail-concept__p {
  margin-bottom: 2rem;
}

/* Gallery Section - Using specific Layouts */
.p-work-gallery-spacer {
  margin-bottom: 8rem;
}

@media (min-width: 768px) {
  .p-work-gallery-spacer {
    margin-bottom: 12rem;
  }
}

.p-work-full-img {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.p-work-full-img__img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 1s;
}

@media (min-width: 768px) {
  .p-work-full-img__img {
    height: 90vh;
  }
}

/* Remove filter on view? Or hover? For now lets keep grayscale and maybe reveal with JS or hover */

.p-work-full-img__caption {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  text-align: right;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  color: white;
}

@media (min-width: 768px) {
  .p-work-full-img__caption {
    bottom: 2.5rem;
    right: 2.5rem;
  }
}

/* Zig Zag Layout */
.p-work-zigzag {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

@media (min-width: 768px) {
  .p-work-zigzag {
    padding-left: 5rem;
    padding-right: 5rem;
    gap: 8rem;
  }
}

.p-work-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-work-row {
    flex-direction: row;
    gap: 6rem;
  }

  .p-work-row--reverse {
    flex-direction: row-reverse;
  }
}

.p-work-row__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-row__content {
    width: 33.333%;
  }
}

.p-work-row__label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.5rem;
  display: inline-block;
  align-self: flex-start;
}

.p-work-row__title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-work-row__title {
    font-size: 1.875rem;
    /* text-3xl */
  }
}

.p-work-row__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
  line-height: 2;
  text-align: justify;
}

.p-work-row__img-wrapper {
  width: 100%;
}

@media (min-width: 768px) {
  .p-work-row__img-wrapper {
    width: 66.666%;
  }
}

.p-work-row__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: grayscale(100%);
}

/* Grid Layout (Sanitary) */
.p-work-grid-section {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .p-work-grid-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.p-work-grid-title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 4rem;
  opacity: 0.1;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-work-grid-title {
    font-size: 3.75rem;
  }
}

.p-work-mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  auto-rows: 300px;
}

@media (min-width: 768px) {
  .p-work-mosaic {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    auto-rows: 400px;
  }
}

.p-work-mosaic__item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .p-work-mosaic__item--large {
    grid-column: span 5;
    grid-row: span 2;
  }

  .p-work-mosaic__item--medium {
    grid-column: span 7;
    grid-row: span 1;
  }

  .p-work-mosaic__item--small {
    grid-column: span 4;
    grid-row: span 1;
  }

  .p-work-mosaic__item--text {
    grid-column: span 3;
    grid-row: span 1;
  }
}

.p-work-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.7s, filter 0.7s;
}

.p-work-mosaic__item:hover .p-work-mosaic__img {
  transform: scale(1.05);
  filter: grayscale(0);
}

.p-work-mosaic__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  font-weight: 700;
  color: white;
}

.p-work-mosaic__text-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  height: 100%;
  padding: 2rem;
}

.p-work-mosaic__text {
  font-family: var(--font-secondary);
  text-align: center;
  font-size: 0.75rem;
  /* mobile text-xs/sm */
  line-height: 2;
  letter-spacing: 0.1em;
  color: #888;
}

@media (min-width: 768px) {
  .p-work-mosaic__text {
    font-size: 0.875rem;
  }
}

/* Parallax / Wide Image */
.p-work-wide-img-wrapper {
  padding-top: 3rem;
  padding-bottom: 3rem;
  width: 100%;
}

@media (min-width: 768px) {
  .p-work-wide-img-wrapper {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.p-work-wide-img {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-work-wide-img {
    height: 70vh;
  }
}

.p-work-wide-img__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}

.p-work-wide-img__caption {
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  margin-top: 2rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .p-work-wide-img__caption {
    font-size: 1.5rem;
  }
}

/* Texture Grid */
.p-work-texture-grid {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .p-work-texture-grid {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

.p-work-texture-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .p-work-texture-items {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

.p-work-texture-item {
  aspect-ratio: 1/1;
  overflow: hidden;
}

.p-work-texture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.7s;
}

.p-work-texture-item:hover .p-work-texture-img {
  transform: scale(1.1);
}

.p-work-texture-label {
  text-align: right;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  margin-top: 1rem;
  opacity: 0.5;
  font-weight: 700;
}

/* Data Spec */
.p-work-data-section {
  padding: 8rem 1.5rem;
  max-width: 896px;
  /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
}

@media (min-width: 768px) {
  .p-work-data-section {
    padding: 8rem 5rem;
  }
}

.p-work-data-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-work-data-title {
    font-size: 1.5rem;
  }
}

.p-work-data-list {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* gap-y-8 */
}

@media (min-width: 768px) {
  .p-work-data-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

.p-work-data-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}

.p-work-data-item--full {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .p-work-data-item--full {
    grid-column: span 2;
  }
}

.p-work-data-dt {
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-bottom: 0.25rem;
  display: block;
}

.p-work-data-dd {
  font-size: 1.125rem;
  font-family: var(--font-beckman);
  /* or use primary var */
  letter-spacing: 0.1em;
}

/* Pagination (Already defined general structure, but verifying specificity) */
.p-work-pagination {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 1.5rem;
}

.p-work-pagination__inner {
  max-width: 72rem;
  /* max-w-6xl */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.p-work-pager-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.5;
  transition: opacity 0.3s;
  text-decoration: none;
  color: white;
}

.p-work-pager-link:hover {
  opacity: 1;
}

.p-work-pager-thumb {
  width: 4rem;
  /* w-16 */
  height: 3rem;
  /* h-12 */
  overflow: hidden;
  display: none;
}

@media (min-width: 768px) {
  .p-work-pager-thumb {
    display: block;
  }
}

.p-work-pager-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-pager-info {
  text-align: left;
}

.p-work-pager-link--next .p-work-pager-info {
  text-align: right;
}

.p-work-pager-label {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  display: block;
  color: var(--color-text-gray-500);
  font-weight: 700;
}

.p-work-pager-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-work-list-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.p-work-list-icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.p-work-list-dot {
  width: 4px;
  height: 4px;
  background-color: white;
}

.p-work-list-text {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  opacity: 0.6;
  font-weight: 700;
}

.p-work-list-btn:hover .p-work-list-text {
  opacity: 1;
}

/* Bottom CTA */
.p-work-cta {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-work-cta {
    grid-template-columns: 1fr 1fr;
  }
}

.p-cta-item {
  position: relative;
  height: 40vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
}

.p-cta-item:nth-child(2) {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.p-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  opacity: 0.8;
}

.p-cta-item:hover .p-cta-bg {
  transform: scale(1.05);
  opacity: 1;
}

.p-cta-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.p-cta-item:hover .p-cta-overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.p-cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.p-cta-title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.p-cta-subtitle {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
}

/* ==========================================================================
   13. Page: Open House Detail
   ========================================================================== */

.p-openhouse-detail-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-openhouse-detail-hero {
    height: 70vh;
  }
}

.p-openhouse-detail-hero__bg {
  position: absolute;
  inset: 0;
}

.p-openhouse-detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-openhouse-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(26, 26, 26, 1),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.2));
}

.p-openhouse-detail-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: 4rem;
  /* mt-16 */
}

.p-openhouse-detail-tag {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 0.375rem 1rem;
  /* px-4 py-1.5 */
  font-family: var(--font-primary);
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  /* mb-6 */
  backdrop-filter: blur(4px);
  font-weight: 700;
}

.p-openhouse-detail-date {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-detail-date {
    font-size: 3.75rem;
  }
}

.p-openhouse-detail-title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1rem;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-openhouse-detail-title {
    font-size: 2.25rem;
  }
}

.p-openhouse-detail-location {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  opacity: 0.8;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-detail-location {
    font-size: 1rem;
  }
}

/* Body Content */
.p-openhouse-detail-body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: -5rem;
  /* -mt-20 */
  position: relative;
  z-index: 20;
}

@media (min-width: 768px) {
  .p-openhouse-detail-body {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 1024px) {
  .p-openhouse-detail-body {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}

/* Intro Box */
.p-openhouse-intro {
  background-color: var(--color-bg-base);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-bottom: 6rem;
  /* mb-24 */
}

@media (min-width: 768px) {
  .p-openhouse-intro {
    padding: 4rem;
  }
}

.p-openhouse-intro__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  /* text-xl */
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--color-text-gray-400);
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-intro__title {
    font-size: 1.5rem;
  }
}

.p-openhouse-intro__text {
  font-family: var(--font-secondary);
  font-weight: 300;
  line-height: 2;
  text-align: justify;
  color: var(--color-text-gray-300);
}

.p-openhouse-intro__p {
  margin-bottom: 2rem;
}

.p-openhouse-intro__p:last-child {
  margin-bottom: 3rem;
}

.p-openhouse-points {
  background-color: rgba(17, 24, 39, 0.5);
  /* gray-900/50 */
  padding: 2rem;
  border-left: 4px solid var(--color-text-white);
}

.p-openhouse-points__title {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-white);
  font-weight: 700;
}

.p-openhouse-points__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-openhouse-points__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.p-openhouse-points__bullet {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}

/* Gallery */
.p-openhouse-gallery {
  margin-bottom: 6rem;
}

.p-openhouse-gallery__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.2em;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 700;
}

.p-openhouse-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-openhouse-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-openhouse-gallery__item {
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.p-openhouse-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  opacity: 0.9;
}

.p-openhouse-gallery__item:hover .p-openhouse-gallery__img {
  transform: scale(1.05);
  opacity: 1;
}

.p-openhouse-gallery__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.p-openhouse-gallery__item:hover .p-openhouse-gallery__overlay {
  background-color: transparent;
}

/* Information */
.p-openhouse-info {
  margin-bottom: 6rem;
}

.p-openhouse-info__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.2em;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 700;
}

.p-openhouse-info__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .p-openhouse-info__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-openhouse-dl {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.p-openhouse-dl__row {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: 100px 1fr;
}

.p-openhouse-dl__dt {
  color: var(--color-text-gray-400);
  font-weight: 300;
}

.p-openhouse-dl__dd .p-date {
  font-family: var(--font-primary);
  font-weight: 700;
}

.p-openhouse-dl__note {
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-top: 0.25rem;
  display: block;
}

.p-openhouse-map {
  aspect-ratio: 1/1;
  background-color: #1f2937;
  /* gray-800 */
  position: relative;
  overflow: hidden;
}

.p-openhouse-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  filter: grayscale(100%) invert(10%) contrast(1.2);
}

.p-openhouse-map__border {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* Reservation Form */
.p-openhouse-form {
  background: linear-gradient(to bottom right, #222, #111);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .p-openhouse-form {
    padding: 4rem;
  }
}

.p-openhouse-form__header {
  text-align: center;
  margin-bottom: 3rem;
}

.p-openhouse-form__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  font-weight: 700;
}

.p-openhouse-form__desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* text-xs */
  color: var(--color-text-gray-400);
}

.p-form-inner {
  max-width: 42rem;
  /* max-w-2xl */
  margin: 0 auto;
  font-family: var(--font-secondary);
}

.p-form-group {
  margin-bottom: 2rem;
}

.p-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-form-label {
  display: block;
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  font-family: var(--font-primary);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.p-form-input,
.p-form-select {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.75rem 0;
  color: white;
  transition: border-color 0.3s;
  font-family: var(--font-secondary);
}

.p-form-input:focus,
.p-form-select:focus {
  outline: none;
  border-bottom-color: white;
}

.p-form-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.p-form-select {
  cursor: pointer;
  appearance: none;
  background-color: var(--color-bg-base);
  /* for dropdown options background */
}

.p-form-actions {
  text-align: center;
  padding-top: 2rem;
}

.p-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  /* px-12 py-4 */
  background-color: white;
  color: black;
  font-family: var(--font-primary);
  letter-spacing: 0.2em;
  border: 1px solid white;
  transition: all 0.5s;
  font-weight: 700;
  cursor: pointer;
}

.p-form-btn:hover {
  background-color: transparent;
  color: white;
}

/* Mobile Sticky CTA */
.p-mobile-sticky-cta {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  background-color: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .p-mobile-sticky-cta {
    display: none;
  }
}

.p-mobile-sticky-line {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-decoration: none;
  color: white;
  transition: background-color 0.3s;
}

.p-mobile-sticky-line:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.p-mobile-sticky-reserve {
  flex: 1.5;
  background-color: white;
  color: black;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.p-mobile-sticky-reserve:hover {
  background-color: #e5e5e5;
}

/* ==========================================================================
   14. Page: Magazine Detail
   ========================================================================== */

.p-magazine-detail-wrapper {
  width: 100%;
  overflow: hidden;
}

/* Hero */
.p-magazine-detail-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-magazine-detail-hero {
    height: 80vh;
    padding-bottom: 8rem;
  }
}

.p-magazine-detail-hero__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 80vh;
}

@media (min-width: 768px) {
  .p-magazine-detail-hero__bg {
    height: 90vh;
  }
}

.p-magazine-detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.p-magazine-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      #1a1a1a,
      rgba(26, 26, 26, 0.4),
      transparent);
}

.p-magazine-detail-header {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .p-magazine-detail-header {
    padding-left: 8rem;
    padding-right: 8rem;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .p-magazine-detail-header {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}

.p-magazine-detail-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-magazine-detail-meta {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2rem;
  }
}

.p-magazine-detail-cat {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

.p-magazine-detail-title {
  font-family: var(--font-secondary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-magazine-detail-title {
    font-size: 3rem;
    /* text-5xl */
    line-height: 1.375;
  }
}

@media (min-width: 1024px) {
  .p-magazine-detail-title {
    font-size: 3.75rem;
    /* text-6xl */
  }
}

/* Article Body */
.p-magazine-body-section {
  position: relative;
  z-index: 20;
  background-color: #1a1a1a;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-magazine-body-section {
    padding-left: 0;
    padding-right: 0;
  }
}

.p-magazine-body-inner {
  max-width: 48rem;
  /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
  margin-top: -2.5rem;
  /* -mt-10 */
}

/* Typography for Article Content (Prose Editorial) */
.p-prose-editorial p {
  font-family: var(--font-secondary);
  font-weight: 400;
  line-height: 2.2;
  margin-bottom: 2rem;
  color: var(--color-text-gray-300);
  font-size: 1rem;
  text-align: justify;
}

.p-prose-editorial h2 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1.5rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  padding-left: 1.5rem;
  color: white;
}

@media (min-width: 768px) {
  .p-prose-editorial h2 {
    font-size: 1.875rem;
  }
}

.p-prose-editorial blockquote {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #fff;
  padding: 2rem;
  margin: 3rem 0;
  border-left: 4px solid #fff;
  background: rgba(255, 255, 255, 0.05);
}

.p-prose-editorial figure {
  margin: 3rem 0;
}

.p-prose-editorial img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

.p-prose-editorial figcaption {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-gray-400);
  text-align: center;
}

/* Share & Author */
.p-magazine-footer {
  max-width: 48rem;
  /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-magazine-share {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

.p-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: opacity 0.3s;
}

.p-share-btn:hover {
  opacity: 0.7;
}

.p-share-icon {
  width: 3rem;
  /* w-12 */
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  color: white;
}

.p-share-btn:hover .p-share-icon {
  background-color: white;
  color: black;
}

.p-share-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.p-share-label {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--color-text-gray-500);
  font-weight: 700;
}

.p-author-box {
  background-color: rgba(17, 24, 39, 0.5);
  /* gray-900/50 */
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-author-box {
    flex-direction: row;
  }
}

.p-author-img {
  width: 5rem;
  /* w-20 */
  height: 5rem;
  border-radius: 9999px;
  overflow: hidden;
  background-color: #374151;
  flex-shrink: 0;
}

.p-author-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.p-author-info {
  text-align: center;
}

@media (min-width: 768px) {
  .p-author-info {
    text-align: left;
  }
}

.p-author-label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-text-gray-400);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.p-author-name {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.p-author-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
  line-height: 1.625;
  max-width: 32rem;
}

/* Related Posts */
.p-magazine-related {
  max-width: 72rem;
  /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 8rem;
}

.p-related-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 700;
}

.p-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-related-item {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.p-related-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
}

.p-related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.p-related-item:hover .p-related-img {
  transform: scale(1.05);
}

.p-related-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.p-related-item:hover .p-related-overlay {
  background-color: transparent;
}

.p-related-cat {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--color-text-gray-500);
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.p-related-post-title {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
  transition: color 0.3s;
  font-weight: 700;
}

.p-related-item:hover .p-related-post-title {
  color: var(--color-text-gray-300);
}

/* ==========================================================================
   15. Page: Lineup Model A
   ========================================================================== */

/* Hero */
.p-lineup-model-hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-lineup-model-hero__bg {
  position: absolute;
  inset: 0;
}

.p-lineup-model-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-lineup-model-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.2);
}

.p-lineup-model-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  mix-blend-mode: difference;
  padding: 0 1rem;
}

.p-lineup-model-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  /* text-sm */
  letter-spacing: 0.5em;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-lineup-model-label {
    font-size: 1rem;
  }
}

.p-lineup-model-title {
  font-family: var(--font-primary);
  font-size: 4.5rem;
  /* text-7xl */
  font-weight: 700;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .p-lineup-model-title {
    font-size: 8rem;
    /* text-9xl */
  }
}

.p-lineup-model-subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .p-lineup-model-subtitle {
    font-size: 1rem;
  }
}

.p-lineup-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  mix-blend-mode: difference;
  color: white;
}

.p-lineup-scroll-text {
  font-size: 0.625rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.p-lineup-scroll-line {
  width: 1px;
  height: 3rem;
  background-color: white;
}

/* Concept Text */
.p-lineup-concept {
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .p-lineup-concept {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.p-lineup-concept__inner {
  max-width: 48rem;
  /* max-w-3xl */
  margin: 0 auto;
  text-align: center;
}

.p-lineup-concept__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: #4b5563;
  /* gray-600 */
  text-align: justify;
}

@media (min-width: 768px) {
  .p-lineup-concept__text {
    font-size: 1rem;
    text-align: center;
  }
}

/* Gallery */
.p-lineup-gallery {
  padding-bottom: 6rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-lineup-gallery {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.p-lineup-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-lineup-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .p-lineup-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-lineup-gallery__item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Specific aspect ratios handled by utility classes or specific item classes if needed,
   but keeping it simple with modifier classes or nth-child logic might be tricky without modifying HTML structure heavily.
   For now, I'll rely on the translation in HTML to apply utility-like classes or specific modifiers.
*/
.p-lineup-gallery__item--portrait {
  aspect-ratio: 3/4;
}

.p-lineup-gallery__item--landscape {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .p-lineup-gallery__item--landscape {
    aspect-ratio: 16/10;
  }
}

.p-lineup-gallery__item--square {
  aspect-ratio: 1/1;
}

.p-lineup-gallery__item--span-2 {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .p-lineup-gallery__item--span-2 {
    grid-column: span 1;
  }
}

@media (min-width: 1024px) {
  .p-lineup-gallery__item--span-2 {
    grid-column: span 2;
  }
}

.p-lineup-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-lineup-gallery__item:hover .p-lineup-gallery__img {
  transform: scale(1.05);
}

/* Features */
.p-lineup-features {
  background-color: white;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.p-lineup-features__inner {
  max-width: 56rem;
  /* max-w-4xl */
  margin: 0 auto;
}

.p-lineup-features__title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: black;
}

.p-lineup-dl {
  border-top: 1px solid #e5e7eb;
  /* gray-200 */
  border-bottom: 1px solid #e5e7eb;
}

.p-lineup-dl__row {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-lineup-dl__row:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .p-lineup-dl__row {
    flex-direction: row;
    align-items: baseline;
    gap: 3rem;
  }
}

.p-lineup-dl__dt {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9ca3af;
  /* gray-400 */
  width: 8rem;
  /* w-32 */
  flex-shrink: 0;
}

.p-lineup-dl__dd {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
  color: #374151;
  /* gray-700 */
  flex: 1;
}

/* Cross Links */
.p-lineup-crosslinks {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #1a1a1a;
  color: white;
}

@media (min-width: 768px) {
  .p-lineup-crosslinks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-crosslink-item {
  position: relative;
  height: 40vh;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: white;
}

@media (min-width: 768px) {
  .p-crosslink-item {
    height: 50vh;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.p-crosslink-item:first-child {
  border-left: none;
}

.p-crosslink-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s, opacity 0.5s;
  opacity: 0.6;
  filter: grayscale(0%);
}

@media (min-width: 768px) {
  .p-crosslink-img {
    filter: grayscale(100%);
  }
}

.p-crosslink-item:hover .p-crosslink-img {
  transform: scale(1.1);
  opacity: 0.4;
  filter: grayscale(0%);
}

.p-crosslink-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 1.5rem;
  text-align: center;
}

.p-crosslink-title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  transform: translateY(1rem);
  transition: transform 0.5s;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-crosslink-title {
    font-size: 3rem;
    /* text-5xl */
  }
}

.p-crosslink-item:hover .p-crosslink-title {
  transform: translateY(0);
}

.p-crosslink-sub {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.2em;
  opacity: 1;
  transition: opacity 0.5s 0.1s;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .p-crosslink-sub {
    opacity: 0;
  }
}

.p-crosslink-item:hover .p-crosslink-sub {
  opacity: 1;
}

/* ==========================================================================
   16. Page: Lineup Model N
   ========================================================================== */
.p-lineup-model-n-wrapper {
  background-color: #e5e5e5;
  color: #1a1a1a;
}

.p-lineup-model-n-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-lineup-model-n-hero__inner {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: center;
  height: 100%;
}

@media (min-width: 768px) {
  .p-lineup-model-n-hero__inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.p-lineup-model-n-hero__content {
  grid-column: span 12;
  z-index: 10;
}

@media (min-width: 768px) {
  .p-lineup-model-n-hero__content {
    grid-column: span 5;
  }
}

.p-lineup-model-n-hero__img-box {
  grid-column: span 12;
  height: 60vh;
  position: relative;
}

@media (min-width: 768px) {
  .p-lineup-model-n-hero__img-box {
    grid-column: span 7;
    height: 100%;
  }
}

.p-lineup-model-n-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-lineup-model-n-title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-lineup-model-n-title {
    font-size: 6rem;
    /* text-8xl */
  }
}

/* Model N Gallery */
.p-lineup-model-n-gallery {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.p-lineup-model-n-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-lineup-model-n-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-lineup-model-n-gallery__img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

/* ==========================================================================
   17. Page: Lineup Model Y
   ========================================================================== */
.p-lineup-model-y-wrapper {
  background-color: #111;
  color: white;
}

.p-lineup-model-y-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-lineup-model-y-hero__texture {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png");
}

.p-lineup-model-y-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: contrast(1.25) sepia(0.2);
}

.p-lineup-model-y-title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to bottom, #ffffff, #4b5563);
}

@media (min-width: 768px) {
  .p-lineup-model-y-title {
    font-size: 8rem;
    /* text-9xl */
  }
}

/* Model Y Gallery (Staggered) */
.p-lineup-model-y-gallery {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.p-lineup-model-y-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-lineup-model-y-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-lineup-model-y-gallery__img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.5s;
}

.p-lineup-model-y-gallery__img:hover {
  filter: grayscale(0%);
}

@media (min-width: 768px) {
  .p-lineup-model-y-gallery__img:nth-child(even) {
    margin-top: 5rem;
  }
}

/* ==========================================================================
   18. Page: Top
   ========================================================================== */
/* Global Backgrounds */
.l-bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l-bg-ambient__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.l-bg-ambient__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.l-bg-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
}

/* Top Hero */
.p-top-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.p-top-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-top-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-hero__img--static {
  opacity: 0.6;
  mix-blend-mode: overlay;
}

.p-top-hero__img--dynamic {
  opacity: 0.4;
  mix-blend-mode: multiply;
}

/* Overlay Removed */

.p-top-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
  /* Added text-shadow for readability against bright backgrounds */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.p-top-hero__title {
  font-family: var(--font-primary);
  font-size: 3rem;
  /* text-5xl */
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.3;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-top-hero__title {
    font-size: 6rem;
    /* text-8xl */
  }
}

@media (min-width: 1024px) {
  .p-top-hero__title {
    font-size: 8rem;
    /* text-9xl */
  }
}

.p-top-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
  animation: bounce 1s infinite;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateX(-50%) translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.p-top-hero__scroll-text {
  font-size: 0.625rem;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
}

.p-top-hero__scroll-line {
  width: 1px;
  height: 3rem;
  background-color: white;
}

/* Top Intro */
.p-top-intro {
  padding: 8rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 10;
  max-width: 64rem;
  margin: 0 auto;
}

.p-top-intro__label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--color-text-gray-400);
  display: block;
  margin-bottom: 2rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.p-top-intro__title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.625;
  margin-bottom: 3rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@media (min-width: 768px) {
  .p-top-intro__title {
    font-size: 2.25rem;
  }
}

.p-top-intro__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-400);
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@media (min-width: 768px) {
  .p-top-intro__text {
    font-size: 1rem;
    text-align: center;
  }
}

/* Top YouTube */
.p-top-youtube {
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
}

.p-top-youtube__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-top-youtube__header {
    flex-direction: row;
  }
}

.p-top-youtube__desc {
  display: none;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  text-align: right;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@media (min-width: 768px) {
  .p-top-youtube__desc {
    display: block;
  }
}

.c-card-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border-light);
}

.c-card-video__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  opacity: 0.6;
  mix-blend-mode: overlay;
  filter: grayscale(100%);
}

.c-card-video:hover .c-card-video__cover {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.c-card-video__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.c-card-video__play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.c-card-video:hover .c-card-video__play-btn {
  background-color: rgba(255, 255, 255, 0.1);
}

.c-card-video__meta {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

/* Top Nav Cards */
.p-top-nav {
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
}

.p-top-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-top-nav__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.c-card-nav {
  display: block;
  position: relative;
  height: 60vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .c-card-nav--stagger {
    margin-top: 6rem;
  }
}

.c-card-nav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  filter: grayscale(100%);
}

.c-card-nav:hover .c-card-nav__img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.c-card-nav__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.5s;
}

.c-card-nav:hover .c-card-nav__overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.c-card-nav__content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.c-card-nav__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* text-3xl */
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@media (min-width: 768px) {
  .c-card-nav__title {
    font-size: 3rem;
    /* text-5xl */
  }
}

.c-card-nav__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.5s;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.c-card-nav:hover .c-card-nav__desc {
  opacity: 1;
  transform: translateY(0);
}

.c-card-nav--contact {
  border: 1px solid var(--color-border-light);
  transition: border-color 0.3s;
}

.c-card-nav--contact:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.c-card-nav__content--center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  z-index: 10;
}

/* Top News */
.p-top-news {
  padding: 6rem 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  border-top: 1px solid var(--color-border-light);
  position: relative;
  z-index: 10;
}

.p-top-news__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
}

.p-top-news__title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.p-top-news__link {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
  transition: opacity 0.3s;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.p-top-news__link:hover {
  opacity: 0.5;
}

.p-top-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-top-news__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-card-news {
  cursor: pointer;
}

.c-card-news__img-wrapper {
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 4/3;
}

.c-card-news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  filter: grayscale(100%);
}

.c-card-news:hover .c-card-news__img {
  transform: scale(1.05);
  filter: grayscale(0%);
  /* Modified to match HTML style */
}

.c-card-news__date {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.c-card-news__title {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  transition: color 0.3s;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.c-card-news:hover .c-card-news__title {
  color: var(--color-text-gray-400);
}

/* ==========================================================================
   19. Page: Concept (Supplemental)
   ========================================================================== */
.p-concept-preview {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: none;
}

@media (min-width: 768px) {
  .p-concept-preview {
    display: block;
  }
}

.p-concept-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 8s ease-out;
  transform: scale(1);
}

.p-concept-preview__img.is-active {
  opacity: 0.4;
  transform: scale(1.1);
}

.p-concept-preview__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  mix-blend-mode: multiply;
}

.p-accordion__heading {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.p-accordion__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.p-accordion__img-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

/* ==========================================================================
   10. Page: Works
   ========================================================================== */
.l-bg-works {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.l-bg-works__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-bg-works__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.p-works-main {
  padding-top: 8rem;
  min-height: 100vh;
  position: relative;
  z-index: 10;
}

.p-works-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-works-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-works-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .p-works-title {
    font-size: 5rem;
  }
}

.p-works-subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-gray-400);
}

.p-works-filters {
  display: flex;
  gap: 1.5rem;
}

.p-works-filter-btn {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-text-gray-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  padding-bottom: 0.25rem;
}

.p-works-filter-btn:hover,
.p-works-filter-btn.active {
  color: white;
  border-bottom: 1px solid white;
}

.p-works-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-works-masonry {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    /* Base height unit */
  }
}

.p-works-card {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

/* Card Sizes for Masonry */
.p-works-card--tall {
  grid-row: span 2;
}

.p-works-card--square {
  grid-row: span 1;
}

.p-works-card--wide {
  grid-column: span 2;
  grid-row: span 1;
}

/* Ensure aspect ratio logic for mobile */
.p-works-card__img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-works-card--tall .p-works-card__img-container {
  aspect-ratio: 3/4;
}

.p-works-card--square .p-works-card__img-container {
  aspect-ratio: 1/1;
}

.p-works-card--wide .p-works-card__img-container {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .p-works-card__img-container {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
  }
}

.p-works-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s, filter 0.5s;
  filter: grayscale(100%) brightness(0.8);
}

.p-works-card:hover .p-works-card__img {
  transform: scale(1.1);
  filter: grayscale(0) brightness(1);
}

.p-works-card__overlay {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
}

.p-works-card:hover .p-works-card__overlay {
  opacity: 1;
}

.p-works-card__label {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  background: white;
  color: black;
  padding: 0.25rem 0.5rem;
  align-self: flex-start;
  margin-bottom: auto;
  /* Push to top */
  transform: translateY(-10px);
  transition: transform 0.5s;
}

.p-works-card:hover .p-works-card__label {
  transform: translateY(0);
}

.p-works-card__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.p-works-card__meta {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-gray-300);
}

/* ==========================================================================
   Page: Open House (Supplemental)
   ========================================================================== */
.l-bg-openhouse {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.l-bg-openhouse__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-bg-openhouse__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.p-openhouse-main {
  padding-top: 8rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 10;
}

/* Supplemental Ticket Styles (Replacing Utility Classes) */
.p-ticket__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-ticket__location {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
  margin-bottom: 1.5rem;
}

.p-ticket__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-text-gray-300);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-ticket__desc {
    -webkit-line-clamp: unset;
  }
}

.p-ticket__footer {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Page: Magazine (Supplemental)
   ========================================================================== */
.l-bg-magazine {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l-bg-magazine__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(50%) contrast(110%);
}

.l-bg-magazine__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.p-magazine-main {
  padding-top: 8rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Page: Company (Supplemental)
   ========================================================================== */
.l-bg-company {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l-bg-company__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
}

/* ==========================================================================
   Page: Contact (Supplemental)
   ========================================================================== */
.l-bg-contact {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l-bg-contact__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: saturate(0%) contrast(125%);
}

.l-bg-contact__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle,
      transparent 20%,
      rgba(26, 26, 26, 0.8) 100%);
}

.l-bg-contact__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.6);
}

.p-contact-main {
  padding-top: 8rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.p-contact-container {
  width: 100%;
  max-width: 42rem;
}

.p-contact-header {
  text-align: center;
  margin-bottom: 4rem;
}

.p-contact-title {
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
  line-height: 1;
}

.p-contact-subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-400);
}

.p-contact-form-group {
  margin-bottom: 3rem;
}

.p-contact-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-500);
  margin-bottom: 0.5rem;
}

.p-contact-input,
.p-contact-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
  font-size: 1.125rem;
  color: white;
  transition: border-color 0.3s;
  border-radius: 0;
}

.p-contact-input:focus,
.p-contact-textarea:focus {
  outline: none;
  border-color: white;
}

.p-contact-input::placeholder,
.p-contact-textarea::placeholder {
  color: var(--color-text-gray-700);
}

.p-contact-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
}

.p-contact-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text-gray-400);
  transition: color 0.3s;
}

.p-contact-radio-label:hover {
  color: white;
}

.p-contact-radio-custom {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-text-gray-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-contact-radio-input:checked+.p-contact-radio-custom {
  border-color: white;
}

.p-contact-radio-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.p-contact-radio-input:checked+.p-contact-radio-custom .p-contact-radio-dot {
  opacity: 1;
}

.p-contact-submit {
  text-align: center;
  padding-top: 2rem;
}

.p-contact-btn {
  display: inline-block;
  border: 1px solid white;
  padding: 1rem 3rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: white;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
}

@media (min-width: 768px) {
  .p-contact-btn {
    width: auto;
  }
}

.p-contact-btn:hover {
  background: white;
  color: black;
}

/* ==========================================================================
   Page: Works Detail (Supplemental)
   ========================================================================== */
.p-work-detail-content {
  background-color: var(--color-bg-body);
  position: relative;
  z-index: 20;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.u-mt-section {
  margin-top: 8rem;
}

@media (max-width: 768px) {
  .u-mt-section {
    margin-top: 4rem;
  }
}

/* ==========================================================================
   Page: Lineup (Restored Design)
   ========================================================================== */

/* Hero Section */
.p-lineup-hero {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-lineup-hero {
    height: 70vh;
  }
}

.p-lineup-hero__bg {
  position: absolute;
  inset: 0;
}

.p-lineup-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-lineup-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.p-lineup-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
}

.p-lineup-hero__title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  color: white;
}

@media (min-width: 768px) {
  .p-lineup-hero__title {
    font-size: 6rem;
    /* text-8xl */
  }
}

.p-lineup-hero__subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
  color: white;
}

@media (min-width: 768px) {
  .p-lineup-hero__subtitle {
    font-size: 1rem;
  }
}

.p-lineup-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
  color: white;
}

.p-lineup-hero__scroll-text {
  font-family: var(--font-primary);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-lineup-hero__scroll-line {
  width: 1px;
  height: 3rem;
  background-color: white;
}

/* Common Model Section */
.p-lineup-model {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 5rem 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-lineup-model {
    padding: 0;
  }
}

.p-lineup-container {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-lineup-container {
    padding: 0 3rem;
    max-width: 1280px;
  }
}

.p-lineup-model__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-lineup-model__inner {
    flex-direction: row;
    gap: 6rem;
    /* gap-24 equivalent roughly */
  }

  .p-lineup-model__inner--reverse {
    flex-direction: row-reverse;
  }
}

/* Text Area */
.p-lineup-model__text-area {
  width: 100%;
}

@media (min-width: 768px) {
  .p-lineup-model__text-area {
    width: 50%;
  }

  .p-lineup-model__text-area--right {
    text-align: right;
  }
}

.p-lineup-model__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #9ca3af;
  /* gray-400 */
  margin-bottom: 1rem;
}

.p-lineup-model__heading {
  font-family: var(--font-primary);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-lineup-model__heading {
    font-size: 8rem;
    /* text-9xl */
  }
}

.p-lineup-model__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  /* leading-loose */
  color: #4b5563;
  /* gray-600 */
  text-align: justify;
  max-width: 28rem;
  /* max-w-md */
}

@media (min-width: 768px) {
  .p-lineup-model__text-area--right .p-lineup-model__desc {
    margin-left: auto;
  }
}

.p-lineup-model__link {
  display: inline-block;
  margin-top: 3rem;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.3s;
}

.p-lineup-model__link:hover {
  opacity: 0.5;
}

/* Media/Image Area */
.p-lineup-model__media {
  width: 100%;
  height: 50vh;
}

@media (min-width: 768px) {
  .p-lineup-model__media {
    width: 50%;
    height: 60vh;
  }
}

.p-lineup-model__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Model A Specifics */
.p-lineup-model--silence {
  background-color: #f5f5f5;
  color: #333;
}

.p-lineup-model__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 33.333%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: skewX(12deg);
  margin-right: -5rem;
  display: none;
}

@media (min-width: 768px) {
  .p-lineup-model__deco {
    display: block;
  }
}

/* Model Y Specifics */
.p-lineup-model--heat {
  background-color: #222;
  color: white;
}

.p-lineup-model__texture {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  background-repeat: repeat;
}

.p-lineup-model__label--dark {
  color: #6b7280;
  /* gray-500 */
}

.p-lineup-model__heading--gradient {
  font-weight: 700;
  background: linear-gradient(to right, #e5e7eb, #4b5563);
  -webkit-background-clip: text;
  color: transparent;
}

.p-lineup-model__desc--dark {
  color: #9ca3af;
  /* gray-400 */
}

.p-lineup-model__link--white {
  border-color: white;
}

.p-lineup-model__media--relative {
  position: relative;
}

.p-lineup-model__img--filter {
  filter: contrast(1.25) sepia(0.2);
}

.p-lineup-model__frame {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 0;
}

/* Model N Specifics (Grid Layout) */
.p-lineup-model--neutral {
  background-color: #e5e5e5;
  color: #1a1a1a;
}

.p-lineup-grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
}

.p-lineup-grid-layout__text {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .p-lineup-grid-layout__text {
    grid-column: span 4;
  }
}

.p-lineup-model__label--gray {
  color: #6b7280;
}

.p-lineup-model__heading--dark {
  font-weight: 700;
  /* bold */
  color: #1a1a1a;
}

.p-lineup-model__desc--gray {
  color: #4b5563;
  margin-bottom: 2rem;
}

.p-lineup-model__btn {
  display: inline-block;
  border: 2px solid black;
  padding: 0.75rem 2rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background-color: transparent;
  color: black;
  transition: all 0.3s;
}

.p-lineup-model__btn:hover {
  background-color: black;
  color: white;
}

.p-lineup-grid-layout__images {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-lineup-grid-layout__images {
    grid-column: span 8;
  }
}

.p-lineup-grid-layout__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-lineup-grid-layout__col--offset {
  margin-top: 3rem;
}

.p-lineup-grid-layout__img {
  width: 100%;
  object-fit: cover;
}

.p-lineup-grid-layout__img--h64 {
  height: 16rem;
}

.p-lineup-grid-layout__img--h48 {
  height: 12rem;
}

.p-lineup-grid-layout__img--h80 {
  height: 20rem;
}

/* ==========================================================================
   Page: Model A (Utility Restoration)
   ========================================================================== */
/* Basic Layout & Spacing */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.block {
  display: block;
}

.overflow-hidden {
  overflow: hidden;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.object-cover {
  object-fit: cover;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Grid */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

/* Specific Heights */
[class~="h-[80vh]"] {
  height: 80vh;
}

[class~="h-[40vh]"] {
  height: 40vh;
}

[class~="w-[1px]"] {
  width: 1px;
}

/* Backgrounds & Colors */
[class~="bg-white/20"] {
  background-color: rgba(255, 255, 255, 0.2);
}

[class~="bg-[#f5f5f5]"] {
  background-color: #f5f5f5;
}

[class~="bg-[#333]"] {
  background-color: #333;
}

[class~="bg-[#1a1a1a]"] {
  background-color: #1a1a1a;
}

[class~="text-[#333]"] {
  color: #333;
}

[class~="text-[#1a1a1a]"] {
  color: #1a1a1a;
}

.text-white {
  color: white;
}

.bg-white {
  background-color: white;
}

.bg-black {
  background-color: black;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-700 {
  color: #374151;
}

[class~="bg-white/10"] {
  background-color: rgba(255, 255, 255, 0.1);
}

[class~="border-white/10"] {
  border-color: rgba(255, 255, 255, 0.1);
}

.border-t {
  border-top-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-white {
  border-color: white;
}

.divide-y>*+* {
  border-top-width: 1px;
}

.divide-gray-200>*+* {
  border-color: #e5e7eb;
}

/* Typography */
.font-beckman {
  font-family: var(--font-primary);
}

.font-noto {
  font-family: var(--font-secondary);
}

.font-bold {
  font-weight: 700;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

/* Default Tailwind widest is 0.1em */
[class~="tracking-[0.5em]"] {
  letter-spacing: 0.5em;
}

[class~="tracking-[0.2em]"] {
  letter-spacing: 0.2em;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

[class~="text-[10px]"] {
  font-size: 10px;
}

.leading-loose {
  line-height: 2;
}

.leading-relaxed {
  line-height: 1.625;
}

.text-justify {
  text-align: justify;
}

/* Effects */
.mix-blend-difference {
  mix-blend-mode: difference;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-100 {
  opacity: 1;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.delay-100 {
  transition-delay: 100ms;
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:opacity-40 {
  opacity: 0.4;
}

.group:hover .group-hover\:translate-y-0 {
  transform: translateY(0);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.grayscale-0 {
  filter: grayscale(0);
}

[class~="translate-y-4"] {
  transform: translateY(1rem);
}

[class~="-translate-x-1/2"] {
  transform: translateX(-50%);
}

/* Sizing & Aspects */
.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

[class~="max-w-[1800px]"] {
  max-width: 1800px;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

[class~="aspect-[3/4]"] {
  aspect-ratio: 3/4;
}

.aspect-video {
  aspect-ratio: 16/9;
}

.aspect-square {
  aspect-ratio: 1/1;
}

/* Responsive (MD) */
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-9xl {
    font-size: 8rem;
    line-height: 1;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-center {
    text-align: center;
  }

  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:items-baseline {
    align-items: baseline;
  }

  [class~="md:aspect-[16/10]"] {
    aspect-ratio: 16/10;
  }

  [class~="md:h-[50vh]"] {
    height: 50vh;
  }

  .md\:border-t-0 {
    border-top-width: 0;
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:grayscale {
    filter: grayscale(100%);
  }

  .group:hover .md\:group-hover\:grayscale-0 {
    filter: grayscale(0);
  }

  .md\:opacity-0 {
    opacity: 0;
  }
}

/* Responsive (LG) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  [class~="lg:aspect-[3/4]"] {
    aspect-ratio: 3/4;
  }
}

/* ==========================================================================
   Page: Model Y (Utility Restoration)
   ========================================================================== */
/* Basic Utility */
.h-screen {
  height: 100vh;
}

.pointer-events-none {
  pointer-events: none;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.text-transparent {
  color: transparent;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.container {
  width: 100%;
}

/* Colors */
[class~="bg-[#111]"] {
  background-color: #111;
}

[class~="bg-[#1a1a1a]"] {
  background-color: #1a1a1a;
}

.text-gray-300 {
  color: #d1d5db;
}

.border-gray-700 {
  border-color: #374151;
}

.pb-8 {
  padding-bottom: 2rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.pt-8 {
  padding-top: 2rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.font-light {
  font-weight: 300;
}

.inline-block {
  display: inline-block;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:bg-white:hover {
  background-color: white;
}

.hover\:text-black:hover {
  color: black;
}

.max-w-6xl {
  max-width: 72rem;
}

.gap-x-12 {
  column-gap: 3rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

/* Gradients */
/* bg-gradient-to-b from-white to-gray-600 */
[class~="bg-gradient-to-b"] {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

[class~="from-white"] {
  --tw-gradient-from: #fff;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

[class~="to-gray-600"] {
  --tw-gradient-to: #4b5563;
}

/* Filters */
/* filter contrast-125 sepia-[0.2] */
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

[class~="contrast-125"] {
  --tw-contrast: contrast(1.25);
}

[class~="sepia-[0.2]"] {
  --tw-sepia: sepia(0.2);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
}

.hover\:grayscale-0:hover {
  --tw-grayscale: grayscale(0);
}

/* Initializing Filter Variables (Crucial for Tailwind Filters to work manually) */
.filter {
  --tw-blur: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-brightness: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-contrast: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-grayscale: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-hue-rotate: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-invert: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-saturate: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-sepia: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-drop-shadow: var(--tw-empty,
      /*!*/
      /*!*/
    );
}

/* Sizing */
[class~="h-[50vh]"] {
  height: 50vh;
}

/* Responsive (MD) */
@media (min-width: 768px) {
  .md\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }
}

/* ==========================================================================
   Page: Model Y (Layout Override & Dark Theme)
   ========================================================================== */

/* Dark Mode Page Wrapper */
.p-model-page--y {
  background-color: #1a1a1a;
  color: #d1d5db;
}

/* Background Override */
.p-model-page--y .bg-white {
  background-color: #1a1a1a;
}

/* Text Overrides */
.p-model-page--y .text-gray-600 {
  color: #9ca3af;
}

.p-model-page--y .text-gray-700 {
  color: #d1d5db;
}

.p-model-page--y .text-gray-500 {
  color: #9ca3af;
}

.p-model-page--y .p-design-highlights__desc {
  color: #d1d5db;
}

/* Divider Override */
.p-model-page--y .divide-y>*+* {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Filter Override (Default Grayscale on Y page for specific elements if needed) */
.p-model-page--y .filter {
  /* Using Tailwind inheritance or custom if needed */
}

/* Specific Feature Area Background for Y, if not covered by bg-white override */
.p-model-page--y .bg-dark-acc {
  background-color: #111;
}

/* Link Hover Colors */
.p-model-page--y a:hover {
  color: white;
}

/* ==========================================================================
   Page: Contact Navigator
   ========================================================================== */
.p-contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

.p-contact-header {
  text-align: center;
  margin-bottom: 4rem;
  padding-top: 2rem;
}

/* Navigator Grid */
.p-contact-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-contact-nav__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Card Style */
.p-contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.p-contact-card:hover {
  background-color: white;
  color: black;
  border-color: white;
}

/* Card Typography */
.p-contact-card__icon {
  margin-bottom: 2rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: transform 0.4s ease;
}

.p-contact-card__svg {
  width: 100%;
  height: 100%;
}

.p-contact-card:hover .p-contact-card__icon {
  transform: scale(1.1);
}

.p-contact-card__title-en {
  font-family: var(--font-primary);
  /* Antonio */
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.p-contact-card__title-jp {
  font-family: var(--font-secondary);
  /* Noto Sans JP */
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.p-contact-card:hover .p-contact-card__title-jp {
  opacity: 1;
}

.p-contact-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
  opacity: 0.6;
  margin-bottom: 2rem;
}

.p-contact-card:hover .p-contact-card__desc {
  opacity: 0.8;
}

/* Arrow */
.p-contact-card__arrow {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.p-contact-card:hover .p-contact-card__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* LINE Specific (Optional accent) */
/* If you want to keep the mono look, leave as is. 
   If you want green accent on hover:
*/
/*
.p-contact-card--line:hover {
    background-color: #06C755;
    color: white;
    border-color: #06C755;
}
*/

/* Divider & Form Section */
.p-contact-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 6rem;
}

.p-contact-form-section {
  max-width: 800px;
  margin: 0 auto;
}

.p-contact-form-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.5rem;
}

/* ==========================================================================
   Page: Contact Navigator (Background Image Support)
   ========================================================================== */

/* Card Base Updates */
.p-contact-card {
  position: relative;
  overflow: hidden;
  /* Remove previous background styles as they are now handled by overlay/image */
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center content vertically if needed, or stick to space-between */
  align-items: center;
  text-align: center;
  /* padding: 3rem 2rem;  Kept from previous */
}

/* Background Image Container */
.p-contact-card__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.p-contact-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.p-contact-card:hover .p-contact-card__img {
  transform: scale(1.1);
}

/* Overlay (Darken image for readability) */
.p-contact-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  /* Default dark overlay */
  z-index: 1;
  transition: background-color 0.4s ease;
}

.p-contact-card:hover .p-contact-card__overlay {
  background-color: rgba(0, 0, 0, 0.3);
  /* Lighten on hover? Or make it uniform? User wants inverse previously, but with BG image, inverse white bg might hide image. Let's keep it dark/elegant or slight brighten. */
  /* Decision: Make it slightly brighter to show image more clearly on hover, OR keep text white. 
       If previous requirement was 'invert colors', that implies white background. 
       If we have an image, white background hides the image. 
       So, 'background image' usually implies we keep the image visible. 
       Let's stick to White Text over Image. */
}

/* Content Wrapper (Z-Index above image) */
.p-contact-card__content-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  /* If needed */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  /* Fill the card */
}

/* Hover Adjustments for Text (Keep White) */
.p-contact-card:hover {
  color: white;
  /* Force white text even on hover */
  border-color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Hamburger Menu Fix (Override)
   ========================================================================== */

/* Mobile Menu Container */
#js-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-color: #111;
  /* Dark background */
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#js-drawer.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Menu Navigation */
.l-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  font-family: var(--font-primary);
  /* Antonio */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.l-mobile-menu__link {
  color: white;
  transition: color 0.3s;
}

.l-mobile-menu__link:hover {
  color: var(--color-text-gray-400);
}

/* Hamburger Button Animation */
#js-hamburger {
  z-index: 10000;
  /* Above the drawer */
}

/* Lines */
.l-header__menu-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: white;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animation State */
#js-hamburger.is-active .l-header__menu-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

#js-hamburger.is-active .l-header__menu-line:nth-child(2) {
  opacity: 0;
}

#js-hamburger.is-active .l-header__menu-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==========================================================================
   Hamburger Menu Fix (Z-Index & Animation Update)
   ========================================================================== */

/* Button Positioning & Z-Index */
/* Button Positioning & Z-Index */
#js-hamburger {
  position: fixed;
  top: 20px;
  /* Safe top margin */
  right: 20px;
  /* Safe right margin to prevent cutoff */
  z-index: 10000;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
}

@media (min-width: 768px) {
  #js-hamburger {
    display: none;
  }
}

/* Color Control */
#js-hamburger.is-active .l-header__menu-line {
  background-color: white;
}

/* Animation Re-definition */
#js-hamburger.is-active .l-header__menu-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

#js-hamburger.is-active .l-header__menu-line:nth-child(2) {
  opacity: 0;
}

#js-hamburger.is-active .l-header__menu-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Ensure Drawer Z-Index & Opacity */
#js-drawer {
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  /* Transparent Black */
  backdrop-filter: blur(10px);
  /* Frosted Glass Effect */
}

/* Footer SNS Icons */
.l-footer__social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-gray-400);
  font-size: 1.5rem;
  /* ~24px */
  transition: color 0.3s ease, opacity 0.3s ease;
}

.l-footer__social-icon:hover {
  color: white;
  opacity: 0.8;
}

/* Force Font Awesome for Footer Icons */
.l-footer__social-icon i,
.l-footer__social-icon svg {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Footer SNS Icons (SVG Override) */
.l-footer__social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  /* Ensure visibility */
  transition: opacity 0.3s ease;
}

.c-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  pointer-events: none;
}

/* Reset any Font Awesome overrides that might affect SVG */
.l-footer__social-icon svg.c-icon {
  font-family: sans-serif !important;
  font-weight: normal !important;
}

.l-footer__social-icon:hover {
  opacity: 0.7;
}

/* Logo Sizing */
.l-header__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100px;
  /* Mobile size */
}

@media (min-width: 768px) {
  .l-header__logo-img {
    max-width: 140px;
    /* PC size */
  }
}

.l-footer__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  /* Mobile footer size */
  margin: 0 auto 1rem;
  /* Centered */
}

@media (min-width: 768px) {
  .l-footer__logo-img {
    max-width: 160px;
    /* PC footer size */
    margin: 0 0 1rem 0;
    /* Left align */
  }
}

/* ==========================================================================
   Top Hero Slideshow (Model A Only)
   ========================================================================== */
.p-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.p-hero-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  /* Hide completely when not active to prevent stacking issues */
  transition: opacity 2s ease-in-out, visibility 2s step-end;
  /* Visibility transitions after opacity finishes preventing clicks/focus if needed, though pointer-events none handles that usually. 
       Actually, visibility transition step-end ensures it stays visible until opacity is 0. 
       But here we want the opposite for fading IN.
       Let's stick to the prompt's request which focuses on opacity and z-index.
       Prompt: "opacity: 0; transition: opacity 2.0s..."
    */
  transition: opacity 2s ease-in-out;
  z-index: 0;
}

/* Active Image (Fading In / Visible) */
.p-hero-slide img.is-active {
  opacity: 1;
  z-index: 2;
  /* Highest priority */
  visibility: visible;
}

/* Previously Active Image (Stays visible behind the new one) */
.p-hero-slide img.is-last-active {
  opacity: 1;
  z-index: 1;
  /* Behind active */
  visibility: visible;
  transition: none;
  /* No transition, just stay there until removed */
}

/* Ensure Subtitle also has text shadow */
.p-top-hero__sub {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Page: Model N (Override) */
.p-model-detail--n {
  background-color: #e5e5e5;
  color: #333333;
}

/* Hero & General Text Override */
.p-model-detail--n .text-white {
  color: #333333;
}

.p-model-detail--n .mix-blend-difference {
  mix-blend-mode: normal;
}

/* Boarder Override */
.p-model-detail--n .border-white {
  border-color: #e5e5e5;
}

.p-model-detail--n .bg-white {
  background-color: #ffffff;
}

.p-model-detail--n .p-design-highlights {
  background-color: #e5e5e5;
}

/* Footer Link Section Background */
.p-model-detail--n .bg-\[\#1a1a1a\] {
  background-color: #f9f9f9;
}

/* ==========================================================================
   Page: Company Staff Section
   ========================================================================== */
.p-company-staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1.5rem;
  padding-bottom: 6rem;
  width: 100%;
  max-width: none;
  /* Remove centering constraint */
  margin: 0;
}

@media (min-width: 768px) {
  .p-company-staff {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 0 3rem 8rem;
  }
}

@media (min-width: 1024px) {
  .p-company-staff {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
    align-items: start;
    width: 100%;
    padding: 0 40px 10rem;
    /* Full width with side padding */
  }
}

.p-staff-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3/5;
  /* Taller AR for full-body feel if needed, or 3/4 */
  overflow: hidden;
}

/* Force aspect ratio to original if needed or keep 3/4. Let's stick to user's "Keep details" request - 4col is narrow, so maybe 3/5 fits better for text? Or just keep 3/4. User didn't ask AR change, just layout. Keeping 3/4. */
.p-staff-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}

/* ... existing code ... */

/* Profile Table - Smaller font for 4-col */
.p-staff-profile {
  width: 100%;
  border-top: 0.5px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 1rem;
}

.p-staff-profile__row {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on very narrow screens if needed */
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 0;
  font-size: 0.7rem;
  /* Smaller font */
  align-items: baseline;
}

.p-staff-profile__row dt {
  width: 100%;
  /* Stack on narrow 4-col if needed, or keep side-by-side but small */
  /* Let's keep side-by-side but adjust width/display */
  width: 30%;
  min-width: 3em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-primary);
  letter-spacing: 0.05em;
  font-size: 0.65rem;
}

.p-staff-profile__row dd {
  width: 70%;
  color: #fff;
  font-family: var(--font-secondary);
  line-height: 1.4;
}

.p-staff-message {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  /* Smaller font */
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #ddd;
  text-align: justify;
}

/* Concept Next Actions CTA */
.p-concept-cta {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {
  .p-concept-cta {
    flex-direction: row;
  }
}

.p-concept-cta__item {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .p-concept-cta__item {
    aspect-ratio: 16/9;
    height: auto;
  }
}

.p-concept-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.p-concept-cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-concept-cta__item:hover .p-concept-cta__img {
  transform: scale(1.1);
}

.p-concept-cta__content {
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.p-concept-cta__title {
  font-family: "Oswald", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.p-concept-cta__text {
  font-size: 0.9rem;
  opacity: 0.9;
}

.p-staff-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: grayscale(0) !important;
  /* Force color */
}

.p-staff-card:hover .p-staff-card__img {
  transform: scale(1.05);
}

.p-staff-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}

.p-staff-card__info {
  position: absolute;
  inset: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 10;
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
  transition: background 0.4s ease;
}

.p-staff-card:hover .p-staff-card__info {
  background: rgba(0, 0, 0, 0.85);
  /* Full overlay on hover */
  justify-content: center;
  /* Center content vertically */
}

.p-staff-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.p-staff-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  transition: margin 0.4s ease;
}

/* On hover, add margin to separating name from details */
.p-staff-card:hover .p-staff-card__name {
  margin-bottom: 1.5rem;
}

.p-staff-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

.p-staff-card:hover .p-staff-detail {
  max-height: 600px;
  opacity: 1;
}

/* Profile Table */
.p-staff-profile {
  width: 100%;
  border-top: 0.5px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 1.5rem;
}

.p-staff-profile__row {
  display: flex;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
  padding: 0.75rem 0;
  font-size: 0.8rem;
  align-items: baseline;
}

.p-staff-profile__row dt {
  width: 30%;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-primary);
  letter-spacing: 0.05em;
}

.p-staff-profile__row dd {
  width: 70%;
  color: #fff;
  font-family: var(--font-secondary);
}

.p-staff-message {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #ddd;
  text-align: justify;
}

.c-staff-sns {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  border-radius: 99px;
}

.c-staff-sns:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ==========================================================================
   Hero Slider (Restored)
   ========================================================================== */
.p-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-hero-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
}

.p-hero-slide img.is-active {
  opacity: 1;
  z-index: 2;
}

/* Common Section Spacing */
.p-section-gap {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-section-gap {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ==========================================================================
   Staggered Layout (Company & Contact)
   ========================================================================== */

/* PC: Staggered Grid */
@media screen and (min-width: 768px) {
  .p-staggered-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    /* Allow offset */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
  }

  .p-staggered-grid--reverse {
    direction: rtl;
    /* Flip columns for visual variation if needed, or just HTML order */
  }

  .p-staggered-grid--reverse>* {
    direction: ltr;
    /* Reset content direction */
  }

  .p-staggered-item--low {
    margin-top: 80px;
    /* Push down */
  }

  .p-staggered-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  .p-staggered-content {
    padding: 2rem;
  }
}

/* ==========================================================================
   Refined Animations (Buttons & Links)
   ========================================================================== */

/* 1. Rich Button Animation (.c-btn-anim) */
.c-btn-anim {
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-family: var(--font-primary);
  /* Beckman/Antonio */
  font-size: 0.875rem;
  /* 14px */
  letter-spacing: 0.1em;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.4s ease, border-color 0.4s ease,
    color 0.4s ease;
}

/* Background/Border: Default Grayish */
.c-btn-anim {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.6);
}

.c-btn-anim:hover {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}

/* Text Slide-in Effect */
.c-btn-anim__text {
  display: block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  /* easeOutCubic */
}

.c-btn-anim__text::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
  color: #000;
  /* Hover text color */
}

.c-btn-anim:hover .c-btn-anim__text {
  transform: translateY(-100%);
}

/* 2. Staggered Link Card (.p-staggered-link) */
/* Wrapper for the entire section content to make it clickable */
.p-staggered-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  /* For zoom effect containment */
}

/* Image: Grayscale -> Color + Zoom */
.p-staggered-link .p-staggered-img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s ease;
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-staggered-link:hover .p-staggered-img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Content: Text color change slightly on hover */
.p-staggered-link .p-staggered-content {
  transition: opacity 0.5s ease;
}

.p-staggered-link:hover .p-staggered-content {
  opacity: 0.8;
}

/* Button inside link (Visual only, since whole card is link) */
.p-staggered-link .c-btn {
  pointer-events: none;
  /* Let parent link handle click */
  background: transparent;
  border-color: #fff;
  color: #fff;
  transition: background 0.4s ease, color 0.4s ease;
}

.p-staggered-link:hover .c-btn {
  background: #fff;
  color: #000;
}

@media screen and (max-width: 767px) {
  .p-section-compact {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .p-staggered-grid {
    display: block;
    /* Stack vertically */
    padding: 0 1.5rem;
  }

  .p-staggered-item {
    margin-bottom: 2rem;
  }

  .p-staggered-item--low {
    margin-top: 0;
    /* Reset offset */
  }

  .p-staggered-img {
    width: 100%;
    aspect-ratio: 16/9;
    /* More horizontal for mobile */
    object-fit: cover;
    margin-bottom: 1.5rem;
  }

  .p-staggered-content {
    text-align: center;
  }
}

.p-top-lineup {
  width: 100%;
  margin-bottom: 6rem;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .p-top-lineup {
    padding: 0 3rem;
  }
}

.p-top-lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .p-top-lineup__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.p-lineup-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  color: white;
}

.p-lineup-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-lineup-card:hover .p-lineup-card__img {
  transform: scale(1.05);
}

.p-lineup-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

.p-lineup-card:hover .p-lineup-card__content {
  background: rgba(0, 0, 0, 0.5);
}

.p-lineup-card__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
}

.p-lineup-card__title {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
}

/* SECTION: WORKS (Mobile Overlay / PC Grid) */
.p-top-works {
  width: 100%;
  margin-bottom: 6rem;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .p-top-works {
    padding: 0 3rem;
  }
}

.p-works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* Vertical spacing between cards on mobile */
}

@media (min-width: 768px) {
  .p-works-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    /* Horizontal spacing on PC */
  }
}

.p-work-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  /* Standard rect */
  overflow: hidden;
  color: white;
}

@media (min-width: 768px) {
  .p-work-card {
    aspect-ratio: 1/1;
    /* Square on PC grid */
  }
}

.p-work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-work-card:hover .p-work-card__img {
  transform: scale(1.05);
}

/* Mobile: Overlay Title */
.p-work-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-card__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }

  .p-work-card:hover .p-work-card__overlay {
    opacity: 1;
  }
}

.p-work-card__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .p-work-card__title {
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.3s ease;
  }

  .p-work-card:hover .p-work-card__title {
    transform: translateY(0);
  }
}

/* SECTION: OPEN HOUSE (Ticket/Card) */
.p-top-openhouse {
  width: 100%;
  margin-bottom: 6rem;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .p-top-openhouse {
    padding: 0 3rem;
  }
}

.p-openhouse-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-openhouse-grid {
    flex-direction: row;
    gap: 2rem;
  }
}

.p-openhouse-card {
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.p-openhouse-card:hover {
  transform: translateY(-5px);
}

.p-openhouse-card__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.p-openhouse-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-openhouse-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-openhouse-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.p-openhouse-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-gray-500);
}

/* SECTION: COMPANY (Intro Banner) */
.p-top-company {
  position: relative;
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6rem;
  color: white;
}

.p-top-company__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.6);
}

.p-top-company__content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.p-top-company__title {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

/* SECTION: TOPICS (Magazine List) */
.p-top-topics {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 6rem;
  padding: 0 1.5rem;
}

.p-top-topics__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.p-topic-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  color: white;
  align-items: flex-start;
  transition: background-color 0.3s;
}

.p-topic-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.p-topic-item__date {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: var(--color-text-gray-400);
  min-width: 5rem;
}

.p-topic-item__title {
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-topic-item {
    align-items: center;
  }
}

/* SECTION: CONTACT (Card Style) */
.p-contact-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
  /* Last section */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.p-contact-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.p-contact-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-contact-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.p-contact-card__content-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Hero Slider (Crossfade Overlay)
   ========================================================================== */
.p-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-hero-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 0;
}

/* Active Image: Fades In (Top Layer) */
.p-hero-slide img.is-active {
  opacity: 1;
  z-index: 2;
}

/* Last Active: Stays Opaque (Background Layer) - No Fade Out */
.p-hero-slide img.is-last-active {
  opacity: 1;
  z-index: 1;
}

/* ==========================================================================
   Logo & YouTube Responsive Styles
   ========================================================================== */
.l-header__logo-img {
  height: 30px;
  width: auto;
}

@media (min-width: 768px) {
  .l-header__logo-img {
    height: 40px;
  }
}

.p-youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.p-youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   YouTube Simple (Responsive Fix)
   ========================================================================== */
.p-youtube-simple iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Header Animation & Scroll Effect
   ========================================================================== */
/* Transition for smooth background change */
.l-header,
#header {
  transition: background-color 0.6s ease;
}

/* Active Scrolled State (Transparent Black) */
.is-scrolled {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px);
  /* Add blur for legibility */
}

/* ==========================================================================
   Background Image Updates
   ========================================================================== */

/* Body Background */
body {
  background-repeat: repeat;
  background-size: auto;
  /* Or cover depending on texture */
}

/* ==========================================================================
   Refactored Top Page Styles (Semantic CSS)
   ========================================================================== */

/* Hero Section */
.p-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.p-hero__gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      transparent,
      rgba(0, 0, 0, 0.6));
}

.p-hero__content {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 0 1rem;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.p-hero__title {
  font-family: "Beckman", sans-serif;
  font-size: 3.75rem;
  /* text-6xl */
  font-weight: bold;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-hero__title {
    font-size: 6rem;
    /* text-9xl */
  }
}

@media (min-width: 1024px) {
  .p-hero__title {
    font-size: 8rem;
  }
}

.p-hero__subtitle {
  font-family: "Beckman", sans-serif;
  font-size: 1rem;
  /* text-xl */
  letter-spacing: 0.1em;
  opacity: 0.8;
  text-transform: uppercase;
  color: #fff;
}

@media (min-width: 768px) {
  .p-hero__subtitle {
    font-size: 1.875rem;
    /* text-3xl */
  }
}

.p-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  /* bottom-10 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
  animation: bounce 1s infinite;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07));
  color: #fff;
  z-index: 20;
}

.p-hero__scroll span {
  font-size: 10px;
  font-family: "Beckman", sans-serif;
  letter-spacing: 0.1em;
}

.p-hero__scroll .line {
  width: 1px;
  height: 3rem;
  background-color: #fff;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateX(-50%) translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Introduction Section */
.p-intro {
  position: relative;
  z-index: 10;
  padding: 8rem 1.5rem;
  /* py-32 px-6 */
  max-width: 64rem;
  /* max-w-5xl */
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  .p-intro {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.p-intro__label {
  font-family: "Beckman", sans-serif;
  font-size: 0.75rem;
  /* text-xs */
  letter-spacing: 0.3em;
  color: #9ca3af;
  /* text-gray-400 */
  display: block;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-intro__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  /* text-2xl */
  line-height: 1.625;
  font-weight: 300;
  /* font-light */
  margin-bottom: 3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .p-intro__heading {
    font-size: 2.25rem;
    /* text-4xl */
  }
}

.p-intro__desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  /* text-sm */
  line-height: 2;
  color: #9ca3af;
  /* text-gray-400 */
  text-align: justify;
  max-width: 48rem;
  /* max-w-3xl */
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .p-intro__desc {
    font-size: 1rem;
    /* text-base */
    text-align: center;
  }
}

/* Button Component */
.p-btn {
  display: inline-block;
  padding: 1rem 3rem;
  font-family: "Beckman", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  cursor: pointer;
}

.p-btn--white {
  border: 1px solid #fff;
  color: #fff;
}

.p-btn--white:hover,
.p-btn--white.is-mobile-active {
  background-color: #fff;
  color: #000;
}

.p-btn--glass {
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  color: #fff;
}

.p-btn--glass:hover,
.p-btn--glass.is-mobile-active {
  background-color: #fff;
  color: #000;
}

/* About Section */
.p-top-about {
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .p-top-about {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.p-top-about__lead {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 1.5rem;
  width: 100%;
}

.p-top-about__desc {
  font-family: "Noto Sans JP", sans-serif;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 2;
  font-size: 1rem;
  color: #fff;
}

/* Movie Section */
.p-movie {
  padding: 6rem 1.5rem;
  /* py-24 px-6 */
  max-width: 80rem;
  /* max-w-7xl */
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .p-movie {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.p-movie__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-movie__header {
    flex-direction: row;
  }
}

.p-movie__label {
  font-family: "Beckman", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: #9ca3af;
  display: block;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-movie__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .p-movie__heading {
    font-size: 1.875rem;
  }
}

.p-movie__desc {
  display: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  /* text-gray-500 */
  max-width: 24rem;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .p-movie__desc {
    display: block;
  }
}

/* Nav & Cards Section */
.p-nav-section {
  padding: 6rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .p-nav-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.p-nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-nav-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.p-nav-card {
  position: relative;
  height: 60vh;
  overflow: hidden;
  display: block;
  background-size: cover;
  background-position: center;
}

.p-nav-card--offset {
  margin-top: 0;
}

@media (min-width: 768px) {
  .p-nav-card--offset {
    margin-top: 6rem;
  }
}

.p-nav-card--border {
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s;
}

.p-nav-card--border:hover,
.p-nav-card--border.is-mobile-active {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Overlay Logic (Re-implemented for classes) */
.p-nav-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.5s ease;
}

.p-nav-card:hover::before,
.p-nav-card.is-mobile-active::before {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Specific Contact Overlay */
.p-top-contact::before {
  background-color: rgba(0, 0, 0, 0.6);
}

.p-top-contact:hover::before,
.p-top-contact.is-mobile-active::before {
  background-color: rgba(0, 0, 0, 0.5);
}

.p-nav-card__content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 10;
  transition: transform 0.5s ease;
}

.p-nav-card:hover .p-nav-card__content,
.p-nav-card.is-mobile-active .p-nav-card__content {
  transform: translateY(-0.5rem);
}

.p-nav-card__content-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  z-index: 10;
}

.p-nav-card__title {
  font-family: "Beckman", sans-serif;
  font-size: 1.875rem;
  /* text-3xl */
  margin-bottom: 0.5rem;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 20;
  color: #fff;
}

@media (min-width: 768px) {
  .p-nav-card__title {
    font-size: 3rem;
    /* text-5xl */
  }
}

.p-nav-card__subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 20;
  color: #fff;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.5s ease;
}

.p-nav-card:hover .p-nav-card__subtitle,
.p-nav-card.is-mobile-active .p-nav-card__subtitle {
  opacity: 1;
  transform: translateY(0);
}

.p-nav-card__desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  color: #d1d5db;
  /* gray-300 */
  margin-bottom: 2rem;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 4px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 20;
}

/* News Section */
.p-news {
  padding: 6rem 1.5rem;
  max-width: 72rem;
  /* max-w-6xl */
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .p-news {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.p-news__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .p-news__header {
    flex-direction: row;
    align-items: flex-end;
  }
}

.p-news__label {
  font-family: "Beckman", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: #9ca3af;
  display: block;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-news__heading {
  font-family: "Beckman", sans-serif;
  font-size: 1.875rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .p-news__heading {
    font-size: 2.25rem;
  }
}

.p-news__link {
  font-family: "Beckman", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.25rem;
  transition: opacity 0.3s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-news__link:hover {
  opacity: 0.5;
}

.p-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-news__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* News Item */
.p-news-item {
  display: block;
  cursor: pointer;
}

.p-news-item__thumb {
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 4 / 3;
}

.p-news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: grayscale(100%);
}

.p-news-item:hover .p-news-item__thumb img,
.p-news-item.is-mobile-active .p-news-item__thumb img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.p-news-item__date {
  font-family: "Beckman", sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  display: block;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-news-item__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  line-height: 1.625;
  transition: color 0.3s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.p-news-item:hover .p-news-item__title,
.p-news-item.is-mobile-active .p-news-item__title {
  color: #9ca3af;
}

.p-news__footer {
  text-align: center;
  margin-top: 3rem;
}

.p-top-concept:hover::before,
.p-top-lineup:hover::before,
.p-top-works:hover::before,
.p-top-contact:hover::before {
  background-color: rgba(0, 0, 0, 0.2);
  /* Lighten on hover */
}

/* ==========================================================================
   Header Navigation (Font Unification)
   ========================================================================== */
#header nav a,
#mobile-menu nav a {
  font-family: "Antonio", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ==========================================================================
   Footer Icons Fix (Force Font Awesome)
   ========================================================================== */
.l-footer__social-icon i,
.fa-brands {
  font-family: "Font Awesome 6 Brands", sans-serif !important;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Mobile Fixes (Logo & Drawer)
   ========================================================================== */
/* Logo Ratio Fix */
.l-header__logo-img {
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  width: 120px;
  /* Adjust as needed */
}

/* Drawer Menu Visibility */
#js-drawer.is-active {
  display: flex !important;
}

/* ==========================================================================
   Mobile Functional Fixes (Menu Close & Typography)
   ========================================================================== */

/* 1. Hamburger Menu Closing Fix */
#js-hamburger {
  z-index: 9999;
  /* Ensure button is always on top */
}

#js-drawer {
  z-index: 9000;
  /* Drawer below button */
}

/* Force White Line Color when Active */
#js-hamburger.is-active span {
  background-color: #ffffff !important;
}

/* ==========================================================================
   Open House List Styles
   ========================================================================== */
.p-openhouse-header {
  text-align: center;
  padding: 6rem 0 4rem;
}

.p-openhouse-title {
  font-size: 3.75rem;
  /* Match Hero Mobile */
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .p-openhouse-title {
    font-size: 8rem;
    /* Match Hero PC */
  }
}

.p-openhouse-subtitle {
  font-size: 0.875rem;
  color: #fff;
  opacity: 0.8;
}

.p-openhouse-container {
  max-width: 80rem;
  /* 1280px */
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-openhouse-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-openhouse-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-openhouse-item {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.p-openhouse-item:hover {
  transform: translateY(-5px);
}

.p-openhouse-item__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.p-openhouse-item-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p-openhouse-item:hover .p-openhouse-item-overlay {
  opacity: 1;
}

/* .p-openhouse-item-content removed (empty) */

.p-openhouse-item-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-openhouse-status {
  background-color: #fff;
  color: #000;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: bold;
  border: 1px solid #fff;
}

.p-openhouse-status.is-few {
  background-color: #d97706;
  /* Amber-600 */
  border-color: #d97706;
  color: #fff;
}

.p-openhouse-status.is-closed {
  background-color: #4b5563;
  /* Gray-600 */
  border-color: #4b5563;
  color: #fff;
}

.p-openhouse-date {
  font-size: 0.875rem;
  color: #9ca3af;
}

.p-openhouse-item-heading {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.p-openhouse-item-desc {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 1.5rem;
}

.p-openhouse-btn-wrap {
  text-align: right;
}

.p-openhouse-btn {
  font-size: 0.75rem;
}

/* ==========================================================================
   Open House Single Styles
   ========================================================================== */
.p-single-openhouse-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.p-single-openhouse-hero-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.p-single-openhouse-hero-content {
  position: relative;
  z-index: 10;
  padding: 0 1.5rem;
}

.p-single-openhouse-status {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.p-single-openhouse-status.is-few {
  background-color: #d97706;
  color: #fff;
}

.p-single-openhouse-status.is-closed {
  background-color: #4b5563;
  color: #fff;
}

.p-single-openhouse-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .p-single-openhouse-title {
    font-size: 3rem;
  }
}

.p-single-openhouse-date {
  font-size: 1.125rem;
  opacity: 0.9;
}

.p-single-openhouse-container {
  max-width: 60rem;
  /* 960px */
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.p-openhouse-info {
  margin-bottom: 6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.p-openhouse-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .p-openhouse-row {
    flex-direction: row;
    align-items: baseline;
  }
}

.p-openhouse-dt {
  font-weight: bold;
  min-width: 8rem;
  margin-bottom: 0.5rem;
  color: #9ca3af;
}

@media (min-width: 768px) {
  .p-openhouse-dt {
    margin-bottom: 0;
  }
}

.p-openhouse-dd {
  flex: 1;
  line-height: 1.6;
}

.p-openhouse-note {
  font-size: 0.8rem;
  color: #9ca3af;
}

.p-single-openhouse-intro {
  margin-bottom: 6rem;
  line-height: 1.8;
}

/* Map */
.p-company-map {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 */
  background: #333;
}

.p-company-map__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%) invert(92%) contrast(83%);
  /* Optional styling */
}

/* Pagination */
.p-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.p-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  text-decoration: none;
  font-family: "Antonio", sans-serif;
  transition: all 0.3s;
}

.p-pagination .page-numbers.current,
.p-pagination .page-numbers:hover {
  color: #d1d5db;
  /* Gray-300 */
  font-size: 0.95rem;
}

/* Contact Form Overrides if needed */
.p-contact-form-dark {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. H1 Typography Fix (Prevent Overflow) */
/* ==========================================================================
   Hamburger Menu & H1 Forced Fixes (User Requested Override)
   ========================================================================== */

/* 1. H1 Font Forced Unification */
h1,
.p-hero__title,
.p-intro__heading {
  font-family: "Antonio", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* 2. Hamburger Button: "Strongest Configuration" */
#js-hamburger {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 2147483647 !important;
  /* Max 32-bit int */
  display: block !important;
  width: 30px;
  height: 22px;
  /* Height for 3 lines spaciously */
  cursor: pointer;
  background: transparent !important;
  border: none;
  padding: 0;
  outline: none;
}

/* Hide on PC */
@media (min-width: 768px) {
  #js-hamburger {
    display: none !important;
  }
}

/* 3. Hamburger Lines (3-line Reset) */
#js-hamburger span {
  display: block !important;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
}

/* Initial Line Positions (3 lines) */
#js-hamburger span:nth-child(1) {
  top: 0;
}

#js-hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

#js-hamburger span:nth-child(3) {
  bottom: 0;
}

/* Active State (X Animation) */
#js-hamburger.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

#js-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

#js-hamburger.is-active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Force White Line Color when Active */
#js-hamburger.is-active span {
  background-color: #ffffff !important;
}

/* 4. Drawer Menu: Just below button */
#js-drawer {
  z-index: 2147483640 !important;
  /* Button - 7 */
  position: fixed !important;
  inset: 0 !important;
}

/* ==========================================================================
   5. Restored Styles (from style-old.css) & Fixes
   ========================================================================== */

/* Typography Utilities */
.font-beckman {
  font-family: "Antonio", sans-serif;
}

.font-garamond {
  font-family: "Cormorant Garamond", serif;
}

.font-noto {
  font-family: "Noto Sans JP", sans-serif;
}

/* Header & Menu */
#header {
  transition: background-color 0.3s, backdrop-filter 0.3s;
}

#header.scrolled {
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
}

#mobile-menu {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#mobile-menu.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#mobile-menu:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Masonry Grid */
.masonry-grid {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 768px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* Form Styles */
.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 0;
  width: 100%;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-bottom-color: white;
}

.form-label {
  font-family: "Antonio", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: 0.5rem;
  display: block;
}

/* Utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Magazine Grid */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.magazine-item {
  position: relative;
  overflow: hidden;
}

.magazine-item img {
  transition: transform 0.7s ease;
}

.magazine-item:hover img {
  transform: scale(1.05);
}

/* Category Tabs */
.category-tab.active {
  border-bottom: 1px solid white;
  opacity: 1;
}

/* Company Map */
.map-grayscale {
  filter: grayscale(100%) invert(90%) contrast(120%);
}

/* Staff Card */
.staff-card {
  transition: all 0.5s ease;
}

.staff-card:hover {
  flex-grow: 1.5;
}

/* Content Body Fixes */
.p-entry-body img {
  max-width: 100%;
  height: auto;
}

.p-entry-body p {
  margin-bottom: 1.5em;
  line-height: 1.8;
}

/* ==========================================================================
   Page: Single Works
   ========================================================================== */

/* Hero Section */
.p-work-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6rem;
  overflow: hidden;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .p-work-hero {
    padding-bottom: 8rem;
  }
}

.p-work-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.8),
      transparent,
      rgba(0, 0, 0, 0.2));
}

.p-work-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-work-hero__content {
    padding: 0 5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-work-hero__header {
  flex: 1;
}

.p-work-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.p-work-hero__cat {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-work-hero__year {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  font-weight: 700;
}

.p-work-hero__title {
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-work-hero__title {
    font-size: 3rem;
    /* text-5xl */
  }
}

@media (min-width: 1024px) {
  .p-work-hero__title {
    font-size: 4.5rem;
    /* text-7xl */
  }
}

.p-work-hero__subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .p-work-hero__subtitle {
    font-size: 1.5rem;
  }
}

.p-work-hero__spec {
  display: none;
}

@media (min-width: 768px) {
  .p-work-hero__spec {
    display: block;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 2;
    opacity: 0.7;
  }
}

/* Body Container */
.p-work-body {
  background-color: var(--color-bg-base);
  position: relative;
  z-index: 20;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* Common Section Title */
.p-work-section-title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-work-section-title {
    font-size: 3rem;
    margin-bottom: 5rem;
  }
}

/* 1. Concept Section */
.p-work-concept {
  padding: 0 1.5rem;
  max-width: 1000px;
  margin: 0 auto 8rem;
}

@media (min-width: 768px) {
  .p-work-concept {
    padding: 0 5rem;
    margin-bottom: 10rem;
  }
}

.p-work-concept__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.p-work-concept__title {
  font-family: var(--font-secondary);
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-work-concept__title {
    font-size: 3.5rem;
  }
}

.p-work-concept__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  text-align: justify;
}

@media (min-width: 768px) {
  .p-work-concept__text {
    font-size: 1rem;
  }
}

/* 2. Movie Section */
.p-work-movie {
  width: 100%;
  max-width: 1600px;
  padding: 0 1rem;
  margin: 0 auto 8rem;
}

@media (min-width: 768px) {
  .p-work-movie {
    padding: 0 3rem;
    margin-bottom: 12rem;
  }
}

.p-work-movie__inner {
  width: 100%;
  margin: 0 auto;
}

.p-work-movie__iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.p-work-movie__iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 3. Points Section (3 Columns) */
.p-work-points {
  padding: 0 1rem;
  max-width: 1600px;
  margin: 0 auto 8rem;
}

@media (min-width: 768px) {
  .p-work-points {
    padding: 0 3rem;
    margin-bottom: 12rem;
  }
}

.p-work-points__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

@media (min-width: 768px) {
  .p-work-points__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.p-work-points__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-work-points__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.p-work-points__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.p-work-points__img-wrap:hover .p-work-points__img {
  transform: scale(1.05);
}

.p-work-points__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-text-gray-300);
}

/* 4. Gallery Section (Simple Grid) */
.p-work-gallery-simple {
  padding: 0 1rem;
  max-width: 1600px;
  margin: 0 auto 8rem;
}

@media (min-width: 768px) {
  .p-work-gallery-simple {
    padding: 0 3rem;
    margin-bottom: 12rem;
  }
}

.p-work-gallery-simple__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-work-gallery-simple__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.p-work-gallery-simple__item {
  position: relative;
  aspect-ratio: 1;
  /* Square or 4:3 preference */
  overflow: hidden;
}

.p-work-gallery-simple__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s, filter 0.3s;
}

.p-work-gallery-simple__link:hover .p-work-gallery-simple__img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Spec Data Section */
.p-work-spec {
  padding: 4rem 1.5rem 8rem;
  max-width: 1024px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-work-spec {
    padding: 8rem 5rem;
  }
}

.p-work-spec__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 700;
  margin-bottom: 3rem;
}

.p-work-spec__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  font-family: var(--font-secondary);
}

@media (min-width: 768px) {
  .p-work-spec__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

.p-work-spec__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-work-spec__row--full {
    grid-column: span 2;
  }
}

.p-work-spec__term {
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-bottom: 0.25rem;
}

.p-work-spec__desc {
  font-size: 1.125rem;
}

/* Pagination */
.p-work-pagination {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 1.5rem;
}

.p-work-pagination__inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.p-work-pagination__item {
  flex: 1;
}

.p-work-pagination__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.p-work-pagination__link:hover {
  opacity: 1;
}

.p-work-pagination__item--next .p-work-pagination__link {
  justify-content: flex-end;
  text-align: right;
}

.p-work-pagination__thumb {
  width: 4rem;
  height: 3rem;
  overflow: hidden;
  display: none;
}

@media (min-width: 768px) {
  .p-work-pagination__thumb {
    display: block;
  }
}

.p-work-pagination__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-pagination__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-500);
  font-weight: 700;
}

.p-work-pagination__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-work-pagination__item--list {
  flex: 0;
}

.p-work-pagination__list-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.p-work-pagination__list-btn:hover {
  opacity: 1;
}

.p-work-pagination__icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  width: 1rem;
  height: 1rem;
}

.p-work-pagination__icon::before,
.p-work-pagination__icon::after {
  content: "";
  display: block;
  background-color: white;
}

.p-work-pagination__list-btn .grid {}

/* Common CTA (Work Specific) */
.p-work-cta {
  background-color: var(--color-bg-base);
}

/* Pagination overrides for Model A (Light Theme) */
.p-model-detail--a .p-work-pagination {
  background-color: #fff;
  border-top-color: #e5e5e5;
  color: #000;
}

.p-model-detail--a .p-work-pagination__label {
  color: #666;
}

.p-model-detail--a .p-work-pagination__title {
  color: #000;
}

.p-model-detail--a .p-work-pagination__icon::before,
.p-model-detail--a .p-work-pagination__icon::after {
  background-color: #000;
}

/* Pagination overrides for Model N (Neutral Theme) */
.p-model-detail--n .p-work-pagination {
  background-color: #e5e5e5;
  border-top-color: #fff;
  color: #000;
}

.p-model-detail--n .p-work-pagination__label {
  color: #666;
}

.p-model-detail--n .p-work-pagination__title {
  color: #000;
}

.p-model-detail--n .p-work-pagination__icon::before,
.p-model-detail--n .p-work-pagination__icon::after {
  background-color: #000;
}

.p-model-detail--a .p-design-highlights__title {
  color: #4b5563;
}

.p-model-detail--a .p-design-highlights__box-title {
  color: #4b5563;
}

@media (min-width: 768px) {
  .p-work-cta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-work-cta__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
  overflow: hidden;
  color: white;
}

.p-work-cta__item--contact {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.p-work-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.7s, opacity 0.7s;
}

.p-work-cta__item:hover .p-work-cta__bg img {
  transform: scale(1.05);
  opacity: 1;
}

.p-work-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.p-work-cta__item:hover .p-work-cta__bg::after {
  background-color: rgba(0, 0, 0, 0.2);
}

.p-work-cta__content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.p-work-cta__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.p-work-cta__desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
}

/* Mobile Optimizations from Previous Step */
@media (max-width: 767px) {
  .p-work-hero__img {
    height: auto !important;
    min-height: 50vh !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
  }

  .p-work-gallery__img,
  .p-work-gallery__grid-cell img,
  .p-work-gallery__detail-cell img {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    max-height: none !important;
    width: 100% !important;
  }

  .p-work-gallery__detail-grid::-webkit-scrollbar {
    display: none;
  }
}

.p-work-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-hero__bg picture,
.p-work-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-work-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deep black gradient from bottom for text readability */
  background: linear-gradient(to top,
      rgba(26, 26, 26, 1) 0%,
      rgba(26, 26, 26, 0.8) 20%,
      rgba(26, 26, 26, 0) 60%);
}

.p-work-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-hero__content {
    padding: 4rem 5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-work-hero__header {
  flex: 1;
}

/* Typography */
.p-work-hero__title {
  font-family: var(--font-primary);
  /* Antonio/Oswald */
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-work-hero__title {
    font-size: 6rem;
    /* Huge title on PC */
  }
}

.p-work-hero__subtitle {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  opacity: 0.9;
  padding-left: 0.25rem;
}

@media (min-width: 768px) {
  .p-work-hero__subtitle {
    font-size: 1.125rem;
  }
}

/* Specs Overlay */
.p-work-hero__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .p-work-hero__spec {
    flex-direction: row;
    gap: 2rem;
    margin-top: 0;
    justify-content: flex-end;
    text-align: right;
    padding-left: 3rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
}

.p-work-hero__spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Single Topics (Magazine) Editorial Styles
   -------------------------------------------------------------------------- */
.p-related-title {
  color: #ffffff !important;
}

.p-related-post-title {
  color: #ffffff !important;
}

/* Article Typography */
.prose-editorial {
  color: #f3f4f6;
  /* gray-100 for readability on dark bg */
}

.prose-editorial h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin-top: 5rem;
  margin-bottom: 2.5rem;
  letter-spacing: 0.05em;
  border-left: 4px solid #ffffff;
  padding-left: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .prose-editorial h2 {
    font-size: 2rem;
  }
}

.prose-editorial h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.prose-editorial p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 2;
  /* Increased readability */
  margin-bottom: 2.5rem;
  color: #e5e7eb;
  /* gray-200 */
  font-size: 1rem;
  /* 16px base size */
  text-align: justify;
}

.prose-editorial blockquote {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #fff;
  padding: 2rem;
  margin: 3rem 0;
  border-left: 4px solid #fff;
  background: rgba(255, 255, 255, 0.05);
}

.prose-editorial img {
  width: 100%;
  height: auto;
  margin: 4rem 0 2rem 0;
  display: block;
}

.prose-editorial figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  color: #9ca3af;
  /* gray-400 */
  text-align: center;
  margin-bottom: 3rem;
}

.prose-editorial ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 3rem;
  color: #e5e7eb;
}

.prose-editorial li {
  margin-bottom: 1rem;
  line-height: 1.8;
  font-size: 1rem;
}

/* Button Styles */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  border: 1px solid currentColor;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 700;
  transition: all 0.3s ease;
  line-height: 1.2;
}

.p-btn--white {
  color: #ffffff;
  border-color: #ffffff;
}

.p-btn--white:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  .p-btn--white:hover {
    background-color: #ffffff;
    color: #000000;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  }
}

/* --------------------------------------------------------------------------
   Topics List (Magazine) Styles
   -------------------------------------------------------------------------- */
.p-magazine-item {
  display: block;
  position: relative;
  overflow: hidden;
}

.p-magazine-item__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.p-magazine-item:hover .p-magazine-item__img {
  transform: scale(1.05);
}

.p-magazine-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* SP: 1 column */
  gap: 2rem;
  padding-bottom: 4rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .p-magazine-grid {
    grid-template-columns: repeat(3, 1fr);
    /* PC: 3 columns */
    gap: 2rem;
    /* Reduced gap to fit more easily */
    padding-bottom: 6rem;
    /* Removed max-width to allow natural sizing based on 4:3 ratio and grid */
  }
}

/* Pagination Styles */
.p-magazine-pagination {
  margin-top: 2rem;
  margin-bottom: 6rem;
  display: flex;
  justify-content: center;
}

.p-magazine-pagination ul {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.p-magazine-pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.p-magazine-pagination .page-numbers.current,
.p-magazine-pagination .page-numbers:hover {
  background-color: #ffffff;
  color: #000000;
}

.p-magazine-pagination .page-numbers.dots {
  border: none;
  cursor: default;
}

.p-magazine-pagination .page-numbers.dots:hover {
  background-color: transparent;
  color: #ffffff;
}

.p-magazine-no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 0;
  color: #999;
}

/* --------------------------------------------------------------------------
   Body & Concept: Vertical Writing
   -------------------------------------------------------------------------- */
.p-work-body {
  background-color: var(--color-bg-base);
  position: relative;
  z-index: 20;
  padding-top: 5rem;
}

.p-work-concept {
  position: relative;
  padding: 0 1.5rem;
  max-width: 1400px;
  margin: 0 auto 10rem;
}

@media (min-width: 768px) {
  .p-work-concept {
    padding: 0 5rem;
    margin-bottom: 15rem;
  }
}

.p-work-concept__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

@media (min-width: 768px) {
  .p-work-concept__inner {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

/* Text Area (Horizontal on PC) */
@media (min-width: 768px) {
  .p-work-concept__header {
    width: 100%;
    display: block;
    height: auto;
    margin-bottom: 2rem;
  }
}

.p-work-concept__title {
  font-family: var(--font-secondary);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  color: #fff;
  text-align: center;
}

@media (min-width: 768px) {
  .p-work-concept__title {
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
  }
}

.p-work-concept__text {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  line-height: 2.2;
  color: var(--color-text-gray-300);
  text-align: justify;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-work-concept__text {
    font-size: 1rem;
    line-height: 2.5;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Lightbox UI
   -------------------------------------------------------------------------- */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  user-select: none;
}

/* Close Button */
.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
  z-index: 10000;
}

.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
}

.lightbox-close::before {
  transform: rotate(45deg);
}

.lightbox-close::after {
  transform: rotate(-45deg);
}

.lightbox-close:hover {
  transform: rotate(90deg);
}

/* Nav Buttons */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.7;
}

.lightbox-prev {
  left: 2rem;
}

.lightbox-next {
  right: 2rem;
}

.lightbox-prev::before,
.lightbox-next::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-top: 2px solid white;
  border-right: 2px solid white;
}

.lightbox-prev::before {
  transform: rotate(-135deg);
}

.lightbox-next::before {
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.3);
    /* Slightly visible bg for visibility on touch */
    border-radius: 50%;
  }

  .lightbox-prev {
    left: 1rem;
  }

  .lightbox-next {
    right: 1rem;
  }

  .lightbox-prev::before,
  .lightbox-next::before {
    width: 1rem;
    height: 1rem;
  }

  .lightbox-prev::before {
    margin-left: 0.5rem;
  }

  .lightbox-next::before {
    margin-right: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Gallery: Full Bleed Rhythm
   -------------------------------------------------------------------------- */
.p-work-gallery {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10rem;
}

/* Full Bleed Image Item */
.p-work-gallery__item {
  width: 100%;
  position: relative;
}

.p-work-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Ensure mobile images are tall enough */
@media (max-width: 767px) {
  .p-work-gallery__item img {
    min-height: 300px;
    /* Ensure impact */
  }
}

/* Text / Spacer Block between images */
.p-work-gallery__text-block {
  padding: 6rem 1.5rem;
  background-color: var(--color-bg-base);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-gallery__text-block {
    padding: 10rem 5rem;
    gap: 2rem;
  }
}

.p-work-gallery__caption-title {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-work-gallery__caption-title {
    font-size: 1.5rem;
  }
}

.p-work-gallery__caption-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
  line-height: 2;
  max-width: 600px;
}

/* Grid Layouts converted to Full Bleed for mobile, simple grid for PC */
.p-work-gallery__grid {
  display: grid;
  gap: 1rem;
  padding: 0 1.5rem 6rem;
}

@media (min-width: 768px) {
  .p-work-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 0 5rem 10rem;
  }
}

/* Detail Slider (Keep recent mobile slider logic but refine) */
.p-work-gallery__slider {
  padding-left: 1.5rem;
  padding-bottom: 6rem;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar */
.p-work-gallery__slider::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .p-work-gallery__slider {
    padding: 0 5rem 10rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

.p-work-gallery__slide-item {
  flex: 0 0 80%;
  scroll-snap-align: center;
  aspect-ratio: 4/3;
}

@media (min-width: 768px) {
  .p-work-gallery__slide-item {
    flex: auto;
    aspect-ratio: 1;
  }
}

.p-work-gallery__slide-item img {
  height: 100%;
}

/* --------------------------------------------------------------------------
   Spec, Pagination, CTA (Retain standard styling but cleaned)
   -------------------------------------------------------------------------- */
.p-work-spec {
  padding: 4rem 1.5rem 8rem;
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-work-spec__list {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-spec__list {
    grid-template-columns: 1fr 1fr;
  }
}

.p-work-spec__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-work-spec__term {
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
}

.p-work-spec__desc {
  font-size: 1rem;
  font-weight: 500;
}

/* Pagination & CTA: Reuse existing utility classes if possible or minimal re-def */
.p-work-pagination {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4rem 1.5rem;
}

.p-work-pagination__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-work-pagination__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.p-work-pagination__link:hover {
  opacity: 1;
}

.p-work-pagination__label {
  font-size: 0.75rem;
  color: #888;
  letter-spacing: 0.1em;
}

.p-work-pagination__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.p-work-cta {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-work-cta {
    grid-template-columns: 1fr 1fr;
  }
}

.p-work-cta__item {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.p-work-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.p-work-cta__item:hover .p-work-cta__bg img {
  transform: scale(1.05);
}

.p-work-cta__content {
  z-index: 10;
  position: relative;
  text-align: center;
}

.p-work-cta__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .p-work-hero {
    padding-bottom: 8rem;
  }
}

.p-work-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.8),
      transparent,
      rgba(0, 0, 0, 0.2));
}

.p-work-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-work-hero__content {
    padding: 0 5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-work-hero__header {
  flex: 1;
}

.p-work-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.p-work-hero__cat {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-work-hero__year {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-work-hero__title {
    font-size: 3rem;
    /* text-5xl */
  }
}

@media (min-width: 1024px) {
  .p-work-hero__title {
    font-size: 4.5rem;
    /* text-7xl */
  }
}

.p-work-hero__subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .p-work-hero__subtitle {
    font-size: 1.5rem;
  }
}

.p-work-hero__spec {
  display: none;
}

@media (min-width: 768px) {
  .p-work-hero__spec {
    display: block;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 2;
    opacity: 0.7;
  }
}

/* Body Container */
.p-work-body {
  background-color: var(--color-bg-base);
  position: relative;
  z-index: 20;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* Concept Section */
.p-work-concept {
  padding: 0 1.5rem;
  max-width: 1600px;
  margin: 0 auto 8rem;
}

@media (min-width: 768px) {
  .p-work-concept {
    padding: 0 5rem;
    margin-bottom: 16rem;
  }
}

.p-work-concept__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-work-concept__inner {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8rem;
  }
}

.p-work-concept__header {
  width: 100%;
}

@media (min-width: 768px) {
  .p-work-concept__header {
    width: auto;
    height: 400px;
  }
}

.p-work-concept__title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-concept__title {
    font-size: 2.25rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.1em;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0;
    padding-right: 3rem;
    text-align: right;
  }
}

.p-work-concept__text {
  max-width: 40rem;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-300);
  text-align: justify;
}

@media (min-width: 768px) {
  .p-work-concept__text {
    font-size: 1rem;
  }
}

/* Gallery Section */
.p-work-gallery {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

@media (min-width: 768px) {
  .p-work-gallery {
    gap: 12rem;
  }
}

/* Gallery Item: Full Bleed */
.p-work-gallery__item--full {
  width: 100%;
}

.p-work-gallery__img-wrap {
  position: relative;
  width: 100%;
}

.p-work-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

.p-work-gallery__item--full .p-work-gallery__img {
  height: 60vh;
}

@media (min-width: 768px) {
  .p-work-gallery__item--full .p-work-gallery__img {
    height: 90vh;
  }
}

/* Highlight 1 & 2 Mobile Visibility Fix */
@media (max-width: 767px) {

  .p-work-gallery__item--highlight-1 .p-work-gallery__img,
  .p-work-gallery__item--highlight-2 .p-work-gallery__img {
    height: auto !important;
    max-height: 80vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
}

.p-work-gallery__caption {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  text-align: right;
  opacity: 0;
  transition: opacity 0.5s;
}

@media (min-width: 768px) {
  .p-work-gallery__caption {
    bottom: 2.5rem;
    right: 2.5rem;
  }
}

.p-work-gallery__img-wrap:hover .p-work-gallery__caption {
  opacity: 1;
}

.p-work-gallery__caption-text {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Gallery Item: ZigZag */
.p-work-gallery__item--zigzag {
  padding: 0 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-work-gallery__item--zigzag {
    padding: 0 5rem;
    flex-direction: row;
    align-items: center;
    gap: 6rem;
  }

  .p-work-gallery__item--zigzag.is-reverse {
    flex-direction: row-reverse;
  }
}

.p-work-gallery__content {
  flex: 1;
}

@media (min-width: 768px) {
  .p-work-gallery__content {
    flex: 0 0 33.333%;
  }
}

.p-work-gallery__media {
  width: 100%;
}

@media (min-width: 768px) {
  .p-work-gallery__media {
    flex: 1;
  }
}

.p-work-gallery__title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .p-work-gallery__title {
    font-size: 1.875rem;
  }
}

.p-work-gallery__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-gray-400);
  text-align: justify;
}

/* Gallery Item: Dynamic Grid */
.p-work-gallery__item--dynamic {
  padding: 0 1rem;
  max-width: 1800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-work-gallery__item--dynamic {
    padding: 0 3rem;
  }
}

.p-work-gallery__section-title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 4rem;
  opacity: 0.1;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-work-gallery__section-title {
    font-size: 3.75rem;
  }
}

.p-work-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-work-gallery__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 400px);
    gap: 2rem;
  }
}

.p-work-gallery__grid-cell {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.p-work-gallery__grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-work-gallery__grid-cell:hover img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .p-work-gallery__grid-cell--large {
    grid-column: span 5;
    grid-row: span 2;
  }

  .p-work-gallery__grid-cell--top-right {
    grid-column: span 7;
    grid-row: span 1;
  }

  .p-work-gallery__grid-cell--bottom-right {
    grid-column: span 4;
    grid-row: span 1;
  }

  .p-work-gallery__grid-cell--text {
    grid-column: span 3;
    grid-row: span 1;
  }
}

.p-work-gallery__grid-cell--text {
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.p-work-gallery__grid-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
  color: #888;
}

/* Gallery Item: Detail Grid */
.p-work-gallery__item--detail {
  padding: 0 1rem;
  max-width: 1600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-work-gallery__item--detail {
    padding: 0 8rem;
  }
}

.p-work-gallery__detail-grid {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  /* For scrollbar space */
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .p-work-gallery__detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-bottom: 0;
  }
}

.p-work-gallery__detail-cell {
  flex: 0 0 80%;
  scroll-snap-align: center;
  aspect-ratio: 1;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-work-gallery__detail-cell {
    flex: auto;
  }
}

.p-work-gallery__detail-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

/* Auto Color on Scroll (PC & Mobile) */
.p-work-gallery__img.is-in-view {
  filter: grayscale(0%);
}

.p-work-gallery__detail-cell:hover img {
  transform: scale(1.1);
  /* Hover still works for manual interaction */
  filter: grayscale(0%);
}

.p-work-gallery__detail-caption {
  text-align: right;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-top: 1rem;
  opacity: 0.5;
  font-weight: 700;
}

/* Spec Data Section */
.p-work-spec {
  padding: 8rem 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-work-spec {
    padding: 8rem 5rem;
  }
}

.p-work-spec__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 700;
  margin-bottom: 3rem;
}

.p-work-spec__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  font-family: var(--font-secondary);
}

@media (min-width: 768px) {
  .p-work-spec__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

.p-work-spec__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-work-spec__row--full {
    grid-column: span 2;
  }
}

.p-work-spec__term {
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-bottom: 0.25rem;
}

.p-work-spec__desc {
  font-size: 1.125rem;
}

/* Pagination */
.p-work-pagination {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 1.5rem;
}

.p-work-pagination__inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.p-work-pagination__item {
  flex: 1;
}

.p-work-pagination__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.p-work-pagination__link:hover {
  opacity: 1;
}

.p-work-pagination__item--next .p-work-pagination__link {
  justify-content: flex-end;
  text-align: right;
}

.p-work-pagination__thumb {
  width: 4rem;
  height: 3rem;
  overflow: hidden;
  display: none;
}

@media (min-width: 768px) {
  .p-work-pagination__thumb {
    display: block;
  }
}

.p-work-pagination__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-work-pagination__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-text-gray-500);
  font-weight: 700;
}

.p-work-pagination__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.p-work-pagination__item--list {
  flex: 0;
}

.p-work-pagination__list-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.p-work-pagination__list-btn:hover {
  opacity: 1;
}

.p-work-pagination__icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  width: 1rem;
  height: 1rem;
}

.p-work-pagination__icon::before,
.p-work-pagination__icon::after {
  content: "";
  display: block;
  background-color: white;
}

/* This is a bit of a hack to draw 4 dots with pseudo elements, better to use 4 spans but span is empty in PHP */
/* Re-implementing icon purely with background-image or simplier blocks would be better but keeping it simple */
/* Wait, the PHP has 4 spans inside a grid. */

/* Fix PHP spans for icon */
.p-work-pagination__list-btn .grid {
  /* Using the existing classes from HTML as reference */
}

/* Common CTA (Work Specific) */
.p-work-cta {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-work-cta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-work-cta__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
  overflow: hidden;
  color: white;
}

.p-work-cta__item--contact {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.p-work-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-work-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.7s, opacity 0.7s;
}

.p-work-cta__item:hover .p-work-cta__bg img {
  transform: scale(1.05);
  opacity: 1;
}

.p-work-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.p-work-cta__item:hover .p-work-cta__bg::after {
  background-color: rgba(0, 0, 0, 0.2);
}

.p-work-cta__content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.p-work-cta__title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.p-work-cta__desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
}

/* ==========================================================================
   Mobile Optimization: Image Display Fix (Single Works)
   Overriding previous styles to prevent cropping on mobile (<768px)
   ========================================================================== */
@media (max-width: 767px) {

  /* 
     1.    /* 
     1. Hero Section: Immersive Overlay (Mobile)
     - Height: 100svh (Full Screen)
     - Image: Background Cover
     - Text: Overlay at bottom with gradient
    */
  .p-work-hero {
    height: 100svh !important;
    /* Force full height on mobile */
    min-height: 100svh !important;
    position: relative !important;
  }

  .p-work-hero__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  /* Picture & Image Styles for Background */
  .p-work-hero__bg picture,
  .p-work-hero__bg img.p-work-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .p-work-hero__overlay {
    /* Stronger gradient for mobile readability */
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        transparent 100%) !important;
    z-index: 1 !important;
  }

  .p-work-hero__content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 2rem 1.5rem 3rem !important;
    /* Adjust padding for aesthetics */
    z-index: 10 !important;
    text-align: left !important;
  }

  /* Typography Adjustments for Overlay */
  .p-work-hero__title {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Enhance contrast */
    margin-bottom: 0.5rem !important;
  }

  .p-work-hero__subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Hide Spec on mobile if it clutters, or style it specifically? 
       User didn't ask to hide, just overlay. Keeping it but ensuring visibility. 
    */
  .p-work-hero__spec {
    display: block !important;
    /* Ensure visibility if it was hidden */
    margin-top: 1rem !important;
    border-left: none !important;
    padding-left: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.725rem !important;
  }

  .p-work-hero__spec-item {
    display: inline-block;
    margin-right: 1rem;
  }

  /* Grid Layout Reset for Mobile */
  .p-work-gallery__grid {
    display: block !important;
  }

  .p-work-gallery__grid-cell {
    width: 100% !important;
    margin-bottom: 1rem !important;
    height: auto !important;
    min-height: 0 !important;
    /* Reset min-height */
  }

  /* Fix Last Slide Collapse */
  .p-work-gallery__grid-cell--text {
    min-height: 300px !important;
    display: flex !important;
  }

  .p-work-gallery__grid-cell img {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    max-height: none !important;
  }

  /* 
     2. Gallery Images (Global Override)
     - Applies to Full Bleed, ZigZag, Dynamic Grid, Detail Grid
     - Force natural aspect ratio (height: auto)
     - Prevent object-fit: cover cropping
    */
  .p-work-gallery__img,
  .p-work-gallery__item--full .p-work-gallery__img,
  .p-work-gallery__item--zigzag .p-work-gallery__img,
  .p-work-gallery__grid-cell img,
  .p-work-gallery__detail-cell img {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    max-height: none !important;
    width: 100% !important;
  }

  /* 
     3. Grid Layout Resets (Force Vertical Stack)
    */

  /* Dynamic Grid: Remove min-height constraints */
  .p-work-gallery__grid-cell {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 1rem;
    /* Add spacing between vertically stacked items */
  }

  /* FIX: Restore min-height for Text Cell (Last Slide of Grid) to prevent collapse */
  .p-work-gallery__grid-cell--text {
    min-height: 300px !important;
    display: flex !important;
    /* Ensure content centering */
  }

  /* Remove hover scale effect on mobile to prevent layout shift issues or keep it subtle */
  .p-work-gallery__grid-cell:hover img,
  .p-work-gallery__detail-cell:hover img {
    transform: none !important;
  }

  /* 
     4. Detail Grid: Horizontal Scroll Slider (Carousel)
    */
  .p-work-gallery__detail-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    /* Space for scrollbar if visible, though hidden below */

    /* Reset Grid props */
    grid-template-columns: none !important;
  }

  .p-work-gallery__detail-grid::-webkit-scrollbar {
    display: none;
  }

  .p-work-gallery__detail-cell {
    flex: 0 0 80% !important;
    /* Show 80% to indicate scrollability */
    width: auto !important;
    scroll-snap-align: center;
    aspect-ratio: auto !important;
    height: auto !important;
  }

  /* Ensure highlight items also follow the rule (overriding any specific highlight CSS) */
  .p-work-gallery__item--highlight-1 .p-work-gallery__img,
  .p-work-gallery__item--highlight-2 .p-work-gallery__img {
    max-height: none !important;
    margin: 0 !important;
  }

  /* 
     5. Hero Picture Tag Support 
    */
  .p-work-hero__bg picture {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* ==========================================================================
   99. Topics Grid Fix
   ========================================================================== */

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
  gap: 2rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-magazine-item {
  display: block;
  width: 100%;
}

/* ==========================================================================
   100. TOPICS Grid Layout (Forced)
   ========================================================================== */
/* TOPICS Grid Layout */
.p-magazine-grid {
  display: grid !important;
  width: 100%;
  margin: 0 auto 6rem;

  /* Mobile (SP): 1 Column */
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}

/* PC (768px+): 3 Columns */
@media screen and (min-width: 768px) {
  .p-magazine-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    /* gap-12 equivalent */
  }
}

/* Item Styling */
.p-magazine-item {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.p-magazine-item__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

.p-magazine-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-magazine-item:hover .p-magazine-item__img {
  transform: scale(1.05);
}

/* ==========================================================================
   101. TOPICS Isolated Layout Fix (Final)
   ========================================================================== */

/* Container: Force Max Width & Center */
.p-topics-container {
  max-width: none !important;
  /* Full width like Works */
  width: 100% !important;
  margin: 0 auto 6rem !important;
  padding: 0 1.5rem !important;

  display: grid !important;
  gap: 2rem !important;

  /* Default: Mobile 1 Column */
  grid-template-columns: 1fr !important;
}

/* PC: Force 3 Columns */
@media screen and (min-width: 768px) {
  .p-topics-container {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 3rem !important;
    /* Match l-container padding */
    gap: 1.5rem !important;
    /* Match Works grid gap */
  }
}

/* Card Item */
.p-topics-card {
  display: block !important;
  width: auto !important;
  /* Reset 100% width if present */
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
}

/* Thumbnail Wrapper */
.p-topics-thumb {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  margin-bottom: 1rem !important;
}

/* Image Proper Sizing */
.p-topics-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1);
  transition: transform 0.6s ease;
}

.p-topics-card:hover .p-topics-thumb img {
  transform: scale(1.05);
  /* Zoom effect */
}

/* ==========================================================================
   102. TOPICS Content Styling
   ========================================================================== */
.p-topics-content {
  margin-top: 1rem;
  color: inherit;
  text-align: left;
}

.p-topics-cat {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  /* 12px */
  font-weight: 700;
  color: var(--color-text-gray-400);
  /* Match Works label color concept */
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

.p-topics-title {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: #fff;
  /* Force White like Works */
}

/* Ensure title color is white if on dark theme, but usually topics list is white bg? 
   Assuming standard theme colors. If background is dark global, need white text.
   Global bg is .l-global-bg which is fixed. Main is .p-works-main.
   Checking p-works-main bg... earlier CSS suggests explicit bg color might be needed.
*/
.p-topics-date {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--color-text-gray-400);
  /* Muted white/gray */
  letter-spacing: 0.1em;
  display: block;
}

/* Hover effect for title */
.p-topics-card:hover .p-topics-title {
  text-decoration: underline;
}

/* ==========================================================================
   103. Category Filter Styling (Topics & Works)
   ========================================================================== */
.p-works-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  /* Managed by padding for borders */
  margin-bottom: 3rem;
}

.p-works-filter__btn {
  display: inline-block;
  font-family: var(--font-primary, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  /* Inactive White */
  background: transparent;
  border: none;
  padding: 0 1.5rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  /* White Separator */
  line-height: 1;
}

/* Remove border from last item */
.p-works-filter__btn:last-child {
  border-right: none;
}

.p-works-filter__btn.active,
.p-works-filter__btn:hover {
  color: #fff;
  /* Active White */
  font-weight: 700;
}

/* Mobile Adjustment: Just spacing, keep PC style */
@media (max-width: 767px) {
  .p-works-filter {
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .p-works-filter__btn {
    padding: 0 1rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    /* Keep border-right for "Same as PC" feel, 
           but might need logic to remove it on wrapped items? 
           CSS alone can't detect wrap. 
           For now, let's keep it simple as requested or maybe remove border on mobile if it looks messy?
           User said "Mobile fix to be SAME DESIGN as PC". 
           So I will keep the borders.
        */
  }
}

/* ==========================================================================
   Open House V2 (Detail Page Reproduction)
   ========================================================================== */

/* Noise Texture */
.p-openhouse-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
  mix-blend-mode: overlay;
}

/* Hero V2 */
.p-openhouse-hero-v2 {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0;
  /* Override default if needed */
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2 {
    height: 70vh;
  }
}

.p-openhouse-hero-v2__bg {
  position: absolute;
  inset: 0;
}

.p-openhouse-hero-v2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-openhouse-hero-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      #1a1a1a,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.2));
}

.p-openhouse-hero-v2__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1.5rem;
  margin-top: 4rem;
}

.p-openhouse-hero-v2__status {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-family: "Antonio", sans-serif;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
  font-weight: 700;
}

.p-openhouse-hero-v2__status.is-open {
  background-color: #bfa472;
  /* Gold/Accent */
  border-color: #bfa472;
  color: #000;
}

.p-openhouse-hero-v2__status.is-upcoming {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.p-openhouse-hero-v2__status.is-closed {
  background-color: #4b5563;
  /* Gray */
  border-color: #4b5563;
  color: #d1d5db;
}

.p-openhouse-hero-v2__date {
  font-family: "Antonio", sans-serif;
  font-size: 2.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__date {
    font-size: 3.75rem;
  }
}

.p-openhouse-hero-v2__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__title {
    font-size: 2.25rem;
  }
}

.p-openhouse-hero-v2__loc {
  font-family: "Antonio", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  opacity: 0.8;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__loc {
    font-size: 1rem;
  }
}

/* Main Container V2 */
.p-openhouse-container-v2 {
  position: relative;
  z-index: 20;
  margin-top: -5rem;
  padding: 0 1.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .p-openhouse-container-v2 {
    padding: 0 8rem;
  }
}

@media (min-width: 1024px) {
  .p-openhouse-container-v2 {
    padding: 0 16rem;
  }
}

/* Intro Box / Generic Box */
.p-openhouse-box {
  background-color: #1a1a1a;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-openhouse-box {
    padding: 4rem;
  }
}

.p-openhouse-box__title {
  font-family: "Antonio", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  text-align: center;
  color: #9ca3af;
  /* Gray-400 */
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-openhouse-box__title {
    font-size: 1.5rem;
  }
}

.p-openhouse-box__text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 2;
  text-align: justify;
  color: #d1d5db;
  /* Gray-300 */
  margin-bottom: 2rem;
}

/* Check Points inside Intro */
.p-openhouse-check {
  background-color: rgba(17, 24, 39, 0.5);
  /* Gray-900/50 */
  padding: 2rem;
  border-left: 4px solid #fff;
  margin-top: 3rem;
}

.p-openhouse-check__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.p-openhouse-check__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-openhouse-check__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #d1d5db;
}

.p-openhouse-check__icon {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.1em;
}

/* Gallery V2 */
.p-openhouse-gallery-v2 {
  margin-bottom: 6rem;
}

.p-openhouse-gallery-v2__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-openhouse-gallery-v2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Info Section V2 */
.p-openhouse-info-v2 {
  margin-bottom: 6rem;
}

.p-openhouse-info-v2__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .p-openhouse-info-v2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Definition List */
.p-openhouse-dl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.p-openhouse-row-v2 {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: 100px 1fr;
}

.p-openhouse-dt-v2 {
  color: #9ca3af;
  font-weight: 300;
}

.p-openhouse-dd-v2 {
  color: #fff;
}

/* Map V2 */
.p-openhouse-map-box {
  aspect-ratio: 1;
  background-color: #1f2937;
  position: relative;
  overflow: hidden;
}

.p-openhouse-map-box iframe {
  width: 100%;
  height: 100%;
  filter: grayscale(100%) invert(10%) contrast(1.2);
}

/* Reservation V2 */
.p-openhouse-reservation {
  /* background: linear-gradient(to bottom right, #222, #111); Removed per user request */
  /* border: 1px solid rgba(255, 255, 255, 0.1); Removed per user request */
  padding: 2rem;
  margin-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-openhouse-reservation {
    padding: 4rem;
  }
}

.p-openhouse-reservation__header {
  text-align: center;
  margin-bottom: 3rem;
}

.p-openhouse-reservation__title {
  font-family: "Antonio", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.p-openhouse-reservation__desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Mobile Sticky CTA */
.p-openhouse-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  background-color: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
}

@media (min-width: 768px) {
  .p-openhouse-sticky-cta {
    display: none;
  }
}

.p-cta-btn-line {
  flex: 1;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.p-cta-btn-reserve {
  flex: 1.5;
  padding: 1rem;
  background-color: #fff;
  color: #000;
  font-family: "Antonio", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ==========================================================================
   Open House Highlights (Swiper / Grid Update)
   ========================================================================== */
.p-openhouse-points {
  margin-top: 6rem;
  position: relative;
  overflow: hidden;
  /* For Swiper */
}

/* Lead Text */
.p-openhouse-points__lead {
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.8;
  font-size: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Card Style */
.p-point-card {
  display: flex;
  flex-direction: column;
}

.p-point-card__img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.p-point-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-point-card__num {
  display: block;
  font-family: "Antonio", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--color-gray-400);
}

.p-point-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.p-point-card__desc {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-gray-300);
}

/* Swiper Adjustment */
.p-points-slider {
  padding-bottom: 3rem;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: 0.4;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

/* ==========================================================================
   Open House Gallery
   ========================================================================== */
.p-openhouse-gallery {
  margin-bottom: 6rem;
}

.p-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.p-gallery-item {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.p-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (min-width: 768px) {
  .p-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Open House Benefits
   ========================================================================== */
.p-openhouse-benefit {
  margin-bottom: 6rem;
}

.p-benefit-box {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  padding: 2rem;
}

.p-benefit-box__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
}

.p-benefit-content {
  flex: 1;
}

.p-benefit-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-benefit-label {
  display: inline-block;
  font-family: "Antonio", sans-serif;
  font-size: 0.875rem;
  color: var(--color-gray-400);
  letter-spacing: 0.1em;
}

.p-benefit-desc {
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.p-benefit-note {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.p-benefit-img {
  width: 100%;
  aspect-ratio: 16/9;
}

.p-benefit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-benefit-box {
    padding: 3rem;
  }

  .p-benefit-box__inner {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  .p-benefit-img {
    width: 40%;
    flex-shrink: 0;
  }

  .p-benefit-title {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Open House Restructure Styles (Stand-alone Layout)
   ========================================================================== */

/* Information Section (Standalone top placement) */
.p-openhouse-info-standalone {
  background-color: #1a1a1a;
  padding: 1.5rem;
  margin-bottom: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .p-openhouse-info-standalone {
    padding: 3rem;
  }
}

/* Map Section (Standalone bottom placement) */
.p-openhouse-map-section {
  max-width: 1200px;
  margin: 0 auto 6rem;
  padding: 0 1.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .p-openhouse-map-section {
    margin-bottom: 8rem;
    padding: 0 3rem;
  }
}

/* Open House Reservation (Standalone centered) */
.p-openhouse-reservation--center {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8rem;
}

/* Open House Section Title (English) unified with H2 */
.p-openhouse-section-title,
.p-work-section-title {
  font-family: "Antonio", sans-serif;
  /* Unified Font */
  /* font-weight: 700; Inherited/Default */
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 2rem;
  color: #fff;
  /* Ensure visibility */
}

/* Override existing p-work-section-title specific sizes if needed, or rely on inheritance */
.p-work-section-title {
  font-size: 2rem;
}

@media (min-width: 768px) {
  .p-work-section-title {
    font-size: 3rem;
    margin-bottom: 5rem;
  }
}

.p-openhouse-section-title {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .p-openhouse-section-title {
    font-size: 2rem;
    margin-bottom: 4rem;
  }
}

.p-openhouse-text-antonio {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 1.1em;
}

.p-openhouse-note {
  font-size: 0.75em;
  color: #6b7280;
  margin-top: 0.25rem;
  display: block;
}

/* Helper Classes for points/text */
.p-work-points__title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.p-work-points__no-image {
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.u-mb-section {
  margin-bottom: 6rem;
}

@media (min-width: 768px) {
  .u-mb-section {
    margin-bottom: 8rem;
  }
}

/* Open House container width alignment override */
.p-openhouse-std-width {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
  .p-openhouse-std-width {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* ==========================================================================
   Benefits / Campaign Section
   ========================================================================== */
.p-openhouse-benefit {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.p-openhouse-benefit__inner {
  border: 2px solid #bfa472;
  /* Gold/Accent color */
  /* background-color: #fcfcfc; Removed for transparency */
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-openhouse-benefit__inner {
    padding: 3rem;
  }
}

.p-openhouse-benefit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .p-openhouse-benefit__grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
  }
}

/* Image */
.p-openhouse-benefit__img-area {
  width: 100%;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.p-openhouse-benefit__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Content */
.p-openhouse-benefit__content {
  display: flex;
  flex-direction: column;
}

.p-openhouse-benefit__title {
  font-family: "Antonio", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #bfa472;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-openhouse-benefit__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}

.p-openhouse-benefit__text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #d1d5db;
  /* Light Gray for dark BG */
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.p-openhouse-benefit__note {
  font-size: 0.8rem;
  color: #9ca3af;
  /* Muted Light Gray */
  margin-top: auto;
}

/* Map Color Override (Global Safety) */
.p-openhouse-map-box iframe {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Hero Updates */
.p-openhouse-hero-v2__title {
  font-size: 1.5rem;
  /* Larger Main Title */
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__title {
    font-size: 3.5rem;
  }
}

.p-openhouse-hero-v2__date {
  font-size: 1rem;
  /* Smaller Date */
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 1rem;
  order: -1;
  /* If using flex column, visually move up? Or just styling */
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__date {
    font-size: 1.25rem;
  }
}

.p-openhouse-hero-v2__subtitle {
  font-size: 0.875rem;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-openhouse-hero-v2__subtitle {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Reservation Form (CF7 Redesign)
   ========================================================================== */
.p-form {
  width: 100%;
  margin: 0 auto;
}

.p-form__row {
  margin-bottom: 2rem;
}

.p-form__row:last-child {
  margin-bottom: 0;
}

/* Label */
.p-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
}

.p-form__required {
  display: inline-block;
  background-color: #b91c1c;
  /* Red */
  color: #fff;
  font-size: 0.625rem;
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
  border-radius: 2px;
  vertical-align: 2px;
  letter-spacing: 0;
}

/* Input Fields */
.p-form__control {
  width: 100%;
  background-color: #1f2937;
  /* Gray-800 */
  border: 1px solid #374151;
  /* Gray-700 */
  border-radius: 0;
  padding: 1rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
  font-family: "Noto Sans JP", sans-serif;
}

.p-form__control:focus {
  outline: none;
  border-color: #bfa472;
  /* Gold */
  background-color: #111827;
  /* Gray-900 */
  box-shadow: 0 0 0 1px #bfa472;
}

.p-form__control::placeholder {
  color: #6b7280;
  /* Gray-500 */
}

/* Readonly State */
.p-form__control--readonly {
  background-color: #111827;
  /* Darker */
  border-color: #1f2937;
  color: #9ca3af;
  cursor: default;
}

.p-form__control--readonly:focus {
  border-color: #1f2937;
  box-shadow: none;
}

/* Flex Group for Date/Time */
.p-form__input-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .p-form__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
  }

  .p-form__label {
    margin-top: 0.75rem;
    /* Align with input text */
  }

  /* Remove border from last item if needed, or keeping it for consistency */
  .p-form__row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }

  .p-form__input-group {
    flex-direction: row;
  }

  .p-form__input-wrapper--time {
    width: 200px;
    flex-shrink: 0;
  }
}

/* Submit Button */
.p-form__submit-wrapper {
  margin-top: 4rem;
  text-align: center;
}

input.p-form__submit {
  display: block;
  /* Robust centering */
  margin: 0 auto;
  /* Robust centering */
  background-color: #fff;
  color: #000;
  border: none;
  padding: 1rem 4rem;
  font-family: "Antonio", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  -webkit-appearance: none;
}

input.p-form__submit:hover {
  background-color: #bfa472;
  /* Gold */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Flatpickr Customization (Dark Mode) */
.flatpickr-calendar {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.flatpickr-day {
  color: #e5e7eb !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #bfa472 !important;
  border-color: #bfa472 !important;
  color: #fff !important;
}

.flatpickr-months .flatpickr-month {
  color: #fff !important;
  fill: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #1f2937 !important;
}

.flatpickr-weekday {
  color: #9ca3af !important;
}

/* Flatpickr Availability Highlight */
/* Enabled days (not disabled) get a subtle background to indicate availability */
.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
  background-color: rgba(191, 164, 114, 0.15) !important;
  /* Gold tinted bg */
  border-color: rgba(191, 164, 114, 0.3) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* Ensure selected day stands out even more */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #bfa472 !important;
  border-color: #bfa472 !important;
  color: #000 !important;
  /* Text becomes black on gold for contrast */
}

/* Make disabled days clearly inactive */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #4b5563 !important;
  /* Dark Gray */
  background: transparent !important;
  border-color: transparent !important;
}

/* Radio Buttons (CF7 Custom) */
.p-form__input-wrapper--radio .wpcf7-list-item {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

.p-form__input-wrapper--radio .wpcf7-list-item-label {
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding-left: 0.25rem;
}

.p-form__input-wrapper--radio input[type="radio"] {
  accent-color: #bfa472;
  /* Gold accent for supported browsers */
  width: 1.25em;
  height: 1.25em;
  vertical-align: text-bottom;
  cursor: pointer;
}

/* ==========================================================================
   Sticky CTA Bar (Mobile & PC)
   ========================================================================== */
/* ==========================================================================
   Sticky CTA Bar (Mobile & PC)
   ========================================================================== */
/* ==========================================================================
   Sticky CTA Bar (Mobile & PC)
   ========================================================================== */
.p-openhouse-sticky-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Explicit requests: width 100% */
  z-index: 1000;
  background-color: #000;
  padding: 0.75rem;
  /* Standard units */
  box-sizing: border-box;
  /* Explicit request */
  margin: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* LINE Button (30% Ratio) */
.p-cta-btn-line {
  flex: 3;
  /* Ratio */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 0.75rem;
  width: auto;
  /* Flex controls width */
  min-width: 0;
  /* Allow shrinking below content size if strictly needed to prevent overflow */
}

.p-cta-btn-line i {
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.p-cta-btn-line span {
  font-size: 0.625rem;
  color: #ccc;
  white-space: nowrap;
}

/* Reservation Button (70% Ratio) */
.p-cta-btn-reserve {
  flex: 7;
  /* Ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #bfa472;
  color: #fff;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  /* Adjust if too large for small screens */
  letter-spacing: 0.05em;
  height: 44px;
  padding: 0;
  /* Remove horizontal padding entirely to rely on flex centering */
  transition: opacity 0.3s;
  border-radius: 2px;
  white-space: nowrap;
  width: auto;
  /* Flex controls width */
  min-width: 0;
  /* Allow shrinking */
}

.p-cta-btn-reserve:hover {
  opacity: 0.9;
  color: #fff;
}

/* PC Adjustments */
@media (min-width: 768px) {
  .p-openhouse-sticky-cta {
    padding: 0.5rem 2rem;
    gap: 2rem;
    justify-content: center;
    /* Center on PC */
  }

  .p-cta-btn-line {
    flex: 0 0 auto;
    /* Reset flex for PC */
    width: auto;
    flex-direction: row;
    gap: 0.5rem;
  }

  .p-cta-btn-line i {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .p-cta-btn-line span {
    font-size: 0.875rem;
    margin-top: 0;
  }

  .p-cta-btn-reserve {
    flex: 0 0 auto;
    /* Reset flex for PC */
    width: 300px;
    /* Fixed width */
    height: 40px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   5. New Index Animations & Utilities
   ========================================================================== */

/* Scroll Fade In */
.js-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Swiper Pagination Customization */
.swiper-pagination-bullet {
  background: #ccc;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: #000;
  opacity: 1;
}

/* Text Ellipsis */
.title-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Initial Hero Fade In */
.js-hero-fadein {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2s ease-out, transform 2s ease-out;
  will-change: opacity, transform;
}

.js-hero-fadein.is-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Loading Bar Blink Effect */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.is-blinking {
  animation: blink 0.1s step-end 4;
  /* Rapid flash */
}

/* ==========================================================================
   6. Top Page Refactor (Semantic)
   ========================================================================== */

/* Common Section Layout */
.p-top-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-top-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.p-top-section__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-top-section__header {
    margin-bottom: 4rem;
  }
}

.p-top-section__subtitle {
  display: block;
  font-size: 0.875rem;
  /* text-sm */
  font-weight: 700;
  /* font-bold */
  letter-spacing: 0.1em;
  /* tracking-widest */
  color: #9ca3af;
  /* text-gray-400 */
  margin-bottom: 0.5rem;
  /* mb-2 */
}

.p-top-section__title {
  font-size: 1.875rem;
  /* text-3xl */
  line-height: 2.25rem;
  font-family: var(--font-primary);
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-top-section__title {
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 2.5rem;
  }
}

/* Card / Card Grid (Lineup) */
.p-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* Card Component (Open House, Works, Lineup) */
.p-card {
  display: block;
  width: 100%;
}

.p-card__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #1f2937;
  /* bg-gray-800 */
}

.p-card__thumb--4-3 {
  aspect-ratio: 4 / 3;
}

.p-card__thumb--3-4 {
  aspect-ratio: 3 / 4;
}

.p-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-card:hover .p-card__img {
  transform: scale(1.1);
}

.p-card__label {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  color: #000;
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}

.p-card__body {
  margin-top: 1rem;
}

.p-card__date {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  /* text-gray-400 */
  margin-bottom: 0.25rem;
}

.p-card__title {
  font-size: 1.125rem;
  /* text-lg */
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.3s;
}

.p-card:hover .p-card__title {
  color: #9ca3af;
}

.p-card__text {
  font-size: 0.875rem;
  /* text-sm */
  color: #6b7280;
  /* text-gray-500 */
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Specific: Lineup Overlays */
.p-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.p-card:hover .p-card__overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.p-card__overlay-text {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  color: #fff;
}

.p-card__subtitle {
  font-size: 0.875rem;
}

/* Button Wrapper */
.p-btn-wrapper {
  margin-top: 2.5rem;
  text-align: center;
}

/* Section Specifics */

/* ABOUT */
.p-top-about {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

@media (min-width: 768px) {
  .p-top-about {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.p-top-about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-top-about__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-about__bg-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.p-top-about__content {
  position: relative;
  z-index: 10;
}

.p-top-about__subtitle {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: #d1d5db;
  /* text-gray-300 */
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-top-about__subtitle {
    font-size: 1rem;
  }
}

.p-top-about__title {
  font-size: 1.875rem;
  font-family: var(--font-primary);
  font-weight: 700;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-top-about__title {
    font-size: 3rem;
    /* text-5xl */
  }
}

.p-top-about__desc {
  color: #d1d5db;
  line-height: 2;
  margin-bottom: 2.5rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* MOVIE */
.p-top-movie__frame {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.p-top-movie__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* LINEUP BG */
.p-bg-zinc-900 {
  background-color: #18181b;
}

.p-section-lineup {
  background-color: rgba(24, 24, 27, 0.6);
}

/* COMPANY & CONTACT */
.p-grid-split {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-grid-split {
    grid-template-columns: 1fr 1fr;
  }
}

.p-split-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .p-split-box {
    aspect-ratio: auto;
    height: 600px;
  }
}

.p-split-box__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.p-split-box:hover .p-split-box__bg {
  transform: scale(1.05);
}

.p-split-box__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.p-split-box:hover .p-split-box__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.p-split-box__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2.5rem;
}

.p-split-box__title {
  font-size: 2.25rem;
  /* text-4xl */
  font-family: var(--font-primary);
  font-weight: 700;
  margin-bottom: 1rem;
}

.p-split-box__subtitle {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9ca3af;
  margin-bottom: 1rem;
}

.p-split-box__heading {
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.p-split-box__text {
  color: #9ca3af;
  margin-bottom: 2rem;
  max-width: 28rem;
}

/* CONSTRUCTION */
.p-top-construction {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.p-construction-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .p-construction-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.p-construction-img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background-color: #4b5563;
  min-height: 300px;
  object-fit: cover;
}

.p-construction-text {
  line-height: relaxed;
  color: #d1d5db;
}

.p-construction-text p+p {
  margin-top: 1rem;
}

.p-construction-note {
  font-size: 0.875rem;
  color: #6b7280;
}

/* TOPICS */
/* TOPICS */
/* .p-top-topics removed background per request */
.p-topics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .p-topics-header {
    margin-bottom: 4rem;
  }
}

.p-top-section__view-all {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem;
  transition: opacity 0.3s;
}

.p-top-section__view-all:hover {
  opacity: 0.6;
}

/* Hero Refactor */
.l-main-content {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
}

.p-hero__bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  z-index: 0;
}

.p-hero__bg-img.is-active {
  opacity: 1;
  z-index: 10;
}

/* ------------------------------------------
   OPEN HOUSE Archive - Ticket Design
------------------------------------------ */
.p-openhouse-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 56rem;
  /* max-w-4xl roughly */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-openhouse-list {
    max-width: 68rem;
    /* max-w-6xl roughly for wider image support */
  }
}

.p-ticket {
  display: flex;
  flex-direction: column;
  /* Mobile: Stack */
  background-color: rgba(34, 34, 34, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 300px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
  text-decoration: none;
  color: inherit;
  /* Ensure stacking context for pseudo-elements if needed */
}

@media (min-width: 768px) {
  .p-ticket {
    flex-direction: row;
    /* PC: Side by Side */
  }
}

.p-ticket:hover {
  transform: translateY(-0.5rem);
}

/* Visual Section (Left) */
.p-ticket__visual {
  position: relative;
  height: 16rem;
  /* h-64 */
  overflow: hidden;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .p-ticket__visual {
    height: auto;
    width: 50%;
    /* w-1/2 for 1200x628 landscape support */
    border-bottom: none;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
  }
}

.p-ticket__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, opacity 0.5s ease;
  opacity: 1;
}

@media (min-width: 768px) {
  .p-ticket__img {
    opacity: 0.8;
  }
}

.p-ticket:hover .p-ticket__img {
  transform: scale(1.05);
  /* slightly larger scale on hover */
  opacity: 1;
}

/* Cutout Decorations */
.p-ticket__cutout {
  position: absolute;
  width: 1.5rem;
  /* w-6 */
  height: 1.5rem;
  /* h-6 */
  background-color: #1a1a1a;
  /* Matches page bg - adjust if needed */
  border-radius: 50%;
  z-index: 10;
}

/* Cutout Positioning */
.p-ticket__cutout--visual-left {
  top: 50%;
  left: -0.75rem;
  transform: translateY(-50%);
}

.p-ticket__cutout--visual-right {
  top: 50%;
  right: -0.75rem;
  transform: translateY(-50%);
  display: none;
}

/* PC only usually */

.p-ticket__cutout--info-top {
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile only */
.p-ticket__cutout--info-right {
  top: 50%;
  right: -0.75rem;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .p-ticket__cutout--visual-right {
    display: block;
  }

  .p-ticket__cutout--info-top {
    display: none;
  }
}

/* Info Section (Right) */
.p-ticket__info {
  position: relative;
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .p-ticket__info {
    width: 50%;
    /* w-1/2 */
    padding-left: 3rem;
  }
}

/* Info Elements */
.p-ticket__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-ticket__status {
  background-color: #fff;
  color: #000;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  /* 10px */
  letter-spacing: 0.2em;
  font-weight: 700;
  font-family: "Antonio", sans-serif;
  border: 1px solid transparent;
}

.p-ticket__status.is-closed {
  background: transparent;
  border-color: #666;
  color: #666;
}

.p-ticket__date {
  color: #9ca3af;
  /* gray-400 */
  font-size: 0.75rem;
  /* xs */
  font-family: "Antonio", sans-serif;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.p-ticket__title {
  font-family: "Antonio", sans-serif;
  font-size: 1.5rem;
  /* 3xl */
  font-weight: 700;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .p-ticket__title {
    font-size: 2.25rem;
    /* 4xl */
  }
}

.p-ticket:hover .p-ticket__title {
  color: #d1d5db;
  /* gray-300 */
}

.p-ticket__subtitle {
  font-size: 0.875rem;
  /* sm */
  color: #9ca3af;
  margin-bottom: 1.5rem;
  font-family: "Noto Sans JP", sans-serif;
}

.p-ticket__desc {
  font-size: 0.875rem;
  color: #d1d5db;
  line-height: 1.625;
  font-family: "Noto Sans JP", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-ticket__desc {
    -webkit-line-clamp: unset;
  }
}

.p-ticket__action {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

.p-ticket__btn {
  display: inline-block;
  border: 1px solid #fff;
  padding: 0.75rem 2rem;
  font-family: "Antonio", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  transition: background-color 0.3s, color 0.3s;
  background: transparent;
  color: #fff;
}

.p-ticket:hover .p-ticket__btn {
  background-color: #fff;
  color: #000;
}

.p-ticket.is-closed {
  opacity: 0.5;
  /* pointer-events: none; - keeping clickable if user wants to see report */
}

.p-ticket.is-closed .p-ticket__img {
  filter: grayscale(100%);
}

.p-ticket.is-closed .p-ticket__btn {
  border-color: #374151;
  /* gray-700 */
  color: #374151;
  cursor: not-allowed;
}

/* ------------------------------------------
   Single Open House - Header Overlap Fix
------------------------------------------ */
body.single-openhouse .p-works-main {
  padding-top: 0 !important;
}

body.single-openhouse .p-openhouse-hero-v2 {
  /* Ensure hero takes enough space and starts at top */
  min-height: 60vh;
}

@media (min-width: 768px) {
  body.single-openhouse .p-openhouse-hero-v2 {
    min-height: 80vh;
    /* slightly taller for impact */
  }
}

/* DESIGN HIGHLIGHTS */
.p-design-highlights {
  padding: 6rem 1.5rem;
  /* py-24 px-6 */
  background-color: #fff;
}

.p-design-highlights__container {
  max-width: 1200px;
  margin: 0 auto;
}

.p-design-highlights__header {
  margin-bottom: 4rem;
  text-align: center;
}

.p-design-highlights__title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  /* text-4xl */
  font-weight: 700;
  letter-spacing: 0.25em;
  /* tracking-widest */
  margin-bottom: 2rem;
}

/* Zigzag Layout */
.p-design-highlights__item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 6rem;
  align-items: center;
}

.p-design-highlights__item:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .p-design-highlights__item {
    flex-direction: row;
    gap: 4rem;
    margin-bottom: 8rem;
  }

  .p-design-highlights__item:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.p-design-highlights__img-area {
  width: 100%;
}

@media (min-width: 768px) {
  .p-design-highlights__img-area {
    width: 50%;
  }
}

.p-design-highlights__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.p-design-highlights__text-area {
  width: 100%;
}

@media (min-width: 768px) {
  .p-design-highlights__text-area {
    width: 50%;
    padding: 0 2rem;
  }
}

.p-design-highlights__no {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  /* text-sm */
  letter-spacing: 0.25em;
  color: #9ca3af;
  display: block;
  margin-bottom: 1rem;
}

.p-design-highlights__box-title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .p-design-highlights__box-title {
    font-size: 1.875rem;
    /* text-3xl */
  }
}

.p-design-highlights__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  line-height: 2;
  color: #4b5563;
  text-align: justify;
}

@media (min-width: 768px) {
  .p-design-highlights__desc {
    font-size: 1rem;
    /* text-base */
  }
}

/* Full Width Construction Area */
.p-top-construction {
  background-color: rgba(24, 24, 27, 0.6);
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .p-top-construction {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Open House Reservation Blur State */
.p-openhouse-reservation.is-blurred {
  position: relative;
  user-select: none;
  overflow: hidden;
  /* Ensure overlay covers */
}

.p-openhouse-reservation.is-blurred .p-openhouse-reservation__header,
.p-openhouse-reservation.is-blurred .p-contact-form-wrapper {
  filter: blur(5px);
  pointer-events: none;
  opacity: 0.6;
}

.p-openhouse-reservation__message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  z-index: 10;
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .p-openhouse-benefit__text {
    font-size: 0.8rem;
    line-height: 1.7;
  }
}

/* Swiper Navigation Customization */
.p-top-section .swiper-button-prev,
.p-top-section .swiper-button-next {
  color: #fff;
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background-color 0.3s;
  top: 40%;
}

.p-top-section .swiper-button-prev:hover,
.p-top-section .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.p-top-section .swiper-button-prev::after,
.p-top-section .swiper-button-next::after {
  font-size: 1.2rem;
  font-weight: bold;
}

@media (max-width: 767px) {

  .p-top-section .swiper-button-prev,
  .p-top-section .swiper-button-next {
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  .p-top-section .swiper-button-prev::after,
  .p-top-section .swiper-button-next::after {
    font-size: 0.8rem;
  }
}

/* Works Item Category Label */
.p-works-item__category-label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-text-primary);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  padding: 0.4em 1em;
  z-index: 10;
  letter-spacing: 0.1em;
}

/* Works Item Title & Subtitle Spacing */
.p-works-item-title {
  margin-bottom: 0.2rem !important;
  line-height: 1.2;
}

.p-works-item-subtitle {
  margin-top: 0 !important;
  line-height: 1.2;
}

/* About Section Mobile Text Size */
@media (max-width: 767px) {
  .p-top-about__desc {
    font-size: 0.85rem !important;
  }
}

/* ==========================================================================
   Concept Page Special Adjustments
   ========================================================================== */

/* Center Title in Concept Page */
.p-concept-container .p-top-about__title {
  text-align: center;
}

/* Mobile Background Preview Layer */
@media (max-width: 767px) {
  .p-concept-preview {
    display: block !important;
    /* Force show if hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    /* Behind content */
    pointer-events: none;
  }

  .p-concept-preview__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .p-concept-preview__img.active {
    opacity: 1;
  }

  .p-concept-preview__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
}

/* Fix Video & CTA Visibility over Fixed Backgrounds (Concept Page) */
.p-top-section,
.p-concept-cta {
  position: relative;
  position: relative;
  z-index: 10;
  /* Ensure it sits above the fixed background layer (z-index: -1) */
}

/* ==========================================================================
   Utility: Center Single Grid Item
   ========================================================================== */
.p-works-grid.is-single-item,
.p-topics-container.is-single-item {
  display: flex !important;
  justify-content: center !important;
}

@media (min-width: 768px) {

  /* Ensure the single item doesn't stretch too wide if needed, 
     though usually card width is controlled by content or utility.
     For Works/Topics, cards might be block-level.
     Let's check if we need to restrict width to match 1/3 col size. 
     Usually, centering a single card looks better if it acts like one card.
  */
  .p-works-grid.is-single-item>*,
  .p-topics-container.is-single-item>* {
    max-width: 33.33%;
    /* Roughly match column width */
    width: 100%;
    flex: 0 0 auto;
  }
}

/* Mobile might usually be 1 column anyway, so natural block flow is fine.
   But if flex is applied, justify-center works too. */
@media (max-width: 767px) {

  .p-works-grid.is-single-item,
  .p-topics-container.is-single-item {
    flex-direction: column;
    align-items: center;
    /* Mobile usually full width, but if they want centered distinct card: */
  }

  .p-works-grid.is-single-item>*,
  .p-topics-container.is-single-item>* {
    width: 100%;
    max-width: 400px;
    /* Optional constraint for aesthetic */
  }
}

/* ==========================================================================
   Reference: Lightbox Fix
   ========================================================================== */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background-color: rgba(0, 0, 0, 0.7);
  /* Opacity lowered to 0.7 */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Close Button - Force Visible */
.lightbox-close {
  position: absolute;
  top: -40px;
  right: -40px;
  /* PC: Outside image */
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 50;
  display: block !important;
  transition: transform 0.3s;
}

.lightbox-close:hover {
  transform: rotate(90deg);
}

.lightbox-close::before,
.lightbox-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Navigation Buttons */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  backdrop-filter: blur(4px);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: -80px;
  /* PC: Outside image */
}

.lightbox-next {
  right: -80px;
  /* PC: Outside image */
}

/* Arrow Icons */
.lightbox-prev::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin-left: 4px;
}

.lightbox-next::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-right: 4px;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
  .lightbox-close {
    top: -40px;
    right: 0;
  }

  .lightbox-prev {
    left: 10px;
    background: rgba(0, 0, 0, 0.3);
  }

  .lightbox-next {
    right: 10px;
    background: rgba(0, 0, 0, 0.3);
  }
}

/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge {
  visibility: hidden;
}

/* Mobile Introduction Text Adjustment */
@media (max-width: 767px) {
  .p-openhouse-box__text {
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.75;
  }
}

/* Topics Swiper Button Adjustment */
.js-swiper-topics .swiper-button-prev,
.js-swiper-topics .swiper-button-next {
  top: 35% !important;
}

/* ==========================================================================
   Swiper Navigation Buttons (Custom)
   ========================================================================== */
.swiper-button-prev,
.swiper-button-next {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  position: absolute;
  top: 40%;
  /* Shift down slightly (default 50%) */
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1rem;
  font-weight: bold;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #f3f3f3;
}

/* PC Specific Adjustments */
@media (min-width: 768px) {

  .swiper-button-prev,
  .swiper-button-next {
    width: 3rem;
    height: 3rem;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 1.25rem;
  }

  .swiper-button-prev {
    left: -4rem;
    /* Moved further out */
  }

  .swiper-button-next {
    right: -4rem;
    /* Moved further out */
  }

  /* Ensure container doesn't clip absolute elements */
  .l-container--max {
    position: relative;
    overflow: visible;
  }
}

/* Mobile Specific Adjustments */
@media (max-width: 767px) {
  .swiper-button-prev {
    left: 0;
  }

  .swiper-button-next {
    right: 0;
  }

  /* Works: Move arrows up to center of thumbnail */
  .js-swiper-works .swiper-button-prev,
  .js-swiper-works .swiper-button-next {
    top: 35%;
  }

  /* Topics: Move arrows up significantly */
  .p-swiper-wrapper--topics .swiper-button-prev,
  .p-swiper-wrapper--topics .swiper-button-next {
    top: 35%;
    /* Moved up to be above or at the very top of content */
  }
}

/* PC Specific Adjustments for Open House and Topics (Wrapped) */
@media (min-width: 768px) {

  .p-swiper-wrapper .swiper-button-prev,
  .p-swiper-wrapper .swiper-button-next {
    top: 50%;
    /* Moved down slightly from default 40% */
  }
}

/* Force Swiper on PC for Works */


/* ==========================================================================
   Added Styles for Works Card (Ensure Consistency)
   ========================================================================== */
.p-card {
  display: block;
  position: relative;
  width: 100%;
}

.p-card__thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.p-card__thumb--4-3 {
  aspect-ratio: 4 / 3;
}

.p-card__thumb--3-4 {
  aspect-ratio: 3 / 4;
}

.p-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-card:hover .p-card__img {
  transform: scale(1.05);
}

.p-card__label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 10;
}

.p-card__body {
  margin-top: 1rem;
}

.p-card__date {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
}

.p-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: white;
}


/* Adjust Works Arrow Position (Lower) */
@media (min-width: 768px) {

  .p-swiper-wrapper--works .swiper-button-prev,
  .p-swiper-wrapper--works .swiper-button-next {
    top: 50% !important;
  }
}

/* Mobile Works Arrow Adjustment */
@media (max-width: 767px) {

  .p-swiper-wrapper--works .swiper-button-prev,
  .p-swiper-wrapper--works .swiper-button-next {
    top: 45% !important;
  }
}

/* Mobile OpenHouse Arrow Adjustment */
@media (max-width: 767px) {

  .js-swiper-openhouse~.swiper-button-prev,
  .js-swiper-openhouse~.swiper-button-next {
    top: 50% !important;
  }
}

/* Open House Pagination (Dots) */
.js-swiper-openhouse .swiper-pagination {
  position: static;
  margin-top: 4rem;
  text-align: center;
}

.p-swiper-wrapper--openhouse .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ccc;
  opacity: 1;
  margin: 0 6px !important;
}

.p-swiper-wrapper--openhouse .swiper-pagination-bullet-active {
  background: #333;
}

/* ==========================================================================
   Concept FAQ Section
   ========================================================================== */
.p-concept-faq {
  margin-top: 8rem;
  margin-bottom: 8rem;
  color: #fff;
}

.p-faq-list {
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.p-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.p-faq-item__question {
  display: flex;
  align-items: center;
  /* Center items vertically */
  padding: 2rem 0;
  cursor: pointer;
  list-style: none;
  /* Hide default triangle */
  position: relative;
  transition: opacity 0.3s ease;
}

.p-faq-item__question::-webkit-details-marker {
  display: none;
}

.p-faq-item__question:hover {
  opacity: 0.7;
}

.p-faq-item__q-mark {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 300;
  margin-right: 1.5rem;
  line-height: 1;
}

.p-faq-item__q-text {
  font-size: 1.1rem;
  font-weight: 500;
  flex: 1;
  /* Take remaining space */
  padding-right: 2rem;
  /* Space for icon */
  line-height: 1.6;
}

.p-faq-item__icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.p-faq-item__icon::before,
.p-faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.p-faq-item__icon::before {
  width: 100%;
  height: 1px;
}

.p-faq-item__icon::after {
  width: 1px;
  height: 100%;
}

.p-faq-item[open] .p-faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Optional: Make it minus by rotating both */
.p-faq-item[open] .p-faq-item__icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.p-faq-item__answer {
  padding-bottom: 2rem;
  padding-left: 3.5rem;
  /* Align with text */
  padding-right: 2rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #ccc;
  opacity: 0.9;
}

/* Animations for Details */
details[open] summary~* {
  animation: sweep .5s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .p-concept-faq {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .p-faq-list {
    margin-top: 2.5rem;
  }

  .p-faq-item__question {
    padding: 1.5rem 0;
    align-items: flex-start;
    /* Align top on mobile */
  }

  .p-faq-item__q-mark {
    font-size: 1.25rem;
    margin-right: 1rem;
    margin-top: 0.2em;
    /* Optical adjust */
  }

  .p-faq-item__q-text {
    font-size: 1rem;
    padding-right: 1.5rem;
  }

  .p-faq-item__answer {
    padding-left: 0;
    /* Reset indentation on mobile */
    padding-top: 0.5rem;
  }

  .p-faq-item__icon {
    width: 18px;
    height: 18px;
    margin-top: 0.25rem;
    /* Optical align */
  }
}

/* Image Caption Note */
.p-openhouse-image-caption {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
  margin-top: 1rem;
}

/* Fix for Concept Page Preview Layer Overlap */
.p-concept-faq {
  position: relative;
  z-index: 10;
}

/* FAQ Navigation Mobile Grid */
.p-faq-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 6rem;
}

@media (max-width: 767px) {
  .p-faq-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 4rem;
  }
}


/* FAQ Link Color */
.p-faq-item__answer a {
  color: #3b82f6;
  /* Bright Blue for visibility */
  text-decoration: underline;
}

/* -----------------------------------
 * Article Author Section
 * ----------------------------------- */
.p-article-author {
  margin-top: 4rem;
  padding: 2rem;
  background-color: #111;
  /* Black base */
  border: 1px solid #333;
  border-radius: 8px;
  /* Slightly rounded corners */
}

.p-article-author__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 768px) {
  .p-article-author__inner {
    flex-direction: column;
    text-align: center;
  }
}

.p-article-author__img {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.p-article-author__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Circular image */
  border: 3px solid #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.p-article-author__content {
  flex-grow: 1;
}

.p-article-author__position {
  font-size: 0.875rem;
  color: #999;
  margin-bottom: 0.25rem;
}

.p-article-author__name {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: #fff;
}

.p-article-author__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 1.5rem;
}

.p-article-author__btn {
  display: inline-block;
}

.p-article-author__btn a {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: #333;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border-radius: 999px;
  /* Pill shape */
  border: 1px solid #555;
}

.p-article-author__btn a:hover {
  background-color: #fff;
  color: #000;
}

/* ==========================================================================
   Page: EN LAB (New Business)
   ========================================================================== */

/* --- Hero Section --- */
.p-enlab-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background-color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-enlab-hero__bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-enlab-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

.p-enlab-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3));
}

.p-enlab-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-enlab-hero__logo {
  width: 100%;
  max-width: 400px;
  margin-bottom: 2rem;
  filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1));
}

@media (min-width: 768px) {
  .p-enlab-hero__logo {
    max-width: 600px;
  }
}

.p-enlab-hero__sublogo {
  width: 100%;
  max-width: 250px;
  margin-bottom: 2rem;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .p-enlab-hero__sublogo {
    max-width: 350px;
  }
}

.p-enlab-hero__divider {
  height: 1px;
  width: 6rem;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 2rem auto;
}

.p-enlab-hero__desc {
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.25rem;
  /* text-xl */
  letter-spacing: 0.1em;
  line-height: 1.625;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

@media (min-width: 768px) {
  .p-enlab-hero__desc {
    font-size: 1.875rem;
    /* text-3xl */
  }
}

/* --- Concept Section --- */
.p-enlab-concept {
  padding: 6rem 1.5rem;
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('images/concept-hero.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}

@media (min-width: 768px) {
  .p-enlab-concept {
    padding: 8rem 0;
  }
}

.p-enlab-concept__label {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-enlab-concept__label {
    font-size: 1rem;
  }
}

.p-enlab-concept__title {
  font-size: 1.875rem;
  font-weight: 700;
  font-family: var(--font-secondary);
  color: #000;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-enlab-concept__title {
    font-size: 3rem;
  }
}

.p-enlab-concept__text {
  font-size: 1rem;
  color: #4b5563;
  font-family: var(--font-secondary);
  line-height: 2;
  letter-spacing: 0.05em;
  max-width: 48rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-enlab-concept__text {
    font-size: 1.125rem;
  }
}

.p-enlab-concept__text p {
  margin-bottom: 0;
}

.p-enlab-concept__text p+p {
  margin-top: 1rem;
}

.p-enlab-concept__text .highlight {
  color: #000;
  font-weight: 700;
}

/* --- Service Section --- */
.p-enlab-service {
  padding: 6rem 0;
  background-image: linear-gradient(rgba(17, 17, 17, 0.9), rgba(17, 17, 17, 0.9)), url('images/works-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}

.p-enlab-service__header {
  text-align: center;
  margin-bottom: 4rem;
}

.p-enlab-service__title {
  font-size: 2.25rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-enlab-service__title {
    font-size: 3rem;
  }
}

.p-enlab-service__subtitle {
  color: #9ca3af;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.p-enlab-service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-enlab-service__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* Service Card */
.p-enlab-card {
  position: relative;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .p-enlab-card {
    padding: 3rem;
  }
}

.p-enlab-card:hover,
.p-enlab-card.is-open {
  background-color: #fff;
  color: #000;
}

.p-enlab-card--elevated {}

@media (min-width: 768px) {
  .p-enlab-card--elevated {
    transform: translateY(-1rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 10;
  }
}

.p-enlab-card__num {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  opacity: 0.2;
  font-family: var(--font-primary);
  font-size: 3.75rem;
  font-weight: 700;
  transition: opacity 0.3s;
}

.p-enlab-card:hover .p-enlab-card__num,
.p-enlab-card.is-open .p-enlab-card__num {
  opacity: 0.1;
}

.p-enlab-card__level {
  display: block;
  font-size: 1.25rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: #9ca3af;
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .p-enlab-card__level {
    font-size: 1.5rem;
  }
}

.p-enlab-card:hover .p-enlab-card__level,
.p-enlab-card.is-open .p-enlab-card__level {
  color: #000;
}

.p-enlab-card__title {
  font-size: 1.5rem;
  /* text-2xl */
  font-family: var(--font-secondary);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .p-enlab-card__title {
    font-size: 1.875rem;
    /* text-3xl */
  }
}

.p-enlab-card__desc {
  font-size: 0.875rem;
  line-height: 1.625;
  color: #9ca3af;
  margin-bottom: 2rem;
  min-height: 4em;
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .p-enlab-card__desc {
    font-size: 1rem;
  }
}

.p-enlab-card:hover .p-enlab-card__desc,
.p-enlab-card.is-open .p-enlab-card__desc {
  color: #4b5563;
}

/* --- Accordion Styles --- */
.p-enlab-card {
  cursor: pointer;
}

.p-enlab-card__indicator {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 2rem;
  height: 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.p-enlab-card:hover .p-enlab-card__indicator,
.p-enlab-card.is-open .p-enlab-card__indicator {
  background-color: rgba(0, 0, 0, 0.1);
}

.p-enlab-card__indicator::before,
.p-enlab-card__indicator::after {
  content: '';
  position: absolute;
  background-color: #fff;
  transition: transform 0.3s, background-color 0.3s;
}

.p-enlab-card:hover .p-enlab-card__indicator::before,
.p-enlab-card:hover .p-enlab-card__indicator::after,
.p-enlab-card.is-open .p-enlab-card__indicator::before,
.p-enlab-card.is-open .p-enlab-card__indicator::after {
  background-color: #000;
}

/* Horizontal Line */
.p-enlab-card__indicator::before {
  width: 0.8rem;
  height: 2px;
}

/* Vertical Line */
.p-enlab-card__indicator::after {
  width: 2px;
  height: 0.8rem;
}

.p-enlab-card.is-open .p-enlab-card__indicator::after {
  transform: rotate(90deg);
  /* Turn into + to - ? No, to X if rotate 45, or minus if 90 for vertical.
       Let's make it rotate 90deg to match horizontal, effectively disappearing, or 45 for X.
       Standard accordion is + to -. To make -, rotate vertical 90deg.
    */
  transform: rotate(90deg);
}

/* Accordion Content */
.p-enlab-card__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  margin-top: 0;
  opacity: 0;
}

.p-enlab-card.is-open .p-enlab-card__content {
  grid-template-rows: 1fr;
  margin-top: 1.5rem;
  opacity: 1;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  padding-top: 1.5rem;
}

.p-enlab-card:hover.is-open .p-enlab-card__content {
  border-color: rgba(0, 0, 0, 0.1);
}

.p-enlab-card__content-inner {
  overflow: hidden;
}

.p-enlab-card__detail-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #9ca3af;
  /* Matches level color */
  margin-bottom: 0.5rem;
  display: block;
}

.p-enlab-card:hover .p-enlab-card__detail-title,
.p-enlab-card.is-open .p-enlab-card__detail-title {
  color: #4b5563;
}

.p-enlab-card__detail-text {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.p-enlab-card__footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s;
}

.p-enlab-card:hover .p-enlab-card__footer,
.p-enlab-card.is-open .p-enlab-card__footer {
  border-color: rgba(0, 0, 0, 0.1);
}

.p-enlab-card__target-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.p-enlab-card__target-text {
  font-size: 0.875rem;
}

/* --- Styles Section --- */
.p-enlab-styles {
  padding: 6rem 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('images/model-a-main.jpg');
  background-size: cover;
  background-position: center;
  color: #000;
}

.p-enlab-styles__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-enlab-styles__header {
    flex-direction: row;
    align-items: flex-end;
  }
}

.p-enlab-styles__title {
  font-size: 2.25rem;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .p-enlab-styles__title {
    font-size: 3.75rem;
    /* text-6xl */
  }
}

.p-enlab-styles__sub {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  letter-spacing: 0.1em;
}

.p-enlab-styles__link-pc {
  display: none;
}

@media (min-width: 768px) {
  .p-enlab-styles__link-pc {
    display: block;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #000;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
  }

  .p-enlab-styles__link-pc:hover {
    opacity: 0.5;
  }
}

/* Interior & Web Slider (Responsive Carousel) */
.p-enlab-interior-section {
  padding-bottom: 2rem;
}

.p-enlab-web-section {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('images/contact-bg.jpg');
  background-size: cover;
  background-position: center;
}

/* Swiper wrapper flex behavior is needed for PC now */
.p-enlab-interior__grid-pc,
.p-enlab-web__grid-pc {
  /* No reset needed, default swiper styles apply */
}

/* Carousel Buttons */
.enlab-button-prev,
.enlab-button-next {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.enlab-button-prev:hover,
.enlab-button-next:hover {
  background-color: #000;
  color: #fff;
}

.enlab-button-prev::after,
.enlab-button-next::after {
  font-size: 1rem;
  font-weight: bold;
}

/* Position adjustments */
.enlab-button-prev {
  left: 0;
}

.enlab-button-next {
  right: 0;
}

/* Hide on Mobile if needed, or adjust position.
   User asked for buttons on Mobile too.
   Usually outside container or overlay.
   Let's keep them overlay or slightly outside.
*/
.p-swiper-wrapper {
  position: relative;
  padding: 0;
  /* Reduced from 0 1rem to 0 to align with other containers */
}

@media (min-width: 768px) {
  .p-swiper-wrapper {
    padding: 0;
    /* Container handles padding */
  }

  .enlab-button-prev {
    left: -4rem;
  }

  .enlab-button-next {
    right: -4rem;
  }
}

.p-enlab-style-item {
  cursor: pointer;
}

.p-enlab-style-item--offset {}

@media (min-width: 768px) {
  .p-enlab-style-item--offset {
    margin-top: 4rem;
  }
}

.p-enlab-style-item__img-box {
  aspect-ratio: 4 / 3;
  width: 100%;
  background-color: #e5e7eb;
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
}

.p-enlab-style-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.p-enlab-style-item:hover .p-enlab-style-item__img {
  transform: scale(1.05);
}

.p-enlab-style-item__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.5s;
}

.p-enlab-style-item:hover .p-enlab-style-item__overlay {
  background-color: rgba(0, 0, 0, 0.1);
}

.p-enlab-style-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.p-enlab-style-item__title {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .p-enlab-style-item__title {
    font-size: 1.25rem;
  }
}

.p-enlab-style-item__cat {
  font-size: 0.625rem;
  border: 1px solid #d1d5db;
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .p-enlab-style-item__cat {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

.p-enlab-style-item__desc {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .p-enlab-style-item__desc {
    font-size: 0.875rem;
    margin-top: 1rem;
  }
}

.p-enlab-styles__btn-sp {
  margin-top: 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-enlab-styles__btn-sp {
    display: none;
  }
}


/* --- Profile Section --- */
.p-enlab-profile {
  padding: 6rem 0;
  background-image: linear-gradient(rgba(244, 244, 245, 0.9), rgba(244, 244, 245, 0.9)), url('images/model-n-main.jpg');
  background-size: cover;
  background-position: center;
}

.p-enlab-profile__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 768px) {
  .p-enlab-profile__wrapper {
    flex-direction: row;
    gap: 5rem;
  }
}

.p-enlab-profile__img-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  filter: grayscale(100%);
  transition: all 0.7s;
}

@media (min-width: 768px) {
  .p-enlab-profile__img-box {
    width: 41.666667%;
    /* w-5/12 */
  }
}

.p-enlab-profile__img-box:hover {
  filter: grayscale(0);
}

.p-enlab-profile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-enlab-profile__content {
  width: 100%;
}

@media (min-width: 768px) {
  .p-enlab-profile__content {
    width: 58.333333%;
    /* w-7/12 */
  }
}

.p-enlab-profile__role {
  display: block;
  font-size: 0.875rem;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.p-enlab-profile__name {
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 700;
  margin-bottom: 1rem;
  color: #000;
}

@media (min-width: 768px) {
  .p-enlab-profile__name {
    font-size: 2.25rem;
    /* text-4xl */
  }
}

.p-enlab-profile__name-en {
  font-size: 1.125rem;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 0.5rem;
  font-family: var(--font-primary);
}

.p-enlab-profile__bio {
  color: #4b5563;
  line-height: 2;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .p-enlab-profile__bio {
    font-size: 1.125rem;
    /* text-lg */
  }
}

/* --- CTA Section --- */
.p-enlab-cta {
  padding: 8rem 1.5rem;
  background-image: linear-gradient(rgba(24, 24, 27, 0.8), rgba(24, 24, 27, 0.8)), url('images/top-hero-silence-1.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

.p-enlab-cta__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .p-enlab-cta__title {
    font-size: 1.5rem;
    /* text-2xl */
  }
}

.p-enlab-cta__text {
  color: #9ca3af;
  margin-bottom: 3rem;
  line-height: 1.625;
}

.p-enlab-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .p-enlab-cta__actions {
    flex-direction: row;
  }
}

.p-enlab-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  padding: 0 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  font-size: 1rem;
}

.p-enlab-btn--contact {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
}

.p-enlab-btn--contact:hover {
  background-color: #fff;
  color: #000;
}

.p-enlab-btn--contact i {
  text-transform: uppercase;
  font-style: normal;
}

.p-enlab-btn--line {
  border: 1px solid #06c755;
  background-color: #06c755;
  color: #fff;
}

.p-enlab-btn--line:hover {
  background-color: #05b34c;
  border-color: #05b34c;
}

/* ==========================================================================
   Page: Top (Refactored)
   ========================================================================== */

/* Loading Screen */
.p-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 1000ms;
}

.p-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.p-loader__logo {
  opacity: 0;
  transition: opacity 1000ms;
}

.p-loader__logo.is-active {
  opacity: 1;
}

.p-loader__logo-img {
  width: 8rem;
  /* w-32 */
}

@media (min-width: 768px) {
  .p-loader__logo-img {
    width: 10rem;
    /* w-40 */
  }
}

.p-loader__bar {
  width: 12rem;
  /* w-48 */
  height: 1px;
  background-color: #333;
  margin-top: 2rem;
  /* mt-8 */
  overflow: hidden;
  position: relative;
}

.p-loader__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: white;
  width: 0;
  transition: all 1500ms ease-out;
}

/* Open House */
.p-swiper-wrapper {
  position: relative;
}

.p-openhouse__empty {
  width: 100%;
  text-align: center;
  color: #9ca3af;
  /* text-gray-400 */
  padding-top: 2rem;
  /* py-8 */
  padding-bottom: 2rem;
}

/* Card */
.p-card__overlay-text .p-card__title {
  margin-bottom: 0.25rem;
  /* mb-1 for Lineup */
}

.p-card__body .p-card__subtitle {
  margin-top: 0.25rem;
  /* mt-1 */
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
  color: #6b7280;
  /* text-gray-500 */
}

/* Construction */
.p-construction-text__inner>*+* {
  margin-top: 1rem;
  /* space-y-4 */
}

/* Company & Contact */
.p-company-contact {
  background-color: #18181b;
  /* zinc-900 */
}

/* Topics */
.p-top-section__view-all {
  display: none;
}

@media (min-width: 768px) {
  .p-top-section__view-all {
    display: block;
  }
}

.p-btn-wrapper--sp-only {
  display: block;
}

@media (min-width: 768px) {
  .p-btn-wrapper--sp-only {
    display: none;
  }
}

/* Modifier for Semantic Heading Adjustment */
.c-hero-title--small {
  font-size: 2.25rem;
  /* mobile: approx small hero sized */
}

@media (min-width: 768px) {
  .c-hero-title--small {
    font-size: 3.75rem;
    /* desktop: regular h2 size */
  }
}

/* ==========================================================================
   10. Model A Page
   ========================================================================== */

/* Hero */
.p-model-hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-model-hero__bg {
  position: absolute;
  inset: 0;
}

.p-model-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-model-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.2);
}

.p-model-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.p-model-hero__label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  /* text-sm */
  letter-spacing: 0.5em;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-model-hero__label {
    font-size: 1rem;
    /* text-base */
  }
}

.p-model-hero__lead {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  letter-spacing: 0.1em;
  /* widest */
  opacity: 0.9;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .p-model-hero__lead {
    font-size: 1rem;
    /* text-base */
  }
}

/* Concept Text */
.p-model-concept {
  padding: 6rem 1.5rem;
  /* py-24 px-6 */
  background-color: #fff;
}

@media (min-width: 768px) {
  .p-model-concept {
    padding-top: 8rem;
    /* py-32 */
    padding-bottom: 8rem;
  }
}

.p-model-concept__inner {
  max-width: 48rem;
  /* max-w-3xl */
  margin: 0 auto;
  text-align: center;
}

.p-model-concept__text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  line-height: 2;
  /* leading-loose */
  color: #4b5563;
  /* text-gray-600 */
  text-align: justify;
}

@media (min-width: 768px) {
  .p-model-concept__text {
    font-size: 1rem;
    /* text-base */
    text-align: center;
  }
}

/* Gallery */
.p-model-gallery-section {
  padding-bottom: 6rem;
  /* pb-24 */
  background-color: #fff;
}

.p-model-gallery {
  padding: 0 1rem;
  /* px-4 */
  max-width: 1800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* gap-4 */
}

@media (min-width: 768px) {
  .p-model-gallery {
    padding: 0 3rem;
    /* px-12 */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    /* gap-8 */
  }
}

@media (min-width: 1024px) {
  .p-model-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-model-gallery__item {
  position: relative;
  overflow: hidden;
}

/* Aspect Ratios */
.p-model-gallery__item--portrait {
  aspect-ratio: 3/4;
}

.p-model-gallery__item--landscape {
  aspect-ratio: 16/9;
  /* aspect-video */
}

@media (min-width: 768px) {
  .p-model-gallery__item--landscape {
    aspect-ratio: 16/10;
  }
}

.p-model-gallery__item--square {
  aspect-ratio: 1/1;
}

.p-model-gallery__item--portrait-lg {
  aspect-ratio: 16/9;
  /* aspect-video default */
}

@media (min-width: 1024px) {
  .p-model-gallery__item--portrait-lg {
    aspect-ratio: 3/4;
  }
}

/* Spanning Modifiers */
@media (min-width: 1024px) {
  .p-model-gallery__item--span-2-lg {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .p-model-gallery__item--span-2-md {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .p-model-gallery__item--span-2-md {
    grid-column: span 1;
    /* reset for lg */
  }
}

.p-model-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms;
}

@media (min-width: 768px) {
  .p-model-gallery__img {
    filter: grayscale(100%);
    transition: transform 700ms, filter 300ms;
  }

  .p-model-gallery__item:hover .p-model-gallery__img {
    transform: scale(1.05);
    filter: grayscale(0);
  }
}

/* Highlights Refinements */
.p-design-highlights__sub {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  /* text-sm */
  color: #6b7280;
  /* text-gray-500 */
  letter-spacing: 0.1em;
  /* tracking-widest */
}

.p-design-highlights__number {
  display: block;
  font-size: 0.875rem;
  /* text-sm */
  margin-bottom: 1rem;
  /* mb-4 */
  letter-spacing: 0.1em;
  /* tracking-widest */
  color: #6b7280;
  /* text-gray-500 */
  font-family: var(--font-primary);
  /* font-beckman */
}

/* Pagination Modifier for Model A */
.p-work-pagination--model-a,
.p-work-pagination--model-n {
  background-color: #fff;
  color: #000;
  border-top-color: #e5e5e5;
}

/* ==========================================================================
   11. Model Y Page (Dark Theme)
   ========================================================================== */

.p-model-detail--y {
  background-color: #111;
  color: #fff;
}

/* Hero Overlay Override */
.p-model-detail--y .p-model-hero__overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Concept Section Override */
.p-model-detail--y .p-model-concept {
  background-color: transparent;
}

.p-model-detail--y .p-model-concept__text {
  color: #9ca3af;
  /* text-gray-400 */
}

/* Gallery Section Override */
.p-model-detail--y .p-model-gallery-section {
  background-color: transparent;
}

/* Highlights Section Override */
.p-model-detail--y .p-design-highlights {
  background-color: #fff;
  color: #000;
}

/* Pagination for Model Y */
.p-work-pagination--model-y {
  background-color: #111;
  color: #fff;
  border-top-color: #333;
}

.p-work-pagination--model-y .p-work-pagination__item {
  border-right-color: #333;
}

.p-work-pagination--model-y .p-work-pagination__link:hover {
  background-color: #222;
}

.p-work-pagination--model-y .p-work-pagination__icon {
  border-color: #fff;
}

.p-work-pagination--model-y .p-work-pagination__icon::before,
.p-work-pagination--model-y .p-work-pagination__icon::after {
  background-color: #fff;
}

/* ==========================================================================
   12. Open House Refactoring
   ========================================================================== */

.p-works-filter--center {
  justify-content: center;
}

.u-mt-3rem {
  margin-top: 3rem !important;
}

/* ==========================================================================
   13. Thanks Page Refactoring
   ========================================================================== */

/* Background */
.l-global-bg--fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l-global-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.l-global-bg__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Main Container */
.p-thanks-main {
  position: relative;
  z-index: 10;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

/* Message Area */
.p-thanks-message {
  text-align: center;
  margin-bottom: 5rem;
}

.p-thanks-message__title {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-thanks-message__title {
    font-size: 3.75rem;
  }
}

.p-thanks-message__sub {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .p-thanks-message__sub {
    font-size: 1rem;
  }
}

.p-thanks-message__body {
  font-size: 0.875rem;
  line-height: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .p-thanks-message__body {
    font-size: 1rem;
  }
}

.p-thanks-message__note {
  font-size: 0.75rem;
  color: #9ca3af;
}

.p-thanks-message__btn {
  margin-top: 3rem;
}

/* Lead Section */
.p-thanks-lead {
  text-align: center;
  margin-bottom: 2.5rem;
}

.p-thanks-lead__text {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   14. Single Open House Refactoring
   ========================================================================== */

.p-openhouse-dd-v2--note {
  font-size: 0.85em;
  line-height: 1.6;
}

/* ==========================================================================
   15. Single Topics Refactoring
   ========================================================================== */

/* Hero Section */
.p-single-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-single-hero {
    height: 80vh;
    padding-bottom: 8rem;
  }
}

.p-single-hero__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 80vh;
}

@media (min-width: 768px) {
  .p-single-hero__bg {
    height: 90vh;
  }
}

.p-single-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.p-single-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #1a1a1a 0%, rgba(26, 26, 26, 0.4) 50%, transparent 100%);
}

.p-single-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-single-hero__content {
    padding-left: 8rem;
    padding-right: 8rem;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .p-single-hero__content {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}

.p-single-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #9ca3af;
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-single-hero__meta {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2rem;
  }
}

.c-label-category {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

.p-single-hero__title {
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-single-hero__title {
    font-size: 3rem;
    line-height: 1.3;
  }
}

@media (min-width: 1024px) {
  .p-single-hero__title {
    font-size: 3.75rem;
  }
}

/* Article Body */
.p-single-body {
  position: relative;
  z-index: 20;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .p-single-body {
    padding-left: 0;
    padding-right: 0;
  }
}

.p-entry-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #e5e5e5;
}

.p-entry-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.p-entry-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.p-entry-body p {
  margin-bottom: 1.5rem;
}

.p-entry-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.p-entry-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.p-entry-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Related Posts */
.p-related-posts {
  position: relative;
  z-index: 30;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 6rem;
}

.p-related-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-related-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-related-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 700;
}

.p-related-post-title {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 700;
  transition: color 0.3s;
}


.group:hover .p-related-post-title {
  color: #d1d5db;
}

/* Layout Utilities (New) */
.l-main-content {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   16. Works Page Refactoring
   ========================================================================== */

.p-works-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.p-works-header__title-area {
  margin-bottom: 2rem;
  width: 100%;
}

/* ==========================================================================
   17. Header Refactoring
   ========================================================================== */

/* Body Defaults (Previously Tailwind classes) */
body {
  background-color: #1a1a1a;
  color: #fff;
  font-family: var(--font-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: #fff;
  color: #000;
}

/* Header Layout */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: #fff;
}

.l-header__logo-link {
  position: relative;
  z-index: 50;
  display: block;
}

.l-header__logo-img {
  width: auto;
  height: auto;
  max-width: 120px;
}

/* PC Navigation */
.l-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .l-header__nav {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
  }
}

.l-header__nav-link {
  transition: opacity 0.3s;
}

.l-header__nav-link:hover {
  opacity: 0.6;
}

.l-header__nav-btn {
  display: inline-block;
  border: 1px solid #fff;
  padding: 0.5rem 1.5rem;
  transition: background-color 0.3s, color 0.3s;
}

.l-header__nav-btn:hover {
  background-color: #fff;
  color: #000;
}

/* Menu Button (SP) */
.l-header__menu-btn {
  display: block;
  mix-blend-mode: difference;
  color: #fff;
}


@media (min-width: 768px) {
  .l-header__menu-btn {
    display: none;
  }
}

/* Mobile Menu Overlay */
.l-mobile-menu {
  position: fixed;
  inset: 0;
  background-color: #111;
  z-index: 40;
  display: none;
  /* Initially hidden */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.l-mobile-menu.is-active {
  display: flex;
}

.l-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.l-mobile-menu__link {
  font-family: var(--font-primary, "Antonio", sans-serif);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #fff;
  transition: color 0.3s;
}

.l-mobile-menu__link:hover {
  color: #9ca3af;
}

/* Global Noise Texture */
.l-noise-texture {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
}

/* ==========================================================================
   18. Footer Refactoring
   ========================================================================== */

.l-footer {
  background-color: #111;
  color: #fff;
  padding-top: 4rem;
  padding-bottom: 2rem;
  position: relative;
  z-index: 10;
}

.l-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .l-footer__container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem 4rem;
    align-items: center;
  }
}

.l-footer__brand {
  text-align: center;
}

@media (min-width: 1024px) {
  .l-footer__brand {
    text-align: left;
    grid-column: 1;
    grid-row: 1;
  }
}

.l-footer__logo-img {
  width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.l-footer__address {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Footer Navigation (New) */
.l-footer__nav {
  width: 100%;
}

@media (min-width: 1024px) {
  .l-footer__nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
  }
}

.l-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .l-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .l-footer__nav-list {
    justify-content: flex-end;
  }
}

.l-footer__nav-item a {
  font-family: var(--font-primary, "Antonio", sans-serif);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: #d1d5db;
  /* Light gray */
  transition: color 0.3s;
}

.l-footer__nav-item a:hover {
  color: #fff;
}

.l-footer__social {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .l-footer__social {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 2rem;
  }
}

.l-footer__social-icon {
  font-size: 1.5rem;
  color: #fff;
  transition: opacity 0.3s;
}

.l-footer__social-icon:hover {
  opacity: 0.7;
}

.l-footer__copy {
  font-size: 0.625rem;
  color: #6b7280;
  margin-top: 2rem;
  font-family: var(--font-primary, "Antonio", sans-serif);
  letter-spacing: 0.05em;
}

.l-footer__copy {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 0;
}
}

/* ==========================================================================
   19. Enlab Page Refactoring
   ========================================================================== */

/* Utility / Shared */
.p-enlab-btn__icon {
  margin-right: 0.75rem;
  font-size: 1.5rem;
}

/* Concept Section */
.p-enlab-concept .l-container--max {
  max-width: 1024px;
}

/* Service Section */
.p-enlab-service .l-container--max {
  max-width: 1280px;
}

.p-enlab-card__title-sub {
  font-size: 0.8em;
  font-weight: normal;
}

.p-enlab-card__price-note {
  font-size: 0.8em;
  color: #888;
}

/* Styles Section */
.p-enlab-styles__container {
  max-width: 1280px;
  position: relative;
}

/* Web Design Section */
.p-enlab-style-item__sub {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

/* Profile Section */
.p-enlab-profile .l-container--max {
  max-width: 1024px;
}

.p-enlab-profile__text-wrap {
  text-align: left;
}

.p-enlab-profile__position {
  font-size: 0.875rem;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 2rem;
}

.p-enlab-profile__bio p {
  margin-bottom: 1.5rem;
}

.p-enlab-profile__bio p:last-child {
  margin-bottom: 0;
}

/* CTA Section */
.p-enlab-cta .l-container--max {
  max-width: 800px;
}

/* ==========================================================================
   20. Model W Refactoring
   ========================================================================== */

/* MODEL W Specific */
.p-model-detail--w {
  background-color: #fdfcfb;
  /* 和紙のようなオフホワイト */
  color: #3e3e3e;
}

.p-model-detail--w .p-model-concept {
  background-color: #e6e3de;
  /* 落ち着いた土壁色/グレージュ */
}

.p-model-detail--w .p-model-hero__overlay {
  background-color: rgba(30, 25, 20, 0.4);
}

/* ==========================================================================
   21. Top Page Lineup Refactoring
   ========================================================================== */

/* 1. Standard Models (3 Columns) */
.p-lineup-grid-standard {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .p-lineup-grid-standard {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* 2. Entry Model (Model N Highlight) */
.p-lineup-entry {
  margin-bottom: 4rem;
}

.p-lineup-entry__link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}

@media (min-width: 768px) {
  .p-lineup-entry__link {
    aspect-ratio: 21 / 8;
  }
}

.p-lineup-entry__img-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.p-lineup-entry__link:hover .p-lineup-entry__img-bg {
  transform: scale(1.05);
}

.p-lineup-entry__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-lineup-entry__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
}

.p-lineup-entry__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .p-lineup-entry__content {
    padding: 3rem;
    width: 60%;
  }
}

.p-lineup-entry__title {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.p-lineup-entry__subtitle {
  font-family: var(--font-en);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.p-lineup-entry__desc {
  font-size: 0.875rem;
  line-height: 1.8;
  opacity: 0.8;
}

/* 3. Premium Model (Model EN - Luxury) */
.p-lineup-premium {
  margin-bottom: 4rem;
}

.p-lineup-premium__link {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  background-color: #0c0c0c;
  /* Deep Black */
  color: #fff;
  border: 1px solid #333;
}

@media (min-width: 768px) {
  .p-lineup-premium__link {
    display: flex;
    flex-direction: row-reverse;
    border: none;
  }
}

.p-lineup-premium__img-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-lineup-premium__img-bg {
    width: 60%;
    aspect-ratio: auto;
    /* Let flex handle height */
  }
}

.p-lineup-premium__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.p-lineup-premium__link:hover .p-lineup-premium__img {
  transform: scale(1.03);
}

.p-lineup-premium__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.p-lineup-premium__content {
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .p-lineup-premium__content {
    width: 40%;
    padding: 4rem;
    align-items: flex-start;
    text-align: left;
  }
}

.p-lineup-premium__label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #c5a365;
  /* Gold/Bronze */
  border: 1px solid #c5a365;
  padding: 0.4em 1em;
  margin-bottom: 1.5rem;
}

.p-lineup-premium__title {
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  line-height: 1;
}

.p-lineup-premium__subtitle {
  font-size: 0.875rem;
  margin-bottom: 2rem;
  color: #ccc;
}

.p-lineup-premium__note {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #666;
}

/* New Description Style for Standard Cards */
.p-card__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  opacity: 0.9;
  font-weight: 500;
}

/* Unify Lineup Text Styles (Match Model N) */
.p-section-lineup .p-card__title {
  font-family: "Antonio", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.p-section-lineup .p-card__subtitle {
  font-family: var(--font-en);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

/* Adjust Premium to match */
.p-lineup-premium__title {
  font-family: "Antonio", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-style: normal;
}

/* Coming Soon Veil */
.p-lineup-premium__veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  /* pointer-events: auto; Removed to prevent interactions */
}

.p-lineup-premium__veil-text {
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Lineup Page Refinements (Model W & EN)
   ========================================================================== */

/* Model W (Wabi & Retreat) - Japandi Style */
.p-lineup-model--w {
  background-color: #f2f2ef;
  /* Weak Beige/Grey */
  color: #4b5563;
}

.p-lineup-model--w .p-lineup-model__deco {
  background-color: #e5e5e5;
}

/* Model EN (Premium) - Luxury Black & Gold */
.p-lineup-model--en {
  background-color: #080808;
  color: #fff;
  border-top: 1px solid #222;
}

.p-lineup-model--en .p-lineup-model__label--gold {
  color: #c5a365;
  border: 1px solid #c5a365;
  padding: 0.2em 1em;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.p-lineup-model--en .p-lineup-model__heading--gold {
  color: #fff;
  /* Keep heading white for contrast, or gold? keeping white/gold mix */
  font-family: "Antonio", sans-serif;
  /* Ensure Antonio */
}

.p-lineup-model--en .p-lineup-model__desc--gold {
  color: #9ca3af;
}

.p-lineup-model--en .p-lineup-model__link--gold {
  color: #c5a365;
  border: 1px solid #c5a365;
  background-color: transparent;
  display: inline-block;
  padding: 1rem 3rem;
  text-decoration: none;
  transition: all 0.3s;
}

.p-lineup-model--en .p-lineup-model__link--gold:hover {
  background-color: #c5a365;
  color: #000;
  cursor: pointer;
}

/* ==========================================================================
   Model W Detail Page (Wabi & Retreat)
   ========================================================================== */
/* ==========================================================================
   Model W Detail Page (Wabi & Retreat)
   ========================================================================== */
.p-model-detail--w {
  background-color: #f2f2ef;
  /* Japandi Beige */
  color: #4b5563;
}

/* Concept Section Override */
.p-model-detail--w .p-model-concept {
  background-color: #f2f2ef;
  /* Match page background */
}

/* Gallery Section Override */
.p-model-detail--w .p-model-gallery-section {
  background-color: #f2f2ef;
}

/* Highlights Section - Model W */
.p-model-detail--w .p-design-highlights {
  background-color: #f2f2ef;
  color: #4b5563;
}

/* Highlights Section - Model Y (Ensure Dark) */
.p-model-detail--y .p-design-highlights {
  background-color: #111;
  color: #fff;
}

/* Highlights Section - Model A/N (ensure White) */
.p-model-detail--a .p-design-highlights,
.p-model-detail--n .p-design-highlights {
  background-color: #fff;
  color: #333;
}

/* Pagination for Model W */
.p-work-pagination--model-w {
  background-color: #f2f2ef;
  border-top-color: #e5e5e5;
}

/* ==========================================================================
   Model Navigation Bar (Replaces Pagination)
   ========================================================================== */
/* Default (Matches Model A & N - White) */
.p-model-nav {
  background-color: #fff;
  padding: 4rem 0 6rem;
  border-top: 1px solid #e5e5e5;
}

.p-model-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 4rem 0;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .p-model-nav__list {
    gap: 4rem;
    flex-wrap: nowrap;
  }
}

.p-model-nav__item {
  text-align: center;
}

.p-model-nav__link {
  font-family: "Antonio", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #888;
  /* Slightly darker than default for readability */
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  display: inline-block;
  padding-bottom: 0.25em;
}

.p-model-nav__link:hover {
  color: #000;
}

.p-model-nav__link.is-current {
  color: #000;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}

.p-model-nav__link.is-current::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.p-model-nav__btn-wrap {
  text-align: center;
}

.p-btn--small {
  padding: 0.8rem 3rem;
  font-size: 0.875rem;
}

/* Model Y Specifics (Dark) */
.p-model-detail--y .p-model-nav {
  background-color: #111;
  border-top-color: #333;
}

.p-model-detail--y .p-model-nav__link {
  color: #9ca3af;
}

.p-model-detail--y .p-model-nav__link:hover {
  color: #fff;
}

.p-model-detail--y .p-model-nav__link.is-current {
  color: #fff;
}

.p-model-detail--y .p-model-nav__link.is-current::after {
  background-color: #fff;
}

/* Model W Specifics (Beige) */
.p-model-detail--w .p-model-nav {
  background-color: #f2f2ef;
  border-top-color: #e5e5e5;
}

.p-model-detail--w .p-model-nav__link {
  color: #4b5563;
  /* Dark gray for reading on beige */
}

.p-model-detail--w .p-model-nav__link:hover {
  color: #000;
}

.p-model-detail--w .p-model-nav__link.is-current {
  color: #1a1a1a;
}

.p-model-detail--w .p-model-nav__link.is-current::after {
  background-color: #1a1a1a;
}

/* ==========================================================================
   Page: KAGU EN
   ========================================================================== */

/* Utility */
.u-overflow-hidden {
  overflow: hidden;
}

.u-bg-dark {
  background-color: #111;
}

/* Hero */
.p-kaguen-hero .p-kaguen-hero__subtitle {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 1rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .p-kaguen-hero .p-kaguen-hero__subtitle {
    font-size: 1.5rem;
  }
}

/* Concept (Problems & Solutions) */
.p-kaguen-concept {
  width: 100%;
}

.p-kaguen-problems {
  background-color: #333;
  /* Dark Gray */
  padding: 6rem 0;
  color: #fff;
}

.p-kaguen-solutions {
  background-color: #000;
  /* Black */
  padding: 6rem 0;
  color: #fff;
}

.p-kaguen-grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  width: 100%;
}

@media (min-width: 768px) {
  .p-kaguen-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.p-kaguen-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2rem;
}

.p-kaguen-card__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

.p-kaguen-card__icon img {
  width: 100%;
  height: auto;
}

.p-kaguen-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.p-kaguen-card__text {
  font-size: 0.9375rem;
  line-height: 1.8;
  text-align: left;
  opacity: 0.9;
}

.p-kaguen-card__num {
  position: absolute;
  top: 0;
  left: 1rem;
  font-family: var(--font-primary);
  font-size: 3rem;
  opacity: 0.1;
  font-weight: 700;
  line-height: 1;
}

/* Voice */
.p-kaguen-voice-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;
}

.p-kaguen-voice {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2rem;
}

@media (min-width: 768px) {
  .p-kaguen-voice {
    flex-direction: row;
    align-items: center;
    padding: 3rem;
    gap: 3rem;
  }

  .p-kaguen-voice--reverse {
    flex-direction: row-reverse;
  }
}

.p-kaguen-voice__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-kaguen-voice__img {
    width: 40%;
  }
}

.p-kaguen-voice__content {
  flex: 1;
}

.p-kaguen-voice__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1rem;
}

.p-kaguen-voice__text {
  font-size: 0.9375rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.p-kaguen-voice__name {
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-text-gray-400);
}

/* Plans */
.p-kaguen-plans-grid {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .p-kaguen-plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  @media (min-width: 1200px) {
    .p-kaguen-plans-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

.p-kaguen-plan {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.p-kaguen-plan:hover {
  transform: translateY(-5px);
}

.p-kaguen-plan--recommend {
  border: 2px solid #d4af37;
  /* Gold/Yellowish accent */
  position: relative;
  background: #222;
}

.p-kaguen-plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #d4af37;
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  letter-spacing: 0.1em;
}

.p-kaguen-plan__header {
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.p-kaguen-plan__title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.p-kaguen-plan__price {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 700;
}

.p-kaguen-plan__price .small {
  font-size: 1rem;
  font-weight: 400;
}

.p-kaguen-plan__body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-kaguen-plan__row .label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-gray-500);
  margin-bottom: 0.25rem;
}

.p-kaguen-plan__row .value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-kaguen-plan__brands {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.brand-chip {
  font-size: 0.625rem;
  background: #333;
  padding: 2px 6px;
  border-radius: 2px;
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Products in Plans */
.p-kaguen-products {
  margin-top: 4rem;
}

.p-kaguen-products .product-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.p-kaguen-products .product-card {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.p-kaguen-products .product-card img {
  width: 100%;
  height: auto;
  display: block;
}

.p-kaguen-products .meta {
  padding: 1rem;
  text-align: center;
}

.p-kaguen-products .name {
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.p-kaguen-products .brand {
  font-size: 0.75rem;
  color: #888;
}

/* Flow */
.p-kaguen-flow {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 4rem;
}

.p-kaguen-flow-item {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 1.5rem;
  position: relative;
  padding-bottom: 1rem;
}

.p-kaguen-flow-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
}

.p-kaguen-flow-item__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-kaguen-flow-item__head .step {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.p-kaguen-flow-item__head .title {
  font-size: 1.25rem;
  font-weight: 700;
}

.p-kaguen-flow-item__text {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text-gray-300);
}

/* Company Section */
.p-kaguen-company-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
}

.p-kaguen-company-list__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
  .p-kaguen-company-list__item {
    display: block;
    padding: 1rem 0;
  }
}

.p-kaguen-company-list dt {
  padding: 1.5rem 0;
  font-weight: 700;
  color: #fff;
}

.p-kaguen-company-list dd {
  padding: 1.5rem 0;
  color: var(--color-text-gray-300);
}

/* News Section */
.p-kaguen-news-list {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-kaguen-news-list__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
}

.p-kaguen-news-list dt {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.p-kaguen-news-list .date {
  font-family: var(--font-primary);
  color: #888;
  font-size: 0.875rem;
}

.p-kaguen-news-list .label {
  font-family: var(--font-primary);
  background-color: #333;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 2px;
}

.p-kaguen-news-list dd a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.p-kaguen-news-list dd a:hover {
  text-decoration: underline;
}

/* 4-Column Plans Grid Specifics */
@media (min-width: 1200px) {
  .p-kaguen-plans-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Plan Image */
.p-kaguen-plan__image {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.p-kaguen-plan__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kaguen Generic Section Spacing */
.p-kaguen-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

@media (min-width: 768px) {
  .p-kaguen-section {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

.p-kaguen-text-annotation {
  font-size: 0.7rem;
  color: #999;
  margin-top: 2rem;
}

/* Kaguen Backgrounds */
.p-kaguen-section,
.p-kaguen-problems,
.p-kaguen-solutions {
  position: relative;
  /* overflow: hidden; Already handled or needed? */
}

.p-kaguen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.p-kaguen-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  /* Low opacity as requested */
  filter: grayscale(100%);
  /* Optional: matches theme vibe */
}

.p-kaguen-bg__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* Overlay */
}

/* Ensure content sits above background */
.p-kaguen-section>.l-container,
.p-kaguen-problems>.l-container,
.p-kaguen-solutions>.l-container,
.p-top-section__header {
  position: relative;
  z-index: 1;
}

/* Section Title Small */
.c-section-title-s {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .c-section-title-s {
    font-size: 2rem;
  }
}

/* About Section */
.p-kaguen-about__lead {
  font-family: var(--font-primary);
  /* Or Japanese font if primary is Antonio? */
  /* Remove gradient, keep simple */
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2rem;
  display: inline-block;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .p-kaguen-about__lead {
    font-size: 1.25rem;
  }
}

.p-kaguen-about__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .p-kaguen-about__desc {
    font-size: 1rem;
  }
}

/* Footer Nav Layout Override */
.l-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columns on mobile */
  gap: 1rem 0.5rem;
  /* row gap 1rem, col gap 0.5rem */
  margin-bottom: 2rem;
  list-style: none;
  padding: 0;
}

.l-footer__nav-item {
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  /* Small text for 3 cols */
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .l-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 0;
  }

  .l-footer__nav-item {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Page: EN LAB
   ========================================================================== */
.p-enlab-capabilities {
  background-color: #fff;
  padding: 100px 0;
  color: #333;
}

.p-enlab-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.p-enlab-section-header h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  color: #000;
  font-family: var(--font-primary);
  /* Antonio */
}

.p-enlab-section-header p {
  font-size: 0.9rem;
  color: #666;
}

.p-enlab-capabilities__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.p-enlab-capabilities__item {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  text-align: left;
}

.p-enlab-capabilities__item h4 {
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid #000;
  padding-bottom: 15px;
  margin-bottom: 20px;
  color: #000;
}

.p-enlab-capabilities__item ul {
  list-style: none;
  padding: 0;
  font-size: 0.95rem;
  line-height: 2.2;
  color: #333;
}


/* MESSAGE Section */
.p-enlab-message {
  background-color: #fff;
  padding: 80px 0;
  color: #333;
}

.p-enlab-message__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

/* @media (min-width: 768px) was removed as we are now single column centered */

/* .p-enlab-message__img-box and .p-enlab-message__img removed as no longer used */

.p-enlab-message__content {
  width: 100%;
  text-align: center;
}

.p-enlab-message__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  color: #000;
}

.p-enlab-message__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.4;
  color: #000;
}

.p-enlab-message__text {
  text-align: center;
}

/* Middle media query removed, using default center */

/* Concept Section Text */
.p-enlab-concept__text p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* Let's refine based on the content. It is a story. */
.p-enlab-message__text p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.p-enlab-message__text p:last-child {
  margin-bottom: 0;
}

/* Ensure strong tags are bold */
.p-enlab-concept__text strong,
.p-enlab-message__text strong {
  font-weight: 700;
  color: #000;
  /* Optional: Slight contrast boost */
  /* background: linear-gradient(transparent 60%, #fffacd 60%); Optional highlighter effect if desired later */
}


/* New Image Styles for EN LAB */

/* Concept Image */
.p-enlab-concept__img-box {
  margin-top: 60px;
  width: 100%;
}

.p-enlab-concept__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  max-height: 500px;
  object-fit: cover;
}

/* Service Card Image */
.p-enlab-card__img-box {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  background-color: #f0f0f0;
  /* Fallback placeholder color */
}

.p-enlab-card__img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.p-enlab-card:hover .p-enlab-card__img-box img {
  transform: scale(1.05);
  /* Zoom effect on hover */
}

/* Capabilities Image */
.p-enlab-capabilities__img-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  background-color: #f0f0f0;
}

.p-enlab-capabilities__img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Styles Section (Interior/Web) */
.p-enlab-styles {
  background-color: #f5f5f5;
  padding: 80px 0;
}

.p-enlab-styles__header {
  text-align: center;
  margin-bottom: 60px;
  width: 100%;
}

.p-enlab-styles__title {
  font-family: var(--font-primary);
  /* Antonio */
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  color: #000;
}

.p-enlab-styles__sub {
  display: block;
  font-size: 1rem;
  color: #666;
  letter-spacing: 0.05em;
}

/* Enlab Carousel Items */
.p-enlab-style-item {
  position: relative;
}

.p-enlab-style-item__img-box {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.p-enlab-style-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.p-enlab-style-item:hover .p-enlab-style-item__img {
  transform: scale(1.05);
}

.p-enlab-style-item__header {
  text-align: left;
}

.p-enlab-style-item__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.25rem;
}

.p-enlab-style-item__cat {
  font-size: 0.8rem;
  color: #999;
  letter-spacing: 0.1em;
}