/* =============================================================
 * SOA Theme - main.css
 * =============================================================
 * 1. Variables
 * 2. Reset & Base
 * 3. Typography
 * 4. Layout helpers
 * 5. Buttons
 * 6. Header / Nav
 * 7. Hero
 * 8. Stats
 * 9. Services
 * 10. AI section
 * 11. Works
 * 12. Partners
 * 13. CTA
 * 14. Footer
 * 15. Mobile Fixed CTA
 * 16. Generic Page templates
 * 17. Animations
 * 18. Responsive
 * ----------------------------------------------------------- */

/* =============================================================
 * 1. CSS Variables
 * =========================================================== */
:root {
 --navy: #06111C;
 --navy-2: #07131F;
 --navy-3: #0B1A28;
 --navy-soft: #102035;

 --white: #F5F3EE;
 --white-pure: #ffffff;

 --gold: #B58A4A;
 --gold-2: #C99D5C;
 --gold-soft: rgba(181, 138, 74, 0.12);

 --ink: #1B1B1B;
 --ink-2: #2A2A2A;
 --gray: #8E969E;
 --gray-2: #B5BCC2;
 --gray-soft: #E5E2DD;
 --gray-soft-2: #EFEDE8;

 --font-serif: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'HGE', serif;
 --font-sans: 'Noto Sans JP', 'Inter', 'Helvetica Neue', Arial, sans-serif;
 --font-display: 'Playfair Display', 'Cormorant Garamond', 'Noto Serif JP', serif;
 --font-logo: 'Playfair Display', 'Cormorant Garamond', 'Noto Serif JP', serif;

 --container: 1240px;
 --container-narrow: 1080px;

 --radius-sm: 4px;
 --radius-md: 8px;
 --radius-lg: 12px;

 --shadow-sm: 0 4px 16px rgba(6, 17, 28, 0.06);
 --shadow-md: 0 12px 32px rgba(6, 17, 28, 0.08);
 --shadow-lg: 0 24px 60px rgba(6, 17, 28, 0.12);

 --transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
 --transition-fast: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);

 --header-height: 80px;
}

@media (max-width: 768px) {
 :root {
  --header-height: 64px;
 }
}

/* =============================================================
 * 2. Reset & Base
 * =========================================================== */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 font-size: 100%;
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: var(--font-sans);
 font-weight: 400;
 font-size: 16px;
 line-height: 1.85;
 color: var(--ink);
 background: var(--navy);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-feature-settings: "palt" 1;
 overflow-x: hidden;
}

img,
svg {
 max-width: 100%;
 height: auto;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
 transition: color var(--transition-fast), opacity var(--transition-fast);
}

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

button {
 cursor: pointer;
 font: inherit;
 color: inherit;
 border: none;
 background: none;
 padding: 0;
}

.screen-reader-text {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

.screen-reader-text:focus {
 background-color: #fff;
 clip: auto;
 display: block;
 height: auto;
 left: 5px;
 top: 5px;
 padding: 8px 16px;
 width: auto;
 z-index: 9999;
}

/* =============================================================
 * 3. Typography
 * =========================================================== */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-serif);
 font-weight: 500;
 line-height: 1.45;
 letter-spacing: 0.02em;
 margin: 0;
 color: var(--ink);
}

p {
 margin: 0;
}

/* =============================================================
 * 4. Layout Helpers
 * =========================================================== */
.site-main {
 min-height: 60vh;
}

.site-main > section,
.site-main > article {
 padding-block: clamp(60px, 8vw, 120px);
}

.soa-container {
 width: 100%;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: clamp(20px, 4vw, 48px);
}

/* =============================================================
 * 5. Buttons
 * =========================================================== */
.soa-btn {
 display: inline-flex;
 align-items: center;
 gap: 16px;
 padding: 17px 32px;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.06em;
 text-decoration: none;
 border-radius: 0;
 transition: all var(--transition-fast);
 min-width: 240px;
 justify-content: space-between;
 border: 1px solid transparent;
 position: relative;
 cursor: pointer;
}

.soa-btn__label {
 white-space: nowrap;
}

.soa-btn__arrow {
 font-size: 14px;
 transition: transform var(--transition-fast);
 font-weight: 300;
}

.soa-btn:hover .soa-btn__arrow {
 transform: translateX(6px);
}

/* gold solid */
.soa-btn--gold {
 background: var(--gold);
 color: var(--white);
}
.soa-btn--gold:hover {
 background: var(--gold-2);
 box-shadow: 0 8px 24px rgba(181, 138, 74, 0.3);
}

/* outline (light context) */
.soa-btn--outline {
 background: transparent;
 color: var(--white);
 border-color: rgba(245, 243, 238, 0.5);
}
.soa-btn--outline:hover {
 background: rgba(245, 243, 238, 0.08);
 border-color: var(--white);
}

/* outline (dark context, gold border) */
.soa-btn--outline-gold {
 background: transparent;
 color: var(--white);
 border-color: rgba(181, 138, 74, 0.6);
}
.soa-btn--outline-gold:hover {
 background: var(--gold-soft);
 border-color: var(--gold);
}

/* large variations */
.soa-btn--gold-large {
 padding: 22px 40px;
 min-width: 320px;
 font-size: 15px;
}
.soa-btn--gold-large {
 background: var(--gold);
 color: var(--white);
}
.soa-btn--gold-large:hover {
 background: var(--gold-2);
 box-shadow: 0 8px 24px rgba(181, 138, 74, 0.3);
}

.soa-btn--outline-large {
 padding: 22px 40px;
 min-width: 320px;
 font-size: 15px;
 background: transparent;
 color: var(--white);
 border: 1px solid rgba(245, 243, 238, 0.5);
}
.soa-btn--outline-large:hover {
 background: rgba(245, 243, 238, 0.08);
 border-color: var(--white);
}

/* ghost (page link) */
.soa-btn--ghost {
 color: var(--gold);
 padding: 12px 0;
 min-width: auto;
 border-bottom: 1px solid var(--gold);
 border-radius: 0;
}

/* =============================================================
 * 6. Header / Nav
 * =========================================================== */
.site-header {
 position: fixed;
 inset: 0 0 auto 0;
 z-index: 100;
 height: var(--header-height);
 transition: background var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast);
 color: var(--white);
 background: transparent;
}

.site-header.is-light {
 color: var(--ink);
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: saturate(150%) blur(12px);
 -webkit-backdrop-filter: saturate(150%) blur(12px);
 border-bottom: 1px solid var(--gray-soft);
}

.site-header.is-scrolled {
 background: rgba(6, 17, 28, 0.92);
 backdrop-filter: saturate(150%) blur(14px);
 -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.site-header.is-scrolled.is-light {
 background: rgba(255, 255, 255, 0.95);
 color: var(--ink);
}

.site-header__inner {
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(20px, 3vw, 48px);
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
}

.site-header__logo {
 display: inline-flex;
 align-items: center;
 color: inherit;
 flex-shrink: 0;
}

/* SOASVG / viewBox 42701616 ≈ 2.64:1 */
.soa-logo {
 height: 22px;
 width: auto;
 transition: transform var(--transition-fast);
 display: inline-block;
 vertical-align: middle;
 color: inherit; /* fill="currentColor" color */
}

.site-header__logo:hover .soa-logo {
 transform: translateY(-1px);
}

/* WordPress */
.custom-logo-link {
 display: inline-flex;
 align-items: center;
}
.custom-logo {
 height: 24px;
 width: auto;
}

.site-header__nav {
 display: flex;
 align-items: center;
 gap: 36px;
 margin-left: auto;
}

.primary-menu {
 display: flex;
 align-items: center;
 gap: 36px;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.04em;
}

.primary-menu li a {
 display: inline-block;
 padding: 4px 0;
 position: relative;
}

.primary-menu li a::after {
 content: "";
 position: absolute;
 left: 0; right: 0; bottom: -2px;
 height: 1px;
 background: var(--gold);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--transition-fast);
}

.primary-menu li a:hover::after,
.primary-menu li.current-menu-item > a::after {
 transform: scaleX(1);
}

.site-header__cta {
 background: var(--gold);
 color: var(--white) !important;
 padding: 14px 26px;
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.05em;
 transition: all var(--transition-fast);
 border: 1px solid var(--gold);
}

.site-header__cta:hover {
 background: var(--gold-2);
 border-color: var(--gold-2);
}

.site-header__toggle {
 display: none;
 width: 44px;
 height: 44px;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 background: transparent;
}

.site-header__toggle span {
 display: block;
 width: 26px;
 height: 1px;
 background: currentColor;
 transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
 opacity: 0;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

/* mobile drawer */
.mobile-drawer {
 position: fixed;
 inset: var(--header-height) 0 0 0;
 background: var(--navy);
 color: var(--white);
 z-index: 99;
 overflow-y: auto;
 display: none;
}

.mobile-drawer:not([hidden]) {
 display: block;
}

.mobile-drawer__inner {
 padding: 40px 32px 60px;
 display: flex;
 flex-direction: column;
 gap: 40px;
}

.mobile-menu {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-family: var(--font-serif);
 font-size: 22px;
}

.mobile-menu li a {
 display: block;
 padding: 16px 0;
 border-bottom: 1px solid rgba(245, 243, 238, 0.1);
 color: var(--white);
}

.mobile-drawer__contact {
 margin-top: 20px;
 padding-top: 30px;
 border-top: 1px solid rgba(245, 243, 238, 0.15);
}

.mobile-drawer__phone-label {
 font-size: 12px;
 letter-spacing: 0.1em;
 color: var(--gray-2);
 margin-bottom: 8px;
}

.mobile-drawer__phone {
 display: block;
 font-family: var(--font-display);
 font-size: 32px;
 font-weight: 500;
 color: var(--gold);
 letter-spacing: 0.04em;
}

.mobile-drawer__hours {
 font-size: 12px;
 color: var(--gray-2);
 margin-top: 4px;
}

/* =============================================================
 * 7. Hero
 * =========================================================== */
.soa-hero {
 position: relative;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 align-items: center;
 overflow: hidden;
 color: var(--ink);
 padding-top: var(--header-height);
 padding-bottom: 60px;
 background: var(--bg-light, #f8f5ed); /*  */
}

.soa-hero__media {
 position: absolute;
 inset: 0;
 z-index: 0;
 overflow: hidden;
}

.soa-hero__image {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 /*  */
}
.soa-hero__media::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
  90deg,
  rgba(248, 245, 237, 0.92) 0%,
  rgba(248, 245, 237, 0.85) 25%,
  rgba(248, 245, 237, 0.4) 55%,
  rgba(248, 245, 237, 0) 80%
 );
 pointer-events: none;
 z-index: 1;
}

.soa-hero__placeholder {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 background: var(--bg-light, #f8f5ed); /*  */
}

/* → 
 * v1.9.25:  → hero.php  style 
 */

.soa-hero__overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
  180deg,
  rgba(6, 17, 28, 0) 0%,
  rgba(6, 17, 28, 0.1) 100%
 );
 z-index: 1;
}

.soa-hero__inner {
 position: relative;
 z-index: 3;
 width: 100%;
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 5vw, 80px);
}

.soa-hero__content {
 max-width: 580px;
}

.soa-hero__title {
 font-size: clamp(36px, 5.5vw, 68px);
 line-height: 1.32;
 font-weight: 500;
 letter-spacing: 0.02em;
 color: var(--navy);
 margin-bottom: 32px;
}

.soa-hero__title span {
 display: block;
}

.soa-hero__subtitle {
 font-size: clamp(14px, 1.2vw, 17px);
 line-height: 1.95;
 color: var(--ink-2);
 margin-bottom: 24px;
 font-weight: 500;
}

.soa-hero__lead {
 font-size: clamp(13px, 1vw, 14px);
 line-height: 2;
 color: #4a5460;
 margin-bottom: 48px;
 max-width: 480px;
}

.soa-hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
}

.soa-hero__actions .soa-btn {
 min-width: 220px;
}

/* gold button override for hero */
.soa-hero .soa-btn--gold {
 background: var(--gold);
 color: var(--white);
}

/* outline in hero context (light bg) - override */
.soa-hero .soa-btn--outline {
 color: var(--ink);
 border-color: var(--ink);
}
.soa-hero .soa-btn--outline:hover {
 background: var(--ink);
 color: var(--white);
}

/* scroll indicator */
.soa-hero__scroll {
 position: absolute;
 bottom: 24px;
 right: clamp(24px, 4vw, 60px);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 z-index: 5;
 color: var(--ink);
}

.soa-hero__scroll-text {
 font-family: var(--font-display);
 font-size: 11px;
 letter-spacing: 0.4em;
 writing-mode: vertical-rl;
}

.soa-hero__scroll-line {
 width: 1px;
 height: 60px;
 background: var(--ink);
 position: relative;
 overflow: hidden;
}

.soa-hero__scroll-line::after {
 content: "";
 position: absolute;
 top: -100%;
 left: 0;
 width: 100%;
 height: 50%;
 background: var(--gold);
 animation: scrollLine 2.4s ease-in-out infinite;
}

@keyframes scrollLine {
 0% { top: -100%; }
 100% { top: 100%; }
}

/* =============================================================
 * 8. Stats
 * =========================================================== */
.soa-stats {
 background: var(--navy);
 color: var(--white);
 padding-block: clamp(60px, 7vw, 90px);
 position: relative;
}

.soa-stats__inner {
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 48px);
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: 60px;
 align-items: center;
}

.soa-stats__eyebrow {
 font-family: var(--font-display);
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold);
 margin-bottom: 12px;
}

.soa-stats__heading {
 font-size: clamp(22px, 2.4vw, 30px);
 line-height: 1.6;
 color: var(--white);
 font-weight: 400;
}

.soa-stats__list {
 display: grid;
 grid-template-columns: 1fr auto 1fr auto 1fr;
 gap: 0;
 align-items: center;
 margin: 0;
}

.soa-stats__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 text-align: center;
}

.soa-stats__icon {
 width: 56px;
 height: 56px;
 color: var(--gold);
 display: flex;
 align-items: center;
 justify-content: center;
}

.soa-stats__icon svg {
 width: 100%;
 height: 100%;
}

.soa-stats__label {
 font-family: var(--font-sans);
 font-size: 12px;
 letter-spacing: 0.15em;
 color: var(--gray-2);
}

.soa-stats__value {
 display: flex;
 align-items: baseline;
 gap: 6px;
 margin: 0;
}

.soa-stats__number {
 font-family: var(--font-display);
 font-size: clamp(36px, 4vw, 52px);
 font-weight: 500;
 color: var(--gold);
 letter-spacing: 0.02em;
 line-height: 1;
}

.soa-stats__unit {
 font-size: 12px;
 color: var(--gray-2);
}

.soa-stats__divider {
 width: 1px;
 height: 80px;
 background: rgba(245, 243, 238, 0.12);
}

/* =============================================================
 * 9. Services
 * =========================================================== */
.soa-services {
 background: #F4F2EC;
 padding-block: clamp(70px, 8vw, 110px);
}

.soa-services__inner {
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 60px);
}

.soa-services__header {
 text-align: center;
 margin-bottom: 56px;
}

.soa-services__eyebrow {
 font-family: var(--font-display);
 font-size: 13px;
 letter-spacing: 0.5em;
 color: var(--gold);
 margin-bottom: 14px;
 font-weight: 500;
}

.soa-services__heading {
 font-size: clamp(22px, 2.4vw, 30px);
 color: var(--ink);
 line-height: 1.5;
 font-weight: 500;
}

.soa-services__grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 20px;
}

.soa-service-card {
 background: var(--white-pure);
 border: 1px solid transparent;
 transition: all var(--transition);
 overflow: hidden;
}

.soa-service-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-md);
 border-color: var(--gold-soft);
}

.soa-service-card__link {
 display: block;
 height: 100%;
 color: inherit;
}

.soa-service-card__image {
 position: relative;
 aspect-ratio: 3 / 2;
 margin: 0;
 overflow: hidden;
 background: var(--navy);
}

.soa-service-card__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--transition);
}

.soa-service-card:hover .soa-service-card__image img {
 transform: scale(1.05);
}

.soa-service-card__image-placeholder {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-display);
 font-size: 14px;
 letter-spacing: 0.3em;
 color: rgba(245, 243, 238, 0.5);
 text-transform: uppercase;
 background: linear-gradient(135deg, #0E1F33, #1a2c44);
}

.soa-service-card__image-placeholder--video {
 background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}
.soa-service-card__image-placeholder--web {
 background: linear-gradient(135deg, #1d2a3a, #2c3e50);
}
.soa-service-card__image-placeholder--recruit {
 background: linear-gradient(135deg, #2a3441, #3d4a5a);
}
.soa-service-card__image-placeholder--ad {
 background: linear-gradient(135deg, #2a2640, #4a3d5e);
}
.soa-service-card__image-placeholder--support {
 background: linear-gradient(135deg, #243038, #344552);
}

.soa-service-card__body {
 padding: 20px 18px 22px;
}

.soa-service-card__title {
 font-family: var(--font-serif);
 font-size: 15px;
 font-weight: 600;
 margin-bottom: 10px;
 color: var(--ink);
 letter-spacing: 0.02em;
}

.soa-service-card__description {
 font-size: 12px;
 line-height: 1.85;
 color: #5d6670;
 margin-bottom: 14px;
}

.soa-service-card__more {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 11px;
 font-weight: 500;
 color: var(--gold);
 letter-spacing: 0.08em;
}

.soa-service-card__arrow {
 transition: transform var(--transition-fast);
}

.soa-service-card:hover .soa-service-card__arrow {
 transform: translateX(4px);
}

/* =============================================================
 * 10. AI Section
 * =========================================================== */
.soa-ai {
 background: var(--navy);
 color: var(--white);
 padding-block: clamp(70px, 8vw, 120px);
 position: relative;
 overflow: hidden;
}

.soa-ai__bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
}

.soa-ai__bg svg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.soa-ai__inner {
 position: relative;
 z-index: 1;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 48px);
 display: grid;
 grid-template-columns: 1fr 1.4fr;
 gap: 80px;
 align-items: center;
}

.soa-ai__eyebrow {
 font-family: var(--font-display);
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold);
 margin-bottom: 12px;
}

.soa-ai__heading {
 font-size: clamp(24px, 2.6vw, 34px);
 line-height: 1.55;
 color: var(--white);
 margin-bottom: 28px;
 font-weight: 400;
}

.soa-ai__lead {
 font-size: 14px;
 line-height: 2.05;
 color: var(--gray-2);
 margin-bottom: 36px;
 max-width: 460px;
}

.soa-ai__features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
 margin: 0;
}

.soa-ai__feature {
 text-align: center;
 padding: 24px 12px;
}

.soa-ai__feature-icon {
 display: inline-flex;
 width: 48px;
 height: 48px;
 color: var(--gold);
 margin-bottom: 18px;
}

.soa-ai__feature-icon svg {
 width: 100%;
 height: 100%;
}

.soa-ai__feature-title {
 font-family: var(--font-serif);
 font-size: 16px;
 color: var(--white);
 margin-bottom: 12px;
 font-weight: 500;
}

.soa-ai__feature-desc {
 font-size: 12px;
 line-height: 1.8;
 color: var(--gray-2);
}

/* =============================================================
 * 11. Works
 * =========================================================== */
.soa-works {
 background: var(--white);
 padding-block: clamp(70px, 8vw, 110px);
}

.soa-works__inner {
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 60px);
}

.soa-works__header {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 margin-bottom: 48px;
 gap: 32px;
 flex-wrap: wrap;
}

.soa-works__eyebrow {
 font-family: var(--font-display);
 font-size: 14px;
 letter-spacing: 0.5em;
 color: var(--gold);
 margin-bottom: 12px;
}

.soa-works__heading {
 font-size: clamp(20px, 2vw, 26px);
 color: var(--ink);
 font-weight: 500;
 line-height: 1.55;
}

.soa-works__view-all {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 font-size: 13px;
 color: var(--ink);
 font-weight: 500;
 letter-spacing: 0.04em;
}

.soa-works__view-all-arrow {
 transition: transform var(--transition-fast);
}

.soa-works__view-all:hover .soa-works__view-all-arrow {
 transform: translateX(6px);
}

.soa-works__grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 16px;
 scroll-snap-type: x mandatory;
}

/* Carousel arrows (decorative - mock shows them on the sides) */
.soa-works__nav {
 display: flex;
 justify-content: space-between;
 pointer-events: none;
 position: absolute;
 inset: 50% 0 auto 0;
 transform: translateY(-50%);
 z-index: 2;
 padding-inline: clamp(8px, 1vw, 16px);
}

.soa-works__nav-btn {
 pointer-events: auto;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.95);
 box-shadow: var(--shadow-md);
 color: var(--ink);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 transition: all var(--transition-fast);
 border: 1px solid var(--gray-soft);
}

.soa-works__nav-btn:hover {
 background: var(--gold);
 color: var(--white);
 border-color: var(--gold);
}

.soa-works-card {
 transition: transform var(--transition);
}

.soa-works-card__link {
 display: block;
 color: inherit;
}

.soa-works-card__image {
 margin: 0;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: var(--navy);
 position: relative;
}

.soa-works-card__image img,
.soa-works-card__placeholder {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--transition);
}

.soa-works-card__image img {
 display: block;
}

.soa-works-card:hover .soa-works-card__image img {
 transform: scale(1.05);
}

.soa-works-card__placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-display);
 font-size: 12px;
 letter-spacing: 0.2em;
 color: rgba(245, 243, 238, 0.6);
 padding: 20px;
 text-align: center;
 background: linear-gradient(135deg, #0E1F33, #1a2c44);
}

.soa-works-card__placeholder--1 { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.soa-works-card__placeholder--2 { background: linear-gradient(135deg, #2a3441, #3d4a5a); }
.soa-works-card__placeholder--3 { background: linear-gradient(135deg, #1d2a3a, #2c3e50); }
.soa-works-card__placeholder--4 { background: linear-gradient(135deg, #2a2640, #4a3d5e); }
.soa-works-card__placeholder--5 { background: linear-gradient(135deg, #243038, #344552); }
.soa-works-card__placeholder--6 { background: linear-gradient(135deg, #2c2226, #432e35); }

.soa-works-card__body {
 padding: 16px 4px 0;
}

.soa-works-card__category {
 font-family: var(--font-serif);
 font-size: 14px;
 font-weight: 600;
 color: var(--ink);
 margin-bottom: 6px;
 line-height: 1.4;
}

.soa-works-card__industry {
 font-size: 12px;
 color: var(--gray);
 letter-spacing: 0.04em;
}

.soa-works-card__title {
 font-family: var(--font-serif);
 font-size: 14px;
 font-weight: 600;
 color: var(--ink);
 margin-bottom: 6px;
}

/* =============================================================
 * 12. Partners
 * =========================================================== */
.soa-partners {
 background: var(--navy);
 color: var(--white);
 padding-block: 50px;
 border-top: 1px solid rgba(245, 243, 238, 0.06);
 border-bottom: 1px solid rgba(245, 243, 238, 0.06);
}

.soa-partners__inner {
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 60px);
 display: flex;
 align-items: center;
 gap: 40px;
 flex-wrap: wrap;
}

.soa-partners__eyebrow {
 font-family: var(--font-display);
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold);
 margin: 0;
 flex-shrink: 0;
}

.soa-partners__heading {
 font-size: 16px;
 color: var(--white);
 margin: 0;
 font-weight: 500;
 letter-spacing: 0.06em;
 flex-shrink: 0;
}

.soa-partners__lead {
 font-size: 13px;
 color: var(--gray-2);
 flex-shrink: 0;
 letter-spacing: 0.04em;
}

.soa-partners__list {
 display: flex;
 flex-wrap: wrap;
 gap: 36px 48px;
 align-items: center;
 flex: 1;
 justify-content: space-around;
}

.soa-partners__item {
 font-family: var(--font-display);
 font-size: 17px;
 font-weight: 500;
 letter-spacing: 0.08em;
 color: rgba(245, 243, 238, 0.85);
 white-space: nowrap;
 transition: color var(--transition-fast);
}

.soa-partners__item:hover {
 color: var(--gold);
}

/* =============================================================
 * 13. CTA
 * =========================================================== */
.soa-cta {
 position: relative;
 color: var(--white);
 padding-block: clamp(80px, 10vw, 140px);
 overflow: hidden;
 isolation: isolate;
}

.soa-cta__bg {
 position: absolute;
 inset: 0;
 z-index: -1;
}

.soa-cta__bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.soa-cta__bg--placeholder {
 background:
  radial-gradient(ellipse at center, #1a2c44 0%, transparent 60%),
  linear-gradient(135deg, #06111C 0%, #0E1F33 100%);
}

.soa-cta__overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(6, 17, 28, 0.7) 0%, rgba(6, 17, 28, 0.85) 100%);
}

.soa-cta__inner {
 position: relative;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 48px);
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 60px;
 align-items: center;
}

.soa-cta__heading {
 font-size: clamp(22px, 2.6vw, 32px);
 line-height: 1.55;
 margin-bottom: 18px;
 color: var(--white);
 font-weight: 400;
}

.soa-cta__lead {
 font-size: 14px;
 line-height: 2;
 color: var(--gray-2);
}

.soa-cta__actions {
 display: flex;
 gap: 16px;
 flex-wrap: wrap;
}

/* =============================================================
 * 14. Footer
 * =========================================================== */
.site-footer {
 background: var(--navy);
 color: var(--gray-2);
 padding-top: 80px;
 font-size: 13px;
 line-height: 1.9;
}

.site-footer__inner {
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 60px);
 display: grid;
 grid-template-columns: 280px 1fr 280px;
 gap: 60px;
 margin-bottom: 60px;
}

.site-footer__brand .soa-logo {
 height: 28px;
 width: auto;
 margin-bottom: 16px;
 color: var(--white);
 display: inline-block;
}

.site-footer__tagline {
 font-family: var(--font-serif);
 font-size: 16px;
 color: var(--white);
 margin-bottom: 16px;
}

.site-footer__about {
 font-size: 12px;
 line-height: 1.9;
 color: var(--gray);
}

.site-footer__cols {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 32px;
}

.site-footer__heading {
 font-family: var(--font-serif);
 font-size: 14px;
 color: var(--white);
 margin-bottom: 18px;
 font-weight: 500;
}

.site-footer__list li a {
 font-size: 12px;
 color: var(--gray-2);
 display: inline-block;
 padding: 4px 0;
}

.site-footer__list li a:hover {
 color: var(--gold);
}

.site-footer__contact {
 background: rgba(245, 243, 238, 0.04);
 border: 1px solid rgba(245, 243, 238, 0.08);
 padding: 28px;
}

.site-footer__contact-label {
 font-size: 12px;
 color: var(--gray-2);
 margin-bottom: 8px;
 letter-spacing: 0.05em;
}

.site-footer__phone {
 font-family: var(--font-display);
 font-size: 30px;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--gold);
 display: block;
 margin-bottom: 4px;
}

.site-footer__hours {
 font-size: 11px;
 color: var(--gray);
 margin-bottom: 18px;
}

.site-footer__contact .soa-btn {
 min-width: auto;
 width: 100%;
 font-size: 12px;
 padding: 14px 20px;
}

.site-footer__bottom {
 border-top: 1px solid rgba(245, 243, 238, 0.08);
 padding: 24px 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1640px;
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 60px);
 flex-wrap: wrap;
 gap: 16px;
}

.site-footer__copy {
 font-size: 11px;
 color: var(--gray);
 letter-spacing: 0.05em;
}

.site-footer__legal {
 display: flex;
 gap: 24px;
 font-size: 11px;
}

.site-footer__legal a {
 color: var(--gray);
}

.site-footer__legal a:hover {
 color: var(--gold);
}

/* =============================================================
 * 15. Mobile Fixed CTA
 * =========================================================== */
.mobile-fixed-cta {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 90;
 display: none;
 background: var(--navy);
 border-top: 1px solid rgba(181, 138, 74, 0.3);
}

.mobile-fixed-cta__btn {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 8px;
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--white);
}

.mobile-fixed-cta__btn--phone {
 background: rgba(245, 243, 238, 0.04);
 border-right: 1px solid rgba(245, 243, 238, 0.1);
}

.mobile-fixed-cta__btn--contact {
 background: var(--gold);
}

.mobile-fixed-cta__icon {
 font-size: 16px;
}

/* =============================================================
 * 16. Generic Page Templates
 * =========================================================== */
.soa-page-hero {
 background: var(--navy);
 color: var(--white);
 padding-top: calc(var(--header-height) + 80px);
 padding-bottom: 100px;
 position: relative;
 overflow: hidden;
}

.soa-page-hero__bg {
 position: absolute;
 inset: 0;
 opacity: 0.4;
 z-index: 0;
}

.soa-page-hero__bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.soa-page-hero__bg::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(6, 17, 28, 0.4), rgba(6, 17, 28, 0.85));
}

.soa-page-hero__inner {
 position: relative;
 z-index: 1;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 48px);
}

.soa-page-hero__eyebrow {
 font-family: var(--font-display);
 font-size: 12px;
 letter-spacing: 0.5em;
 color: var(--gold);
 margin-bottom: 14px;
}

.soa-page-hero__title {
 font-size: clamp(28px, 4vw, 48px);
 color: var(--white);
 margin-bottom: 20px;
 line-height: 1.45;
}

.soa-page-hero__lead {
 font-size: 15px;
 line-height: 2.05;
 color: var(--gray-2);
 max-width: 680px;
}

.soa-page {
 padding-block: clamp(60px, 7vw, 100px);
}

.soa-page__inner {
 max-width: var(--container-narrow);
 margin-inline: auto;
 padding-inline: clamp(24px, 4vw, 48px);
}

.soa-page__inner h2 {
 font-size: clamp(22px, 2.4vw, 30px);
 margin-block: 60px 24px;
 border-bottom: 1px solid var(--gold);
 padding-bottom: 16px;
}

.soa-page__inner h3 {
 font-size: 20px;
 margin-block: 36px 16px;
}

.soa-page__inner p {
 margin-bottom: 24px;
 line-height: 2;
}

.soa-breadcrumbs {
 max-width: var(--container);
 margin-inline: auto;
 padding: 16px clamp(24px, 4vw, 48px);
 font-size: 12px;
 color: var(--gray);
}

.soa-breadcrumbs ol {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.soa-breadcrumbs li {
 display: flex;
 align-items: center;
 gap: 8px;
}

.soa-breadcrumbs li:not(:last-child)::after {
 content: "›";
 color: var(--gray-2);
}

.soa-breadcrumbs a:hover {
 color: var(--gold);
}

/* contact form basic styling */
.soa-form {
 max-width: 720px;
 margin: 40px auto 0;
}

.soa-form label {
 display: block;
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 8px;
 color: var(--ink);
}

.soa-form input[type="text"],
.soa-form input[type="email"],
.soa-form input[type="tel"],
.soa-form select,
.soa-form textarea {
 width: 100%;
 padding: 14px 16px;
 font-family: var(--font-sans);
 font-size: 14px;
 color: var(--ink);
 background: var(--white);
 border: 1px solid var(--gray-soft);
 border-radius: 0;
 transition: border-color var(--transition-fast);
 margin-bottom: 24px;
}

.soa-form input:focus,
.soa-form select:focus,
.soa-form textarea:focus {
 outline: none;
 border-color: var(--gold);
}

.soa-form textarea {
 min-height: 160px;
 resize: vertical;
}

.soa-form button[type="submit"] {
 background: var(--gold);
 color: var(--white);
 padding: 18px 40px;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.06em;
 transition: all var(--transition-fast);
 cursor: pointer;
}

.soa-form button[type="submit"]:hover {
 background: var(--gold-2);
}

/* =============================================================
 * 17. Animations
 * =========================================================== */

/*  */
.soa-particles-canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 1;
 opacity: 0.85;
 mix-blend-mode: screen;
}

/* position: relative */
.soa-stats,
.soa-ai,
.soa-cta {
 position: relative;
}

/* AISVG */
.soa-ai__bg,
.soa-ai__inner,
.soa-stats__inner,
.soa-cta__inner {
 position: relative;
 z-index: 2;
}

.soa-fade-up {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
 transition-delay: var(--d, 0s);
}

.soa-fade-up.is-visible {
 opacity: 1;
 transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
 }
 .soa-fade-up {
  opacity: 1;
  transform: none;
 }
}

/* =============================================================
 * 18. Responsive
 * =========================================================== */

@media (max-width: 1280px) {
 .soa-services__grid {
  grid-template-columns: repeat(3, 1fr);
 }
 .soa-works__grid {
  grid-template-columns: repeat(4, 1fr);
 }
 .site-footer__cols {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 48px;
 }
}

@media (max-width: 1024px) {
 .site-header__nav {
  display: none;
 }
 .site-header__toggle {
  display: flex;
 }
 .soa-stats__inner {
  grid-template-columns: 1fr;
  gap: 40px;
 }
 .soa-ai__inner {
  grid-template-columns: 1fr;
  gap: 50px;
 }
 .soa-ai__features {
  grid-template-columns: repeat(2, 1fr);
 }
 .soa-cta__inner {
  grid-template-columns: 1fr;
  gap: 32px;
 }
 .site-footer__inner {
  grid-template-columns: 1fr;
  gap: 40px;
 }
}

@media (max-width: 768px) {
 body {
  padding-bottom: 60px;
 }

 .mobile-fixed-cta {
  display: flex;
 }

 .soa-hero {
  padding-bottom: 80px;
  min-height: 80vh;
 }

 /* v1.9.25:  ::before  hero.php  */

 .soa-hero__title {
  font-size: clamp(28px, 8vw, 40px);
 }

 .soa-hero__actions .soa-btn {
  min-width: 100%;
 }

 .soa-stats__list {
  grid-template-columns: 1fr;
  gap: 24px;
 }

 .soa-stats__item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 18px;
  text-align: left;
 }

 .soa-stats__divider {
  width: 100%;
  height: 1px;
 }

 .soa-stats__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
 }

 .soa-services__grid {
  grid-template-columns: 1fr;
 }

 .soa-ai__features {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
 }

 .soa-ai__feature {
  padding: 16px 8px;
 }

 .soa-works__grid {
  grid-template-columns: repeat(2, 1fr);
 }

 .soa-works__header {
  flex-direction: column;
  align-items: flex-start;
 }

 .soa-cta__actions .soa-btn {
  width: 100%;
  min-width: 100%;
 }

 .site-footer__cols {
  grid-template-columns: repeat(2, 1fr);
 }

 .soa-partners__inner {
  flex-direction: column;
  gap: 20px;
  text-align: center;
 }

 .soa-partners__list {
  justify-content: center;
  gap: 20px 32px;
 }

 .soa-partners__item {
  font-size: 14px;
 }
}

@media (max-width: 480px) {
 .soa-hero__title {
  font-size: clamp(26px, 9vw, 36px);
 }
 .site-footer__cols {
  grid-template-columns: 1fr;
 }
}

/* =============================================================
 * Print
 * =========================================================== */
@media print {
 .site-header, .site-footer, .mobile-fixed-cta, .soa-cta {
  display: none !important;
 }
}

/* =============================================================
 * 19. Page templates – page-hero / breadcrumbs / prose
 * =========================================================== */
.soa-main { display: block; }
.soa-container--narrow { max-width: 880px; }

.soa-page-hero {
 position: relative;
 padding: clamp(120px, 14vw, 200px) 0 clamp(60px, 8vw, 100px);
 background: linear-gradient(180deg, #f3efe8 0%, #faf8f4 100%);
 overflow: hidden;
}
.soa-page-hero__image {
 position: absolute;
 inset: 0;
 background-size: cover;
 background-position: center;
 opacity: 0.65;
}
.soa-page-hero__overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(245, 243, 238, 0.4) 0%, rgba(245, 243, 238, 0.95) 100%);
}
.soa-page-hero__inner { position: relative; z-index: 2; }
.soa-page-hero__eyebrow {
 font-family: 'Cormorant Garamond', 'Inter', serif;
 font-size: 14px;
 letter-spacing: 0.3em;
 color: var(--gold);
 margin: 0 0 18px;
 font-weight: 500;
}
.soa-page-hero__eyebrow--gold { color: var(--gold); }
.soa-page-hero__title {
 font-family: var(--font-mincho);
 font-size: clamp(30px, 5vw, 52px);
 line-height: 1.4;
 color: var(--ink);
 font-weight: 500;
 margin: 0 0 24px;
 letter-spacing: 0.04em;
}
.soa-page-hero__title--light { color: var(--soft-white); }
.soa-page-hero__subtitle {
 font-size: 16px;
 line-height: 1.9;
 color: var(--gray);
 max-width: 720px;
}
.soa-page-hero--ai {
 background: linear-gradient(180deg, var(--navy) 0%, #050d18 100%);
 color: var(--soft-white);
}
.soa-page-hero--ai .soa-page-hero__title { color: var(--soft-white); }
.soa-page-hero--ai .soa-page-hero__subtitle { color: rgba(245, 243, 238, 0.7); }
.soa-page-hero--ai .soa-breadcrumbs__item,
.soa-page-hero--ai .soa-breadcrumbs__sep {
 color: rgba(245, 243, 238, 0.55);
}
.soa-page-hero--ai .soa-breadcrumbs__link {
 color: rgba(245, 243, 238, 0.7);
}
.soa-ai-bg {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 opacity: 0.7;
}
.soa-ai-bg svg { width: 100%; height: 100%; }

/* breadcrumbs */
.soa-breadcrumbs { margin-bottom: 24px; }
.soa-breadcrumbs__list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 font-size: 12px;
 color: var(--gray);
 letter-spacing: 0.05em;
}
.soa-breadcrumbs__item { display: inline-flex; align-items: center; gap: 10px; }
.soa-breadcrumbs__link {
 color: var(--gray);
 text-decoration: none;
 transition: color 0.2s;
}
.soa-breadcrumbs__link:hover { color: var(--gold); }
.soa-breadcrumbs__sep { color: var(--gray); opacity: 0.5; }

/* prose (the_content) */
.soa-prose {
 font-size: 16px;
 line-height: 1.95;
 color: var(--ink);
}
.soa-prose h2 {
 font-family: var(--font-mincho);
 font-size: clamp(22px, 3vw, 28px);
 margin: 60px 0 24px;
 padding-bottom: 14px;
 border-bottom: 1px solid rgba(181, 138, 74, 0.25);
 font-weight: 500;
}
.soa-prose h3 {
 font-family: var(--font-mincho);
 font-size: clamp(18px, 2.4vw, 22px);
 margin: 40px 0 16px;
 font-weight: 500;
}
.soa-prose p { margin: 0 0 1.6em; }
.soa-prose a { color: var(--gold); }
.soa-prose ul, .soa-prose ol { padding-left: 1.5em; margin: 0 0 1.6em; }
.soa-prose li { margin-bottom: 0.5em; }
.soa-prose blockquote {
 border-left: 3px solid var(--gold);
 padding: 12px 0 12px 24px;
 margin: 30px 0;
 font-family: var(--font-mincho);
 color: var(--gray);
}
.soa-prose img { max-width: 100%; height: auto; border-radius: 4px; }

/* =============================================================
 * 20. News list / pagination
 * =========================================================== */
.soa-news-list {
 display: flex;
 flex-direction: column;
 gap: 0;
 border-top: 1px solid rgba(27, 27, 27, 0.08);
}
.soa-news-item {
 border-bottom: 1px solid rgba(27, 27, 27, 0.08);
 transition: background 0.2s;
}
.soa-news-item:hover { background: rgba(181, 138, 74, 0.04); }
.soa-news-item__link {
 display: block;
 padding: 28px 60px 28px 0;
 position: relative;
 text-decoration: none;
 color: inherit;
}
.soa-news-item__meta {
 display: flex;
 gap: 16px;
 align-items: center;
 margin-bottom: 8px;
}
.soa-news-item__date {
 font-family: 'Cormorant Garamond', serif;
 font-size: 14px;
 color: var(--gold);
 letter-spacing: 0.06em;
}
.soa-news-item__cat {
 font-size: 11px;
 letter-spacing: 0.12em;
 padding: 2px 10px;
 border: 1px solid rgba(27, 27, 27, 0.2);
 color: var(--gray);
}
.soa-news-item__title {
 font-family: var(--font-mincho);
 font-size: 17px;
 font-weight: 500;
 margin: 0 0 6px;
 color: var(--ink);
 line-height: 1.6;
}
.soa-news-item__excerpt {
 font-size: 14px;
 color: var(--gray);
 margin: 0;
 line-height: 1.7;
}
.soa-news-item__arrow {
 position: absolute;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 color: var(--gold);
 font-size: 18px;
 transition: transform 0.25s;
}
.soa-news-item:hover .soa-news-item__arrow { transform: translateY(-50%) translateX(4px); }

/* pagination */
.soa-pagination {
 display: flex;
 justify-content: center;
 gap: 6px;
 margin: 60px 0 0;
}
.soa-pagination .page-numbers {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 40px;
 height: 40px;
 padding: 0 12px;
 border: 1px solid rgba(27, 27, 27, 0.15);
 color: var(--ink);
 text-decoration: none;
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 transition: all 0.2s;
}
.soa-pagination .page-numbers.current {
 background: var(--navy);
 color: var(--soft-white);
 border-color: var(--navy);
}
.soa-pagination .page-numbers:hover:not(.current) {
 border-color: var(--gold);
 color: var(--gold);
}

.soa-no-results {
 text-align: center;
 padding: 60px 20px;
 color: var(--gray);
}

/* =============================================================
 * 21. Single post / works detail
 * =========================================================== */
.soa-single__meta {
 display: flex;
 gap: 16px;
 align-items: center;
 margin-bottom: 16px;
}
.soa-single__date {
 font-family: 'Cormorant Garamond', serif;
 font-size: 14px;
 color: var(--gold);
 letter-spacing: 0.08em;
}
.soa-single__cat {
 font-size: 11px;
 letter-spacing: 0.12em;
 padding: 3px 10px;
 border: 1px solid rgba(27, 27, 27, 0.2);
 color: var(--gray);
}
.soa-single__title { line-height: 1.5; }
.soa-single__article { padding: 40px 0; }
.soa-single__tags {
 margin-top: 60px;
 padding-top: 30px;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.soa-single__tags .soa-tag {
 font-size: 12px;
 color: var(--gray);
 text-decoration: none;
}
.soa-single__nav {
 margin-top: 60px;
 padding-top: 40px;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 30px;
}
.soa-single__nav-prev a,
.soa-single__nav-next a {
 display: block;
 text-decoration: none;
 color: inherit;
}
.soa-single__nav-next { text-align: right; }
.soa-single__nav-label {
 display: block;
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.08em;
 margin-bottom: 8px;
}
.soa-single__nav-title {
 display: block;
 font-family: var(--font-mincho);
 font-size: 14px;
 color: var(--ink);
 line-height: 1.5;
}

/* works single */
.soa-works-single__hero {
 position: relative;
 padding: clamp(120px, 14vw, 200px) 0 clamp(60px, 8vw, 100px);
 background: var(--navy);
 color: var(--soft-white);
 overflow: hidden;
}
.soa-works-single__hero-image {
 position: absolute;
 inset: 0;
 background-size: cover;
 background-position: center;
 opacity: 0.4;
}
.soa-works-single__hero-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(6, 17, 28, 0.4) 0%, rgba(6, 17, 28, 0.85) 100%);
}
.soa-works-single__hero-inner { position: relative; z-index: 2; }
.soa-works-single__hero .soa-breadcrumbs__list,
.soa-works-single__hero .soa-breadcrumbs__link {
 color: rgba(245, 243, 238, 0.7);
}
.soa-works-single__tags {
 display: flex;
 gap: 10px;
 margin-bottom: 20px;
}
.soa-works-single__tag {
 font-size: 11px;
 letter-spacing: 0.12em;
 padding: 4px 12px;
 border: 1px solid rgba(181, 138, 74, 0.5);
 color: var(--gold);
}
.soa-works-single__title {
 font-family: var(--font-mincho);
 font-size: clamp(28px, 4.5vw, 44px);
 color: var(--soft-white);
 font-weight: 500;
 line-height: 1.5;
 margin: 0 0 20px;
}
.soa-works-single__subtitle {
 font-size: 17px;
 line-height: 1.85;
 color: rgba(245, 243, 238, 0.85);
 max-width: 760px;
}
.soa-works-single__video {
 width: 100%;
 aspect-ratio: 16 / 9;
 background: #000;
 overflow: hidden;
}
.soa-works-single__video iframe,
.soa-works-single__video video { width: 100%; height: 100%; }
.soa-works-block { margin-bottom: 60px; }
.soa-works-block__heading {
 display: flex;
 align-items: baseline;
 gap: 16px;
 margin-bottom: 24px;
 padding-bottom: 14px;
 border-bottom: 1px solid rgba(181, 138, 74, 0.25);
}
.soa-works-block__num {
 font-family: 'Cormorant Garamond', serif;
 font-size: 24px;
 color: var(--gold);
 font-weight: 500;
 letter-spacing: 0.06em;
}
.soa-works-block__label {
 font-family: var(--font-mincho);
 font-size: clamp(20px, 2.6vw, 24px);
 font-weight: 500;
 color: var(--ink);
}
.soa-works-block__body { font-size: 16px; line-height: 1.95; color: var(--ink); }
.soa-works-gallery { margin-top: 80px; }
.soa-works-gallery__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
}
.soa-works-gallery__item { margin: 0; }
.soa-works-gallery__item img { width: 100%; height: auto; display: block; }
.soa-works-single__nav {
 margin-top: 80px;
 padding-top: 40px;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 30px;
 align-items: center;
}
.soa-works-single__nav-back { text-align: center; }
.soa-works-single__nav-back-link {
 display: inline-block;
 padding: 12px 24px;
 border: 1px solid var(--gold);
 color: var(--gold);
 text-decoration: none;
 font-size: 13px;
 letter-spacing: 0.1em;
 transition: all 0.2s;
}
.soa-works-single__nav-back-link:hover { background: var(--gold); color: var(--soft-white); }
.soa-works-single__nav-next { text-align: right; }
.soa-works-single__nav-prev a,
.soa-works-single__nav-next a { text-decoration: none; color: inherit; display: block; }

/* works archive filter */
.soa-works-filter {
 margin-bottom: 50px;
 padding: 24px;
 background: rgba(245, 243, 238, 0.4);
 border: 1px solid rgba(27, 27, 27, 0.06);
}
.soa-works-filter__group { display: flex; gap: 24px; align-items: flex-start; padding: 8px 0; }
.soa-works-filter__group + .soa-works-filter__group { border-top: 1px solid rgba(27, 27, 27, 0.06); margin-top: 8px; padding-top: 16px; }
.soa-works-filter__label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.1em;
 min-width: 90px;
 padding-top: 6px;
}
.soa-works-filter__items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.soa-works-filter__item {
 display: inline-block;
 padding: 6px 14px;
 font-size: 13px;
 color: var(--gray);
 border: 1px solid rgba(27, 27, 27, 0.15);
 text-decoration: none;
 transition: all 0.2s;
}
.soa-works-filter__item:hover { border-color: var(--gold); color: var(--gold); }
.soa-works-filter__item.is-active { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }

.soa-works-grid--archive {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px 24px;
}

/* =============================================================
 * 22. 404
 * =========================================================== */
.soa-404 {
 min-height: 70vh;
 display: flex;
 align-items: center;
 padding: clamp(120px, 14vw, 200px) 0 clamp(60px, 8vw, 100px);
 background: linear-gradient(180deg, var(--soft-white) 0%, #f3efe8 100%);
}
.soa-404__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.soa-404__code {
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(80px, 14vw, 140px);
 color: var(--gold);
 font-weight: 400;
 margin: 0 0 20px;
 line-height: 1;
 letter-spacing: 0.06em;
}
.soa-404__title {
 font-family: var(--font-mincho);
 font-size: clamp(22px, 3.5vw, 30px);
 color: var(--ink);
 margin: 0 0 24px;
 font-weight: 500;
}
.soa-404__lead { color: var(--gray); line-height: 1.9; margin: 0 0 40px; }
.soa-404__actions {
 display: flex;
 gap: 16px;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 60px;
}
.soa-404__search { padding-top: 30px; border-top: 1px solid rgba(27, 27, 27, 0.1); }
.soa-404__search-label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.1em;
 margin-bottom: 12px;
}

/* =============================================================
 * 23. Search form
 * =========================================================== */
.soa-search-form {
 display: flex;
 max-width: 480px;
 margin: 0 auto;
 border: 1px solid rgba(27, 27, 27, 0.15);
 background: #fff;
}
.soa-search-form__input {
 flex: 1;
 padding: 14px 18px;
 border: none;
 background: transparent;
 font-size: 14px;
 font-family: inherit;
 color: var(--ink);
}
.soa-search-form__input:focus { outline: none; }
.soa-search-form__button {
 padding: 0 18px;
 background: var(--navy);
 color: var(--soft-white);
 border: none;
 cursor: pointer;
 transition: background 0.2s;
}
.soa-search-form__button:hover { background: var(--gold); }
.soa-search__form { margin-top: 30px; }
.soa-search-query { color: var(--gold); }

/* =============================================================
 * 24. Section heading / generic sections
 * =========================================================== */
.soa-section { padding: clamp(70px, 10vw, 120px) 0; }
.soa-section--soft { background: #faf8f4; }
.soa-section--dark {
 background: var(--navy);
 color: var(--soft-white);
}
.soa-section--dark .soa-section-heading__title { color: var(--soft-white); }
.soa-section--dark .soa-section-heading__eyebrow { color: var(--gold); }
.soa-section__cta-row { text-align: center; margin-top: 50px; }
.soa-section-heading {
 margin: 0 auto 60px;
 max-width: 800px;
}
.soa-section-heading--center { text-align: center; }
.soa-section-heading--left { text-align: left; }
.soa-section-heading__eyebrow {
 font-family: 'Cormorant Garamond', serif;
 font-size: 14px;
 letter-spacing: 0.3em;
 color: var(--gold);
 margin: 0 0 16px;
 font-weight: 500;
}
.soa-section-heading__title {
 font-family: var(--font-mincho);
 font-size: clamp(24px, 3.4vw, 36px);
 color: var(--ink);
 font-weight: 500;
 margin: 0;
 line-height: 1.6;
 letter-spacing: 0.04em;
}

/* =============================================================
 * 25. Feature grid (used across services / about / philosophy)
 * =========================================================== */
.soa-feature-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: rgba(27, 27, 27, 0.08);
}
.soa-feature-grid--3col { grid-template-columns: repeat(3, 1fr); }
.soa-section--soft .soa-feature-grid { background: rgba(27, 27, 27, 0.08); }
.soa-feature {
 background: #fff;
 padding: 36px 28px;
 transition: background 0.3s;
}
.soa-section--soft .soa-feature { background: #faf8f4; }
.soa-feature:hover { background: rgba(181, 138, 74, 0.04); }
.soa-feature--bordered { border-top: 2px solid var(--gold); }
.soa-feature__num {
 font-family: 'Cormorant Garamond', serif;
 font-size: 28px;
 color: var(--gold);
 margin: 0 0 14px;
 letter-spacing: 0.06em;
}
.soa-feature__title {
 font-family: var(--font-mincho);
 font-size: 17px;
 color: var(--ink);
 margin: 0 0 12px;
 font-weight: 500;
 line-height: 1.6;
}
.soa-feature__text {
 font-size: 14px;
 color: var(--gray);
 line-height: 1.85;
 margin: 0;
}

/* =============================================================
 * 26. Service detail page – service rows / lead
 * =========================================================== */
.soa-service-detail__intro { padding: clamp(50px, 8vw, 90px) 0 0; }
.soa-service-detail__lead {
 font-family: var(--font-mincho);
 font-size: clamp(17px, 2.2vw, 21px);
 line-height: 2.1;
 color: var(--ink);
 text-align: center;
 letter-spacing: 0.04em;
}
.soa-service-list__grid {
 display: flex;
 flex-direction: column;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-service-row {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 60px;
 padding: 50px 0;
 border-bottom: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-service-row__eyebrow {
 font-family: 'Cormorant Garamond', serif;
 font-size: 32px;
 color: var(--gold);
 margin: 0 0 12px;
 letter-spacing: 0.06em;
}
.soa-service-row__title {
 font-family: var(--font-mincho);
 font-size: clamp(20px, 2.4vw, 26px);
 color: var(--ink);
 margin: 0;
 font-weight: 500;
 line-height: 1.5;
}
.soa-service-row__lead {
 font-size: 15px;
 color: var(--gray);
 line-height: 1.95;
 margin: 0 0 20px;
}
.soa-service-row__tags {
 list-style: none;
 padding: 0;
 margin: 0 0 28px;
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
.soa-service-row__tags li {
 font-size: 12px;
 letter-spacing: 0.05em;
 padding: 4px 12px;
 background: rgba(181, 138, 74, 0.08);
 color: var(--gold);
}
.soa-service-row__cta {}

/* =============================================================
 * 27. Process flow
 * =========================================================== */
.soa-flow__steps {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 24px;
 position: relative;
}
.soa-flow__step {
 padding: 30px 24px;
 background: rgba(255, 255, 255, 0.04);
 border-top: 2px solid var(--gold);
 position: relative;
}
.soa-section:not(.soa-section--dark) .soa-flow__step {
 background: #fff;
 border-color: var(--gold);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.soa-flow__step-num {
 display: block;
 font-family: 'Cormorant Garamond', serif;
 font-size: 28px;
 color: var(--gold);
 letter-spacing: 0.06em;
 margin-bottom: 16px;
}
.soa-flow__step-title {
 font-family: var(--font-mincho);
 font-size: 16px;
 margin: 0 0 12px;
 font-weight: 500;
 line-height: 1.5;
}
.soa-section--dark .soa-flow__step-title { color: var(--soft-white); }
.soa-flow__step-text {
 font-size: 13px;
 line-height: 1.85;
 color: var(--gray);
 margin: 0;
}
.soa-section--dark .soa-flow__step-text { color: rgba(245, 243, 238, 0.65); }

/* tag cloud */
.soa-tag-cloud {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;
}
.soa-tag {
 display: inline-block;
 padding: 8px 18px;
 font-size: 13px;
 color: var(--ink);
 background: #fff;
 border: 1px solid rgba(27, 27, 27, 0.12);
 letter-spacing: 0.04em;
 transition: all 0.2s;
}
.soa-section--soft .soa-tag { background: #fff; }
.soa-tag:hover { border-color: var(--gold); color: var(--gold); }

/* =============================================================
 * 28. FAQ
 * =========================================================== */
.soa-faq__list {
 border-top: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-faq__item {
 border-bottom: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-faq__q {
 display: flex;
 align-items: flex-start;
 gap: 16px;
 padding: 24px 40px 24px 0;
 cursor: pointer;
 font-family: var(--font-mincho);
 font-size: 16px;
 font-weight: 500;
 color: var(--ink);
 position: relative;
 list-style: none;
 line-height: 1.6;
}
.soa-faq__q::-webkit-details-marker { display: none; }
.soa-faq__q::after {
 content: '+';
 position: absolute;
 right: 0;
 top: 22px;
 font-family: 'Cormorant Garamond', serif;
 font-size: 24px;
 color: var(--gold);
 transition: transform 0.25s;
}
.soa-faq__item[open] .soa-faq__q::after { content: '−'; }
.soa-faq__q-mark {
 font-family: 'Cormorant Garamond', serif;
 font-size: 20px;
 color: var(--gold);
 flex-shrink: 0;
}
.soa-faq__a {
 display: flex;
 gap: 16px;
 padding: 0 40px 24px 0;
 font-size: 14px;
 line-height: 1.95;
 color: var(--gray);
}
.soa-faq__a-mark {
 font-family: 'Cormorant Garamond', serif;
 font-size: 20px;
 color: rgba(181, 138, 74, 0.5);
 flex-shrink: 0;
}

/* =============================================================
 * 29. AI philosophy page
 * =========================================================== */
.soa-philosophy { color: rgba(245, 243, 238, 0.85); }
.soa-philosophy__lead {
 font-family: var(--font-mincho);
 font-size: clamp(18px, 2.4vw, 22px);
 line-height: 2.1;
 color: var(--soft-white);
 letter-spacing: 0.04em;
 margin: 0 0 50px;
 text-align: center;
}
.soa-philosophy__body {
 font-size: 15px;
 line-height: 2.1;
 margin: 0 0 1.8em;
 letter-spacing: 0.03em;
}

.soa-principles {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 32px;
}
.soa-principle {
 padding: 36px 30px;
 background: #faf8f4;
 border-top: 2px solid var(--gold);
 position: relative;
}
.soa-principle__num {
 font-family: 'Cormorant Garamond', serif;
 font-size: 32px;
 color: var(--gold);
 letter-spacing: 0.06em;
 display: block;
 margin-bottom: 16px;
}
.soa-principle__title {
 font-family: var(--font-mincho);
 font-size: 19px;
 color: var(--ink);
 font-weight: 500;
 line-height: 1.6;
 margin: 0 0 14px;
}
.soa-principle__body {
 font-size: 14px;
 color: var(--gray);
 line-height: 1.95;
 margin: 0;
}

/* =============================================================
 * 30. About page – message / vision / culture
 * =========================================================== */
.soa-about-message__inner {
 display: grid;
 grid-template-columns: 360px 1fr;
 gap: 80px;
 align-items: flex-start;
}
.soa-about-message__eyebrow {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.3em;
 margin: 0 0 18px;
}
.soa-about-message__title {
 font-family: var(--font-mincho);
 font-size: clamp(24px, 3.4vw, 32px);
 color: var(--ink);
 font-weight: 500;
 line-height: 1.7;
 margin: 0;
 letter-spacing: 0.04em;
}
.soa-about-message__body {
 font-size: 15px;
 line-height: 2.1;
 color: var(--ink);
 margin: 0 0 1.8em;
}

.soa-vision__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 50px;
}
.soa-vision__item { padding-top: 40px; border-top: 1px solid rgba(245, 243, 238, 0.2); }
.soa-vision__label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.3em;
 margin: 0 0 18px;
}
.soa-vision__title {
 font-family: var(--font-mincho);
 font-size: clamp(20px, 2.6vw, 26px);
 color: var(--soft-white);
 font-weight: 500;
 line-height: 1.6;
 margin: 0 0 20px;
}
.soa-vision__text {
 font-size: 14px;
 line-height: 1.95;
 color: rgba(245, 243, 238, 0.7);
 margin: 0;
}

.soa-about-culture__lead {
 font-size: 16px;
 line-height: 2.05;
 color: var(--ink);
 text-align: center;
 max-width: 760px;
 margin: 0 auto 60px;
}
.soa-about-culture__values {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 30px;
}
.soa-about-culture__value {
 padding: 28px;
 background: #fff;
 border-left: 3px solid var(--gold);
}
.soa-about-culture__value-title {
 font-family: var(--font-mincho);
 font-size: 17px;
 color: var(--ink);
 font-weight: 500;
 margin: 0 0 10px;
}
.soa-about-culture__value-text {
 font-size: 14px;
 color: var(--gray);
 line-height: 1.9;
 margin: 0;
}

/* =============================================================
 * 31. Company page – table / offices / history
 * =========================================================== */
.soa-company-table {
 margin: 0;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-company-table__row {
 display: grid;
 grid-template-columns: 200px 1fr;
 gap: 30px;
 padding: 22px 0;
 border-bottom: 1px solid rgba(27, 27, 27, 0.1);
}
.soa-company-table__label {
 font-family: var(--font-mincho);
 font-size: 14px;
 color: var(--gold);
 font-weight: 500;
 letter-spacing: 0.05em;
}
.soa-company-table__value {
 font-size: 15px;
 color: var(--ink);
 line-height: 1.8;
 margin: 0;
}
.soa-company-table__value a { color: var(--gold); }

.soa-offices {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 50px;
}
.soa-office {
 padding: 36px;
 background: #fff;
 border-top: 2px solid var(--gold);
}
.soa-office__label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.3em;
 margin: 0 0 12px;
}
.soa-office__title {
 font-family: var(--font-mincho);
 font-size: 22px;
 color: var(--ink);
 font-weight: 500;
 margin: 0 0 16px;
}
.soa-office__address {
 font-size: 15px;
 color: var(--ink);
 line-height: 1.85;
 margin: 0 0 8px;
}
.soa-office__access {
 font-size: 13px;
 color: var(--gray);
 margin: 0 0 24px;
}
.soa-office__map { margin-top: 24px; aspect-ratio: 16 / 9; }

.soa-history {
 list-style: none;
 margin: 0;
 padding: 0;
 border-left: 1px solid rgba(181, 138, 74, 0.3);
}
.soa-history__item {
 display: grid;
 grid-template-columns: 140px 1fr;
 gap: 30px;
 padding: 20px 0 20px 30px;
 position: relative;
}
.soa-history__item::before {
 content: '';
 position: absolute;
 left: -5px;
 top: 28px;
 width: 9px;
 height: 9px;
 background: var(--gold);
 border-radius: 50%;
}
.soa-history__year {
 font-family: 'Cormorant Garamond', serif;
 font-size: 22px;
 color: var(--gold);
 letter-spacing: 0.06em;
}
.soa-history__text {
 font-size: 15px;
 color: var(--ink);
 line-height: 1.95;
 margin: 0;
}

/* =============================================================
 * 32. Contact page – channels / form / flow
 * =========================================================== */
.soa-contact-channels__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
}
.soa-contact-channel {
 padding: 40px 32px;
 background: #fff;
 border-top: 2px solid var(--gold);
 text-align: center;
 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.soa-contact-channel__label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.3em;
 margin: 0 0 14px;
}
.soa-contact-channel__title {
 font-family: var(--font-mincho);
 font-size: 18px;
 color: var(--ink);
 font-weight: 500;
 margin: 0 0 22px;
}
.soa-contact-channel__big {
 display: block;
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(22px, 3vw, 32px);
 color: var(--ink);
 text-decoration: none;
 letter-spacing: 0.04em;
 margin-bottom: 8px;
 transition: color 0.2s;
}
.soa-contact-channel__big:hover { color: var(--gold); }
.soa-contact-channel__big--email {
 font-size: clamp(16px, 1.8vw, 20px);
 word-break: break-all;
}
.soa-contact-channel__hours {
 font-size: 12px;
 color: var(--gray);
 margin: 0;
}
.soa-contact-channel__desc {
 font-size: 14px;
 color: var(--gray);
 line-height: 1.8;
 margin: 0 0 24px;
}
.soa-contact-channel__cta {
 display: inline-block;
 color: var(--gold);
 text-decoration: none;
 font-size: 14px;
 letter-spacing: 0.06em;
 transition: opacity 0.2s;
}
.soa-contact-channel__cta:hover { opacity: 0.7; }

.soa-contact-form__intro {
 text-align: center;
 font-size: 14px;
 line-height: 1.95;
 color: var(--soft-white);
 margin: 0 0 50px;
}
.soa-contact-form-wrapper {
 background: rgba(255, 255, 255, 0.03);
 padding: 50px;
 border: 1px solid rgba(181, 138, 74, 0.25);
 border-top: 2px solid var(--gold);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.soa-contact-form-placeholder {
 text-align: center;
 padding: 60px 20px;
 color: var(--soft-white);
}
.soa-contact-form-placeholder__notice { font-size: 14px; margin: 0 0 18px; line-height: 1.9; color: var(--soft-white); }
.soa-contact-form-placeholder__example { font-size: 13px; color: rgba(245, 243, 238, 0.75); }
.soa-contact-form-placeholder code {
 background: rgba(181, 138, 74, 0.15);
 padding: 4px 10px;
 font-size: 13px;
 color: var(--gold);
 border-radius: 2px;
}

.soa-contact-flow__note {
 max-width: 720px;
 margin: 50px auto 0;
 padding: 24px 30px;
 background: rgba(181, 138, 74, 0.08);
 border-left: 3px solid var(--gold);
 font-size: 13px;
 color: rgba(245, 243, 238, 0.85);
 line-height: 1.95;
}

/* =============================================================
 * Contact Form 7 — ダーク背景対応
 * ============================================================= */
.wpcf7-form { font-size: 15px; line-height: 1.7; color: var(--soft-white); }
.wpcf7-form p { margin: 0 0 24px; }
.wpcf7-form label {
 display: block;
 font-weight: 500;
 margin-bottom: 10px;
 color: var(--soft-white);
 font-size: 13px;
 letter-spacing: 0.06em;
}
.wpcf7-form .wpcf7-list-item-label {
 color: var(--soft-white);
 display: inline;
 margin: 0;
 font-weight: 400;
 font-size: 14px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
 width: 100%;
 padding: 14px 16px;
 border: 1px solid rgba(181, 138, 74, 0.3);
 background: rgba(6, 17, 28, 0.5);
 font-family: inherit;
 font-size: 14px;
 color: var(--soft-white);
 transition: all 0.3s ease;
 box-sizing: border-box;
 border-radius: 2px;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
 color: rgba(245, 243, 238, 0.4);
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
 outline: none;
 border-color: var(--gold);
 background: rgba(6, 17, 28, 0.7);
 box-shadow: 0 0 0 3px rgba(181, 138, 74, 0.12);
}
.wpcf7-form input:hover,
.wpcf7-form select:hover,
.wpcf7-form textarea:hover {
 border-color: rgba(181, 138, 74, 0.5);
}
.wpcf7-form select {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b58a4a' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 16px center;
 background-size: 12px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 padding-right: 44px;
}
.wpcf7-form select option {
 background: #06111c;
 color: var(--soft-white);
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; line-height: 1.85; }

/* チェックボックス・ラジオ */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
 width: 18px;
 height: 18px;
 margin-right: 8px;
 vertical-align: middle;
 accent-color: var(--gold);
}
.wpcf7-form .wpcf7-list-item {
 margin: 0 16px 8px 0;
 display: inline-block;
}

/* 必須マーク */
.wpcf7-form .wpcf7-not-valid {
 border-color: #e57373 !important;
 background: rgba(229, 115, 115, 0.05) !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
 color: #e57373;
 font-size: 12px;
 margin-top: 6px;
 display: block;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 background: var(--gold);
 color: #06111c;
 padding: 18px 48px;
 border: 1px solid var(--gold);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.15em;
 cursor: pointer;
 font-family: inherit;
 transition: all 0.3s ease;
 width: auto;
 border-radius: 2px;
}
.wpcf7-form input[type="submit"]:hover {
 background: transparent;
 color: var(--gold);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(181, 138, 74, 0.3);
}

/* 送信応答メッセージ */
.wpcf7-response-output {
 margin: 24px 0 0 !important;
 padding: 16px 20px !important;
 border-width: 1px !important;
 border-style: solid !important;
 font-size: 13px;
 line-height: 1.7;
 border-radius: 2px;
}
.wpcf7 form.sent .wpcf7-response-output {
 border-color: var(--gold) !important;
 background: rgba(181, 138, 74, 0.08);
 color: var(--gold-light, #d4b27a);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
 border-color: #e57373 !important;
 background: rgba(229, 115, 115, 0.08);
 color: #e57373;
}
.wpcf7-spinner { background: rgba(181, 138, 74, 0.4); }

/* =============================================================
 * 33. Page-link pages
 * =========================================================== */
.soa-page-links {
 margin-top: 40px;
 padding-top: 20px;
 border-top: 1px solid rgba(27, 27, 27, 0.1);
 display: flex;
 gap: 8px;
 align-items: center;
 font-size: 13px;
 color: var(--gray);
}
.soa-page-links span { padding: 4px 10px; }
.soa-page-links a span {
 border: 1px solid rgba(27, 27, 27, 0.15);
 color: var(--gold);
 transition: all 0.2s;
}
.soa-page-links a:hover span { border-color: var(--gold); }

/* =============================================================
 * 34. Responsive — overrides for templates
 * =========================================================== */
@media (max-width: 1024px) {
 .soa-feature-grid { grid-template-columns: repeat(2, 1fr); }
 .soa-feature-grid--3col { grid-template-columns: repeat(2, 1fr); }
 .soa-flow__steps { grid-template-columns: repeat(3, 1fr); }
 .soa-works-grid--archive { grid-template-columns: repeat(2, 1fr); }
 .soa-vision__grid { grid-template-columns: 1fr; gap: 30px; }
 .soa-about-message__inner { grid-template-columns: 1fr; gap: 30px; }
 .soa-offices { grid-template-columns: 1fr; }
 .soa-contact-channels__grid { grid-template-columns: 1fr; }
 .soa-principles { grid-template-columns: 1fr; }
 .soa-service-row { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
 .soa-feature-grid,
 .soa-feature-grid--3col { grid-template-columns: 1fr; }
 .soa-flow__steps { grid-template-columns: 1fr 1fr; gap: 16px; }
 .soa-works-grid--archive { grid-template-columns: 1fr; }
 .soa-about-culture__values { grid-template-columns: 1fr; }
 .soa-company-table__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
 .soa-history__item { grid-template-columns: 100px 1fr; gap: 16px; }
 .soa-works-single__nav { grid-template-columns: 1fr; gap: 20px; text-align: center; }
 .soa-works-single__nav-prev,
 .soa-works-single__nav-next { text-align: center; }
 .soa-single__nav { grid-template-columns: 1fr; gap: 20px; }
 .soa-single__nav-next { text-align: left; }
 .soa-contact-form-wrapper { padding: 24px; }
 .soa-news-item__link { padding: 22px 30px 22px 0; }
 .soa-works-filter__group { flex-direction: column; gap: 10px; }
 .soa-works-filter__label { padding-top: 0; }
 .soa-works-gallery__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
 .soa-flow__steps { grid-template-columns: 1fr; }
}


/* =============================================================
 * 35. Premium Animation Layer — v2 (robust, mask-based)
 * =========================================================== */

/* ---- Mask reveal wrapper (hero text + others) ----
 *  overflow:hidden(.soa-mask__inner) translateY(110%) 
 * GSAP CSS  */
.soa-mask {
 display: inline-block;
 overflow: hidden;
 vertical-align: top;
 line-height: inherit;
}

/* hero title  block  */
.soa-hero__title .soa-mask {
 display: block;
}

.soa-mask--block {
 display: block;
}

.soa-mask__inner {
 display: inline-block;
 will-change: transform, opacity;
 /* GSAPCSS
  * 
  * GSAPgsap.set()yPercent:110 */
}

.soa-mask--block .soa-mask__inner {
 display: block;
}

/* ---- Global 3D Particle Field (fixed full-viewport WebGL canvas) ---- */
.soa-bg-particles {
 position: fixed;
 inset: 0;
 width: 100vw;
 height: 100vh;
 z-index: 0;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.6s ease;
 display: block;
}

/* z-index102 */
.soa-stats,
.soa-ai,
.soa-partners,
.soa-cta,
.site-footer {
 position: relative;
 z-index: 1;
 isolation: isolate;
}

/* AIz-index */
.soa-ai .soa-ai__inner,
.soa-ai .soa-ai__bg,
.soa-stats .soa-stats__inner,
.soa-partners .soa-partners__inner,
.soa-cta .soa-cta__inner,
.site-footer .site-footer__inner {
 position: relative;
 z-index: 2;
}

/* --- Stats: count-up + suffix --- */
.soa-stats__suffix {
 display: inline-block;
 font-family: var(--font-display);
 color: var(--gold);
}

/* --- Service card 3D tilt base --- */
[data-tilt] {
 transform-style: preserve-3d;
 transition: box-shadow 0.4s ease;
 will-change: transform;
}

[data-tilt]:hover {
 box-shadow: 0 30px 60px rgba(6, 17, 28, 0.15);
}

/* --- Hero parallax preparation --- */
.soa-hero__media,
.soa-hero__content {
 will-change: transform, opacity;
}

/* --- Image clip-path reveal preparation --- */
.soa-service-card__image,
.soa-works-card__image {
 will-change: clip-path;
}

/* --- Lenis smooth-scroll classes --- */
html.lenis,
html.lenis body {
 height: auto;
}
.lenis.lenis-smooth {
 scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
 overscroll-behavior: contain;
}

/* --- Reduced-motion: kill all animations safely --- */
@media (prefers-reduced-motion: reduce) {
 .soa-bg-particles,
 .soa-particles-canvas {
  display: none !important;
 }
 .soa-mask__inner {
  transform: none !important;
  opacity: 1 !important;
 }
 [data-tilt] {
  transform: none !important;
 }
 .soa-service-card__image,
 .soa-works-card__image {
  clip-path: none !important;
 }
}

/* =============================================================
 * 36. Stacking Fix v1.5.1
 * - Dark sections become transparent so canvas shows through
 * - Light sections keep opaque white (covers canvas)
 * - Body navy = base color when canvas opacity is low
 * =========================================================== */

/* Canvas positioned ABOVE body bg, BELOW section content */
/* v1.5.3:  */
.soa-bg-particles {
 position: fixed;
 inset: 0;
 width: 100vw;
 height: 100vh;
 z-index: 1;
 pointer-events: none;
 opacity: 0.95;
 transition: opacity 0.6s ease;
 display: block;
}

/* Dark sections: transparent BG so canvas shows through */
.soa-stats,
.soa-ai,
.soa-partners,
.soa-cta,
.site-footer {
 background: transparent !important;
 position: relative;
 z-index: 2;
 isolation: isolate;
}

/* CTA overlay canvasOK */
.soa-cta::before {
 background: rgba(6, 17, 28, 0.65) !important;
}

/* Light sections (services/works) keep opaque bg to cover canvas */
.soa-services {
 background: #F4F2EC;
 position: relative;
 z-index: 2;
 isolation: isolate;
}

.soa-works {
 background: var(--white-pure);
 position: relative;
 z-index: 2;
 isolation: isolate;
}

/* Hero is light bg — canvas should not be visible behind hero */
.soa-hero {
 position: relative;
 z-index: 2;
 isolation: isolate;
}

/* Force section content above canvas */
.soa-stats__inner,
.soa-ai__inner,
.soa-ai__bg,
.soa-partners__inner,
.soa-cta__inner,
.soa-cta__bg,
.site-footer__inner {
 position: relative;
 z-index: 3;
}

/* =============================================================
 * 37. Diagnostic Banner (v1.5.1)
 * 10
 * 
 * =========================================================== */
.soa-diag {
 position: fixed;
 top: 80px;
 right: 16px;
 z-index: 99999;
 background: rgba(6, 17, 28, 0.92);
 color: #f5f3ee;
 font-family: ui-monospace, "SF Mono", Menlo, monospace;
 font-size: 11px;
 line-height: 1.6;
 padding: 12px 14px;
 border: 1px solid rgba(212, 178, 122, 0.4);
 border-radius: 6px;
 min-width: 220px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
.soa-diag__title {
 color: #d4b27a;
 font-weight: 600;
 margin-bottom: 6px;
 letter-spacing: 0.05em;
}
.soa-diag__row {
 display: flex;
 justify-content: space-between;
 gap: 16px;
}
.soa-diag__ok { color: #6fcf97; }
.soa-diag__fail { color: #ff7878; }
.soa-diag__close {
 float: right;
 cursor: pointer;
 color: rgba(245, 243, 238, 0.5);
 font-size: 14px;
 margin-left: 8px;
}
.soa-diag.is-fading {
 opacity: 0;
 transform: translateX(20px);
 pointer-events: none;
}

@media (max-width: 600px) {
 .soa-diag {
  top: 70px;
  right: 8px;
  font-size: 10px;
  min-width: 180px;
  padding: 10px 12px;
 }
}

/* =============================================================
 * 38. Creative Workflow Showreel v3.0 (Cinematic + 3D)
 * =========================================================== */
.soa-edit-process {
 position: relative;
 background: #06111c;
 color: var(--white);
 z-index: 2;
 isolation: isolate;
 overflow: hidden;
}

.soa-edit-process__pinwrap {
 position: relative;
 min-height: 100vh;
 min-height: 100svh;
 display: grid;
 grid-template-rows: auto 1fr auto;
 overflow: hidden;
 padding: 60px 0 40px;
 perspective: 1800px;
 perspective-origin: 50% 60%;
}

/* === BACKGROUND === */
.ep-bg {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 0;
}

.ep-bg__grid {
 position: absolute;
 inset: -50%;
 background-image:
  linear-gradient(to right, rgba(212, 178, 122, 0.06) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(212, 178, 122, 0.06) 1px, transparent 1px);
 background-size: 60px 60px;
 transform: perspective(800px) rotateX(60deg) translateY(-15%);
 transform-origin: center 80%;
 animation: ep-grid-drift 30s linear infinite;
 mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black, transparent 90%);
 -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black, transparent 90%);
}
@keyframes ep-grid-drift {
 0% { background-position: 0 0; }
 100% { background-position: 60px 60px; }
}

.ep-bg__accent {
 position: absolute;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(212, 178, 122, 0.5), transparent);
 box-shadow: 0 0 14px rgba(212, 178, 122, 0.4);
}
.ep-bg__accent--top { top: 18%; animation: ep-accent-pulse 6s ease-in-out infinite; }
.ep-bg__accent--bottom { bottom: 22%; animation: ep-accent-pulse 6s ease-in-out 3s infinite; }
@keyframes ep-accent-pulse {
 0%, 100% { opacity: 0.3; transform: scaleX(0.6); }
 50% { opacity: 1; transform: scaleX(1); }
}

.ep-bg__corners {
 position: absolute;
 inset: 32px;
 pointer-events: none;
}
.ep-corner {
 position: absolute;
 width: 32px;
 height: 32px;
 border-color: rgba(212, 178, 122, 0.4);
 border-style: solid;
}
.ep-corner--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.ep-corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.ep-corner--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.ep-corner--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* === TAGLINE === */
.ep-tagline {
 position: relative;
 z-index: 3;
 text-align: center;
 padding: 0 24px 30px;
}

.ep-tagline__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 11px;
 letter-spacing: 0.5em;
 color: var(--gold);
 margin-bottom: 18px;
 text-transform: uppercase;
}
.ep-tagline__line {
 display: inline-block;
 width: 36px;
 height: 1px;
 background: var(--gold);
}

.ep-tagline__heading {
 font-family: var(--font-serif);
 font-weight: 500;
 font-size: clamp(34px, 4.4vw, 60px);
 line-height: 1.2;
 letter-spacing: 0.05em;
 color: var(--white);
}

.ep-mask {
 display: block;
 overflow: hidden;
}
.ep-mask > span {
 display: inline-block;
 transform: translateY(110%);
 animation: ep-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes ep-rise {
 to { transform: translateY(0); }
}

/* === STAGE === */
.ep-stage {
 position: relative;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px clamp(20px, 4vw, 60px);
 transform-style: preserve-3d;
}

/* === STATE LABEL (floating, big) === */
.ep-state-label {
 position: absolute;
 left: clamp(20px, 4vw, 60px);
 bottom: 8%;
 z-index: 4;
 display: flex;
 flex-direction: column;
 gap: 4px;
 pointer-events: none;
}

.ep-state-label__num,
.ep-state-label__sep,
.ep-state-label__total {
 display: inline-block;
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 13px;
 color: rgba(212, 178, 122, 0.7);
 letter-spacing: 0.2em;
}
.ep-state-label__num { color: var(--gold); }
.ep-state-label__sep { margin: 0 4px; color: rgba(245, 243, 238, 0.3); }
.ep-state-label__total { color: rgba(245, 243, 238, 0.4); }

.ep-state-label__name-wrap {
 position: relative;
 height: clamp(48px, 6vw, 88px);
 width: clamp(180px, 26vw, 380px);
 overflow: hidden;
 margin-top: 6px;
}

.ep-state-label__name {
 position: absolute;
 top: 0;
 left: 0;
 font-family: var(--font-display, Georgia, serif);
 font-weight: 900;
 font-size: clamp(40px, 5.5vw, 80px);
 line-height: 1;
 letter-spacing: 0.04em;
 color: var(--white);
 opacity: 0;
 transform: translateX(-30%);
 transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ep-state-label__name.is-active {
 opacity: 1;
 transform: translateX(0);
}

/* === LAPTOP (the star) === */
/* v1.9.57: 
 * -  .ep-stage  →  .ep-laptop  height: 100% 
 * - aspect-ratio: 16/10  1.6 
 * - max-width widescreen 
 * - 
 */
.ep-stage {
 height: calc(100vh - 280px);
 height: calc(100svh - 280px);
 max-height: 760px;
 min-height: 420px;
}
.ep-laptop {
 position: relative;
 height: 100%;
 width: auto;
 aspect-ratio: 16 / 10;
 max-width: min(70vw, 1040px);
 margin-inline: auto;
 transform: rotateX(8deg) rotateY(-4deg);
 transform-style: preserve-3d;
 transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
 will-change: transform;
}
/*  aspect-ratio  max-width  */
@supports (aspect-ratio: 16/10) {
 .ep-laptop {
  max-width: min(70vw, 1040px);
 }
}
/* aspect-ratio  max-height bezel  inset 0  */
.ep-laptop__bezel {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(180deg, #1a1a1c 0%, #2c2c2e 100%);
 border-radius: 18px 18px 6px 6px;
 padding: 28px 22px 22px;
 box-shadow:
  0 60px 140px rgba(0, 0, 0, 0.7),
  0 30px 60px rgba(212, 178, 122, 0.05),
  inset 0 0 0 1px rgba(255, 255, 255, 0.06),
  inset 0 -2px 4px rgba(0, 0, 0, 0.5);
 box-sizing: border-box;
}
.ep-laptop.is-tilt-1 { transform: rotateX(6deg) rotateY(-2deg); }
.ep-laptop.is-tilt-2 { transform: rotateX(10deg) rotateY(-6deg); }
.ep-laptop.is-tilt-3 { transform: rotateX(7deg) rotateY(2deg); }

/*  PC ≤900px  */
@media (max-height: 900px) {
 .ep-stage {
  height: calc(100vh - 220px);
  height: calc(100svh - 220px);
 }
 .ep-laptop {
  max-width: min(66vw, 940px);
 }
 .ep-tagline {
  padding: 0 24px 14px;
 }
 .ep-tagline__heading {
  font-size: clamp(26px, 3vw, 38px);
 }
 .ep-tagline__eyebrow {
  margin-bottom: 8px;
  font-size: 10px;
 }
 .soa-edit-process__pinwrap {
  padding: 28px 0 20px;
 }
}

/* ≤780px */
@media (max-height: 780px) {
 .ep-stage {
  height: calc(100vh - 190px);
  height: calc(100svh - 190px);
 }
 .ep-laptop {
  max-width: min(62vw, 860px);
 }
 .ep-tagline__heading {
  font-size: clamp(22px, 2.6vw, 32px);
 }
}

/*  PC ≥1000px  */
@media (min-height: 1000px) {
 .ep-stage {
  height: calc(100vh - 320px);
 }
 .ep-laptop {
  max-width: min(72vw, 1100px);
 }
}

/* ===  v1.9.57 === */

/*  */
.soa-edit-process__pinwrap {
 background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(6, 17, 28, 0.4) 100%);
}

/* PC  */
.ep-laptop__screen::before {
 content: "";
 position: absolute;
 top: 18%;
 left: 14%;
 width: 22%;
 height: 18%;
 background: radial-gradient(ellipse, rgba(212, 178, 122, 0.18) 0%, rgba(212, 178, 122, 0.08) 30%, transparent 65%);
 mix-blend-mode: screen;
 pointer-events: none;
 z-index: 2;
 animation: ep-lens-drift 18s ease-in-out infinite alternate;
 filter: blur(8px);
}
.ep-laptop__screen::after {
 content: "";
 position: absolute;
 bottom: 12%;
 right: 10%;
 width: 14%;
 height: 12%;
 background: radial-gradient(circle, rgba(255, 235, 200, 0.25) 0%, rgba(255, 235, 200, 0.1) 40%, transparent 70%);
 mix-blend-mode: screen;
 pointer-events: none;
 z-index: 2;
 animation: ep-lens-drift 22s ease-in-out infinite alternate-reverse;
 filter: blur(6px);
}
@keyframes ep-lens-drift {
 0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
 50% { transform: translate(20px, -10px) scale(1.1); opacity: 0.9; }
 100% { transform: translate(-15px, 15px) scale(0.9); opacity: 0.7; }
}

/* PC */
.ep-laptop__screen .ep-state::before {
 content: "";
 position: absolute;
 inset: 0;
 background: repeating-linear-gradient(
  to bottom,
  transparent 0,
  transparent 3px,
  rgba(255, 255, 255, 0.012) 3px,
  rgba(255, 255, 255, 0.012) 4px
 );
 pointer-events: none;
 z-index: 9;
 animation: ep-scanline-flicker 4s steps(40) infinite;
}
@keyframes ep-scanline-flicker {
 0%, 100% { opacity: 0.7; }
 50% { opacity: 1; }
}

/*  */
.ep-laptop__screen::before,
.ep-laptop__screen::after {
 will-change: transform, opacity;
}

/* PC */
.soa-edit-process__pinwrap::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 45%;
 width: 70vw;
 max-width: 1200px;
 height: 70vh;
 max-height: 900px;
 transform: translate(-50%, -50%);
 background:
  radial-gradient(ellipse 50% 40% at 20% 30%, rgba(212, 178, 122, 0.12), transparent 70%),
  radial-gradient(ellipse 40% 50% at 80% 70%, rgba(70, 100, 140, 0.08), transparent 70%);
 pointer-events: none;
 z-index: 1;
 animation: ep-ambient-shift 16s ease-in-out infinite alternate;
}
@keyframes ep-ambient-shift {
 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.6; }
 100% { transform: translate(-50%, -50%) rotate(15deg) scale(1.15); opacity: 0.9; }
}

/* REC  */
.ep-laptop__rec-badge {
 animation: ep-rec-pulse 1.2s ease-in-out infinite !important;
}
@keyframes ep-rec-pulse {
 0%, 100% {
  box-shadow: 0 0 0 0 rgba(217, 47, 47, 0.7), 0 0 12px rgba(217, 47, 47, 0.4);
  transform: scale(1);
 }
 50% {
  box-shadow: 0 0 0 8px rgba(217, 47, 47, 0), 0 0 20px rgba(217, 47, 47, 0.7);
  transform: scale(1.03);
 }
}

/* PC */
.ep-laptop {
 animation: ep-camera-float 8s ease-in-out infinite alternate;
}
@keyframes ep-camera-float {
 0% { transform: rotateX(8deg) rotateY(-4deg) translateY(0) translateZ(0); }
 100% { transform: rotateX(7deg) rotateY(-3deg) translateY(-8px) translateZ(20px); }
}
.ep-laptop.is-tilt-1 { animation: ep-camera-float-1 8s ease-in-out infinite alternate; }
.ep-laptop.is-tilt-2 { animation: ep-camera-float-2 8s ease-in-out infinite alternate; }
.ep-laptop.is-tilt-3 { animation: ep-camera-float-3 8s ease-in-out infinite alternate; }
@keyframes ep-camera-float-1 {
 0% { transform: rotateX(6deg) rotateY(-2deg) translateY(0); }
 100% { transform: rotateX(5deg) rotateY(-1deg) translateY(-10px); }
}
@keyframes ep-camera-float-2 {
 0% { transform: rotateX(10deg) rotateY(-6deg) translateY(0); }
 100% { transform: rotateX(9deg) rotateY(-7deg) translateY(-6px); }
}
@keyframes ep-camera-float-3 {
 0% { transform: rotateX(7deg) rotateY(2deg) translateY(0); }
 100% { transform: rotateX(6deg) rotateY(3deg) translateY(-12px); }
}

/* PC "" 4  */
.ep-laptop__crop-marker {
 box-shadow: 0 0 4px rgba(212, 178, 122, 0.3) !important;
}

.ep-laptop__camera {
 position: absolute;
 top: 11px;
 left: 50%;
 transform: translateX(-50%);
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: #1a1a1c;
 box-shadow: inset 0 0 0 1px rgba(212, 178, 122, 0.18);
}

.ep-laptop__screen {
 position: relative;
 width: 100%;
 height: 100%;
 background: #06080c;
 border-radius: 4px;
 overflow: hidden;
 box-shadow: inset 0 0 0 1px rgba(212, 178, 122, 0.05);
}

.ep-laptop__base {
 position: absolute;
 bottom: -14px;
 left: -2.5%;
 width: 105%;
 height: 16px;
 background: linear-gradient(180deg, #1a1a1c 0%, #050505 100%);
 border-radius: 0 0 16px 16px;
 box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
 transform: translateZ(-2px);
}
.ep-laptop__base::after {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 16%;
 height: 5px;
 background: #050505;
 border-radius: 0 0 6px 6px;
}

/* Scanlines overlay */
.ep-scanlines {
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(
  0deg,
  transparent 0,
  transparent 2px,
  rgba(255, 255, 255, 0.012) 2px,
  rgba(255, 255, 255, 0.012) 3px
 );
 pointer-events: none;
 z-index: 10;
}

/* === STATES === */
.ep-state {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 opacity: 0;
 transform: scale(1.06);
 filter: blur(2px);
 transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
 pointer-events: none;
}
.ep-state.is-active {
 opacity: 1;
 transform: scale(1);
 filter: blur(0);
}

.ep-state__topbar {
 height: 26px;
 background: rgba(15, 18, 24, 0.96);
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 0 14px;
 font-size: 10px;
 color: rgba(245, 243, 238, 0.55);
 letter-spacing: 0.12em;
 font-family: ui-monospace, "SF Mono", monospace;
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 flex-shrink: 0;
}

.ep-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 display: inline-block;
 flex-shrink: 0;
}
.ep-dot--r { background: #ff5f57; }
.ep-dot--y { background: #ffbd2e; }
.ep-dot--g { background: #28c840; }
.ep-dot--rec { background: #ff3030; animation: ep-blink 1.0s infinite; }
@keyframes ep-blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.25; }
}

.ep-state__code {
 margin-left: 8px;
 flex: 1;
 text-align: center;
}

.ep-state__rec {
 font-weight: 700;
 font-size: 10px;
 letter-spacing: 0.3em;
 padding: 2px 7px;
 border-radius: 2px;
 color: #ff3030;
 border: 1px solid rgba(255, 48, 48, 0.4);
}
.ep-state__rec--idle { color: var(--gold); border-color: rgba(212, 178, 122, 0.4); }
.ep-state__rec--gold { color: var(--gold); border-color: rgba(212, 178, 122, 0.4); }
.ep-state__rec--done { color: #4be486; border-color: rgba(75, 228, 134, 0.4); }

.ep-state__body {
 flex: 1;
 position: relative;
 overflow: hidden;
}

/* === STATE 0: SHOOT === */
.ep-shoot {
 display: flex;
 flex-direction: column;
 padding: 14px 18px;
 gap: 10px;
}
.ep-shoot__viewfinder {
 flex: 1;
 position: relative;
 background:
  radial-gradient(ellipse at 50% 60%, rgba(180, 160, 130, 0.22) 0%, transparent 65%),
  linear-gradient(135deg, #2a2418 0%, #181410 100%);
 border-radius: 3px;
 overflow: hidden;
 animation: ep-camera-shake 4s ease-in-out infinite;
}
@keyframes ep-camera-shake {
 0%, 100% { transform: translate(0, 0); }
 25% { transform: translate(-1.5px, 1px); }
 50% { transform: translate(2px, -1px); }
 75% { transform: translate(-1px, -2px); }
}

.ep-shoot__corner {
 position: absolute;
 width: 26px; height: 26px;
 border-color: rgba(245, 243, 238, 0.5);
 border-style: solid;
}
.ep-shoot__corner--tl { top: 22px; left: 22px; border-width: 1.5px 0 0 1.5px; }
.ep-shoot__corner--tr { top: 22px; right: 22px; border-width: 1.5px 1.5px 0 0; }
.ep-shoot__corner--bl { bottom: 22px; left: 22px; border-width: 0 0 1.5px 1.5px; }
.ep-shoot__corner--br { bottom: 22px; right: 22px; border-width: 0 1.5px 1.5px 0; }

.ep-shoot__cross {
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 36px; height: 36px;
}
.ep-shoot__cross::before,
.ep-shoot__cross::after {
 content: '';
 position: absolute;
 background: rgba(245, 243, 238, 0.55);
}
.ep-shoot__cross::before { top: 50%; left: 0; width: 100%; height: 1px; }
.ep-shoot__cross::after { top: 0; left: 50%; width: 1px; height: 100%; }

.ep-shoot__flare {
 position: absolute;
 top: 25%; right: 20%;
 width: 56px; height: 56px;
 background: radial-gradient(circle, rgba(255, 230, 180, 0.55), transparent 70%);
 border-radius: 50%;
 animation: ep-flare 4s ease-in-out infinite;
}
@keyframes ep-flare {
 0%, 100% { opacity: 0.4; transform: scale(0.85); }
 50% { opacity: 1; transform: scale(1.35); }
}

.ep-shoot__subject {
 position: absolute;
 bottom: 30%;
 left: 30%;
 width: 40%;
 height: 30%;
 background: radial-gradient(ellipse, rgba(212, 178, 122, 0.35), transparent 70%);
 border-radius: 50%;
 animation: ep-subject-breathe 3s ease-in-out infinite;
}
@keyframes ep-subject-breathe {
 0%, 100% { transform: scale(1); opacity: 0.7; }
 50% { transform: scale(1.08); opacity: 0.9; }
}

.ep-shoot__hud {
 flex-shrink: 0;
 display: flex;
 justify-content: space-between;
 gap: 12px;
}
.ep-hud-item {
 font-family: ui-monospace, monospace;
 font-size: 11px;
 color: var(--gold);
 letter-spacing: 0.18em;
}
.ep-hud-item--tc { color: #ff5f57; font-weight: 600; }

/* === STATE 1: CUT === */
.ep-cut {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 12px 14px 14px;
}
.ep-cut__preview {
 position: relative;
 flex: 1;
 background:
  linear-gradient(135deg, rgba(212, 178, 122, 0.22) 0%, rgba(20, 14, 10, 0.85) 100%),
  repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(212, 178, 122, 0.04) 10px, rgba(212, 178, 122, 0.04) 11px);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 3px;
 overflow: hidden;
}
.ep-cut__viewport {
 position: absolute;
 inset: 12%;
 background: radial-gradient(ellipse, rgba(212, 178, 122, 0.25) 0%, transparent 70%);
 animation: ep-cut-vp 5s ease-in-out infinite;
}
@keyframes ep-cut-vp {
 0%, 100% { transform: translateX(-10%) scale(0.95); opacity: 0.6; }
 50% { transform: translateX(10%) scale(1.05); opacity: 1; }
}
.ep-cut__playline {
 position: absolute;
 top: 0; bottom: 0;
 width: 1.5px;
 background: rgba(255, 255, 255, 0.6);
 box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
 left: 30%;
 animation: ep-cut-scrub 4s linear infinite;
}
@keyframes ep-cut-scrub {
 0% { left: 8%; }
 100% { left: 92%; }
}

.ep-cut__timeline {
 position: relative;
 background: rgba(20, 24, 30, 0.85);
 border-radius: 3px;
 padding: 5px;
 display: flex;
 flex-direction: column;
 gap: 2px;
 flex-shrink: 0;
}
.ep-cut__ruler {
 height: 9px;
 background: repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(245, 243, 238, 0.14) 10px, rgba(245, 243, 238, 0.14) 11px);
 border-radius: 1px;
 margin-bottom: 2px;
}

.ep-cut__track {
 position: relative;
 background: rgba(255, 255, 255, 0.03);
 border-radius: 1px;
 overflow: hidden;
}
.ep-cut__track--v { height: 18px; }
.ep-cut__track--ov { height: 13px; }
.ep-cut__track--a { height: 13px; }
.ep-cut__track--m { height: 13px; }

.ep-cut__clip {
 position: absolute;
 top: 1px;
 bottom: 1px;
 left: calc(var(--l) * 1%);
 width: calc(var(--w) * 1%);
 background: linear-gradient(180deg, rgba(212, 178, 122, 0.7) 0%, rgba(212, 178, 122, 0.45) 100%);
 border-left: 2px solid rgba(255, 220, 170, 0.95);
 border-radius: 1px;
 display: flex;
 align-items: center;
 padding: 0 5px;
 font-family: ui-monospace, monospace;
 font-size: 9px;
 color: rgba(0, 0, 0, 0.7);
 letter-spacing: 0.05em;
 overflow: hidden;
 transform: translateX(-200%);
}
.ep-state.is-active .ep-cut__clip {
 animation: ep-clip-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--d) * 0.08s) forwards;
}
@keyframes ep-clip-slide {
 to { transform: translateX(0); }
}
.ep-cut__clip--ov {
 background: linear-gradient(180deg, rgba(180, 130, 220, 0.6) 0%, rgba(140, 90, 200, 0.4) 100%);
 border-left-color: rgba(220, 180, 250, 0.95);
 color: rgba(255, 255, 255, 0.9);
}
.ep-cut__clip--audio {
 background: linear-gradient(180deg, rgba(100, 180, 220, 0.55) 0%, rgba(60, 140, 200, 0.35) 100%);
 border-left-color: rgba(140, 200, 240, 0.95);
 color: rgba(255, 255, 255, 0.9);
}
.ep-cut__clip--music {
 background: linear-gradient(180deg, rgba(220, 130, 180, 0.55) 0%, rgba(180, 90, 140, 0.35) 100%);
 border-left-color: rgba(240, 170, 210, 0.95);
 color: rgba(255, 255, 255, 0.9);
}
.ep-cut__playhead {
 position: absolute;
 top: 0;
 bottom: 0;
 width: 1.5px;
 background: #ff5f57;
 box-shadow: 0 0 8px rgba(255, 95, 87, 0.7);
 left: 5%;
 z-index: 5;
 animation: ep-playhead-run 6s linear infinite;
}
.ep-cut__playhead::before {
 content: '';
 position: absolute;
 top: -4px;
 left: -5px;
 width: 11px;
 height: 7px;
 background: #ff5f57;
 clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@keyframes ep-playhead-run {
 0% { left: 4%; }
 100% { left: 96%; }
}

/* === STATE 2: COLOR === */
.ep-color {
 display: flex;
 flex-direction: column;
 padding: 14px 16px 16px;
 gap: 14px;
}
.ep-color__big-preview {
 position: relative;
 flex: 1;
 border-radius: 3px;
 overflow: hidden;
 box-shadow: inset 0 0 0 1px rgba(212, 178, 122, 0.12);
}
.ep-color__shift {
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, #f4d8a8 0%, #b58a4a 40%, #4a2f18 100%);
 animation: ep-color-cycle 8s ease-in-out infinite;
}
@keyframes ep-color-cycle {
 0% { background: linear-gradient(135deg, #f4d8a8 0%, #b58a4a 40%, #4a2f18 100%); filter: hue-rotate(0deg) saturate(1); }
 25% { background: linear-gradient(135deg, #e8e0c8 0%, #b09872 40%, #4c3a26 100%); filter: hue-rotate(-15deg) saturate(0.85); }
 50% { background: linear-gradient(135deg, #d8e4ec 0%, #6080a0 40%, #1a2c44 100%); filter: hue-rotate(180deg) saturate(0.95); }
 75% { background: linear-gradient(135deg, #f8e8d0 0%, #d4a060 40%, #6a3020 100%); filter: hue-rotate(15deg) saturate(1.2); }
 100% { background: linear-gradient(135deg, #f4d8a8 0%, #b58a4a 40%, #4a2f18 100%); filter: hue-rotate(0deg) saturate(1); }
}
.ep-color__lut {
 position: absolute;
 bottom: 10px;
 left: 12px;
 font-family: ui-monospace, monospace;
 font-size: 11px;
 color: rgba(255, 255, 255, 0.92);
 letter-spacing: 0.18em;
 background: rgba(0, 0, 0, 0.65);
 padding: 4px 10px;
 border-radius: 1px;
 border-left: 2px solid var(--gold);
}

.ep-color__wheels {
 flex-shrink: 0;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 padding: 0 8px 12px;
 justify-items: center;
}

.ep-wheel {
 position: relative;
 aspect-ratio: 1;
 max-width: 84px;
 width: 100%;
 border-radius: 50%;
}
.ep-wheel__ring {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: conic-gradient(from 0deg, #ff5050, #ffaa00, #ffee00, #88ff00, #00ffaa, #00aaff, #5050ff, #aa00ff, #ff0088, #ff5050);
 box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4);
 animation: ep-wheel-spin 8s linear infinite;
}
.ep-wheel:nth-child(2) .ep-wheel__ring { animation-duration: 10s; animation-direction: reverse; }
.ep-wheel:nth-child(3) .ep-wheel__ring { animation-duration: 12s; }
@keyframes ep-wheel-spin {
 from { transform: rotate(0); }
 to { transform: rotate(360deg); }
}
.ep-wheel::before {
 content: '';
 position: absolute;
 inset: 18%;
 background: rgba(20, 24, 30, 0.94);
 border-radius: 50%;
 z-index: 1;
}
.ep-wheel__dot {
 position: absolute;
 width: 9px;
 height: 9px;
 background: var(--gold);
 border-radius: 50%;
 top: 38%;
 left: 55%;
 box-shadow: 0 0 10px rgba(212, 178, 122, 0.95);
 z-index: 3;
 animation: ep-dot-drift 4s ease-in-out infinite;
}
.ep-wheel__dot--off2 { top: 50%; left: 42%; animation-delay: 1s; }
.ep-wheel__dot--off3 { top: 60%; left: 58%; animation-delay: 2s; }
@keyframes ep-dot-drift {
 0%, 100% { transform: translate(0, 0); }
 50% { transform: translate(5px, -3px); }
}
.ep-wheel__label {
 position: absolute;
 bottom: -22px;
 left: 50%;
 transform: translateX(-50%);
 font-family: ui-monospace, monospace;
 font-size: 10px;
 color: rgba(245, 243, 238, 0.7);
 letter-spacing: 0.25em;
 z-index: 4;
 white-space: nowrap;
}

/* === STATE 3: MASTER === */
.ep-master {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
}
.ep-master__output {
 width: 100%;
 max-width: 70%;
 background: radial-gradient(circle at 50% 50%, rgba(212, 178, 122, 0.22) 0%, rgba(6, 17, 28, 0.95) 75%);
 border: 1px solid rgba(212, 178, 122, 0.18);
 border-radius: 4px;
 padding: 40px 30px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 14px;
}
.ep-master__brand {
 font-family: var(--font-logo);
 font-weight: 900;
 font-size: clamp(48px, 6vw, 96px);
 color: var(--gold);
 letter-spacing: 0.12em;
 text-shadow: 0 0 28px rgba(212, 178, 122, 0.5);
 animation: ep-final-glow 3s ease-in-out infinite;
}
@keyframes ep-final-glow {
 0%, 100% { text-shadow: 0 0 28px rgba(212, 178, 122, 0.5); }
 50% { text-shadow: 0 0 50px rgba(212, 178, 122, 0.95); }
}
.ep-master__sub {
 font-family: ui-monospace, monospace;
 font-size: 11px;
 letter-spacing: 0.45em;
 color: rgba(212, 178, 122, 0.7);
}
.ep-master__progress {
 width: 80%;
 height: 1px;
 background: rgba(212, 178, 122, 0.2);
 margin-top: 10px;
 position: relative;
}
.ep-master__progress-fill {
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 background: var(--gold);
 width: 100%;
 box-shadow: 0 0 6px rgba(212, 178, 122, 0.7);
}
.ep-master__pct {
 font-family: ui-monospace, monospace;
 font-size: 10px;
 color: var(--gold);
 letter-spacing: 0.3em;
}

/* === META (timecode / frame counter at bottom) === */
.ep-meta {
 position: relative;
 z-index: 3;
 display: flex;
 justify-content: space-between;
 padding: 0 clamp(20px, 4vw, 60px);
 font-family: ui-monospace, "SF Mono", monospace;
}
.ep-meta__tc, .ep-meta__frame {
 display: flex;
 gap: 10px;
 align-items: baseline;
}
.ep-meta__lbl {
 font-size: 10px;
 color: rgba(245, 243, 238, 0.4);
 letter-spacing: 0.3em;
}
.ep-meta__val {
 font-size: 13px;
 color: var(--gold);
 letter-spacing: 0.15em;
}

/* === Responsive === */
@media (max-width: 900px) {
 .soa-edit-process__pinwrap {
  perspective: 1200px;
 }
 .ep-laptop {
  transform: rotateX(4deg) rotateY(-2deg);
 }
 .ep-state-label {
  bottom: 12%;
 }
 .ep-state-label__name-wrap {
  height: 48px;
 }
 .ep-state-label__name {
  font-size: 38px;
 }
}
@media (max-width: 600px) {
 .soa-edit-process__pinwrap {
  min-height: auto;
  padding: 40px 0 24px;
  perspective: none;
 }
 .ep-laptop {
  transform: none;
  max-width: 100%;
 }
 .ep-state-label {
  position: static;
  margin: 16px auto 0;
  text-align: center;
  align-items: center;
 }
 .ep-state-label__name-wrap {
  width: 100%;
  text-align: center;
 }
 .ep-meta {
  display: none;
 }
}

/* === Pin Progress Indicator (v1.6.3) === */
.ep-pin-progress {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 32px;
 z-index: 10;
 display: flex;
 align-items: flex-start;
 pointer-events: none;
}

.ep-pin-progress__bar {
 display: block;
 height: 2px;
 width: 100%;
 background: var(--gold);
 transform: scaleX(0);
 transform-origin: left;
 box-shadow: 0 0 12px rgba(212, 178, 122, 0.6);
}

.ep-pin-progress__label {
 position: absolute;
 top: 14px;
 right: clamp(20px, 4vw, 60px);
 font-family: ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.4em;
 color: rgba(212, 178, 122, 0.7);
}

@media (max-width: 600px) {
 .ep-pin-progress__label {
  font-size: 8px;
  letter-spacing: 0.25em;
 }
}

/* =============================================================
 * 39. v1.8.0 — Engagement Enhancements
 * =========================================================== */

/* Hero eyebrow */
.soa-hero__eyebrow {
 display: inline-block;
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 11px;
 letter-spacing: 0.45em;
 color: var(--gold);
 margin-bottom: 32px;
 padding-left: 28px;
 position: relative;
 font-weight: 500;
}
.soa-hero__eyebrow::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 width: 18px;
 height: 1px;
 background: var(--gold);
}

/* Hero video background — v1.9.28  */
.soa-hero__video {
 position: absolute !important;
 inset: 0 !important;
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 z-index: 0 !important;
 display: block !important;
 background: transparent !important;
 opacity: 1 !important;
 visibility: visible !important;
 pointer-events: none;
}
.soa-hero__media .soa-hero__placeholder { z-index: 0; }
.soa-hero__media video { display: block !important; opacity: 1 !important; }

/* === Custom Cursor === */
@media (hover: hover) and (pointer: fine) {
 .soa-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  mix-blend-mode: normal;
 }
 .soa-cursor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
 }
 .soa-cursor.is-hover {
  width: 60px;
  height: 60px;
  background: rgba(212, 178, 122, 0.08);
  border-color: rgba(212, 178, 122, 0.6);
 }
 .soa-cursor.is-hover::before {
  transform: translate(-50%, -50%) scale(0);
 }
 .soa-cursor.is-cta {
  width: 80px;
  height: 80px;
  background: rgba(212, 178, 122, 0.15);
  border-width: 1.5px;
 }
 body.has-custom-cursor,
 body.has-custom-cursor a,
 body.has-custom-cursor button {
  cursor: none;
 }
}
@media (hover: none) {
 .soa-cursor { display: none; }
}

/* === Scroll Progress Navigator === */
.soa-progress-nav {
 position: fixed;
 right: 32px;
 top: 50%;
 transform: translateY(-50%);
 z-index: 50;
 display: flex;
 flex-direction: column;
 gap: 14px;
 pointer-events: none;
}
.soa-progress-nav__item {
 display: flex;
 align-items: center;
 gap: 12px;
 pointer-events: auto;
 cursor: pointer;
 color: rgba(245, 243, 238, 0.5);
 font-family: ui-monospace, monospace;
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 transition: color 0.4s ease;
 background: none;
 border: none;
 padding: 0;
}
.soa-progress-nav__dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 border: 1px solid rgba(245, 243, 238, 0.4);
 background: transparent;
 transition: all 0.4s ease;
 flex-shrink: 0;
}
.soa-progress-nav__label {
 opacity: 0;
 transform: translateX(8px);
 transition: opacity 0.3s ease, transform 0.3s ease;
}
.soa-progress-nav__item:hover .soa-progress-nav__label,
.soa-progress-nav__item.is-active .soa-progress-nav__label {
 opacity: 1;
 transform: translateX(0);
}
.soa-progress-nav__item.is-active {
 color: var(--gold);
}
.soa-progress-nav__item.is-active .soa-progress-nav__dot {
 background: var(--gold);
 border-color: var(--gold);
 box-shadow: 0 0 10px rgba(212, 178, 122, 0.6);
}
@media (max-width: 768px) {
 .soa-progress-nav { display: none; }
}

/* === Stats Count-up Enhancement === */
.soa-stats__item {
 position: relative;
}
.soa-stats__item::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: -12px;
 width: 0;
 height: 1px;
 background: var(--gold);
 box-shadow: 0 0 8px rgba(212, 178, 122, 0.5);
 transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-stats__item.is-counted::after {
 width: 60px;
}
.soa-stats__item .soa-stats__value {
 transition: text-shadow 0.6s ease;
}
.soa-stats__item.is-glowing .soa-stats__value {
 text-shadow: 0 0 24px rgba(212, 178, 122, 0.6);
}

/* === WORKS card 3D + film strip === */
.soa-works-card {
 position: relative;
 transform-style: preserve-3d;
 transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-works-card__image {
 position: relative;
 overflow: hidden;
}
.soa-works-card__image::before,
.soa-works-card__image::after {
 content: '';
 position: absolute;
 top: 0;
 bottom: 0;
 width: 18px;
 background-image:
  repeating-linear-gradient(
   0deg,
   rgba(0, 0, 0, 0) 0 8px,
   rgba(245, 243, 238, 0.7) 8px 14px,
   rgba(0, 0, 0, 0) 14px 22px
  );
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.4s ease;
 z-index: 2;
}
.soa-works-card__image::before { left: 0; }
.soa-works-card__image::after { right: 0; }
.soa-works-card:hover .soa-works-card__image::before,
.soa-works-card:hover .soa-works-card__image::after {
 opacity: 0.85;
}
.soa-works-card:hover {
 transform: perspective(1200px) rotateY(-2deg) translateZ(20px) translateY(-6px);
}

/* =============================================================
 * 40. v1.9.4 — News / Blog section
 * =========================================================== */
.soa-news {
 padding: 120px 0;
 background: var(--bg-light, #f8f5ed);
}
.soa-news__inner {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 6vw;
}
.soa-news__header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 60px;
 flex-wrap: wrap;
 gap: 24px;
}
.soa-news__eyebrow {
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold, #b58a4a);
 margin: 0 0 16px;
 text-transform: uppercase;
}
.soa-news__heading {
 font-family: var(--font-display);
 font-size: clamp(28px, 4vw, 48px);
 font-weight: 600;
 line-height: 1.3;
 color: var(--navy, #06111c);
 margin: 0 0 12px;
}
.soa-news__desc {
 font-size: 15px;
 line-height: 1.8;
 color: #555;
 max-width: 600px;
 margin: 0;
}
.soa-news__view-all {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: ui-monospace, monospace;
 font-size: 12px;
 letter-spacing: 0.2em;
 color: var(--navy, #06111c);
 text-decoration: none;
 padding-bottom: 4px;
 border-bottom: 1px solid var(--gold, #b58a4a);
 transition: gap 0.3s ease;
}
.soa-news__view-all:hover { gap: 16px; }
.soa-news__list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 32px;
}
.soa-news-card {
 background: #fff;
 border-radius: 4px;
 overflow: hidden;
 transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.soa-news-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 32px rgba(6, 17, 28, 0.08);
}
.soa-news-card__link {
 display: block;
 text-decoration: none;
 color: inherit;
}
.soa-news-card__image {
 aspect-ratio: 16 / 10;
 overflow: hidden;
 position: relative;
}
.soa-news-card__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.6s ease;
}
.soa-news-card:hover .soa-news-card__image img {
 transform: scale(1.04);
}
.soa-news-card__image--placeholder {
 background: linear-gradient(135deg, var(--navy, #06111c) 0%, #1a2b40 100%);
 display: flex;
 align-items: center;
 justify-content: center;
}
.soa-news-card__image--placeholder span {
 font-family: var(--font-display);
 font-size: 56px;
 font-weight: 600;
 color: var(--gold, #b58a4a);
 letter-spacing: 0.05em;
}
.soa-news-card__body { padding: 24px 24px 28px; }
.soa-news-card__meta {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 12px;
}
.soa-news-card__date {
 font-family: ui-monospace, monospace;
 font-size: 12px;
 letter-spacing: 0.1em;
 color: var(--gold, #b58a4a);
}
.soa-news-card__cat {
 font-size: 11px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: #888;
 border-left: 1px solid #ddd;
 padding-left: 12px;
}
.soa-news-card__title {
 font-family: var(--font-serif);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.55;
 color: var(--navy, #06111c);
 margin: 0 0 12px;
}
.soa-news-card__excerpt {
 font-size: 13px;
 line-height: 1.7;
 color: #666;
 margin: 0;
}
@media (max-width: 768px) {
 .soa-news { padding: 80px 0; }
 .soa-news__header { flex-direction: column; align-items: flex-start; }
 .soa-news__list { gap: 24px; }
}

/* =============================================================
 * 41. v1.9.9 — FAQ section
 * =========================================================== */
.soa-faq {
 padding: 120px 0;
 background: #fff;
}
.soa-faq__inner {
 max-width: 920px;
 margin: 0 auto;
 padding: 0 6vw;
}
.soa-faq__header {
 text-align: center;
 margin-bottom: 56px;
}
.soa-faq__eyebrow {
 font-family: ui-monospace, monospace;
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold, #b58a4a);
 margin: 0 0 14px;
}
.soa-faq__heading {
 font-family: var(--font-display);
 font-size: clamp(28px, 4vw, 44px);
 font-weight: 600;
 color: var(--navy);
 margin: 0 0 16px;
}
.soa-faq__desc {
 font-size: 15px;
 line-height: 1.8;
 color: #555;
}
.soa-faq__list {
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.soa-faq-item {
 border: 1px solid #e0d8c4;
 border-radius: 6px;
 overflow: hidden;
 transition: border-color 0.3s ease;
}
.soa-faq-item:hover { border-color: var(--gold); }
.soa-faq-item__q {
 display: flex;
 align-items: flex-start;
 gap: 16px;
 padding: 22px 24px;
 cursor: pointer;
 background: #fff;
 transition: background 0.3s ease;
}
.soa-faq-item__q:hover { background: #faf8f3; }
.soa-faq-item__q-mark {
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--gold);
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-display);
 font-weight: 600;
}
.soa-faq-item__q-text {
 flex: 1;
 font-size: 15px;
 font-weight: 600;
 line-height: 1.6;
 color: var(--navy);
 padding-top: 5px;
}
.soa-faq-item__q-icon {
 flex-shrink: 0;
 width: 24px;
 height: 24px;
 transition: transform 0.3s ease;
 color: var(--gold);
 margin-top: 5px;
}
.soa-faq-item__q-icon svg { width: 100%; height: 100%; }
.soa-faq-item__q[aria-expanded="true"] .soa-faq-item__q-icon { transform: rotate(180deg); }
.soa-faq-item__a {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows 0.4s ease;
 background: #faf8f3;
}
.soa-faq-item__q[aria-expanded="true"] + .soa-faq-item__a {
 grid-template-rows: 1fr;
}
.soa-faq-item__a > * {
 overflow: hidden;
}
.soa-faq-item__a-mark {
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--navy);
 color: var(--gold);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-display);
 font-weight: 600;
}
.soa-faq-item__a-text {
 font-size: 14px;
 line-height: 1.9;
 color: #555;
 padding: 22px 24px 22px 72px;
 position: relative;
}
.soa-faq-item__a-text::before {
 content: '';
 position: absolute;
 left: 24px;
 top: 22px;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--navy);
 color: var(--gold);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-display);
 font-weight: 600;
}
.soa-faq-item__a-text::before { content: 'A'; font-size: 16px; line-height: 32px; text-align: center; }
.soa-faq-item__a-mark { display: none; } /* a-text  ::before  */

/* =============================================================
 * 42. v1.9.9 — Testimonials
 * =========================================================== */
.soa-testimonials {
 padding: 120px 0;
 background: linear-gradient(180deg, var(--bg-light, #f8f5ed) 0%, #fff 100%);
}
.soa-testimonials__inner {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 6vw;
}
.soa-testimonials__header {
 text-align: center;
 margin-bottom: 64px;
}
.soa-testimonials__eyebrow {
 font-family: ui-monospace, monospace;
 font-size: 12px;
 letter-spacing: 0.4em;
 color: var(--gold);
 margin: 0 0 14px;
}
.soa-testimonials__heading {
 font-family: var(--font-display);
 font-size: clamp(28px, 4vw, 44px);
 font-weight: 600;
 color: var(--navy);
 margin: 0 0 16px;
}
.soa-testimonials__desc {
 font-size: 15px;
 line-height: 1.8;
 color: #555;
 max-width: 640px;
 margin: 0 auto;
}
.soa-testimonials__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 28px;
}
.soa-testimonial-card {
 background: #fff;
 border-radius: 6px;
 padding: 32px 28px;
 box-shadow: 0 4px 16px rgba(6, 17, 28, 0.05);
 transition: transform 0.4s ease, box-shadow 0.4s ease;
 display: flex;
 flex-direction: column;
 margin: 0;
}
.soa-testimonial-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 32px rgba(181, 138, 74, 0.15);
}
.soa-testimonial-card__quote {
 margin: 0 0 24px;
 flex: 1;
 position: relative;
 padding-top: 24px;
}
.soa-testimonial-card__mark {
 position: absolute;
 top: 0;
 left: 0;
 width: 36px;
 height: auto;
 color: var(--gold);
 opacity: 0.5;
}
.soa-testimonial-card__text {
 font-size: 14px;
 line-height: 1.95;
 color: #444;
}
.soa-testimonial-card__cite {
 display: flex;
 gap: 14px;
 align-items: center;
 padding-top: 20px;
 border-top: 1px solid #e0d8c4;
 font-style: normal;
}
.soa-testimonial-card__avatar {
 width: 48px;
 height: 48px;
 flex-shrink: 0;
 border-radius: 50%;
 overflow: hidden;
}
.soa-testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.soa-testimonial-card__meta { flex: 1; }
.soa-testimonial-card__company {
 font-size: 13px;
 font-weight: 600;
 color: var(--navy);
 margin: 0 0 2px;
}
.soa-testimonial-card__person {
 font-size: 12px;
 color: #888;
 margin: 0;
}
.soa-testimonial-card__position { color: #aaa; }

/* =============================================================
 * 43. v1.9.9 — Floating side CTA (PC right edge)
 * =========================================================== */
.soa-side-cta {
 position: fixed;
 right: 24px;
 bottom: 32px;
 z-index: 50;
 display: flex;
 flex-direction: column;
 gap: 10px;
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.4s ease, transform 0.4s ease;
 pointer-events: none;
}
.soa-side-cta.is-visible {
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}
.soa-side-cta__btn {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 14px 22px;
 background: var(--gold);
 color: #fff;
 border-radius: 999px;
 box-shadow: 0 8px 24px rgba(181, 138, 74, 0.3);
 text-decoration: none;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.05em;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.soa-side-cta__btn:hover {
 transform: scale(1.05);
 box-shadow: 0 12px 32px rgba(181, 138, 74, 0.45);
}
.soa-side-cta__btn--phone {
 background: var(--navy);
}
.soa-side-cta__btn-icon {
 width: 18px;
 height: 18px;
}
@media (max-width: 768px) {
 .soa-side-cta { display: none; }
}

/* =============================================================
 * 44. v1.9.9 — Mega menu (header dropdown)
 * =========================================================== */
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .menu-item-has-children > a::after {
 content: '';
 display: inline-block;
 width: 8px;
 height: 8px;
 border-right: 1.5px solid currentColor;
 border-bottom: 1.5px solid currentColor;
 transform: rotate(45deg) translateY(-2px);
 margin-left: 8px;
 transition: transform 0.3s ease;
}
.primary-menu .menu-item-has-children:hover > a::after {
 transform: rotate(225deg) translateY(2px);
}
.primary-menu .sub-menu {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%) translateY(8px);
 min-width: 240px;
 background: #fff;
 box-shadow: 0 8px 32px rgba(6, 17, 28, 0.12);
 border-radius: 4px;
 padding: 12px 0;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
 list-style: none;
 margin: 0;
 z-index: 100;
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) translateY(0);
}
.primary-menu .sub-menu li { display: block; padding: 0; }
.primary-menu .sub-menu a {
 display: block;
 padding: 10px 20px;
 font-size: 13px;
 color: var(--navy);
 white-space: nowrap;
 transition: background 0.2s ease, color 0.2s ease;
}
.primary-menu .sub-menu a:hover {
 background: rgba(181, 138, 74, 0.08);
 color: var(--gold);
}

/* =============================================================
 * 45. v1.9.9 — Newsletter signup
 * =========================================================== */
.soa-newsletter {
 padding: 80px 0;
 background: linear-gradient(135deg, var(--navy) 0%, #1a2c44 100%);
 color: var(--white);
 position: relative;
 overflow: hidden;
}
.soa-newsletter::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
  radial-gradient(circle at 20% 50%, rgba(181, 138, 74, 0.12) 0%, transparent 50%),
  radial-gradient(circle at 80% 50%, rgba(181, 138, 74, 0.08) 0%, transparent 50%);
 pointer-events: none;
}
.soa-newsletter__inner {
 max-width: 760px;
 margin: 0 auto;
 padding: 0 6vw;
 text-align: center;
 position: relative;
 z-index: 1;
}
.soa-newsletter__heading {
 font-family: var(--font-display);
 font-size: clamp(24px, 3.5vw, 36px);
 font-weight: 600;
 margin: 0 0 12px;
}
.soa-newsletter__desc {
 font-size: 14px;
 line-height: 1.8;
 opacity: 0.85;
 margin: 0 0 32px;
}
.soa-newsletter__form {
 display: flex;
 gap: 12px;
 max-width: 520px;
 margin: 0 auto;
 flex-wrap: wrap;
}
.soa-newsletter__input {
 flex: 1;
 min-width: 240px;
 padding: 14px 20px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 background: rgba(255, 255, 255, 0.08);
 color: var(--white);
 border-radius: 4px;
 font-size: 14px;
 transition: border-color 0.3s ease, background 0.3s ease;
}
.soa-newsletter__input:focus {
 outline: none;
 border-color: var(--gold);
 background: rgba(255, 255, 255, 0.12);
}
.soa-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.soa-newsletter__submit {
 padding: 14px 32px;
 background: var(--gold);
 color: #fff;
 border: none;
 border-radius: 4px;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.3s ease;
}
.soa-newsletter__submit:hover { background: #c89d5e; }
.soa-newsletter__note {
 margin-top: 16px;
 font-size: 11px;
 opacity: 0.6;
}
@media (max-width: 600px) {
 .soa-newsletter__form { flex-direction: column; }
}

/* =============================================================
 * 46. v1.9.10 — AI Auto-generated post enhancements
 * =========================================================== */
.soa-key-takeaways {
 background: linear-gradient(135deg, #fef9ed 0%, #fff8e8 100%);
 border-left: 4px solid var(--gold, #b58a4a);
 padding: 20px 24px;
 border-radius: 6px;
 margin: 0 0 32px;
}
.soa-key-takeaways strong {
 display: block;
 color: var(--navy, #06111c);
 margin-bottom: 10px;
 font-size: 14px;
 letter-spacing: 0.05em;
}
.soa-key-takeaways ul {
 margin: 0;
 padding-left: 20px;
 color: #555;
 line-height: 1.8;
}
.soa-key-takeaways ul li {
 margin-bottom: 6px;
 font-size: 14px;
}

/* AI */
.single-post .entry-content h2 {
 font-family: var(--font-serif, serif);
 font-size: 24px;
 font-weight: 600;
 color: var(--navy, #06111c);
 margin: 40px 0 16px;
 padding-bottom: 12px;
 border-bottom: 2px solid var(--gold, #b58a4a);
}
.single-post .entry-content h3 {
 font-family: var(--font-serif, serif);
 font-size: 18px;
 font-weight: 600;
 color: var(--navy, #06111c);
 margin: 32px 0 12px;
 padding-left: 14px;
 border-left: 3px solid var(--gold, #b58a4a);
}
.single-post .entry-content blockquote {
 border-left: 3px solid var(--gold, #b58a4a);
 background: #faf8f3;
 padding: 16px 20px;
 margin: 20px 0;
 color: #444;
 font-style: italic;
}

/* =============================================================
 * 47. v1.9.12 — Auto-post mobile-first reading optimization
 * =========================================================== */

/*  */
.single-post .entry-content,
.single .entry-content {
 font-size: 17px;
 line-height: 1.95;
 color: #2a2a2a;
 max-width: 720px;
 margin: 0 auto;
}
.single-post .entry-content p,
.single .entry-content p {
 margin: 0 0 1.4em;
}

/*  */
@media (max-width: 768px) {
 .single-post .entry-content,
 .single .entry-content {
  font-size: 16px;
  line-height: 1.9;
  padding: 0 4vw;
 }
 .single-post .entry-content h2,
 .single .entry-content h2 {
  font-size: 22px !important;
  margin: 36px 0 14px !important;
 }
 .single-post .entry-content h3,
 .single .entry-content h3 {
  font-size: 17px !important;
  margin: 28px 0 12px !important;
 }
 .single-post .entry-content ul,
 .single-post .entry-content ol {
  padding-left: 22px;
 }
 .single-post .entry-content ul li,
 .single-post .entry-content ol li {
  margin-bottom: 8px;
  line-height: 1.85;
 }
 .soa-key-takeaways {
  padding: 16px 18px !important;
  margin-bottom: 24px !important;
 }
 .soa-key-takeaways ul li {
  font-size: 13px !important;
 }
}

/*  */
.single-post .entry-content ul li::marker,
.single .entry-content ul li::marker {
 color: var(--gold, #b58a4a);
}

/* strong  */
.single-post .entry-content strong,
.single .entry-content strong {
 color: var(--navy, #06111c);
 font-weight: 700;
 background: linear-gradient(transparent 60%, rgba(181, 138, 74, 0.18) 60%);
 padding: 0 2px;
}

/*  */
.single-post .entry-content > * {
 animation: soaContentFadeIn 0.6s ease-out forwards;
}
@keyframes soaContentFadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 .single-post .entry-content > * { animation: none; }
}

/* =============================================================
 * 48. v1.9.15 — Single post / page background fix
 * 
 * =========================================================== */
body.single-post,
body.single,
body.page,
body.archive,
body.search,
body.category,
body.tag {
 background: #fff !important;
 color: #2a2a2a !important;
}

body.single-post .soa-main,
body.single .soa-main,
body.page .soa-main,
body.archive .soa-main,
body.search .soa-main {
 background: #fff;
 color: #2a2a2a;
 padding-top: calc(var(--header-height, 80px) + 60px);
 padding-bottom: 100px;
}

/*  */
.single-post .entry-content,
.single .entry-content,
.page .entry-content {
 background: #fff;
 color: #2a2a2a;
 max-width: 760px;
 margin: 0 auto;
 padding: 0 24px;
}

/*  */
.single-post .entry-header,
.single .entry-header,
.page .entry-header {
 max-width: 760px;
 margin: 0 auto 40px;
 padding: 0 24px;
 text-align: left;
}
.single-post .entry-title,
.single .entry-title,
.page .entry-title {
 font-family: var(--font-display, "Playfair Display", serif);
 font-size: clamp(28px, 4vw, 42px);
 font-weight: 700;
 color: #06111c;
 line-height: 1.4;
 margin: 0 0 16px;
 letter-spacing: -0.01em;
}
.single-post .entry-meta,
.single .entry-meta {
 font-size: 13px;
 color: #888;
 margin-bottom: 24px;
}
.single-post .entry-meta a {
 color: var(--gold, #b58a4a);
 text-decoration: none;
}

/*  */
.single-post .entry-content p,
.single .entry-content p,
.page .entry-content p {
 color: #2a2a2a;
 font-size: 17px;
 line-height: 1.95;
}

/*  */
.single-post .entry-content h2,
.single .entry-content h2 {
 color: #06111c !important;
 background: none !important;
}
.single-post .entry-content h3,
.single .entry-content h3 {
 color: #06111c !important;
 background: none !important;
}

/*  */
.single-post .entry-content ul,
.single-post .entry-content ol,
.single .entry-content ul,
.single .entry-content ol {
 color: #2a2a2a;
 margin: 1em 0 1.4em;
 padding-left: 24px;
}
.single-post .entry-content li,
.single .entry-content li {
 color: #2a2a2a;
 margin-bottom: 6px;
 line-height: 1.85;
}

/*  */
.single-post .entry-content blockquote,
.single .entry-content blockquote {
 background: #faf8f3 !important;
 color: #444 !important;
 border-left: 3px solid var(--gold, #b58a4a);
 padding: 16px 20px;
 margin: 20px 0;
 font-style: italic;
}

/*  */
.single-post .entry-content a,
.single .entry-content a,
.page .entry-content a {
 color: var(--gold, #b58a4a);
 text-decoration: underline;
}
.single-post .entry-content a:hover,
.single .entry-content a:hover {
 color: #06111c;
}

/*  */
@media (max-width: 768px) {
 body.single-post .soa-main,
 body.single .soa-main,
 body.page .soa-main {
  padding-top: calc(var(--header-height, 70px) + 30px);
  padding-bottom: 60px;
 }
 .single-post .entry-content p,
 .single .entry-content p {
  font-size: 16px;
  line-height: 1.9;
 }
}

/*  */
body.archive .soa-archive,
body.search .soa-archive,
body.category .soa-archive,
body.tag .soa-archive {
 background: #fff;
 color: #2a2a2a;
 padding: 60px 24px;
}

/* =============================================================
 * 49. v1.9.16 — Single post / page READABILITY HOTFIX
 * 
 * 
 * =========================================================== */

/* body */
html body.single-post,
html body.single,
html body.page,
html body.archive,
html body.search,
html body.category,
html body.tag,
html body.blog {
 background: #ffffff !important;
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-main,
html body.single .soa-main,
html body.page .soa-main,
html body.archive .soa-main,
html body.search .soa-main,
html body.category .soa-main,
html body.tag .soa-main {
 background: #ffffff !important;
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-section,
html body.single .soa-section,
html body.page .soa-section {
 background: #ffffff !important;
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-container,
html body.single .soa-container,
html body.page .soa-container,
html body.single-post .soa-container--narrow,
html body.single .soa-container--narrow {
 background: transparent !important;
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-prose,
html body.single .soa-prose,
html body.single-post .soa-single__article,
html body.single .soa-single__article,
html body.single-post article,
html body.single article,
html body.page article {
 background: transparent !important;
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-prose p,
html body.single .soa-prose p,
html body.single-post article p,
html body.single article p,
html body.page article p,
html body.single-post .soa-prose li,
html body.single .soa-prose li,
html body.single-post article li,
html body.single article li {
 color: #2a2a2a !important;
}

/*  */
html body.single-post .soa-prose h1,
html body.single-post .soa-prose h2,
html body.single-post .soa-prose h3,
html body.single-post .soa-prose h4,
html body.single .soa-prose h1,
html body.single .soa-prose h2,
html body.single .soa-prose h3,
html body.single .soa-prose h4,
html body.single-post article h1,
html body.single-post article h2,
html body.single-post article h3,
html body.single-post article h4,
html body.single article h1,
html body.single article h2,
html body.single article h3,
html body.single article h4 {
 color: #06111c !important;
 background: none !important;
}

/*  */
html body.single-post .soa-key-takeaways,
html body.single .soa-key-takeaways {
 background: linear-gradient(135deg, #fef9ed 0%, #fff8e8 100%) !important;
 color: #2a2a2a !important;
}
html body.single-post .soa-key-takeaways strong,
html body.single .soa-key-takeaways strong {
 color: #06111c !important;
 background: none !important;
}
html body.single-post .soa-key-takeaways li,
html body.single .soa-key-takeaways li {
 color: #444 !important;
}

/* strong  */
html body.single-post .soa-prose strong,
html body.single .soa-prose strong,
html body.single-post article strong,
html body.single article strong {
 color: #06111c !important;
 background: linear-gradient(transparent 60%, rgba(181, 138, 74, 0.18) 60%) !important;
}

/*  */
html body.single-post .soa-prose blockquote,
html body.single .soa-prose blockquote,
html body.single-post article blockquote,
html body.single article blockquote {
 background: #faf8f3 !important;
 color: #444 !important;
 border-left: 3px solid #b58a4a !important;
}

/*  */
html body.single-post .soa-prose a,
html body.single .soa-prose a,
html body.single-post article a,
html body.single article a {
 color: #b58a4a !important;
}

/*  */
html body.single-post .soa-single__nav,
html body.single .soa-single__nav {
 background: transparent !important;
}
html body.single-post .soa-single__nav-label,
html body.single .soa-single__nav-label {
 color: #b58a4a !important;
}
html body.single-post .soa-single__nav-title,
html body.single .soa-single__nav-title {
 color: #06111c !important;
}

/*  */
html body.single-post .soa-single__tags .soa-tag,
html body.single .soa-single__tags .soa-tag {
 color: #b58a4a !important;
 border: 1px solid #e0d8c4 !important;
}

/* CTA */
/*  */


/* =============================================================
 * 50. v1.9.17 — Editorial Article Page (NYTimes/HBR/Medium-style)
 * 
 * =========================================================== */

.soa-article-page {
 background: #ffffff;
 color: #1a1a1a;
 font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
 min-height: 100vh;
 padding-top: var(--header-height, 80px);
}

/* ===  === */
.soa-article-page__header {
 background: linear-gradient(180deg, #faf8f3 0%, #fff 100%);
 padding: 80px 24px 60px;
 border-bottom: 1px solid #e8e2d4;
}
.soa-article-page__header-inner {
 max-width: 760px;
 margin: 0 auto;
}

/*  */
.soa-article-page__breadcrumbs {
 font-size: 12px;
 color: #999;
 letter-spacing: 0.05em;
 margin-bottom: 28px;
 display: flex;
 gap: 8px;
 align-items: center;
 flex-wrap: wrap;
}
.soa-article-page__breadcrumbs a {
 color: #999;
 text-decoration: none;
 transition: color 0.2s ease;
}
.soa-article-page__breadcrumbs a:hover {
 color: #b58a4a;
}
.soa-article-page__breadcrumbs span[aria-hidden] {
 color: #ccc;
}

/*  */
.soa-article-page__category {
 display: inline-block;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.18em;
 color: #b58a4a;
 text-decoration: none;
 border: 1px solid #b58a4a;
 padding: 6px 14px;
 border-radius: 0;
 margin-bottom: 24px;
 transition: all 0.3s ease;
 text-transform: uppercase;
}
.soa-article-page__category:hover {
 background: #b58a4a;
 color: #fff;
}

/*  */
.soa-article-page__title {
 font-family: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", serif;
 font-size: clamp(28px, 5vw, 44px);
 font-weight: 700;
 line-height: 1.4;
 color: #06111c;
 margin: 0 0 28px;
 letter-spacing: -0.01em;
 word-break: auto-phrase;
}

/*  */
.soa-article-page__meta {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 13px;
 color: #777;
 flex-wrap: wrap;
}
.soa-article-page__meta time {
 color: #777;
}
.soa-article-page__sep {
 color: #ccc;
}

/*  */
.soa-article-page__hero-image {
 margin: 48px -24px 0;
 overflow: hidden;
}
.soa-article-page__hero-image img {
 width: 100%;
 height: auto;
 display: block;
}

/* ===  === */
.soa-article-page__article {
 background: #ffffff;
 padding: 60px 24px 80px;
}
.soa-article-page__article-inner {
 max-width: 720px;
 margin: 0 auto;
}

/*  */
.soa-article-page__content {
 font-size: 18px;
 line-height: 1.95;
 color: #2a2a2a;
 letter-spacing: 0.01em;
}
.soa-article-page__content p {
 margin: 0 0 1.6em;
 color: #2a2a2a;
}
.soa-article-page__content p:first-of-type {
 font-size: 19px;
 line-height: 1.85;
 color: #1a1a1a;
 font-weight: 500;
}

/*  H2 */
.soa-article-page__content h2 {
 font-family: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", serif;
 font-size: clamp(22px, 3.5vw, 30px);
 font-weight: 700;
 line-height: 1.5;
 color: #06111c;
 margin: 56px 0 20px;
 padding-bottom: 16px;
 border-bottom: 2px solid #06111c;
 letter-spacing: -0.005em;
}

/*  H3 */
.soa-article-page__content h3 {
 font-size: clamp(18px, 2.5vw, 22px);
 font-weight: 700;
 line-height: 1.5;
 color: #06111c;
 margin: 40px 0 14px;
 padding-left: 14px;
 border-left: 4px solid #b58a4a;
}

/* H4 */
.soa-article-page__content h4 {
 font-size: 16px;
 font-weight: 700;
 color: #06111c;
 margin: 32px 0 10px;
}

/*  */
.soa-article-page__content ul,
.soa-article-page__content ol {
 margin: 0 0 1.6em;
 padding-left: 28px;
}
.soa-article-page__content ul li,
.soa-article-page__content ol li {
 color: #2a2a2a;
 margin-bottom: 10px;
 line-height: 1.85;
}
.soa-article-page__content ul li::marker {
 color: #b58a4a;
}
.soa-article-page__content ol li::marker {
 color: #b58a4a;
 font-weight: 600;
}

/* strong */
.soa-article-page__content strong {
 color: #06111c;
 font-weight: 700;
 background: linear-gradient(transparent 65%, rgba(181, 138, 74, 0.25) 65%);
 padding: 0 2px;
}

/*  */
.soa-article-page__content blockquote {
 margin: 32px 0;
 padding: 24px 28px;
 background: #faf8f3;
 border-left: 4px solid #b58a4a;
 color: #444;
 font-size: 17px;
 font-style: italic;
 line-height: 1.85;
 position: relative;
}
.soa-article-page__content blockquote p:last-child {
 margin-bottom: 0;
}

/*  */
.soa-article-page__content a {
 color: #b58a4a;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
 transition: color 0.2s ease;
}
.soa-article-page__content a:hover {
 color: #06111c;
}

/*  */
.soa-article-page__content img {
 max-width: 100%;
 height: auto;
 margin: 28px 0;
 border-radius: 4px;
}

/*  */
.soa-article-page__content code {
 background: #f4f0e6;
 color: #b58a4a;
 padding: 2px 8px;
 border-radius: 3px;
 font-size: 0.9em;
 font-family: "SF Mono", Monaco, Consolas, monospace;
}

/*  */
.soa-article-page__content .soa-key-takeaways {
 background: linear-gradient(135deg, #fef9ed 0%, #fff8e8 100%);
 border: none;
 border-left: 4px solid #b58a4a;
 padding: 28px 32px;
 margin: 0 0 48px;
 border-radius: 0 4px 4px 0;
 position: relative;
}
.soa-article-page__content .soa-key-takeaways strong {
 display: block;
 color: #06111c;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.1em;
 margin-bottom: 14px;
 text-transform: none;
 background: none;
 padding: 0;
}
.soa-article-page__content .soa-key-takeaways ul {
 margin: 0;
 padding-left: 22px;
}
.soa-article-page__content .soa-key-takeaways li {
 color: #444;
 font-size: 15px;
 line-height: 1.8;
 margin-bottom: 8px;
}
.soa-article-page__content .soa-key-takeaways li:last-child {
 margin-bottom: 0;
}
.soa-article-page__content .soa-key-takeaways li::marker {
 color: #b58a4a;
}

/* ===  === */
.soa-article-page__tags {
 margin: 56px 0 0;
 padding-top: 32px;
 border-top: 1px solid #e8e2d4;
 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
}
.soa-article-page__tags-label {
 font-size: 12px;
 color: #999;
 letter-spacing: 0.1em;
 margin-right: 8px;
}
.soa-article-page__tag {
 display: inline-block;
 padding: 8px 16px;
 background: #faf8f3;
 color: #444;
 font-size: 13px;
 text-decoration: none;
 border-radius: 999px;
 transition: all 0.2s ease;
 border: 1px solid transparent;
}
.soa-article-page__tag:hover {
 background: #fff;
 border-color: #b58a4a;
 color: #b58a4a;
}

/* ===  === */
.soa-article-page__author {
 margin: 56px 0 0;
 padding: 32px;
 background: linear-gradient(135deg, #faf8f3 0%, #f4f0e6 100%);
 border-radius: 4px;
 display: flex;
 gap: 20px;
 align-items: flex-start;
}
.soa-article-page__author-avatar {
 flex-shrink: 0;
 width: 64px;
 height: 64px;
 background: #06111c;
 color: #b58a4a;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "Playfair Display", serif;
 font-size: 18px;
 font-weight: 700;
 overflow: hidden;
}
.soa-article-page__author-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.soa-article-page__author-meta {
 flex: 1;
}
.soa-article-page__author-name {
 font-size: 15px;
 font-weight: 700;
 color: #06111c;
 margin: 0 0 6px;
}
.soa-article-page__author-bio {
 font-size: 13px;
 line-height: 1.75;
 color: #666;
 margin: 0;
}

/* ===  === */
.soa-article-page__nav {
 margin: 56px 0 0;
 padding-top: 32px;
 border-top: 1px solid #e8e2d4;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
}
.soa-article-page__nav-item {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 20px 24px;
 background: #faf8f3;
 border-radius: 4px;
 text-decoration: none;
 transition: all 0.3s ease;
}
.soa-article-page__nav-item:hover {
 background: #fff;
 box-shadow: 0 4px 16px rgba(6, 17, 28, 0.08);
 transform: translateY(-2px);
}
.soa-article-page__nav-item--next {
 text-align: right;
 grid-column: 2;
}
.soa-article-page__nav-label {
 font-size: 11px;
 color: #b58a4a;
 letter-spacing: 0.1em;
 font-weight: 600;
}
.soa-article-page__nav-title {
 font-size: 14px;
 color: #06111c;
 font-weight: 600;
 line-height: 1.5;
}

/* ===  === */
@media (max-width: 768px) {
 .soa-article-page__header {
  padding: 48px 20px 40px;
 }
 .soa-article-page__article {
  padding: 40px 20px 60px;
 }
 .soa-article-page__content {
  font-size: 17px;
  line-height: 1.95;
 }
 .soa-article-page__content p:first-of-type {
  font-size: 17px;
 }
 .soa-article-page__content h2 {
  margin: 40px 0 16px;
  padding-bottom: 12px;
 }
 .soa-article-page__content h3 {
  margin: 32px 0 12px;
 }
 .soa-article-page__content blockquote {
  padding: 18px 20px;
  margin: 24px 0;
 }
 .soa-article-page__content .soa-key-takeaways {
  padding: 22px 22px;
  margin-bottom: 36px;
 }
 .soa-article-page__hero-image {
  margin: 36px -20px 0;
 }
 .soa-article-page__author {
  flex-direction: column;
  padding: 24px;
 }
 .soa-article-page__nav {
  grid-template-columns: 1fr;
 }
 .soa-article-page__nav-item--next {
  grid-column: 1;
  text-align: left;
 }
 .soa-article-page__title {
  margin-bottom: 20px;
 }
}

/* ===  === */
.soa-article-page ::selection {
 background: rgba(181, 138, 74, 0.25);
 color: #06111c;
}

/* ===  === */
.soa-article-page__article {
 position: relative;
}

/* CSS */
:root {
 --reading-text: #2a2a2a;
 --reading-heading: #06111c;
 --reading-accent: #b58a4a;
 --reading-bg: #ffffff;
 --reading-bg-soft: #faf8f3;
}

/*  */
.soa-article-page__content > * {
 animation: soaArticleFadeIn 0.6s ease-out forwards;
}
@keyframes soaArticleFadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 .soa-article-page__content > * { animation: none; }
}

/* === v1.9.25: Hero text mask === */
.soa-hero__textmask {
 position: absolute;
 inset: 0;
 z-index: 2;
 pointer-events: none;
}
@media (max-width: 768px) {
 /*  */
 .soa-hero__textmask {
  background: linear-gradient(
   180deg,
   rgba(245, 243, 238, 0.85) 0%,
   rgba(245, 243, 238, 0.85) 35%,
   rgba(245, 243, 238, 0.5) 60%,
   rgba(245, 243, 238, 0.0) 100%
  ) !important;
 }
}


/* === v1.9.29:  === */
/* CREATIVE WORKFLOW  */
.soa-edit-process--no-metadata .ep-state__topbar,
.soa-edit-process--no-metadata .ep-state__code,
.soa-edit-process--no-metadata .ep-state__rec,
.soa-edit-process--no-metadata .ep-cut__clip,
.soa-edit-process--no-metadata .ep-wheel__label,
.soa-edit-process--no-metadata .ep-shoot__overlay,
.soa-edit-process--no-metadata .ep-master__progress-label,
.soa-edit-process--no-metadata .ep-master__filename,
.soa-edit-process--no-metadata [class*="ep-state__"][class*="meta"],
.soa-edit-process--no-metadata .ep-meta {
 display: none !important;
}

/* === v1.9.30:  / Reduced Motion  Edit-Process  ===
   ScrollTrigger 
   4
    */

.soa-edit-process--static .ep-state-label__name {
 position: static !important;
 display: block;
 opacity: 1 !important;
 visibility: visible !important;
 transform: none !important;
 font-size: clamp(28px, 7vw, 44px);
 margin-bottom: 8px;
}

.soa-edit-process--static .ep-state {
 display: block !important;
 opacity: 1 !important;
 margin-bottom: 60px;
}

.soa-edit-process--static .soa-edit-process__pinwrap {
 min-height: auto !important;
}

/*  scrollTrigger 
   absolute opacity:0 
   opacity:0 
    visibility  */
.soa-edit-process:not(.soa-edit-process--static) .ep-state-label__name {
 visibility: hidden;
}
.soa-edit-process:not(.soa-edit-process--static) .ep-state-label__name.is-active {
 visibility: visible;
}

/* === v1.9.30: NEWS ===
   .soa-edit-process 
   .soa-news  isolation */
.soa-news {
 position: relative;
 isolation: isolate;
 z-index: 5;
 background: var(--bg-light, #f8f5ed) !important;
}
.soa-news__inner {
 position: relative;
 z-index: 2;
}

/* =============================================================
 * 39. v1.9.58 — PC + 
 *  v1.9.56-57 
 * !important 
 * =========================================================== */

/*  .ep-stage  viewport  */
.soa-edit-process .ep-stage {
 height: calc(100vh - 280px) !important;
 height: calc(100svh - 280px) !important;
 max-height: 720px !important;
 min-height: 380px !important;
 overflow: visible !important;
}

/* PC */
.soa-edit-process .ep-laptop {
 height: 100% !important;
 width: auto !important;
 max-width: min(68vw, 1000px) !important;
 aspect-ratio: 16 / 10 !important;
 margin-inline: auto !important;
}

/* PC bezel  */
.soa-edit-process .ep-laptop__bezel {
 position: absolute !important;
 inset: 0 !important;
 width: 100% !important;
 height: 100% !important;
 aspect-ratio: auto !important;
}

/* PC */
@media (max-height: 1000px) {
 .soa-edit-process__pinwrap {
  padding: 36px 0 24px !important;
 }
 .ep-tagline {
  padding: 0 24px 16px !important;
 }
 .ep-tagline__heading {
  font-size: clamp(26px, 3.4vw, 44px) !important;
 }
 .ep-tagline__eyebrow {
  margin-bottom: 10px !important;
  font-size: 10px !important;
 }
}

/* PC */
@media (max-height: 880px) {
 .soa-edit-process .ep-stage {
  height: calc(100vh - 220px) !important;
  height: calc(100svh - 220px) !important;
 }
 .soa-edit-process .ep-laptop {
  max-width: min(62vw, 880px) !important;
 }
 .ep-tagline__heading {
  font-size: clamp(22px, 2.8vw, 34px) !important;
 }
}

/* PCMacBook Air 13" ≈800px  */
@media (max-height: 800px) {
 .soa-edit-process .ep-stage {
  height: calc(100vh - 180px) !important;
  height: calc(100svh - 180px) !important;
 }
 .soa-edit-process .ep-laptop {
  max-width: min(58vw, 800px) !important;
 }
 .ep-tagline__heading {
  font-size: clamp(20px, 2.4vw, 28px) !important;
 }
 .soa-edit-process__pinwrap {
  padding: 24px 0 16px !important;
 }
}

/* PC */
.soa-edit-process .ep-stage::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 100%;
 max-width: 1400px;
 height: 80%;
 transform: translate(-50%, -50%);
 background:
  radial-gradient(ellipse 45% 35% at 25% 35%, rgba(212, 178, 122, 0.10), transparent 70%),
  radial-gradient(ellipse 35% 45% at 75% 65%, rgba(80, 110, 160, 0.07), transparent 70%);
 pointer-events: none;
 z-index: 0;
 animation: soa-ep-ambient 18s ease-in-out infinite alternate;
 filter: blur(20px);
}
@keyframes soa-ep-ambient {
 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.7; }
 100% { transform: translate(-50%, -50%) rotate(12deg) scale(1.15); opacity: 1.0; }
}

/* PC */
.soa-edit-process .ep-laptop {
 animation: soa-ep-float 9s ease-in-out infinite alternate;
}
@keyframes soa-ep-float {
 0% { transform: rotateX(8deg) rotateY(-4deg) translateY(0); }
 100% { transform: rotateX(7deg) rotateY(-3deg) translateY(-6px); }
}
.soa-edit-process .ep-laptop.is-tilt-1 { animation: soa-ep-float-1 9s ease-in-out infinite alternate; }
.soa-edit-process .ep-laptop.is-tilt-2 { animation: soa-ep-float-2 9s ease-in-out infinite alternate; }
.soa-edit-process .ep-laptop.is-tilt-3 { animation: soa-ep-float-3 9s ease-in-out infinite alternate; }
@keyframes soa-ep-float-1 {
 0% { transform: rotateX(6deg) rotateY(-2deg) translateY(0); }
 100% { transform: rotateX(5deg) rotateY(-1deg) translateY(-8px); }
}
@keyframes soa-ep-float-2 {
 0% { transform: rotateX(10deg) rotateY(-6deg) translateY(0); }
 100% { transform: rotateX(9deg) rotateY(-7deg) translateY(-4px); }
}
@keyframes soa-ep-float-3 {
 0% { transform: rotateX(7deg) rotateY(2deg) translateY(0); }
 100% { transform: rotateX(6deg) rotateY(3deg) translateY(-10px); }
}

/* gold + cream */
.soa-edit-process .ep-laptop__screen::before {
 content: "";
 position: absolute;
 top: 15%;
 left: 18%;
 width: 25%;
 height: 22%;
 background: radial-gradient(ellipse,
  rgba(212, 178, 122, 0.22) 0%,
  rgba(212, 178, 122, 0.10) 30%,
  transparent 70%);
 mix-blend-mode: screen;
 pointer-events: none;
 z-index: 5;
 filter: blur(10px);
 animation: soa-ep-flare-1 16s ease-in-out infinite alternate;
}
.soa-edit-process .ep-laptop__screen::after {
 content: "";
 position: absolute;
 bottom: 18%;
 right: 14%;
 width: 18%;
 height: 16%;
 background: radial-gradient(circle,
  rgba(255, 230, 195, 0.28) 0%,
  rgba(255, 220, 180, 0.12) 40%,
  transparent 70%);
 mix-blend-mode: screen;
 pointer-events: none;
 z-index: 5;
 filter: blur(8px);
 animation: soa-ep-flare-2 20s ease-in-out infinite alternate-reverse;
}
@keyframes soa-ep-flare-1 {
 0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
 50% { transform: translate(30px, -15px) scale(1.2); opacity: 1.0; }
 100% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.7; }
}
@keyframes soa-ep-flare-2 {
 0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
 50% { transform: translate(-25px, -20px) scale(1.15); opacity: 1.0; }
 100% { transform: translate(20px, 10px) scale(0.85); opacity: 0.5; }
}

/*  */
.soa-edit-process .ep-laptop__screen > *:not(.ep-state) {
 position: relative;
}
.soa-edit-process .ep-laptop__screen::before,
.soa-edit-process .ep-laptop__screen::after {
 will-change: transform, opacity;
}

/* REC  */
.soa-edit-process .ep-laptop__rec-badge,
.soa-edit-process [class*='rec'] {
 animation: soa-ep-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes soa-ep-rec-pulse {
 0%, 100% {
  box-shadow: 0 0 0 0 rgba(217, 47, 47, 0.7), 0 0 14px rgba(217, 47, 47, 0.5);
 }
 50% {
  box-shadow: 0 0 0 10px rgba(217, 47, 47, 0), 0 0 24px rgba(217, 47, 47, 0.8);
 }
}

/* 00:00:14:22 */
.soa-edit-process [class*='timecode'],
.soa-edit-process [class*='time-code'] {
 animation: soa-ep-timecode-tick 1s steps(2) infinite;
}
@keyframes soa-ep-timecode-tick {
 0%, 49% { opacity: 1; }
 50%, 100% { opacity: 0.7; }
}

/* =============================================================
 * 40. v1.9.59 — Particle Showcase Section
 * AI WORKFLOW 
 * 
 * =========================================================== */

.soa-particle-showcase {
 position: relative;
 min-height: 70vh;
 min-height: 70svh;
 background: var(--navy);
 overflow: hidden;
 isolation: isolate;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 80px 24px;
 z-index: 2;
}

/*  */
.soa-particle-showcase__veil {
 position: absolute;
 inset: 0;
 background:
  radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(6, 17, 28, 0.4) 70%),
  linear-gradient(180deg, rgba(6, 17, 28, 0.3) 0%, transparent 25%, transparent 75%, rgba(6, 17, 28, 0.3) 100%);
 pointer-events: none;
 z-index: 1;
}

/*  */
.soa-particle-showcase__inner {
 position: relative;
 z-index: 3;
 max-width: 880px;
 text-align: center;
}

/* 2 +  */
.soa-particle-showcase__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 18px;
 margin-bottom: 36px;
 opacity: 0;
 transform: translateY(20px);
 animation: soa-ps-fade-up 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.soa-particle-showcase__eyebrow-line {
 width: 60px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.soa-particle-showcase__eyebrow-text {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 font-size: 11px;
 letter-spacing: 0.5em;
 color: var(--gold);
 text-transform: uppercase;
 font-weight: 500;
}

/*  */
.soa-particle-showcase__heading {
 font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
 font-weight: 500;
 font-size: clamp(36px, 5.5vw, 72px);
 line-height: 1.35;
 letter-spacing: 0.04em;
 color: var(--white);
 margin: 0 0 28px;
 opacity: 0;
 transform: translateY(40px);
 animation: soa-ps-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
 text-shadow:
  0 0 30px rgba(212, 178, 122, 0.2),
  0 0 60px rgba(6, 17, 28, 0.5);
}

/*  */
.soa-particle-showcase__desc {
 font-size: clamp(14px, 1.2vw, 16px);
 line-height: 2.1;
 color: rgba(245, 243, 238, 0.75);
 max-width: 560px;
 margin: 0 auto 56px;
 letter-spacing: 0.04em;
 opacity: 0;
 transform: translateY(20px);
 animation: soa-ps-fade-up 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

/*  */
.soa-particle-showcase__hint {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 opacity: 0;
 animation:
  soa-ps-fade-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards,
  soa-ps-hint-bounce 2.4s ease-in-out 2.6s infinite;
}
.soa-particle-showcase__hint-icon {
 color: var(--gold);
 font-size: 12px;
 display: block;
}
.soa-particle-showcase__hint-text {
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 10px;
 letter-spacing: 0.4em;
 color: rgba(212, 178, 122, 0.7);
 text-transform: uppercase;
}

@keyframes soa-ps-fade-up {
 to {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes soa-ps-hint-bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(6px); }
}

/*  */
@media (max-width: 768px) {
 .soa-particle-showcase {
  min-height: 60vh;
  min-height: 60svh;
  padding: 60px 20px;
 }
 .soa-particle-showcase__eyebrow-line {
  width: 36px;
 }
 .soa-particle-showcase__eyebrow-text {
  font-size: 9px;
  letter-spacing: 0.4em;
 }
 .soa-particle-showcase__heading {
  font-size: clamp(28px, 7vw, 42px);
  margin-bottom: 20px;
 }
 .soa-particle-showcase__desc {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 40px;
 }
}

/* =============================================================
 * 41. v1.9.59 — Section Transition Shadows
 * →→ vignette
 * =========================================================== */

/* AI AI  */
.soa-particle-showcase::before {
 content: "";
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: clamp(120px, 30vw, 400px);
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
 opacity: 0.4;
 z-index: 4;
}

/*  WORKFLOW  */
.soa-particle-showcase::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: clamp(120px, 30vw, 400px);
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
 opacity: 0.4;
 z-index: 4;
}

/* WORKFLOW  */
.soa-edit-process {
 position: relative;
}
.soa-edit-process::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 120px;
 background: linear-gradient(180deg, rgba(6, 17, 28, 0.6) 0%, transparent 100%);
 pointer-events: none;
 z-index: 5;
}

/* =============================================================
 * 42. v1.9.60 — Brand Color FORCE Override
 * 
 *  hex 
 *  + !important 
 * ※ :root 
 * =========================================================== */

/* CSS customizer  :root  */
html, :root {
 --navy: #06111c !important;
 --white: #f5f3ee !important;
 --bg-light: #f8f5ed !important;
 --gold: #b58a4a !important;
 --gold-light: #d4b27a !important;
 --gold-deep: #8c6a36 !important;
 --link-hover: #d4b27a !important;
 --soft-white: #f5f3ee !important;
 --gray-2: rgba(245, 243, 238, 0.7) !important;
 --ink: #1B1B1B !important;
}

/* body  hex  navy */
body {
 background-color: #06111c !important;
 color: #f5f3ee !important;
}

/*  hex  navy  */
.soa-stats,
.soa-ai,
.soa-partners,
.soa-cta,
.soa-edit-process,
.soa-particle-showcase,
.site-footer,
.soa-hero {
 background-color: #06111c !important;
 color: #f5f3ee !important;
}

/*  hex  */
.soa-services { background-color: #F4F2EC !important; color: #1B1B1B !important; }
.soa-works { background-color: #FFFFFF !important; color: #1B1B1B !important; }
.soa-news { background-color: #f8f5ed !important; color: #1B1B1B !important; }
.soa-faq { background-color: #f8f5ed !important; color: #1B1B1B !important; }
.soa-testimonials { background-color: #FFFFFF !important; color: #1B1B1B !important; }
.soa-newsletter { background-color: #f8f5ed !important; color: #1B1B1B !important; }

/* ===  === */

/* navy  */
.soa-services h1, .soa-services h2, .soa-services h3, .soa-services h4,
.soa-services [class*='__heading'], .soa-services [class*='__title'],
.soa-works h1, .soa-works h2, .soa-works h3, .soa-works h4,
.soa-works [class*='__heading'], .soa-works [class*='__title'],
.soa-news h1, .soa-news h2, .soa-news h3, .soa-news h4,
.soa-news [class*='__heading'], .soa-news [class*='__title'],
.soa-faq h1, .soa-faq h2, .soa-faq h3, .soa-faq h4,
.soa-faq [class*='__heading'], .soa-faq [class*='__title'],
.soa-testimonials h1, .soa-testimonials h2, .soa-testimonials h3, .soa-testimonials h4,
.soa-testimonials [class*='__heading'], .soa-testimonials [class*='__title'],
.soa-newsletter h1, .soa-newsletter h2, .soa-newsletter h3, .soa-newsletter h4,
.soa-newsletter [class*='__heading'], .soa-newsletter [class*='__title'] {
 color: #06111c !important;
}

/*  */
.soa-services p, .soa-services [class*='__desc'], .soa-services [class*='__lead'],
.soa-works p, .soa-works [class*='__desc'], .soa-works [class*='__lead'],
.soa-news p, .soa-news [class*='__desc'], .soa-news [class*='__excerpt'], .soa-news [class*='__lead'],
.soa-faq p, .soa-faq [class*='__desc'], .soa-faq [class*='__answer'],
.soa-testimonials p, .soa-testimonials [class*='__desc'], .soa-testimonials [class*='__quote'],
.soa-newsletter p, .soa-newsletter [class*='__desc'] {
 color: #2a2a2a !important;
}

/* === v1.9.60=== */
/*  gold  */

/*  eyebrow /  */
.soa-stats__eyebrow,
.soa-ai__eyebrow,
.soa-partners__eyebrow,
.soa-cta__eyebrow,
.soa-edit-process__eyebrow,
.soa-particle-showcase__eyebrow-text,
.soa-hero__eyebrow,
.ep-tagline__eyebrow,
.ep-state-label__num,
[class*='__eyebrow'] {
 color: #d4b27a !important;
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 letter-spacing: 0.4em;
 text-transform: uppercase;
}

/*  eyebrow */
.soa-services__eyebrow,
.soa-works__eyebrow,
.soa-news__eyebrow,
.soa-faq__eyebrow,
.soa-testimonials__eyebrow,
.soa-newsletter__eyebrow {
 color: #8c6a36 !important;
}

/* SERVICE / CONTACT / ABOUT  gold  */
.soa-progress-nav__item.is-active .soa-progress-nav__label,
[class*='progress-nav'] .is-active [class*='label'] {
 color: #d4b27a !important;
}

/* 50030010 — gold  */
.soa-stats__num,
[class*='__num']:not([class*='__num-']) {
 color: #d4b27a !important;
 font-family: var(--font-display, "Playfair Display", Georgia, serif);
}

/*  /  gold  */
.soa-btn--outline {
 border-color: #b58a4a !important;
 color: #d4b27a !important;
}
.soa-btn--outline:hover {
 background-color: #b58a4a !important;
 color: #06111c !important;
}

/*  outline  */
.soa-services .soa-btn--outline,
.soa-works .soa-btn--outline,
.soa-news .soa-btn--outline {
 border-color: #8c6a36 !important;
 color: #8c6a36 !important;
}

/*  gold  */
[class*='__line']:not([class*='__line-h']),
[class*='__divider']:not([class*='--']) {
 background: linear-gradient(90deg, transparent, #b58a4a, transparent) !important;
}

/* ===  canvas  === */
.soa-bg-particles {
 opacity: 0.95 !important;
 display: block !important;
}

/* === customizer.php  v1.9.54  === */
/*  customizer.php  inline style !important  */
[id="soa-customizer-vars"] ~ * {
 /*  */
}

/* =============================================================
 * 43. v1.9.61 — Particle Showcase Cinematic Edition
 *  WebGL 
 * =========================================================== */

.soa-particle-showcase {
 position: relative !important;
 min-height: 100vh !important;
 min-height: 100svh !important;
 background-color: #06111c !important;
 overflow: hidden !important;
 isolation: isolate;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 90px 24px 60px !important;
}

/*  canvas */
.soa-particle-showcase__canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
 display: block;
}

/*  */
.soa-particle-showcase__veil {
 position: absolute;
 inset: 0;
 background:
  radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(6, 17, 28, 0.6) 80%),
  linear-gradient(180deg,
   rgba(6, 17, 28, 0.5) 0%,
   rgba(6, 17, 28, 0.0) 18%,
   rgba(6, 17, 28, 0.0) 82%,
   rgba(6, 17, 28, 0.5) 100%);
 pointer-events: none;
 z-index: 2;
}

/*  */
.soa-particle-showcase__top,
.soa-particle-showcase__bottom {
 position: relative;
 z-index: 4;
 max-width: 880px;
 margin-inline: auto;
 text-align: center;
}

.soa-particle-showcase__top {
 padding-top: 20px;
}

/* eyebrow */
.soa-particle-showcase__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 18px;
 margin-bottom: 24px;
 opacity: 0;
 transform: translateY(20px);
 animation: soa-ps-fade-up 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.soa-particle-showcase__eyebrow-line {
 width: 60px;
 height: 1px;
 background: linear-gradient(90deg, transparent, #d4b27a, transparent);
}
.soa-particle-showcase__eyebrow-text {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace !important;
 font-size: 11px !important;
 letter-spacing: 0.5em !important;
 color: #d4b27a !important;
 text-transform: uppercase;
 font-weight: 500;
}

/*  */
.soa-particle-showcase__heading {
 font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif) !important;
 font-weight: 500 !important;
 font-size: clamp(28px, 4vw, 52px) !important;
 line-height: 1.4 !important;
 letter-spacing: 0.04em !important;
 color: #f5f3ee !important;
 margin: 0 0 20px !important;
 opacity: 0;
 transform: translateY(40px);
 animation: soa-ps-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
 text-shadow:
  0 0 30px rgba(212, 178, 122, 0.25),
  0 0 80px rgba(6, 17, 28, 0.6);
}

/*  */
.soa-particle-showcase__desc {
 font-size: clamp(13px, 1.1vw, 15px) !important;
 line-height: 2 !important;
 color: rgba(245, 243, 238, 0.7) !important;
 max-width: 480px;
 margin: 0 auto !important;
 letter-spacing: 0.04em;
 opacity: 0;
 transform: translateY(20px);
 animation: soa-ps-fade-up 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

/* ===  +  === */
.soa-particle-showcase__bottom {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 28px;
 padding-bottom: 20px;
}

/* 3 */
.soa-particle-showcase__phase-indicator {
 display: inline-flex;
 gap: 14px;
 align-items: center;
 opacity: 0;
 animation: soa-ps-fade-up 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
.soa-particle-showcase__phase-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(212, 178, 122, 0.3);
 transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-particle-showcase__phase-dot.is-active {
 background: #d4b27a;
 box-shadow: 0 0 12px rgba(212, 178, 122, 0.6);
 transform: scale(1.4);
}

/*  */
.soa-particle-showcase__hint {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 opacity: 0;
 animation:
  soa-ps-fade-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards,
  soa-ps-hint-bounce 2.6s ease-in-out 3s infinite;
}
.soa-particle-showcase__hint-text {
 font-family: ui-monospace, "SF Mono", monospace !important;
 font-size: 10px !important;
 letter-spacing: 0.4em !important;
 color: rgba(212, 178, 122, 0.7) !important;
 text-transform: uppercase;
}
.soa-particle-showcase__hint-icon {
 color: #d4b27a !important;
 font-size: 12px;
}

@keyframes soa-ps-fade-up {
 to { opacity: 1; transform: translateY(0); }
}
@keyframes soa-ps-hint-bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(6px); }
}

/*  */
@media (max-width: 768px) {
 .soa-particle-showcase {
  min-height: 90vh !important;
  min-height: 90svh !important;
  padding: 60px 20px 40px !important;
 }
 .soa-particle-showcase__heading {
  font-size: clamp(24px, 6vw, 36px) !important;
 }
 .soa-particle-showcase__desc {
  font-size: 13px !important;
 }
}

/* =============================================================
 * 44. v1.9.61 — CREATIVE WORKFLOW Cinema++ Enhancements
 * =========================================================== */

/* ScreenLUT */
.soa-edit-process .ep-laptop__screen {
 position: relative;
}
.soa-edit-process .ep-laptop__screen::before {
 content: "" !important;
 position: absolute !important;
 inset: 0 !important;
 background:
  linear-gradient(135deg, rgba(255, 200, 130, 0.05) 0%, transparent 30%, transparent 70%, rgba(50, 80, 130, 0.08) 100%) !important;
 mix-blend-mode: overlay !important;
 pointer-events: none !important;
 z-index: 6 !important;
}

/* PC "" */
.soa-edit-process .ep-laptop::before {
 content: "";
 position: absolute;
 top: -8%;
 left: -3%;
 right: -3%;
 height: 30%;
 background: radial-gradient(ellipse at top, rgba(212, 178, 122, 0.15) 0%, transparent 60%);
 pointer-events: none;
 z-index: -1;
 filter: blur(20px);
}

.soa-edit-process .ep-laptop::after {
 content: "";
 position: absolute;
 bottom: -8%;
 left: 10%;
 right: 10%;
 height: 40%;
 background: radial-gradient(ellipse at center, rgba(212, 178, 122, 0.08) 0%, transparent 70%);
 pointer-events: none;
 z-index: -2;
 filter: blur(40px);
}

/*  WORKFLOW  */
.soa-edit-process__pinwrap::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg,
  transparent 0%,
  rgba(212, 178, 122, 0.3) 30%,
  rgba(212, 178, 122, 0.8) 50%,
  rgba(212, 178, 122, 0.3) 70%,
  transparent 100%);
 z-index: 10;
 animation: soa-ep-rail-pulse 4s ease-in-out infinite;
}
@keyframes soa-ep-rail-pulse {
 0%, 100% { opacity: 0.4; transform: scaleX(0.7); }
 50% { opacity: 1; transform: scaleX(1); }
}

/* —  */
.soa-edit-process .ep-laptop__screen > .ep-state {
 position: absolute;
 inset: 0;
}
.soa-edit-process .ep-laptop__bezel::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image:
  radial-gradient(circle at 23% 47%, rgba(255,255,255,0.025), transparent 1.5px),
  radial-gradient(circle at 67% 23%, rgba(255,255,255,0.02), transparent 1px),
  radial-gradient(circle at 41% 78%, rgba(255,255,255,0.022), transparent 1.2px),
  radial-gradient(circle at 88% 65%, rgba(255,255,255,0.018), transparent 0.8px);
 background-size: 7px 7px, 11px 11px, 13px 13px, 5px 5px;
 pointer-events: none;
 mix-blend-mode: screen;
 opacity: 0.5;
 z-index: 11;
 animation: soa-grain-jitter 0.18s steps(4) infinite;
}
@keyframes soa-grain-jitter {
 0% { transform: translate(0,0); }
 25% { transform: translate(-1px, 1px); }
 50% { transform: translate(1px, -1px); }
 75% { transform: translate(-1px, -1px); }
}

/* v1.9.61 */
.ep-tagline__eyebrow {
 color: #d4b27a !important;
}
.ep-tagline__line {
 background: #d4b27a !important;
}

/* SHOOT / CUT  */
.ep-state-label__num,
.ep-state-label__total {
 color: #d4b27a !important;
}
.ep-state-label__name.is-active {
 color: #f5f3ee !important;
 text-shadow: 0 0 30px rgba(212, 178, 122, 0.4);
}

/* =============================================================
 * 45. v1.9.62 — Particle Showcase Sand-Level Refinement
 * - 
 * - /
 * - canvas  50% 
 * =========================================================== */

/*  canvas  50%  */
.soa-particle-showcase__canvas {
 position: absolute !important;
 top: 25% !important;
 left: 0 !important;
 width: 100% !important;
 height: 50% !important;
 z-index: 1 !important;
}

/*  */
.soa-particle-showcase__top {
 position: relative;
 z-index: 5 !important;
 padding-bottom: 0 !important;
}
.soa-particle-showcase__top .soa-particle-showcase__desc {
 margin-bottom: 0 !important;
}

/*  */
.soa-particle-showcase__bottom {
 position: relative;
 z-index: 5 !important;
 padding-top: 0 !important;
}

/*  */
.soa-particle-showcase {
 min-height: 110vh !important;
 min-height: 110svh !important;
}

/*  gold  */
.soa-particle-showcase__canvas {
 mask-image: linear-gradient(180deg,
  transparent 0%,
  black 15%,
  black 85%,
  transparent 100%);
 -webkit-mask-image: linear-gradient(180deg,
  transparent 0%,
  black 15%,
  black 85%,
  transparent 100%);
}

/*  */
@media (max-width: 768px) {
 .soa-particle-showcase {
  min-height: 100vh !important;
  min-height: 100svh !important;
 }
 .soa-particle-showcase__canvas {
  top: 28% !important;
  height: 44% !important;
 }
}

/* =============================================================
 * 46. v1.9.63 — Particle Showcase Earth Edition Layout
 * canvas 
 *  aspect ratio 
 * =========================================================== */

.soa-particle-showcase {
 min-height: 100vh !important;
 min-height: 100svh !important;
}

/* canvas  */
.soa-particle-showcase__canvas {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 width: 100% !important;
 height: 100% !important;
 z-index: 1 !important;
}

/*  12%  */
.soa-particle-showcase__top {
 padding-top: 8vh !important;
}

/*  12%  */
.soa-particle-showcase__bottom {
 padding-bottom: 6vh !important;
}

/* ... */
.soa-particle-showcase__desc {
 max-width: 420px !important;
 margin: 0 auto 0 !important;
 font-size: clamp(12px, 1vw, 14px) !important;
}

/*  navy  */
.soa-particle-showcase__veil {
 background:
  radial-gradient(ellipse 70% 50% at 50% 50%, rgba(6, 17, 28, 0.0) 0%, rgba(6, 17, 28, 0.55) 90%),
  linear-gradient(180deg,
   rgba(6, 17, 28, 0.85) 0%,
   rgba(6, 17, 28, 0.3) 20%,
   rgba(6, 17, 28, 0.3) 80%,
   rgba(6, 17, 28, 0.85) 100%) !important;
}

/* =============================================================
 * 47. v1.9.65 — SOA Cinema Section (3D)
 *  .soa-edit-process / .ep-* 
 *  pin + WebGL 
 * =========================================================== */

.soa-cinema {
 position: relative;
 width: 100%;
 min-height: 500vh; /* 5  */
 background: #000;
 overflow: hidden;
 isolation: isolate;
 z-index: 2;
}

/* WebGL canvas:  sticky  */
.soa-cinema__canvas {
 position: sticky;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 height: 100svh;
 display: block;
 z-index: 1;
}

/*  vignette +  */
.soa-cinema__veil {
 position: sticky;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 height: 100svh;
 margin-top: -100vh;
 margin-top: -100svh;
 background:
  radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.5) 90%),
  linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.6) 100%);
 pointer-events: none;
 z-index: 2;
}

/*  */
.soa-cinema__grain {
 position: sticky;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 height: 100svh;
 margin-top: -100vh;
 margin-top: -100svh;
 background-image:
  radial-gradient(circle at 23% 47%, rgba(255,255,255,0.018), transparent 1.5px),
  radial-gradient(circle at 67% 23%, rgba(255,255,255,0.015), transparent 1px),
  radial-gradient(circle at 41% 78%, rgba(255,255,255,0.017), transparent 1.2px),
  radial-gradient(circle at 88% 65%, rgba(255,255,255,0.012), transparent 0.8px);
 background-size: 5px 5px, 7px 7px, 9px 9px, 3px 3px;
 mix-blend-mode: screen;
 opacity: 0.6;
 pointer-events: none;
 z-index: 3;
 animation: soa-cinema-grain 0.2s steps(4) infinite;
}
@keyframes soa-cinema-grain {
 0% { transform: translate(0,0); }
 25% { transform: translate(-1px, 1px); }
 50% { transform: translate(1px, -1px); }
 75% { transform: translate(-1px, -1px); }
}

/*  */
.soa-cinema__progress {
 position: fixed;
 top: 32px;
 left: 50%;
 transform: translateX(-50%);
 width: 200px;
 height: 1px;
 background: rgba(255, 255, 255, 0.15);
 z-index: 10;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.4s, visibility 0.4s;
}
.soa-cinema.is-active .soa-cinema__progress {
 opacity: 1;
 visibility: visible;
}
.soa-cinema__progress-bar {
 display: block;
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, #d4b27a, #f5f3ee);
 transition: width 0.1s linear;
 box-shadow: 0 0 10px rgba(212, 178, 122, 0.6);
}

/*  */
.soa-cinema__brand {
 position: fixed;
 top: 24px;
 left: 48px;
 display: inline-flex;
 align-items: center;
 gap: 14px;
 z-index: 10;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.4s, visibility 0.4s;
}
.soa-cinema.is-active .soa-cinema__brand {
 opacity: 1;
 visibility: visible;
}
.soa-cinema__brand-line {
 width: 32px;
 height: 1px;
 background: #d4b27a;
}
.soa-cinema__brand-text {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 font-size: 10px;
 letter-spacing: 0.5em;
 color: #d4b27a;
 text-transform: uppercase;
}

/*  */
.soa-cinema__heading {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
 font-size: clamp(40px, 7vw, 96px);
 font-weight: 500;
 color: #f5f3ee;
 margin: 0;
 letter-spacing: 0.04em;
 z-index: 8;
 text-align: center;
 text-shadow:
  0 0 40px rgba(0, 0, 0, 0.85),
  0 0 80px rgba(0, 0, 0, 0.7),
  0 2px 30px rgba(0, 0, 0, 0.9);
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.8s;
}
.soa-cinema.is-active .soa-cinema__heading {
 opacity: 1;
 visibility: visible;
}

/*  v1.9.66  */

/*  */
.soa-cinema__phase {
 position: fixed;
 right: 48px;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 flex-direction: column;
 gap: 32px;
 z-index: 10;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.4s, visibility 0.4s;
}
.soa-cinema.is-active .soa-cinema__phase {
 opacity: 1;
 visibility: visible;
}
.soa-cinema__phase-dot {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 flex-direction: row-reverse;
 gap: 14px;
 cursor: default;
 position: relative;
 white-space: nowrap;
 min-width: 100px;
}
.soa-cinema__phase-dot::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(212, 178, 122, 0.3);
 transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cinema__phase-dot.is-active::before {
 background: #d4b27a;
 box-shadow: 0 0 14px rgba(212, 178, 122, 0.8);
 transform: scale(1.5);
}
.soa-cinema__phase-label {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 font-size: 9px;
 letter-spacing: 0.4em;
 color: rgba(212, 178, 122, 0.5);
 text-transform: uppercase;
 transition: color 0.6s;
}
.soa-cinema__phase-dot.is-active .soa-cinema__phase-label {
 color: #d4b27a;
}

/*  */
.soa-cinema__hint {
 position: fixed;
 bottom: 36px;
 left: 50%;
 transform: translateX(-50%);
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 z-index: 10;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.4s, visibility 0.4s;
}
.soa-cinema.is-active .soa-cinema__hint {
 opacity: 1;
 visibility: visible;
 animation: soa-cinema-hint-bounce 2.6s ease-in-out 1s infinite;
}
.soa-cinema__hint-line {
 width: 1px;
 height: 24px;
 background: linear-gradient(180deg, transparent, #d4b27a);
}
.soa-cinema__hint-text {
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 10px;
 letter-spacing: 0.4em;
 color: #d4b27a;
 text-transform: uppercase;
}
@keyframes soa-cinema-hint-bounce {
 0%, 100% { transform: translateX(-50%) translateY(0); }
 50% { transform: translateX(-50%) translateY(6px); }
}

/*  */
@media (max-width: 768px) {
 .soa-cinema__brand {
  left: 20px;
  top: 20px;
 }
 .soa-cinema__brand-text {
  font-size: 9px;
  letter-spacing: 0.3em;
 }
 .soa-cinema__phase {
  right: 20px;
  gap: 20px;
 }
 .soa-cinema__phase-label {
  display: none;
 }
 .soa-cinema__heading {
  font-size: clamp(28px, 9vw, 48px);
 }
 .soa-cinema__subtitle {
  font-size: 12px;
  line-height: 1.8;
 }
}

/* =============================================================
 * 48. v1.9.86 — Edit UI ("EDITING IN MOTION")
 *  UI
 * =========================================================== */

.soa-edit-stage .soa-cinema__heading {
 /*  UI UI  */
 opacity: 0 !important;
 visibility: hidden !important;
}

.edit-ui {
 position: fixed;
 top: 0; left: 0;
 width: 100vw;
 height: 100vh;
 height: 100svh;
 z-index: 5;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.6s, visibility 0.6s;
 display: flex;
 flex-direction: column;
 background: linear-gradient(180deg, #0a141d 0%, #06111c 100%);
 color: #b8a578;
 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Noto Sans JP", sans-serif;
 font-size: 11px;
 letter-spacing: 0.02em;
 pointer-events: none;
 /* v1.9.91:  */
 overflow: hidden;
 box-sizing: border-box;
}
.soa-cinema.is-active .edit-ui {
 opacity: 1;
 visibility: visible;
}

/* ===  === */
.edit-ui__toolbar {
 display: flex;
 align-items: center;
 gap: 18px;
 padding: 10px 24px;
 background: rgba(10, 20, 29, 0.95);
 border-bottom: 1px solid rgba(212, 178, 122, 0.18);
 flex-shrink: 0;
}
.edit-ui__app-name {
 color: #d4b27a;
 font-weight: 600;
 letter-spacing: 0.25em;
 font-size: 11px;
}
.edit-ui__sep {
 width: 1px;
 height: 14px;
 background: rgba(212, 178, 122, 0.3);
}
.edit-ui__menu {
 color: #8a7960;
 font-size: 10px;
 letter-spacing: 0.15em;
 transition: color 0.2s;
}
.edit-ui__menu:hover {
 color: #d4b27a;
}
.edit-ui__toolbar-right {
 margin-left: auto;
 display: flex;
 gap: 18px;
 align-items: center;
}
.edit-ui__indicator {
 color: #e25555;
 font-size: 10px;
 letter-spacing: 0.15em;
 animation: edit-blink 1.5s ease-in-out infinite;
}
@keyframes edit-blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.4; }
}
.edit-ui__timecode {
 color: #d4b27a;
 font-size: 11px;
 letter-spacing: 0.12em;
 background: rgba(212, 178, 122, 0.08);
 padding: 3px 10px;
 border-radius: 2px;
}

/* ===  === */
.edit-ui__viewport {
 display: grid;
 grid-template-columns: 1fr 1.6fr 1fr;
 gap: 8px;
 padding: 8px;
 flex: 1;
 min-height: 0;
 /* v1.9.89:  */
 max-height: calc(100vh - 470px);
}

.edit-panel {
 display: flex;
 flex-direction: column;
 background: rgba(10, 17, 25, 0.85);
 border: 1px solid rgba(212, 178, 122, 0.18);
 border-radius: 2px;
 overflow: hidden;
 transform: translateY(20px) scale(0.96);
 opacity: 0;
 transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s, filter 0.8s;
 transform-style: preserve-3d;
 box-shadow:
  0 20px 40px rgba(0, 0, 0, 0.6),
  0 0 60px rgba(212, 178, 122, 0.05);
}
/* v1.9.90: 3D rotateY  */
.soa-cinema.is-active .edit-panel--source {
 transition-delay: 0.0s;
 transform: translateY(0) scale(1);
 opacity: 1;
 filter: blur(0.3px);
}
.soa-cinema.is-active .edit-panel--program {
 transition-delay: 0.1s;
 transform: translateY(0) scale(1.01);
 opacity: 1;
 filter: blur(0);
 z-index: 2;
 box-shadow:
  0 20px 50px rgba(0, 0, 0, 0.7),
  0 0 60px rgba(212, 178, 122, 0.08);
}
.soa-cinema.is-active .edit-panel--effects {
 transition-delay: 0.2s;
 transform: translateY(0) scale(1);
 opacity: 1;
 filter: blur(0.3px);
}

.edit-panel__header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 6px 12px;
 background: rgba(212, 178, 122, 0.06);
 border-bottom: 1px solid rgba(212, 178, 122, 0.15);
 flex-shrink: 0;
}
.edit-panel__title {
 color: #d4b27a;
 font-size: 9px;
 letter-spacing: 0.3em;
 font-weight: 600;
}
.edit-panel__badge {
 color: #b8a578;
 font-size: 9px;
 letter-spacing: 0.15em;
 background: rgba(212, 178, 122, 0.1);
 padding: 2px 8px;
 border-radius: 2px;
}
.edit-panel__badge--live {
 color: #e25555;
 background: rgba(226, 85, 85, 0.1);
}

.edit-panel__screen {
 flex: 1;
 background: #000;
 position: relative;
 overflow: hidden;
 min-height: 0;
}

.preview-content {
 position: absolute;
 inset: 0;
}
.preview-canvas {
 width: 100% !important;
 height: 100% !important;
 display: block;
}
.preview-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 padding: 8px 12px;
 pointer-events: none;
}
.preview-overlay__tag {
 color: #d4b27a;
 font-size: 9px;
 letter-spacing: 0.2em;
 background: rgba(0,0,0,0.4);
 padding: 2px 6px;
 border-radius: 2px;
}
.preview-overlay__tc {
 color: #e25555;
 font-size: 9px;
 letter-spacing: 0.15em;
 background: rgba(0,0,0,0.4);
 padding: 2px 6px;
 border-radius: 2px;
}
.preview-overlay--center {
 justify-content: center;
 align-items: center;
}
.preview-crosshair {
 width: 50px;
 height: 50px;
 border: 1px solid rgba(212, 178, 122, 0.4);
 position: relative;
}
.preview-crosshair::before,
.preview-crosshair::after {
 content: "";
 position: absolute;
 background: rgba(212, 178, 122, 0.4);
}
.preview-crosshair::before {
 left: 50%; top: 0; bottom: 0;
 width: 1px;
}
.preview-crosshair::after {
 top: 50%; left: 0; right: 0;
 height: 1px;
}

.edit-panel__transport {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 6px 12px;
 background: rgba(0,0,0,0.4);
 border-top: 1px solid rgba(212, 178, 122, 0.1);
 flex-shrink: 0;
}
.transport-btn {
 color: #b8a578;
 font-size: 13px;
 cursor: pointer;
 transition: color 0.2s;
}
.transport-btn:hover { color: #d4b27a; }
.transport-spacer { flex: 1; }
.transport-time {
 color: #d4b27a;
 font-size: 10px;
 letter-spacing: 0.1em;
}

/* ===  === */
.edit-panel__screen--scopes {
 display: grid;
 grid-template-rows: 1fr 1fr;
 gap: 6px;
 padding: 6px;
}
.scope {
 background: #000;
 border: 1px solid rgba(212, 178, 122, 0.15);
 position: relative;
 overflow: hidden;
}
.scope canvas {
 width: 100% !important;
 height: 100% !important;
}
.scope__label {
 position: absolute;
 top: 4px;
 left: 6px;
 color: rgba(212, 178, 122, 0.6);
 font-size: 8px;
 letter-spacing: 0.25em;
}

/* ===  === */
.edit-ui__timeline {
 flex-shrink: 0;
 background: rgba(10, 17, 25, 0.95);
 border-top: 1px solid rgba(212, 178, 122, 0.18);
 padding: 8px 12px 12px;
 position: relative;
 transform: translateY(20px);
 opacity: 0;
 transition: transform 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s 0.3s;
}
.soa-cinema.is-active .edit-ui__timeline {
 transform: translateY(0);
 opacity: 1;
}

.timeline__header {
 display: flex;
 align-items: center;
 gap: 20px;
 margin-bottom: 6px;
}
.timeline__title {
 color: #d4b27a;
 font-size: 9px;
 letter-spacing: 0.3em;
 font-weight: 600;
}
.timeline__ruler {
 flex: 1;
 position: relative;
 height: 10px;
 margin-left: 36px;
}
.timeline__ruler-tick {
 position: absolute;
 color: rgba(212, 178, 122, 0.5);
 font-size: 8px;
 letter-spacing: 0.1em;
 border-left: 1px solid rgba(212, 178, 122, 0.25);
 padding-left: 3px;
 top: 0;
}

.timeline__tracks {
 display: flex;
 flex-direction: column;
 gap: 3px;
}
.timeline-track {
 display: flex;
 align-items: center;
 gap: 8px;
 height: 22px;
}
.timeline-track__label {
 width: 28px;
 font-size: 9px;
 color: #d4b27a;
 text-align: center;
 letter-spacing: 0.1em;
 flex-shrink: 0;
}
.timeline-track__lane {
 flex: 1;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 border: 1px solid rgba(212, 178, 122, 0.08);
 position: relative;
 overflow: hidden;
}

.clip {
 position: absolute;
 top: 1px; bottom: 1px;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
 overflow: hidden;
}
.clip::before {
 /* v1.9.87:  */
 content: "";
 position: absolute;
 inset: 0;
 background: repeating-linear-gradient(90deg,
  transparent 0 6px,
  rgba(255, 255, 255, 0.06) 6px 8px
 );
 animation: clip-scroll 3s linear infinite;
}
@keyframes clip-scroll {
 from { transform: translateX(0); }
 to { transform: translateX(40px); }
}
.soa-cinema.is-active .clip {
 transform: scaleX(1);
}
/* IMPORT  V1 */
.timeline-track--video:nth-of-type(3) .clip { transition-delay: 0.4s; }
.timeline-track--video:nth-of-type(2) .clip { transition-delay: 0.7s; }
.timeline-track--text .clip { transition-delay: 1.0s; }
.timeline-track--audio:nth-of-type(4) .clip { transition-delay: 1.3s; }
.timeline-track--audio:nth-of-type(5) .clip { transition-delay: 1.5s; }

.clip--video {
 background: linear-gradient(180deg, rgba(212, 178, 122, 0.4) 0%, rgba(212, 178, 122, 0.2) 100%);
 border: 1px solid rgba(212, 178, 122, 0.5);
}
.clip--bg1 {
 background:
  linear-gradient(180deg, rgba(212, 178, 122, 0.4) 0%, rgba(212, 178, 122, 0.2) 100%),
  repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,0.15) 4px 5px);
}
.clip--bg2 {
 background:
  linear-gradient(180deg, rgba(180, 140, 95, 0.4) 0%, rgba(180, 140, 95, 0.2) 100%),
  repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.15) 6px 7px);
}
.clip--text {
 background: rgba(95, 130, 180, 0.35);
 border: 1px solid rgba(95, 130, 180, 0.6);
 color: #e0eef5;
 font-size: 9px;
 display: flex;
 align-items: center;
 padding-left: 6px;
 letter-spacing: 0.1em;
}
.clip--audio {
 background: rgba(80, 120, 95, 0.25);
 border: 1px solid rgba(80, 160, 110, 0.45);
}
.clip--audio canvas {
 width: 100% !important;
 height: 100% !important;
}
.clip--audio2 {
 background: rgba(90, 80, 130, 0.25);
 border: 1px solid rgba(130, 110, 180, 0.45);
}

.timeline__playhead {
 position: absolute;
 top: 25px; bottom: 0;
 left: 44px;
 width: 1px;
 background: #e25555;
 box-shadow:
  0 0 8px rgba(226, 85, 85, 0.9),
  0 0 24px rgba(226, 85, 85, 0.4),
  0 0 40px rgba(255, 140, 80, 0.25);
 pointer-events: none;
 animation: playhead-pulse 1.2s ease-in-out infinite;
}
@keyframes playhead-pulse {
 0%, 100% {
  box-shadow:
   0 0 8px rgba(226, 85, 85, 0.9),
   0 0 24px rgba(226, 85, 85, 0.4),
   0 0 40px rgba(255, 140, 80, 0.25);
 }
 50% {
  box-shadow:
   0 0 12px rgba(255, 100, 100, 1.0),
   0 0 32px rgba(255, 100, 100, 0.55),
   0 0 60px rgba(255, 160, 100, 0.35);
 }
}
.timeline__playhead::before {
 content: "";
 position: absolute;
 top: 0;
 left: -4px;
 width: 9px;
 height: 9px;
 background: #e25555;
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 filter: drop-shadow(0 0 4px rgba(226, 85, 85, 0.8));
}

/*  */
@media (max-width: 768px) {
 .edit-ui__viewport {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1.4fr 1fr;
 }
 .edit-ui__menu {
  display: none;
 }
 .edit-ui__menu:nth-of-type(-n+3) {
  display: inline;
 }
 .timeline__ruler-tick:nth-of-type(odd) { display: none; }
}

/* =============================================================
 * 49. v1.9.88 — Inspector + Color Wheels ( UI)
 * Final Cut Pro + DaVinci Resolve 
 * =========================================================== */

/*  timeline  v1.9.89  */
.edit-ui__timeline {
 display: flex !important;
 flex-direction: column;
 flex-shrink: 0;
 background: rgba(10, 17, 25, 0.95);
 border-top: 1px solid rgba(212, 178, 122, 0.18);
 border-bottom: 1px solid rgba(212, 178, 122, 0.18);
 padding: 6px 12px 8px;
 height: 150px;
 position: relative;
 transform: translateY(20px);
 opacity: 0;
 transition: transform 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s 0.3s;
}
.soa-cinema.is-active .edit-ui__timeline {
 transform: translateY(0);
 opacity: 1;
}
.timeline__tc-display {
 color: #e25555;
 font-size: 10px;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.08em;
 margin-left: auto;
 margin-right: 12px;
}

.edit-ui__bottom {
 display: grid;
 grid-template-columns: 380px 1fr;
 gap: 8px;
 padding: 8px;
 height: 250px;
 background: linear-gradient(180deg, rgba(20, 24, 30, 0.95), rgba(10, 14, 20, 0.98));
 border-top: 1px solid rgba(212, 178, 122, 0.18);
 flex-shrink: 0;
 transform: translateY(20px);
 opacity: 0;
 transition: transform 0.8s 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s 0.5s;
 font-family: -apple-system, "Helvetica Neue", sans-serif;
}
.soa-cinema.is-active .edit-ui__bottom {
 transform: translateY(0);
 opacity: 1;
}

/* === === */
.inspector-panel {
 background: #232628;
 border: 1px solid #3a3d40;
 border-radius: 4px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 font-size: 11px;
 color: #d4d4d6;
}
.inspector-panel__header {
 background: linear-gradient(180deg, #3a3d40, #2c2f31);
 padding: 5px 10px;
 border-bottom: 1px solid #1a1c1e;
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #c8c8ca;
 font-size: 10px;
 font-weight: 500;
}
.inspector-panel__app {
 color: #d4b27a;
 letter-spacing: 0.1em;
}
.inspector-panel__status {
 color: #8a8a8c;
}

.inspector-section {
 border-bottom: 1px solid #1a1c1e;
 padding: 4px 0 6px;
}
.inspector-section__title {
 padding: 5px 10px 3px;
 color: #b8b8ba;
 font-weight: 500;
 font-size: 11px;
 display: flex;
 align-items: center;
 gap: 6px;
}
.inspector-section__reset {
 margin-left: auto;
 color: #8a8a8c;
 cursor: pointer;
 font-size: 11px;
}
.check {
 display: inline-flex;
 width: 13px;
 height: 13px;
 background: #4a8fd4;
 color: #fff;
 border-radius: 2px;
 font-size: 9px;
 align-items: center;
 justify-content: center;
}
.inspector-row {
 display: grid;
 grid-template-columns: 95px 1fr 60px 14px;
 align-items: center;
 gap: 6px;
 padding: 3px 10px;
 font-size: 10.5px;
}
.inspector-row--xy {
 grid-template-columns: 95px 1fr 14px;
}
.inspector-row__label {
 color: #b8b8ba;
}
.inspector-row__value {
 color: #d4d4d6;
 background: #1a1c1e;
 padding: 2px 6px;
 border-radius: 2px;
 border: 1px solid #3a3d40;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 10px;
}
.caret {
 color: #6a6a6c;
 font-size: 8px;
}
.inspector-row__slider {
 position: relative;
 height: 4px;
 background: #1a1c1e;
 border-radius: 2px;
 border: 1px solid #0d0e10;
 overflow: visible;
}
.slider-fill {
 position: absolute;
 left: 0; top: 0; bottom: 0;
 background: #4a8fd4;
 border-radius: 2px;
 transition: width 0.4s ease-out;
}
.slider-thumb {
 position: absolute;
 top: 50%;
 width: 10px;
 height: 10px;
 background: linear-gradient(180deg, #d8d8da, #a0a0a2);
 border: 1px solid #2a2c2e;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 1px 2px rgba(0,0,0,0.5);
 transition: left 0.4s ease-out;
}
.inspector-row__num {
 color: #d4d4d6;
 text-align: right;
 font-variant-numeric: tabular-nums;
 font-size: 10.5px;
}
.inspector-row__keyframe {
 width: 10px;
 height: 10px;
 background: transparent;
 border: 1px solid #5a5a5c;
 transform: rotate(45deg);
 margin: 0 2px;
}
.inspector-row__keyframe.is-set {
 background: #d4b27a;
 border-color: #d4b27a;
}
.inspector-row__xy {
 display: flex;
 gap: 4px;
 align-items: center;
 flex-wrap: wrap;
}
.xy-axis {
 color: #8a8a8c;
 font-size: 9.5px;
 width: 12px;
}
.xy-val {
 color: #d4d4d6;
 background: #1a1c1e;
 padding: 1px 6px;
 border-radius: 2px;
 border: 1px solid #3a3d40;
 font-size: 10px;
 min-width: 38px;
 text-align: right;
 font-variant-numeric: tabular-nums;
}

/* === === */
.color-panel {
 background: #1d1f21;
 border: 1px solid #3a3d40;
 border-radius: 4px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 color: #d4d4d6;
}
.color-panel__header {
 background: linear-gradient(180deg, #2c2f31, #232628);
 padding: 5px 12px;
 border-bottom: 1px solid #0d0e10;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 11px;
 color: #d4d4d6;
}
.color-panel__title {
 font-weight: 500;
 letter-spacing: 0.04em;
}
.color-panel__icons {
 display: flex;
 gap: 8px;
 color: #8a8a8c;
 font-size: 11px;
}
.cp-icon { cursor: pointer; }

.color-panel__topbar,
.color-panel__bottombar {
 background: #1a1c1e;
 padding: 5px 12px;
 display: flex;
 gap: 16px;
 font-size: 10px;
 border-bottom: 1px solid #0d0e10;
}
.color-panel__bottombar {
 border-bottom: none;
 border-top: 1px solid #0d0e10;
}
.cp-stat {
 display: flex;
 gap: 5px;
 align-items: center;
}
.cp-stat-icon {
 background: #4a8fd4;
 color: #fff;
 width: 14px;
 height: 14px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 2px;
 font-size: 9px;
 font-weight: 600;
}
.cp-stat-label {
 color: #8a8a8c;
}
.cp-stat-val {
 color: #d4d4d6;
 font-variant-numeric: tabular-nums;
 min-width: 36px;
 text-align: right;
}

/* === 4  === */
.color-wheels {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 flex: 1;
 padding: 0;
 min-height: 0;
}
.color-wheel-item {
 display: flex;
 flex-direction: column;
 padding: 8px 8px 4px;
 border-right: 1px solid #0d0e10;
 min-height: 0;
}
.color-wheel-item:last-child { border-right: none; }
.color-wheel-item__title {
 color: #b8b8ba;
 font-size: 10.5px;
 text-align: center;
 margin-bottom: 4px;
 display: flex;
 justify-content: center;
 gap: 8px;
 align-items: center;
}
.cw-reset {
 color: #6a6a6c;
 font-size: 11px;
 cursor: pointer;
}

.color-wheel-item__ring {
 position: relative;
 width: 100%;
 aspect-ratio: 1 / 1;
 max-height: 140px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: center;
}
.color-wheel-canvas {
 width: 100% !important;
 height: 100% !important;
 display: block;
 border-radius: 50%;
 box-shadow:
  inset 0 0 12px rgba(0,0,0,0.6),
  0 2px 6px rgba(0,0,0,0.4);
}
.color-wheel-puck {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 10px;
 height: 10px;
 background: #fff;
 border: 1.5px solid #2a2c2e;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
 box-shadow: 0 1px 3px rgba(0,0,0,0.8);
 transition: left 0.6s ease-out, top 0.6s ease-out;
}
.color-wheel-luma {
 position: absolute;
 left: -8px;
 right: -8px;
 bottom: -2px;
 height: 4px;
 background: linear-gradient(90deg, #000, #fff);
 border: 1px solid #0d0e10;
 border-radius: 2px;
}
.cw-luma-thumb {
 position: absolute;
 top: 50%;
 width: 8px;
 height: 8px;
 background: linear-gradient(180deg, #d8d8da, #a0a0a2);
 border: 1px solid #2a2c2e;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 1px 2px rgba(0,0,0,0.5);
 transition: left 0.5s ease-out;
}

.cw-rgb {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-top: 10px;
 font-size: 9.5px;
 font-variant-numeric: tabular-nums;
}
.cw-rgb-val {
 color: #d4d4d6;
 text-align: center;
 padding: 2px;
 background: #1a1c1e;
 border-radius: 1px;
}
.cw-rgb-val--r { color: #e88; }
.cw-rgb-val--g { color: #8e8; }
.cw-rgb-val--b { color: #88f; }

.cw-bar-rgb {
 display: flex;
 flex-direction: column;
 gap: 1px;
 margin-top: 4px;
}
.cw-bar {
 height: 2px;
 border-radius: 1px;
 width: 50%;
 transition: width 0.5s ease-out;
}
.cw-bar--r { background: linear-gradient(90deg, #c44, #e88); }
.cw-bar--g { background: linear-gradient(90deg, #4a4, #8e8); }
.cw-bar--b { background: linear-gradient(90deg, #44c, #88f); }

/*  */
@media (max-width: 1024px) {
 .edit-ui__bottom {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  height: auto;
 }
 .inspector-panel { max-height: 200px; overflow-y: auto; }
}
@media (max-width: 768px) {
 .color-wheels { grid-template-columns: repeat(2, 1fr); }
 .color-panel__topbar, .color-panel__bottombar {
  flex-wrap: wrap;
  gap: 8px;
  font-size: 9px;
 }
}

/* =============================================================
 * 50. v1.9.91 — Design Refinement ()
 * 
 * =========================================================== */

/* ===  → SF Pro /  === */
.edit-ui,
.edit-ui * {
 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
  "Helvetica Neue", "Noto Sans JP", sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.edit-ui__timecode,
.transport-time,
.cp-stat-val,
.cw-rgb-val,
.inspector-row__num,
.xy-val,
.timeline__tc-display,
.timeline__ruler-tick {
 font-family: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0;
}

/* ===  === */
.edit-ui__toolbar {
 padding: 8px 20px !important;
 background: linear-gradient(180deg,
  rgba(20, 26, 34, 0.98) 0%,
  rgba(16, 22, 30, 0.98) 100%) !important;
 border-bottom: 1px solid rgba(212, 178, 122, 0.12) !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 -1px 0 rgba(0,0,0,0.5) inset;
 gap: 14px !important;
 font-size: 10.5px !important;
}
.edit-ui__app-name {
 color: #d4b27a !important;
 font-weight: 500 !important;
 letter-spacing: 0.18em !important;
 font-size: 10px !important;
}
.edit-ui__menu {
 color: #6b7380 !important;
 font-size: 10.5px !important;
 letter-spacing: 0.04em !important;
 font-weight: 400 !important;
 transition: color 0.15s ease !important;
}
.edit-ui__sep {
 background: rgba(212, 178, 122, 0.18) !important;
}
.edit-ui__indicator {
 font-size: 9.5px !important;
 letter-spacing: 0.1em !important;
}
.edit-ui__timecode {
 font-size: 10.5px !important;
 letter-spacing: 0 !important;
 background: rgba(212, 178, 122, 0.06) !important;
 border: 1px solid rgba(212, 178, 122, 0.15);
 padding: 3px 9px !important;
 color: #d4b27a !important;
}

/* ===  gap  === */
.edit-ui__viewport {
 padding: 10px 14px !important;
 gap: 10px !important;
 grid-template-columns: 1fr 1.5fr 1fr !important;
}

/* ===  === */
.edit-panel {
 background: rgba(14, 19, 26, 0.92) !important;
 border: 1px solid rgba(212, 178, 122, 0.10) !important;
 border-radius: 3px !important;
 box-shadow:
  0 8px 24px rgba(0, 0, 0, 0.45),
  0 0 0 1px rgba(255, 255, 255, 0.015) inset !important;
}
.soa-cinema.is-active .edit-panel--program {
 box-shadow:
  0 16px 40px rgba(0, 0, 0, 0.7),
  0 0 60px rgba(212, 178, 122, 0.06),
  0 0 0 1px rgba(212, 178, 122, 0.18) inset !important;
}
.edit-panel__header {
 padding: 7px 12px !important;
 background: linear-gradient(180deg,
  rgba(212, 178, 122, 0.04) 0%,
  rgba(212, 178, 122, 0.02) 100%) !important;
 border-bottom: 1px solid rgba(212, 178, 122, 0.10) !important;
}
.edit-panel__title {
 font-size: 9px !important;
 letter-spacing: 0.28em !important;
 font-weight: 600 !important;
 color: #d4b27a !important;
}
.edit-panel__badge {
 font-size: 8.5px !important;
 letter-spacing: 0.10em !important;
 padding: 2px 7px !important;
 border-radius: 8px !important;
 background: rgba(212, 178, 122, 0.07) !important;
 color: #a89570 !important;
 font-weight: 500;
}
.edit-panel__badge--live {
 background: rgba(226, 85, 85, 0.10) !important;
 color: #e25555 !important;
}
.preview-overlay__tag,
.preview-overlay__tc {
 font-size: 8.5px !important;
 letter-spacing: 0.18em !important;
 padding: 3px 7px !important;
 background: rgba(0, 0, 0, 0.6) !important;
 border-radius: 2px;
 font-weight: 500;
 backdrop-filter: blur(8px);
}
.edit-panel__transport {
 padding: 6px 12px !important;
 gap: 14px !important;
 background: rgba(0, 0, 0, 0.5) !important;
}
.transport-btn {
 font-size: 11px !important;
 color: #8a7960 !important;
 transition: color 0.2s ease !important;
}
.transport-time {
 font-size: 10px !important;
 color: #b8a578 !important;
 letter-spacing: 0 !important;
}

/* ===  === */
.edit-ui__timeline {
 padding: 10px 18px 12px !important;
 background: linear-gradient(180deg,
  rgba(14, 19, 26, 0.98) 0%,
  rgba(10, 15, 22, 0.98) 100%) !important;
 border-top: 1px solid rgba(212, 178, 122, 0.10) !important;
 border-bottom: 1px solid rgba(212, 178, 122, 0.10) !important;
 height: 145px !important;
}
.timeline__header {
 gap: 24px !important;
 margin-bottom: 8px !important;
}
.timeline__title {
 font-size: 9px !important;
 letter-spacing: 0.30em !important;
 font-weight: 600 !important;
 color: #d4b27a !important;
}
.timeline__tc-display {
 font-size: 9.5px !important;
 color: #e25555 !important;
 letter-spacing: 0.04em !important;
 background: rgba(226, 85, 85, 0.06) !important;
 padding: 2px 7px;
 border-radius: 2px;
 border: 1px solid rgba(226, 85, 85, 0.18);
}
.timeline__ruler-tick {
 font-size: 7.5px !important;
 color: rgba(184, 165, 120, 0.42) !important;
 letter-spacing: 0 !important;
 border-left: 1px solid rgba(212, 178, 122, 0.16) !important;
 padding-left: 4px !important;
 padding-top: 1px;
 font-weight: 400;
}
.timeline-track__label {
 font-size: 8.5px !important;
 color: #d4b27a !important;
 letter-spacing: 0.10em !important;
 font-weight: 600 !important;
 width: 24px !important;
}
.timeline-track__lane {
 background: rgba(0, 0, 0, 0.4) !important;
 border: 1px solid rgba(212, 178, 122, 0.06) !important;
 border-radius: 2px !important;
}
.clip {
 border-radius: 2px !important;
}
.clip--text {
 font-size: 8.5px !important;
 letter-spacing: 0.10em !important;
 font-weight: 600 !important;
}

/* ===  +  === */
.edit-ui__bottom {
 padding: 12px 14px !important;
 gap: 12px !important;
 height: 235px !important;
 background: linear-gradient(180deg, rgba(16, 22, 30, 0.98), rgba(8, 12, 18, 0.99)) !important;
 border-top: 1px solid rgba(212, 178, 122, 0.10) !important;
}

/*  */
.inspector-panel {
 background: #1a1d20 !important;
 border: 1px solid #2a2d30 !important;
 border-radius: 6px !important;
 box-shadow:
  0 4px 16px rgba(0, 0, 0, 0.5),
  0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}
.inspector-panel__header {
 background: linear-gradient(180deg, #2c2f32 0%, #232629 100%) !important;
 padding: 6px 12px !important;
 font-size: 10px !important;
 letter-spacing: 0.04em !important;
 border-bottom: 1px solid #15171a !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.inspector-panel__app {
 letter-spacing: 0.16em !important;
 font-size: 9.5px !important;
 font-weight: 600 !important;
}
.inspector-panel__status {
 font-size: 10px !important;
 color: #7a7e84 !important;
 font-weight: 400;
}
.inspector-section {
 border-bottom: 1px solid #15171a !important;
 padding: 5px 0 7px !important;
}
.inspector-section__title {
 padding: 6px 12px 4px !important;
 font-size: 10.5px !important;
 font-weight: 500 !important;
 color: #c4c4c6 !important;
 letter-spacing: 0.02em;
}
.inspector-row {
 padding: 4px 12px !important;
 font-size: 10.5px !important;
 gap: 8px !important;
}
.inspector-row__label {
 font-size: 10.5px !important;
 color: #a8a8aa !important;
 font-weight: 400;
}
.inspector-row__value {
 background: #0e1012 !important;
 border: 1px solid #2a2d30 !important;
 border-radius: 3px !important;
 padding: 3px 8px !important;
 font-size: 10px !important;
 color: #d8d8da !important;
}
.inspector-row__slider {
 background: #0e1012 !important;
 border: 1px solid #15171a !important;
 border-radius: 3px !important;
 height: 5px !important;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) inset;
}
.slider-fill {
 background: linear-gradient(180deg, #5a9fe4, #3a7fc4) !important;
 box-shadow: 0 0 4px rgba(90, 159, 228, 0.4);
}
.slider-thumb {
 width: 11px !important;
 height: 11px !important;
 background: radial-gradient(circle at 30% 30%, #f0f0f2, #b0b0b2 70%, #909094) !important;
 border: 1px solid #1a1c1e !important;
 box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.6),
  0 0 0 0.5px rgba(255, 255, 255, 0.1) inset !important;
}
.inspector-row__num {
 font-size: 10px !important;
 color: #d8d8da !important;
 font-weight: 500;
}
.inspector-row__keyframe {
 width: 9px !important;
 height: 9px !important;
 border: 1px solid #5a5a5c !important;
 transition: all 0.3s ease;
}
.xy-val {
 background: #0e1012 !important;
 border: 1px solid #2a2d30 !important;
 border-radius: 3px !important;
 padding: 2px 7px !important;
 font-size: 10px !important;
 color: #d8d8da !important;
 min-width: 42px !important;
 font-weight: 500;
}
.xy-axis {
 font-size: 9.5px !important;
 color: #7a7e84 !important;
 font-weight: 600;
}
.check {
 background: #4a8fd4 !important;
 width: 13px !important;
 height: 13px !important;
 border-radius: 3px !important;
 font-size: 8px !important;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 2px rgba(0,0,0,0.4);
}

/*  */
.color-panel {
 background: #16181b !important;
 border: 1px solid #2a2d30 !important;
 border-radius: 6px !important;
 box-shadow:
  0 4px 16px rgba(0, 0, 0, 0.5),
  0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}
.color-panel__header {
 background: linear-gradient(180deg, #25282b 0%, #1c1f22 100%) !important;
 padding: 6px 14px !important;
 font-size: 11px !important;
 border-bottom: 1px solid #0f1114 !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.color-panel__title {
 font-weight: 500 !important;
 letter-spacing: 0.02em !important;
 color: #d8d8da !important;
}
.cp-icon {
 font-size: 10.5px;
 color: #7a7e84 !important;
}
.color-panel__topbar,
.color-panel__bottombar {
 background: #12141a !important;
 padding: 6px 14px !important;
 gap: 22px !important;
 font-size: 10px !important;
 border-color: #0f1114 !important;
}
.cp-stat-label {
 font-size: 10px !important;
 color: #8a8a8c !important;
 font-weight: 400;
}
.cp-stat-val {
 font-size: 10px !important;
 color: #d8d8da !important;
 font-weight: 500;
 min-width: 32px !important;
}
.cp-stat-icon {
 width: 15px !important;
 height: 15px !important;
 font-size: 9px !important;
 font-weight: 700 !important;
 border-radius: 3px !important;
 background: #4a8fd4 !important;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/*  */
.color-wheel-item {
 padding: 10px 10px 8px !important;
 border-right-color: #0f1114 !important;
}
.color-wheel-item__title {
 font-size: 10.5px !important;
 color: #c4c4c6 !important;
 font-weight: 500 !important;
 margin-bottom: 6px !important;
 letter-spacing: 0.02em;
}
.color-wheel-item__ring {
 max-height: 95px !important;
}
.color-wheel-canvas {
 box-shadow:
  0 0 16px rgba(0, 0, 0, 0.7) inset,
  0 2px 8px rgba(0, 0, 0, 0.5),
  0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}
.color-wheel-puck {
 width: 11px !important;
 height: 11px !important;
 background: radial-gradient(circle at 30% 30%, #ffffff, #d8d8da 70%, #aaaaac) !important;
 border: 1px solid #1a1c1e !important;
 box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.8),
  0 0 0 0.5px rgba(0, 0, 0, 0.3) !important;
}
.color-wheel-luma {
 height: 5px !important;
 border-radius: 3px !important;
 bottom: -4px !important;
 box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.6) inset,
  0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.cw-luma-thumb {
 width: 9px !important;
 height: 9px !important;
 background: radial-gradient(circle at 30% 30%, #f0f0f2, #b0b0b2 70%) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.cw-rgb {
 margin-top: 8px !important;
 gap: 3px !important;
 font-size: 9px !important;
}
.cw-rgb-val {
 padding: 2px 1px !important;
 background: #0e1012 !important;
 border-radius: 2px !important;
 font-weight: 500;
}
.cw-bar-rgb {
 margin-top: 5px !important;
 gap: 1.5px !important;
}
.cw-bar {
 height: 2.5px !important;
 border-radius: 1.5px !important;
 box-shadow: 0 0 3px currentColor;
}
.cw-bar--r { color: #e88; }
.cw-bar--g { color: #8e8; }
.cw-bar--b { color: #88f; }

/* === 1280px  === */
@media (max-width: 1280px) {
 .edit-ui__viewport {
  grid-template-columns: 0.9fr 1.4fr 0.9fr !important;
 }
 .color-panel__topbar,
 .color-panel__bottombar {
  gap: 14px !important;
  font-size: 9.5px !important;
 }
}
@media (max-width: 1024px) {
 .edit-ui__bottom {
  grid-template-columns: 320px 1fr !important;
 }
 .color-wheel-item__ring {
  max-height: 80px !important;
 }
}

/* ===  === */
.soa-cinema__hint {
 z-index: 6 !important;
}
.soa-cinema__hint-text {
 font-size: 9px !important;
 letter-spacing: 0.35em !important;
 color: rgba(212, 178, 122, 0.55) !important;
 font-weight: 500;
}

/* =============================================================
 * 51. v1.9.92 — Brand Statement Section
 * Cinema/Edit UI 
 * =========================================================== */

.soa-brand-statement {
 position: relative;
 padding: 140px 24px 160px;
 background: #06111c;
 color: #f5f3ee;
 overflow: hidden;
 isolation: isolate;
}

/*  */
.soa-brand-statement__bg {
 position: absolute;
 inset: 0;
 z-index: -1;
 pointer-events: none;
}
.bs-glow {
 position: absolute;
 border-radius: 50%;
 filter: blur(120px);
 opacity: 0.18;
}
.bs-glow--1 {
 width: 600px;
 height: 600px;
 top: -180px;
 left: -100px;
 background: radial-gradient(circle, #d4b27a 0%, transparent 70%);
 animation: bs-glow-float-1 18s ease-in-out infinite;
}
.bs-glow--2 {
 width: 500px;
 height: 500px;
 bottom: -150px;
 right: -80px;
 background: radial-gradient(circle, #6688cc 0%, transparent 70%);
 opacity: 0.10;
 animation: bs-glow-float-2 22s ease-in-out infinite;
}
@keyframes bs-glow-float-1 {
 0%, 100% { transform: translate(0, 0); }
 50% { transform: translate(40px, 30px); }
}
@keyframes bs-glow-float-2 {
 0%, 100% { transform: translate(0, 0); }
 50% { transform: translate(-30px, -20px); }
}
.bs-grain {
 position: absolute;
 inset: 0;
 background-image:
  radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
  radial-gradient(circle at 75% 75%, rgba(212, 178, 122, 0.015) 1px, transparent 1px);
 background-size: 3px 3px, 5px 5px;
 opacity: 0.6;
}

.soa-brand-statement__inner {
 max-width: 1200px;
 margin: 0 auto;
 text-align: center;
 position: relative;
}

/* Eyebrow */
.soa-brand-statement__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 18px;
 margin-bottom: 36px;
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.9s ease, transform 0.9s ease;
}
.soa-brand-statement.is-in-view .soa-brand-statement__eyebrow {
 opacity: 1;
 transform: translateY(0);
}
.bs-eyebrow-line {
 width: 48px;
 height: 1px;
 background: linear-gradient(90deg, transparent, #d4b27a, transparent);
}
.bs-eyebrow-text {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 font-size: 11px;
 letter-spacing: 0.42em;
 color: #d4b27a;
 font-weight: 500;
 text-transform: uppercase;
}

/*  */
.soa-brand-statement__heading {
 font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
 font-size: clamp(44px, 7vw, 88px);
 font-weight: 500;
 line-height: 1.25;
 letter-spacing: 0.03em;
 margin: 0 0 32px;
 color: #f5f3ee;
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 1.2s ease 0.2s, transform 1.2s ease 0.2s;
}
.soa-brand-statement.is-in-view .soa-brand-statement__heading {
 opacity: 1;
 transform: translateY(0);
}

/*  */
.soa-brand-statement__sub {
 font-family: var(--font-sans, "Noto Sans JP", sans-serif);
 font-size: clamp(15px, 1.4vw, 18px);
 line-height: 2.0;
 color: rgba(245, 243, 238, 0.72);
 max-width: 640px;
 margin: 0 auto 96px;
 letter-spacing: 0.02em;
 font-weight: 400;
 opacity: 0;
 transform: translateY(15px);
 transition: opacity 1.0s ease 0.4s, transform 1.0s ease 0.4s;
}
.soa-brand-statement.is-in-view .soa-brand-statement__sub {
 opacity: 1;
 transform: translateY(0);
}

/* 3 01 / 02 / 03 */
.soa-brand-statement__pillars {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 max-width: 1100px;
 margin: 0 auto;
 border-top: 1px solid rgba(212, 178, 122, 0.18);
 padding-top: 60px;
}
.bs-pillar {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 padding: 0 32px;
 position: relative;
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 1.0s ease, transform 1.0s ease;
}
.bs-pillar:not(:last-child)::after {
 content: "";
 position: absolute;
 right: 0;
 top: 8px;
 bottom: 8px;
 width: 1px;
 background: linear-gradient(180deg, transparent, rgba(212, 178, 122, 0.22), transparent);
}
.soa-brand-statement.is-in-view .bs-pillar { opacity: 1; transform: translateY(0); }
.soa-brand-statement.is-in-view .bs-pillar:nth-child(1) { transition-delay: 0.6s; }
.soa-brand-statement.is-in-view .bs-pillar:nth-child(2) { transition-delay: 0.75s; }
.soa-brand-statement.is-in-view .bs-pillar:nth-child(3) { transition-delay: 0.9s; }

.bs-pillar__num {
 font-family: ui-monospace, "SF Mono", "Menlo", monospace;
 font-size: 12px;
 letter-spacing: 0.20em;
 color: #d4b27a;
 font-weight: 500;
}
.bs-pillar__title {
 font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
 font-size: 26px;
 font-weight: 500;
 color: #f5f3ee;
 letter-spacing: 0.04em;
}
.bs-pillar__desc {
 font-family: var(--font-sans, "Noto Sans JP", sans-serif);
 font-size: 13px;
 line-height: 1.85;
 color: rgba(245, 243, 238, 0.60);
 max-width: 240px;
 font-weight: 400;
 letter-spacing: 0.02em;
}
.bs-pillar--center .bs-pillar__num {
 color: #f5f3ee;
}
.bs-pillar--center .bs-pillar__title {
 color: #d4b27a;
}

/*  */
@media (max-width: 768px) {
 .soa-brand-statement {
  padding: 90px 20px 100px;
 }
 .soa-brand-statement__sub {
  margin-bottom: 60px;
 }
 .soa-brand-statement__pillars {
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 40px;
 }
 .bs-pillar {
  padding: 0;
 }
 .bs-pillar:not(:last-child)::after {
  display: none;
 }
 .bs-eyebrow-line {
  width: 28px;
 }
 .bs-eyebrow-text {
  font-size: 10px;
  letter-spacing: 0.32em;
 }
}

/*  is-in-view JS  */

/* =============================================================
 * 52. v1.9.93 — Works Card Enhancements
 * 
 * =========================================================== */

.soa-works-card__image {
 position: relative;
}
.soa-works-card__play-badge {
 position: absolute;
 bottom: 14px;
 left: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 background: rgba(212, 178, 122, 0.92);
 color: #06111c;
 border-radius: 50%;
 backdrop-filter: blur(8px);
 box-shadow:
  0 4px 16px rgba(0, 0, 0, 0.4),
  0 0 0 1px rgba(255, 255, 255, 0.15) inset;
 transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.soa-works-card:hover .soa-works-card__play-badge {
 transform: scale(1.12);
 background: #d4b27a;
}
.soa-works-card__play-badge svg {
 margin-left: 2px;
}

.soa-works-card__result-badge {
 position: absolute;
 top: 14px;
 right: 14px;
 display: inline-flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 1px;
 padding: 6px 12px;
 background: linear-gradient(135deg, rgba(212, 178, 122, 0.95) 0%, rgba(180, 140, 95, 0.95) 100%);
 color: #06111c;
 border-radius: 4px;
 box-shadow:
  0 4px 12px rgba(0, 0, 0, 0.35),
  0 0 0 1px rgba(255, 255, 255, 0.18) inset;
 backdrop-filter: blur(4px);
}
.soa-works-card__result-badge .result-label {
 font-size: 9.5px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: rgba(6, 17, 28, 0.75);
 font-weight: 600;
}
.soa-works-card__result-badge .result-value {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: 0.02em;
 color: #06111c;
 font-variant-numeric: tabular-nums;
}

.soa-works-card__client {
 font-size: 12px;
 color: #b58a4a;
 margin: 4px 0 0;
 font-weight: 500;
 letter-spacing: 0.04em;
}
.soa-works-card__year {
 color: rgba(245, 243, 238, 0.55);
 font-weight: 400;
 font-size: 11px;
}

/* =============================================================
 * 53. v1.9.98 — Standard Page Template & Contact Form
 *      
 * =========================================================== */

.soa-page {
	background: #06111c;
	color: #f5f3ee;
	min-height: 100vh;
}

/* ============  ============ */
.soa-page-hero {
	position: relative;
	padding: 180px 24px 100px;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.soa-page-hero--has-image {
	padding-top: 220px;
	padding-bottom: 140px;
}
.soa-page-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.soa-page-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.soa-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 17, 28, 0.55) 0%, rgba(6, 17, 28, 0.85) 100%);
	z-index: -1;
}
.soa-page-hero__inner {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}
.soa-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}
.soa-page-hero__eyebrow-line {
	width: 40px;
	height: 1px;
	background: #d4b27a;
}
.soa-page-hero__eyebrow-text {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.40em;
	color: #d4b27a;
	font-weight: 500;
	text-transform: uppercase;
}
.soa-page-hero__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 500;
	line-height: 1.30;
	letter-spacing: 0.03em;
	margin: 0 0 24px;
	color: #f5f3ee;
}
.soa-page-hero__lead {
	font-family: var(--font-sans, "Noto Sans JP", sans-serif);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 2.0;
	color: rgba(245, 243, 238, 0.75);
	max-width: 640px;
	margin: 0 auto;
	letter-spacing: 0.02em;
}

/* ============  ============ */
.soa-page-content {
	padding: 80px 24px 100px;
}
.soa-page-content__inner {
	max-width: 880px;
	margin: 0 auto;
	color: rgba(245, 243, 238, 0.86);
	font-size: 15px;
	line-height: 2.0;
}
.soa-page-content__inner h2 {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: 30px;
	color: #f5f3ee;
	margin: 56px 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(212, 178, 122, 0.22);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.soa-page-content__inner h3 {
	font-size: 22px;
	color: #d4b27a;
	margin: 40px 0 14px;
	font-weight: 600;
}
.soa-page-content__inner p {
	margin: 0 0 18px;
}
.soa-page-content__inner a {
	color: #d4b27a;
	text-decoration: underline;
	text-decoration-color: rgba(212, 178, 122, 0.35);
	text-underline-offset: 3px;
}
.soa-page-content__inner a:hover {
	color: #e8c690;
	text-decoration-color: #e8c690;
}
.soa-page-content__inner ul,
.soa-page-content__inner ol {
	margin: 0 0 18px;
	padding-left: 24px;
}
.soa-page-content__inner li {
	margin-bottom: 6px;
}

/* ============  CTA ============ */
.soa-page-cta {
	padding: 100px 24px 120px;
	background: linear-gradient(180deg, rgba(6, 17, 28, 1) 0%, rgba(12, 26, 40, 1) 100%);
	border-top: 1px solid rgba(212, 178, 122, 0.18);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.soa-page-cta::before {
	content: "";
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(212, 178, 122, 0.10), transparent 70%);
	filter: blur(80px);
	z-index: 0;
}
.soa-page-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.soa-page-cta__title {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #f5f3ee;
	margin: 0 0 20px;
}
.soa-page-cta__lead {
	color: rgba(245, 243, 238, 0.68);
	font-size: 15px;
	line-height: 1.85;
	margin: 0 0 36px;
}
.soa-page-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 40px;
	background: linear-gradient(135deg, #d4b27a 0%, #b58a4a 100%);
	color: #06111c;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow:
		0 8px 24px rgba(212, 178, 122, 0.30),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.soa-page-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow:
		0 12px 32px rgba(212, 178, 122, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.soa-page-cta__btn-arrow {
	font-size: 18px;
	transition: transform 0.3s ease;
}
.soa-page-cta__btn:hover .soa-page-cta__btn-arrow {
	transform: translateX(4px);
}

/* ============  ============ */
.soa-contact-form-wrap {
	max-width: 720px;
	margin: 40px auto;
}
.soa-contact-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: rgba(255, 255, 255, 0.02);
	padding: 36px 32px;
	border: 1px solid rgba(212, 178, 122, 0.15);
	border-radius: 8px;
}
.soa-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.soa-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.soa-contact-form__label {
	font-size: 13px;
	font-weight: 500;
	color: rgba(245, 243, 238, 0.85);
	letter-spacing: 0.02em;
}
.soa-contact-form__required {
	color: #d4b27a;
	font-weight: 700;
	margin-left: 4px;
}
.soa-contact-form input[type="text"],
.soa-contact-form input[type="email"],
.soa-contact-form input[type="tel"],
.soa-contact-form select,
.soa-contact-form textarea {
	width: 100%;
	padding: 11px 14px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(212, 178, 122, 0.22);
	border-radius: 4px;
	color: #f5f3ee;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.soa-contact-form input:focus,
.soa-contact-form select:focus,
.soa-contact-form textarea:focus {
	outline: none;
	border-color: #d4b27a;
	box-shadow: 0 0 0 2px rgba(212, 178, 122, 0.15);
}
.soa-contact-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.7;
}
.soa-contact-form select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4b27a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	appearance: none;
	-webkit-appearance: none;
}
.soa-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: rgba(245, 243, 238, 0.75);
	line-height: 1.7;
	cursor: pointer;
}
.soa-contact-form__consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: #d4b27a;
	margin-top: 2px;
}
.soa-contact-form__consent a {
	color: #d4b27a;
	text-decoration: underline;
}
.soa-contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 36px;
	background: linear-gradient(135deg, #d4b27a 0%, #b58a4a 100%);
	color: #06111c;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow:
		0 6px 18px rgba(212, 178, 122, 0.30),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	align-self: flex-start;
	margin-top: 8px;
}
.soa-contact-form__submit:hover {
	transform: translateY(-2px);
	box-shadow:
		0 10px 28px rgba(212, 178, 122, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.soa-contact-form__arrow {
	transition: transform 0.3s ease;
}
.soa-contact-form__submit:hover .soa-contact-form__arrow {
	transform: translateX(4px);
}

/*  */
.soa-contact-success {
	text-align: center;
	padding: 60px 32px;
	background: rgba(212, 178, 122, 0.06);
	border: 1px solid rgba(212, 178, 122, 0.25);
	border-radius: 8px;
}
.soa-contact-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #d4b27a, #b58a4a);
	color: #06111c;
	border-radius: 50%;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 24px;
	box-shadow: 0 10px 30px rgba(212, 178, 122, 0.35);
}
.soa-contact-success__title {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: 28px;
	color: #f5f3ee;
	margin: 0 0 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.soa-contact-success__text {
	color: rgba(245, 243, 238, 0.72);
	font-size: 14px;
	line-height: 1.9;
	max-width: 480px;
	margin: 0 auto;
}

/*  */
@media (max-width: 768px) {
	.soa-page-hero {
		padding: 120px 18px 70px;
	}
	.soa-page-hero--has-image {
		padding-top: 160px;
		padding-bottom: 100px;
	}
	.soa-page-content {
		padding: 50px 18px 70px;
	}
	.soa-page-cta {
		padding: 70px 18px 90px;
	}
	.soa-contact-form {
		padding: 24px 20px;
	}
	.soa-contact-form__row {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* =============================================================
 * 54. v1.9.99 — AI feature media support & SEO-friendly layout
 *      AI / + 
 * =========================================================== */

/* AI  */
.soa-ai__feature-link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s, background 0.4s;
	height: 100%;
	border: 1px solid rgba(212, 178, 122, 0.10);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(8px);
}
a.soa-ai__feature-link:hover {
	transform: translateY(-4px);
	background: rgba(212, 178, 122, 0.06);
	border-color: rgba(212, 178, 122, 0.30);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
a.soa-ai__feature-link:hover .soa-ai__feature-title {
	color: #d4b27a;
}

/*  or  */
.soa-ai__feature-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	margin-bottom: 4px;
}
.soa-ai__feature-media img,
.soa-ai__feature-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
a.soa-ai__feature-link:hover .soa-ai__feature-media img,
a.soa-ai__feature-link:hover .soa-ai__feature-media video {
	transform: scale(1.04);
}

/* WORKS  */
.soa-works-card__image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =============================================================
 * 55. v1.9.100 — New Section Designs (/)
 *      
 * =========================================================== */

/* ============  ============ */
.soa-partners__grid {
	list-style: none;
	margin: 60px auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1px;
	background: rgba(212, 178, 122, 0.10);
	border: 1px solid rgba(212, 178, 122, 0.10);
	max-width: 1200px;
}
.soa-partners__cell {
	background: rgba(6, 17, 28, 0.92);
	aspect-ratio: 5 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: background 0.3s, transform 0.3s;
}
.soa-partners__cell:hover {
	background: rgba(212, 178, 122, 0.06);
}
.soa-partners__cell-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 18px;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
a.soa-partners__cell-inner:hover {
	transform: scale(1.04);
}
.soa-partners__logo {
	max-width: 70%;
	max-height: 50%;
	object-fit: contain;
	filter: brightness(0) invert(1) opacity(0.65);
	transition: filter 0.3s;
}
a.soa-partners__cell-inner:hover .soa-partners__logo {
	filter: brightness(0) invert(1) opacity(0.9);
}
.soa-partners__name {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: rgba(245, 243, 238, 0.85);
	text-align: center;
	font-weight: 500;
}
.soa-partners__industry {
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: rgba(212, 178, 122, 0.65);
	text-transform: uppercase;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (max-width: 768px) {
	.soa-partners__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============  ============ */
.soa-service-card--repeater {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(212, 178, 122, 0.10);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s, border-color 0.4s;
}
.soa-service-card--repeater:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 178, 122, 0.30);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.soa-service-card--repeater .soa-service-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.soa-service-card--repeater .soa-service-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
}
.soa-service-card--repeater .soa-service-card__media img,
.soa-service-card--repeater .soa-service-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-service-card--repeater:hover .soa-service-card__media img,
.soa-service-card--repeater:hover .soa-service-card__media video {
	transform: scale(1.05);
}
.soa-service-card--repeater .soa-service-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 24px 28px;
	flex: 1;
}
.soa-service-card--repeater .soa-service-card__subtitle {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: 0.30em;
	color: #d4b27a;
	font-weight: 500;
	margin: 0;
	text-transform: uppercase;
}
.soa-service-card--repeater .soa-service-card__title {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: 22px;
	color: #f5f3ee;
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: color 0.3s;
}
a.soa-service-card__inner:hover .soa-service-card__title {
	color: #d4b27a;
}
.soa-service-card--repeater .soa-service-card__desc {
	font-size: 13.5px;
	line-height: 1.85;
	color: rgba(245, 243, 238, 0.70);
	margin: 4px 0 0;
}
.soa-service-card--repeater .soa-service-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #d4b27a;
	font-weight: 500;
	transition: gap 0.3s;
}
a.soa-service-card__inner:hover .soa-service-card__more {
	gap: 12px;
}

/* ============ AI//  ============ */
.soa-rich-panels {
	padding: 100px 24px 120px;
	background: #06111c;
	color: #f5f3ee;
	position: relative;
	overflow: hidden;
}
.soa-rich-panels__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.soa-rich-panels__header {
	text-align: center;
	margin-bottom: 80px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.soa-rich-panels__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: #d4b27a;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.soa-rich-panels__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.30;
	letter-spacing: 0.03em;
	margin: 0 0 20px;
	color: #f5f3ee;
	font-weight: 500;
}
.soa-rich-panels__lead {
	font-size: 15px;
	line-height: 2.0;
	color: rgba(245, 243, 238, 0.72);
	margin: 0;
}

.soa-rich-panels__list {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.soa-rich-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.soa-rich-panel.is-reverse {
	direction: rtl;
}
.soa-rich-panel.is-reverse > * {
	direction: ltr;
}
.soa-rich-panel__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(212, 178, 122, 0.10);
}
.soa-rich-panel__media img,
.soa-rich-panel__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.soa-rich-panel__body {
	position: relative;
	padding-left: 24px;
}
.soa-rich-panel__num {
	position: absolute;
	left: -8px;
	top: -12px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 64px;
	font-weight: 200;
	color: rgba(212, 178, 122, 0.15);
	line-height: 1;
	letter-spacing: -0.02em;
	pointer-events: none;
}
.soa-rich-panel__subtitle {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.32em;
	color: #d4b27a;
	font-weight: 500;
	margin: 0 0 12px;
	text-transform: uppercase;
	position: relative;
}
.soa-rich-panel__title {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(26px, 3vw, 36px);
	color: #f5f3ee;
	margin: 0 0 20px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.40;
	position: relative;
}
.soa-rich-panel__desc {
	font-size: 14.5px;
	line-height: 2.0;
	color: rgba(245, 243, 238, 0.78);
	margin: 0 0 26px;
}
.soa-rich-panel__desc p {
	margin: 0 0 14px;
}
.soa-rich-panel__desc p:last-child {
	margin-bottom: 0;
}
.soa-rich-panel__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #d4b27a;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 12px 24px;
	border: 1px solid rgba(212, 178, 122, 0.35);
	border-radius: 3px;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-rich-panel__more:hover {
	background: rgba(212, 178, 122, 0.12);
	border-color: #d4b27a;
	gap: 14px;
}

/*  */
.soa-rich-panel:not(:has(.soa-rich-panel__media)) {
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
}

/*  */
.soa-rich-panels--grid .soa-rich-panels__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
}
.soa-rich-panels--grid .soa-rich-panel {
	grid-template-columns: 1fr;
	gap: 24px;
	direction: ltr !important;
}
.soa-rich-panels--grid .soa-rich-panel.is-reverse {
	direction: ltr;
}

/*  */
.soa-rich-panels--stack .soa-rich-panel {
	grid-template-columns: 1fr;
	gap: 30px;
}

@media (max-width: 900px) {
	.soa-rich-panel,
	.soa-rich-panel.is-reverse {
		grid-template-columns: 1fr;
		gap: 30px;
		direction: ltr;
	}
	.soa-rich-panels__list {
		gap: 70px;
	}
	.soa-rich-panel__body {
		padding-left: 18px;
	}
	.soa-rich-panel__num {
		font-size: 52px;
	}
}

@media (max-width: 600px) {
	.soa-rich-panels {
		padding: 70px 18px 90px;
	}
	.soa-rich-panels__header {
		margin-bottom: 50px;
	}
	.soa-rich-panels__list {
		gap: 60px;
	}
}

/* ============ NEWS  ============ */
.soa-news__list[data-news-count="3"] {
	grid-template-columns: repeat(3, 1fr);
}
.soa-news__list[data-news-count="4"] {
	grid-template-columns: repeat(4, 1fr);
}
.soa-news__list[data-news-count="5"] {
	grid-template-columns: repeat(3, 1fr);
}
.soa-news__list[data-news-count="6"] {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.soa-news__list[data-news-count="3"],
	.soa-news__list[data-news-count="4"],
	.soa-news__list[data-news-count="5"],
	.soa-news__list[data-news-count="6"] {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.soa-news__list[data-news-count="3"],
	.soa-news__list[data-news-count="4"],
	.soa-news__list[data-news-count="5"],
	.soa-news__list[data-news-count="6"] {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
 * 56. v1.9.101 — Custom Sections Frontend
 * =========================================================== */

/*  */
.soa-cs-text-block,
.soa-cs-feature-grid,
.soa-cs-cta-banner,
.soa-cs-gallery,
.soa-cs-video-hero,
.soa-cs-testimonial {
	--cs-navy: #06111c;
	--cs-gold: #d4b27a;
	--cs-white: #f5f3ee;
	--cs-light: #f8f6f0;
}

/* ============ text_block ============ */
.soa-cs-text-block {
	padding: 100px 24px;
}
.soa-cs-text-block--dark {
	background: var(--cs-navy);
	color: var(--cs-white);
}
.soa-cs-text-block--light {
	background: var(--cs-light);
	color: var(--cs-navy);
}
.soa-cs-text-block--gold {
	background: linear-gradient(135deg, #d4b27a, #b58a4a);
	color: var(--cs-navy);
}
.soa-cs-text-block__inner {
	max-width: 800px;
	margin: 0 auto;
}
.soa-cs-text-block--center .soa-cs-text-block__inner {
	text-align: center;
}
.soa-cs-text-block--left .soa-cs-text-block__inner {
	text-align: left;
}
.soa-cs-text-block__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	font-weight: 500;
	margin: 0 0 18px;
	text-transform: uppercase;
}
.soa-cs-text-block--light .soa-cs-text-block__eyebrow {
	color: #8a6817;
}
.soa-cs-text-block__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.35;
	letter-spacing: 0.03em;
	margin: 0 0 24px;
	font-weight: 500;
}
.soa-cs-text-block__body {
	font-size: 15px;
	line-height: 2.0;
}
.soa-cs-text-block--dark .soa-cs-text-block__body {
	color: rgba(245, 243, 238, 0.78);
}
.soa-cs-text-block__body p {
	margin: 0 0 16px;
}
.soa-cs-text-block__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 14px 32px;
	background: linear-gradient(135deg, var(--cs-gold), #b58a4a);
	color: var(--cs-navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 6px 18px rgba(212, 178, 122, 0.30);
}
.soa-cs-text-block__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(212, 178, 122, 0.45);
}

/* ============ feature_grid ============ */
.soa-cs-feature-grid {
	padding: 100px 24px;
	background: var(--cs-navy);
	color: var(--cs-white);
}
.soa-cs-feature-grid__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.soa-cs-feature-grid__header {
	text-align: center;
	margin-bottom: 60px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.soa-cs-feature-grid__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	margin: 0 0 16px;
	text-transform: uppercase;
}
.soa-cs-feature-grid__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.35;
	margin: 0 0 18px;
	font-weight: 500;
}
.soa-cs-feature-grid__lead {
	font-size: 14.5px;
	line-height: 2.0;
	color: rgba(245, 243, 238, 0.70);
	margin: 0;
}
.soa-cs-feature-grid__cards {
	display: grid;
	gap: 24px;
}
.soa-cs-feature-grid__cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.soa-cs-feature-grid__cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.soa-cs-feature-grid__cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.soa-cs-feature-grid__cards[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.soa-cs-feature-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(212, 178, 122, 0.10);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cs-feature-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 178, 122, 0.30);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.soa-cs-feature-card__inner {
	display: block;
	padding: 26px 22px;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.soa-cs-feature-card__media {
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: 8px;
}
.soa-cs-feature-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.soa-cs-feature-card__title {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: 20px;
	color: var(--cs-white);
	margin: 0 0 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: color 0.3s;
}
a.soa-cs-feature-card__inner:hover .soa-cs-feature-card__title {
	color: var(--cs-gold);
}
.soa-cs-feature-card__desc {
	font-size: 13.5px;
	line-height: 1.85;
	color: rgba(245, 243, 238, 0.70);
	margin: 0;
}
@media (max-width: 900px) {
	.soa-cs-feature-grid__cards[data-cols="3"],
	.soa-cs-feature-grid__cards[data-cols="4"],
	.soa-cs-feature-grid__cards[data-cols="6"] {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.soa-cs-feature-grid__cards { grid-template-columns: 1fr !important; }
}

/* ============ cta_banner ============ */
.soa-cs-cta-banner {
	position: relative;
	padding: 120px 24px;
	color: var(--cs-white);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--cs-navy);
}
.soa-cs-cta-banner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.soa-cs-cta-banner__bg img,
.soa-cs-cta-banner__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.soa-cs-cta-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.soa-cs-cta-banner--overlay-light .soa-cs-cta-banner__overlay {
	background: rgba(6, 17, 28, 0.30);
}
.soa-cs-cta-banner--overlay-medium .soa-cs-cta-banner__overlay {
	background: rgba(6, 17, 28, 0.55);
}
.soa-cs-cta-banner--overlay-dark .soa-cs-cta-banner__overlay {
	background: rgba(6, 17, 28, 0.75);
}
.soa-cs-cta-banner__inner {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
}
.soa-cs-cta-banner__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	margin: 0 0 20px;
	text-transform: uppercase;
}
.soa-cs-cta-banner__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.30;
	letter-spacing: 0.03em;
	margin: 0 0 24px;
	font-weight: 500;
}
.soa-cs-cta-banner__lead {
	font-size: 15px;
	line-height: 1.95;
	color: rgba(245, 243, 238, 0.85);
	margin: 0 0 36px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.soa-cs-cta-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 40px;
	background: linear-gradient(135deg, var(--cs-gold), #b58a4a);
	color: var(--cs-navy);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(212, 178, 122, 0.40);
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cs-cta-banner__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(212, 178, 122, 0.55);
}
.soa-cs-cta-banner__btn-arrow {
	font-size: 18px;
	transition: transform 0.3s;
}
.soa-cs-cta-banner__btn:hover .soa-cs-cta-banner__btn-arrow {
	transform: translateX(4px);
}

/* ============ gallery ============ */
.soa-cs-gallery {
	padding: 100px 24px;
	background: var(--cs-navy);
	color: var(--cs-white);
}
.soa-cs-gallery__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.soa-cs-gallery__header {
	text-align: center;
	margin-bottom: 50px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.soa-cs-gallery__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	margin: 0 0 16px;
	text-transform: uppercase;
}
.soa-cs-gallery__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(28px, 4vw, 44px);
	margin: 0 0 14px;
	font-weight: 500;
}
.soa-cs-gallery__lead {
	color: rgba(245, 243, 238, 0.70);
	margin: 0;
	line-height: 1.9;
}
.soa-cs-gallery__grid {
	display: grid;
	gap: 16px;
}
.soa-cs-gallery__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.soa-cs-gallery__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.soa-cs-gallery__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.soa-cs-gallery__grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.soa-cs-gallery__item {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	position: relative;
}
.soa-cs-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
}
.soa-cs-gallery__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cs-gallery__link:hover img {
	transform: scale(1.05);
}
.soa-cs-gallery__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px 16px;
	background: linear-gradient(180deg, transparent, rgba(6, 17, 28, 0.85));
	color: var(--cs-white);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	opacity: 0;
	transition: opacity 0.3s;
}
.soa-cs-gallery__item:hover .soa-cs-gallery__caption {
	opacity: 1;
}
@media (max-width: 900px) {
	.soa-cs-gallery__grid[data-cols="3"],
	.soa-cs-gallery__grid[data-cols="4"],
	.soa-cs-gallery__grid[data-cols="5"] {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.soa-cs-gallery__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============ video_hero ============ */
.soa-cs-video-hero {
	position: relative;
	min-height: 80vh;
	padding: 120px 24px;
	color: var(--cs-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--cs-navy);
}
.soa-cs-video-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.soa-cs-video-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.soa-cs-video-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.soa-cs-video-hero--overlay-light .soa-cs-video-hero__overlay { background: rgba(6, 17, 28, 0.30); }
.soa-cs-video-hero--overlay-medium .soa-cs-video-hero__overlay { background: rgba(6, 17, 28, 0.55); }
.soa-cs-video-hero--overlay-dark .soa-cs-video-hero__overlay { background: rgba(6, 17, 28, 0.75); }
.soa-cs-video-hero__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.soa-cs-video-hero__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	margin: 0 0 22px;
	text-transform: uppercase;
}
.soa-cs-video-hero__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(34px, 6vw, 72px);
	line-height: 1.20;
	letter-spacing: 0.04em;
	margin: 0 0 26px;
	font-weight: 500;
}
.soa-cs-video-hero__lead {
	font-size: 16px;
	line-height: 1.95;
	color: rgba(245, 243, 238, 0.90);
	margin: 0 0 36px;
}
.soa-cs-video-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 44px;
	background: linear-gradient(135deg, var(--cs-gold), #b58a4a);
	color: var(--cs-navy);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 10px 32px rgba(212, 178, 122, 0.40);
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cs-video-hero__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 42px rgba(212, 178, 122, 0.55);
}

/* ============ testimonial ============ */
.soa-cs-testimonial {
	padding: 100px 24px;
	background: linear-gradient(180deg, var(--cs-navy) 0%, #0a1a28 100%);
	color: var(--cs-white);
}
.soa-cs-testimonial__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.soa-cs-testimonial__header {
	text-align: center;
	margin-bottom: 60px;
}
.soa-cs-testimonial__eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--cs-gold);
	margin: 0 0 14px;
	text-transform: uppercase;
}
.soa-cs-testimonial__heading {
	font-family: var(--font-serif, "Playfair Display", Georgia, "Noto Serif JP", serif);
	font-size: clamp(28px, 4vw, 44px);
	margin: 0;
	font-weight: 500;
}
.soa-cs-testimonial__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}
.soa-cs-testimonial--featured .soa-cs-testimonial__list {
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
}
.soa-cs-testimonial-card {
	position: relative;
	padding: 32px 28px 28px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 178, 122, 0.12);
	border-radius: 10px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.soa-cs-testimonial-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 178, 122, 0.30);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}
.soa-cs-testimonial-card__quote-mark {
	position: absolute;
	top: 14px;
	right: 22px;
	font-family: var(--font-serif, "Playfair Display", serif);
	font-size: 72px;
	color: rgba(212, 178, 122, 0.20);
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
}
.soa-cs-testimonial-card__comment {
	font-size: 14.5px;
	line-height: 2.0;
	color: rgba(245, 243, 238, 0.85);
	margin: 0 0 24px;
	font-style: italic;
	border: 0;
	padding: 0;
}
.soa-cs-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid rgba(212, 178, 122, 0.15);
}
.soa-cs-testimonial-card__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(212, 178, 122, 0.30);
}
.soa-cs-testimonial-card__author-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.soa-cs-testimonial-card__name {
	font-weight: 600;
	font-size: 14px;
	color: var(--cs-white);
}
.soa-cs-testimonial-card__company {
	font-size: 11.5px;
	color: rgba(212, 178, 122, 0.85);
	letter-spacing: 0.05em;
}

/* =============================================================
 * 57. v1.9.102 — Breadcrumb
 * =========================================================== */
.soa-breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 0;
	background: transparent;
	font-size: 12.5px;
	color: rgba(245, 243, 238, 0.55);
}
.soa-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}
.soa-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.soa-breadcrumb__link {
	color: rgba(212, 178, 122, 0.85);
	text-decoration: none;
	transition: color 0.2s;
	letter-spacing: 0.02em;
}
.soa-breadcrumb__link:hover {
	color: #d4b27a;
	text-decoration: underline;
	text-decoration-color: rgba(212, 178, 122, 0.40);
	text-underline-offset: 3px;
}
.soa-breadcrumb__current {
	color: rgba(245, 243, 238, 0.75);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.soa-breadcrumb__separator {
	color: rgba(212, 178, 122, 0.40);
	font-size: 14px;
	font-weight: 300;
}
@media (max-width: 600px) {
	.soa-breadcrumb {
		padding: 16px 18px 0;
		font-size: 11.5px;
	}
}

/* =============================================================
 * 58. v1.9.110 — Blog list (home.php)
 * =========================================================== */
.soa-page--blog {
	background: #06111c;
	color: #f5f3ee;
	min-height: 60vh;
}
.soa-blog-list {
	padding: 80px 24px 120px;
}
.soa-blog-list__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.soa-blog-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
	margin-bottom: 70px;
}
@media (max-width: 600px) {
	.soa-blog-list {
		padding: 50px 18px 90px;
	}
	.soa-blog-list__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}
.soa-blog-list__pagination {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}
.soa-blog-list__pagination .nav-links,
.soa-blog-list__pagination .navigation {
	display: flex;
	gap: 8px;
	align-items: center;
}
.soa-blog-list__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	color: rgba(245, 243, 238, 0.7);
	text-decoration: none;
	border: 1px solid rgba(212, 178, 122, 0.2);
	border-radius: 4px;
	font-size: 13px;
	letter-spacing: 0.04em;
	transition: all 0.2s;
	background: rgba(255, 255, 255, 0.02);
}
.soa-blog-list__pagination .page-numbers:hover {
	background: rgba(212, 178, 122, 0.12);
	border-color: rgba(212, 178, 122, 0.5);
	color: #d4b27a;
}
.soa-blog-list__pagination .page-numbers.current {
	background: linear-gradient(135deg, #d4b27a, #b58a4a);
	color: #06111c;
	border-color: #d4b27a;
	font-weight: 600;
}
.soa-blog-list__pagination .page-numbers.dots {
	border: none;
	background: transparent;
}