/*
Theme Name: Eight
Theme URI: https://eight.mc
Author: Eight SARL
Author URI: https://eight.mc
Description: Custom theme for EIGHT SARL — Luxury Experiences & Cultural Connections, Japan × Monaco. Designed around the Shinto symbolism of Yaoyorozu no Kami (eight million gods) and the infinite (∞).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: eight
*/

:root {
  --bg: #F6F0E4;
  --bg-light: #FAF7F0;
  --ink: #2C2C2C;
  --ink-light: #5A5A5A;
  --warm-gray: #9E9790;
  --line: #E8E2D8;
  --line-light: #F0EBE3;
  --vermilion: #C03030;
  --gold-start: #B8860B;
  --gold-end: #D4AF37;
  --gold-bright: #E8C95A;
  --gold-pale: rgba(212,175,55,0.1);
  --indigo: #264653;
  --white: #FAFAF5;
  --font-jp: 'Noto Serif JP', serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* Washi texture */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:0.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:256px;
}

/* i18n (used on front-page where all 3 langs are inline; news/legal pages use Polylang per-URL) */
.i18n-en{display:block}.i18n-fr,.i18n-ja{display:none}
[data-lang="fr"] .i18n-en{display:none}[data-lang="fr"] .i18n-fr{display:block}
[data-lang="ja"] .i18n-en{display:none}[data-lang="ja"] .i18n-ja{display:block}
span.i18n-en{display:inline}span.i18n-fr,span.i18n-ja{display:none}
[data-lang="fr"] span.i18n-en{display:none}[data-lang="fr"] span.i18n-fr{display:inline}
[data-lang="ja"] span.i18n-en{display:none}[data-lang="ja"] span.i18n-ja{display:inline}

/* HEADER */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;
  transition:background 0.5s,box-shadow 0.5s,padding 0.5s;
}
.header.scrolled{
  background:rgba(246,240,228,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-light);padding:0.8rem 2rem;
}
.logo{display:flex;align-items:center;gap:0.75rem;text-decoration:none}
.logo svg{width:46px;height:26px}
.logo-text{
  font-family:var(--font-display);font-size:1.3rem;font-weight:400;
  letter-spacing:0.25em;color:var(--white);transition:color 0.5s;
}
.header.scrolled .logo-text{color:var(--ink)}
.logo-path{transition:stroke 0.5s;stroke:rgba(255,255,255,0.9)}
.header.scrolled .logo-path{stroke:url(#gold-grad)}

.header-right{display:flex;align-items:center;gap:1.8rem}

/* Hamburger — hidden on desktop, shown on mobile */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:32px;height:32px;padding:6px;position:relative;z-index:1002;
  -webkit-tap-highlight-color:transparent;
}
.hamburger span{
  display:block;width:20px;height:1.5px;margin:4px auto;
  background:rgba(255,255,255,0.85);transition:all 0.35s ease;
}
.header.scrolled .hamburger span{background:var(--ink)}
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.header.scrolled .hamburger.open span{background:var(--vermilion)}

.nav-links{display:flex;gap:1.8rem}
.nav-links a{
  font-family:var(--font-display);font-size:0.9rem;font-weight:400;
  letter-spacing:0.08em;color:rgba(255,255,255,0.8);
  text-decoration:none;position:relative;transition:color 0.4s;
}
.header.scrolled .nav-links a{color:var(--ink-light)}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--gold-start),var(--gold-end));transition:width 0.4s;
}
.nav-links a:hover::after{width:100%}
.nav-links a:hover{color:var(--white)}
.header.scrolled .nav-links a:hover{color:var(--vermilion)}

.lang-switcher{display:flex;gap:0.3rem;position:relative;z-index:1001}
.lang-btn,.lang-switcher a{
  background:none;border:1px solid transparent;
  font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.1em;
  color:rgba(255,255,255,0.6);cursor:pointer;text-decoration:none;display:inline-block;
  padding:0.3rem 0.5rem;border-radius:2px;transition:all 0.3s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.header.scrolled .lang-btn,.header.scrolled .lang-switcher a{color:var(--ink-light)}
.lang-btn.active,.lang-switcher a.current-lang{color:var(--white);border-color:rgba(255,255,255,0.4)}
.header.scrolled .lang-btn.active,.header.scrolled .lang-switcher a.current-lang{color:var(--vermilion);border-color:var(--vermilion)}
.lang-btn:hover,.lang-switcher a:hover{color:var(--white)}
.header.scrolled .lang-btn:hover,.header.scrolled .lang-switcher a:hover{color:var(--vermilion)}

/* HERO */
.hero{
  position:relative;height:100vh;min-height:650px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#1a1510;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 45%;z-index:1;
}
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(20,15,10,0.3) 0%,rgba(20,15,10,0.1) 30%,
    rgba(20,15,10,0.05) 50%,rgba(20,15,10,0.15) 70%,
    rgba(20,15,10,0.5) 100%);
}
.fog{position:absolute;width:200%;height:100%;top:0;z-index:3;will-change:transform;pointer-events:none}
.fog-1{
  background:linear-gradient(90deg,transparent 0%,rgba(246,240,228,0.08) 20%,rgba(246,240,228,0.14) 50%,rgba(246,240,228,0.08) 80%,transparent 100%);
  animation:fog1 28s ease-in-out infinite;opacity:0.5;top:8%;
}
.fog-2{
  background:linear-gradient(90deg,transparent 0%,rgba(246,240,228,0.05) 20%,rgba(246,240,228,0.1) 50%,rgba(246,240,228,0.05) 80%,transparent 100%);
  animation:fog2 32s ease-in-out infinite;opacity:0.3;top:58%;
}
@keyframes fog1{0%,100%{transform:translateX(-30%)}50%{transform:translateX(-10%)}}
@keyframes fog2{0%,100%{transform:translateX(-10%)}50%{transform:translateX(-35%)}}

.hero-content{position:relative;z-index:10;text-align:center;max-width:750px;padding:0 2rem}
.hero-eyebrow{
  font-family:var(--font-display);font-size:clamp(0.78rem,1.15vw,0.95rem);
  letter-spacing:0.26em;text-transform:uppercase;font-weight:500;
  color:#F2D788;
  margin-bottom:1.5rem;
  text-shadow:0 1px 2px rgba(0,0,0,0.6),0 0 18px rgba(0,0,0,0.45);
}
.hero-eyebrow .x{
  display:inline-block;margin:0 0.55em;font-weight:300;
  color:rgba(255,255,255,0.55);
}
.hero h1{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.8rem,4.5vw,3.5rem);line-height:1.35;
  color:var(--white);text-shadow:0 2px 30px rgba(0,0,0,0.25);
}
.hero-h1-ja{font-family:var(--font-jp)!important;font-weight:300!important;font-size:clamp(1.4rem,3.5vw,2.5rem)!important;line-height:1.6!important}
.hero-gold-line{width:60px;height:1px;margin:2rem auto;background:linear-gradient(90deg,var(--gold-start),var(--gold-end))}
.hero-sub{font-family:var(--font-body);font-size:clamp(0.85rem,1.4vw,1.1rem);color:rgba(250,250,245,0.8);line-height:1.8;text-shadow:0 1px 12px rgba(0,0,0,0.2)}
.hero-sub-ja{font-family:var(--font-jp);font-weight:300;font-size:clamp(0.8rem,1.2vw,1rem)}

.hero-vertical{
  position:absolute;right:4%;bottom:12%;
  writing-mode:vertical-rl;font-family:var(--font-jp);font-weight:200;
  font-size:clamp(2.5rem,5vw,4.5rem);color:rgba(250,250,245,0.06);
  letter-spacing:0.3em;z-index:4;user-select:none;
}

.hero-reveal{opacity:0;transform:translateY(12px);animation:reveal 1.2s ease-out forwards}
.hero-reveal:nth-child(2){animation-delay:0.35s}
.hero-reveal:nth-child(3){animation-delay:0.7s}
.hero-reveal:nth-child(4){animation-delay:1.05s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

.scroll-down{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:10;opacity:0;animation:reveal 1.2s ease-out 1.5s forwards}
.scroll-infinity{
  font-size:1.3rem;
  background:linear-gradient(135deg,var(--gold-start),var(--gold-end));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:bounce 2.5s ease-in-out infinite;display:block;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* GOLD DIVIDER */
.gold-divider{display:flex;align-items:center;justify-content:center;padding:2rem 0;gap:1.5rem}
.gold-divider-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-pale),var(--gold-end),var(--gold-pale),transparent)}
.gold-divider-symbol{font-size:1rem;background:linear-gradient(135deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0.4}

/* ABOUT */
.about{
  position:relative;padding:6rem 2rem;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.about-image{position:relative;height:450px;overflow:hidden;border-radius:2px}
.about-image img{width:100%;height:100%;object-fit:cover}
.about-image::after{content:'';position:absolute;inset:14px;border:1px solid rgba(212,175,55,0.2);pointer-events:none}

.about-bg-kanji{
  position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  font-family:var(--font-jp);font-weight:200;font-size:min(22vw,280px);
  color:var(--ink);opacity:0.025;line-height:1;user-select:none;z-index:0;
}
.about-content{position:relative;z-index:1}

.section-label{
  font-family:var(--font-display);font-size:0.75rem;font-weight:400;
  letter-spacing:0.25em;text-transform:uppercase;margin-bottom:1.5rem;
}
.label-gold{background:linear-gradient(90deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.label-vermilion{color:var(--vermilion)}

.about h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.3;margin-bottom:2rem}
.kanji-accent{
  font-family:var(--font-jp);font-weight:600;
  background:linear-gradient(135deg,var(--gold-start),var(--gold-end));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.about-h2-ja{font-family:var(--font-jp)!important;font-weight:300!important;font-size:clamp(1.3rem,2.5vw,2rem)!important}
.about p{font-size:1rem;line-height:2;color:var(--ink-light);margin-bottom:1.2rem}
.about p.text-ja{font-family:var(--font-jp);font-weight:300;font-size:0.92rem;line-height:2.2}
.about-accent{color:var(--vermilion);font-style:italic}

/* SERVICES */
.services{padding:6rem 2rem;position:relative;overflow:hidden;background:var(--bg-light)}
.services-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0.03;z-index:0;
}
.services-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.services h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);margin-bottom:3.5rem}
.services-h2-ja{font-family:var(--font-jp)!important;font-weight:300!important;font-size:clamp(1.3rem,2.5vw,2rem)!important}

.service-item{
  display:grid;grid-template-columns:80px 1fr;gap:2rem;align-items:start;
  padding:2.5rem 0;border-bottom:1px solid var(--line-light);cursor:default;transition:all 0.4s;
}
.service-item:first-of-type{border-top:1px solid var(--line-light)}
.service-item:hover .service-num{
  background:linear-gradient(135deg,var(--gold-start),var(--gold-end));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  transform:translateX(4px);
}
.service-item:hover .service-name{color:var(--vermilion)}
.service-num{font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--vermilion);opacity:0.4;transition:all 0.4s;line-height:1}
.service-text h3{font-family:var(--font-display);font-weight:500;font-size:1.15rem;letter-spacing:0.05em;margin-bottom:0.6rem;transition:color 0.4s}
.service-text h3.h3-ja{font-family:var(--font-jp);font-weight:500;font-size:1.05rem}
.service-text p{font-size:0.9rem;line-height:1.8;color:var(--warm-gray)}
.service-text p.text-ja{font-family:var(--font-jp);font-weight:300;font-size:0.85rem}

/* CONTACT */
.contact{padding:6rem 2rem;background:linear-gradient(180deg,var(--indigo) 0%,#1E2E38 100%);color:var(--white)}
.contact-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact .section-label{background:linear-gradient(90deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.contact h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);color:var(--white);margin-bottom:2rem}
.contact-h2-ja{font-family:var(--font-jp)!important;font-weight:300!important}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.15em;color:rgba(255,255,255,0.45);margin-bottom:0.5rem}
.form-group input,.form-group textarea{
  width:100%;padding:0.7rem 0;font-family:var(--font-body);font-size:1rem;
  color:var(--white);background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,0.15);outline:none;transition:border-color 0.4s;
}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--gold-end)}
.form-group textarea{resize:vertical;min-height:90px}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.18)}

/* WPForms / CF7 form override to match style */
.contact .wpforms-container,.contact .wpcf7{margin-top:1rem}
.contact .wpforms-field-label,.contact .wpcf7 label{font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.15em;color:rgba(255,255,255,0.45)}
.contact .wpforms-field input,.contact .wpforms-field textarea,
.contact .wpcf7 input[type="text"],.contact .wpcf7 input[type="email"],.contact .wpcf7 textarea{
  background:transparent!important;border:none!important;border-bottom:1px solid rgba(255,255,255,0.15)!important;
  color:var(--white)!important;padding:0.7rem 0!important;border-radius:0!important;
}
.contact .wpforms-field input:focus,.contact .wpforms-field textarea:focus,
.contact .wpcf7 input:focus,.contact .wpcf7 textarea:focus{border-bottom-color:var(--gold-end)!important;box-shadow:none!important}

.submit-btn,.contact .wpforms-submit,.contact .wpcf7 input[type="submit"]{
  display:inline-flex;align-items:center;gap:1rem;
  padding:0.8rem 2.2rem;background:var(--vermilion);border:none;
  font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.15em;
  color:var(--white)!important;cursor:pointer;transition:all 0.4s;margin-top:0.5rem;
  border-radius:0!important;
}
.submit-btn:hover,.contact .wpforms-submit:hover,.contact .wpcf7 input[type="submit"]:hover{background:linear-gradient(135deg,var(--gold-start),var(--gold-end));color:var(--ink)!important}
.submit-btn .arrow{font-size:1rem;transition:transform 0.3s}
.submit-btn:hover .arrow{transform:translateX(4px)}

.contact-info{padding-top:2.5rem}
.contact-info h3{
  font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:0.2em;margin-bottom:1.5rem;
  background:linear-gradient(135deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.contact-info p{font-size:0.92rem;line-height:2.2;color:rgba(255,255,255,0.55)}
.contact-info a{color:var(--gold-end);text-decoration:none;transition:color 0.3s}
.contact-info a:hover{color:var(--gold-bright)}
.contact-info-label{
  font-family:var(--font-display);font-size:0.7rem;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(255,255,255,0.3);margin-top:1.8rem;margin-bottom:0.4rem;
}
.contact-info-label:first-of-type{margin-top:0}

/* NEWS / BLOG */
.news-page{padding:8rem 2rem 5rem;max-width:1100px;margin:0 auto;min-height:80vh}
.news-page h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4vw,3rem);margin-bottom:0.5rem}
.news-page-intro{font-family:var(--font-display);font-style:italic;color:var(--warm-gray);margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:2.5rem}
.news-card{background:var(--white);border:1px solid var(--line-light);transition:all 0.4s;display:flex;flex-direction:column;overflow:hidden}
.news-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.06);border-color:var(--gold-pale)}
.news-card-thumb{height:200px;overflow:hidden;background:var(--bg-light)}
.news-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.news-card:hover .news-card-thumb img{transform:scale(1.04)}
.news-card-body{padding:1.5rem 1.6rem 1.8rem}
.news-card-meta{font-family:var(--font-display);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm-gray);margin-bottom:0.6rem}
.news-card h2{font-family:var(--font-display);font-weight:500;font-size:1.2rem;line-height:1.4;margin-bottom:0.6rem}
.news-card h2 a{color:var(--ink);text-decoration:none;transition:color 0.3s}
.news-card h2 a:hover{color:var(--vermilion)}
.news-card-excerpt{font-size:0.9rem;line-height:1.7;color:var(--ink-light)}

.single-news{padding:8rem 2rem 5rem;max-width:760px;margin:0 auto}
.single-news .post-meta{font-family:var(--font-display);font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-gray);margin-bottom:1rem}
.single-news h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.3;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.single-news .post-thumb{margin:0 -1rem 2.5rem;height:340px;overflow:hidden}
.single-news .post-thumb img{width:100%;height:100%;object-fit:cover}
.single-news .post-content{font-size:1.05rem;line-height:1.95;color:var(--ink)}
.single-news .post-content p{margin-bottom:1.3rem}
.single-news .post-content h2{font-family:var(--font-display);font-weight:500;font-size:1.5rem;margin:2.5rem 0 1rem}
.single-news .post-content h3{font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin:2rem 0 0.8rem}
.single-news .post-content a{color:var(--vermilion);text-decoration:underline;text-underline-offset:3px}
.single-news .post-back{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--font-display);letter-spacing:0.1em}
.single-news .post-back a{color:var(--warm-gray);text-decoration:none;transition:color 0.3s}
.single-news .post-back a:hover{color:var(--vermilion)}

/* GENERIC PAGE (legal pages, about, etc.) */
.page-wrap{padding:8rem 2rem 5rem;max-width:760px;margin:0 auto;min-height:80vh}
.page-wrap h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--gold-end)}
.page-wrap h2{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin:2.2rem 0 0.8rem}
.page-wrap h3{font-family:var(--font-display);font-weight:500;font-size:1.1rem;margin:1.5rem 0 0.6rem;color:var(--ink-light)}
.page-wrap p,.page-wrap ul,.page-wrap ol{font-size:1rem;line-height:1.85;margin-bottom:1.1rem;color:var(--ink-light)}
.page-wrap ul,.page-wrap ol{padding-left:1.4rem}
.page-wrap li{margin-bottom:0.4rem}
.page-wrap a{color:var(--vermilion);text-decoration:underline;text-underline-offset:3px}
.page-wrap table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:0.92rem}
.page-wrap th,.page-wrap td{text-align:left;padding:0.6rem 0.75rem;border-bottom:1px solid var(--line);vertical-align:top}
.page-wrap th{background:var(--bg-light);font-weight:500;color:var(--ink-light);font-size:0.82rem;letter-spacing:0.05em;text-transform:uppercase}
.page-wrap dl{margin:1rem 0 1.5rem}
.page-wrap dl dt{font-weight:500;color:var(--ink-light);font-size:0.85rem;letter-spacing:0.05em;text-transform:uppercase;margin-top:0.6rem}
.page-wrap dl dd{margin:0 0 0.4rem}

/* 404 */
.error-404{padding:10rem 2rem 5rem;text-align:center;min-height:80vh}
.error-404 h1{font-family:var(--font-display);font-size:6rem;font-weight:300;margin-bottom:0.5rem;background:linear-gradient(135deg,var(--gold-start),var(--gold-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.error-404 p{font-family:var(--font-display);color:var(--warm-gray);font-size:1.1rem;font-style:italic}
.error-404 a{display:inline-block;margin-top:2rem;color:var(--vermilion);text-decoration:none;letter-spacing:0.1em}

/* FOOTER */
.footer{padding:2rem;text-align:center;background:#1E2E38;border-top:1px solid rgba(255,255,255,0.05)}
.footer-logo{display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:0.8rem}
.footer-logo svg{width:30px;height:16px;opacity:0.4}
.footer p{font-family:var(--font-display);font-size:0.7rem;letter-spacing:0.2em;color:rgba(255,255,255,0.3)}
.footer-links{margin:0.8rem 0 1rem;font-family:var(--font-display);font-size:0.78rem;letter-spacing:0.12em}
.footer-links a{color:rgba(232,201,90,0.55);text-decoration:none;transition:color 0.3s}
.footer-links a:hover{color:var(--gold-bright)}
.footer-links .sep{color:rgba(255,255,255,0.18);margin:0 0.7rem}

/* FADE IN */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
@keyframes fallbackShow{to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fallbackShow 0s 2s forwards}
.fade-in.visible{animation:none}

/* RESPONSIVE */
@media(max-width:900px){
  /* Hamburger menu activates */
  .hamburger{display:block}
  .header-right{gap:0.6rem}

  /* Slide-in mobile nav panel */
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;height:100svh;
    width:min(82vw,320px);
    background:linear-gradient(170deg,rgba(15,12,8,0.97) 0%,rgba(30,46,56,0.97) 100%);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;align-items:flex-start;gap:1.6rem;
    padding:5.5rem 2.2rem 2rem;
    transform:translateX(100%);transition:transform 0.45s cubic-bezier(0.7,0,0.3,1);
    z-index:999;box-shadow:-20px 0 60px rgba(0,0,0,0.4);
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{
    font-size:1.05rem !important;letter-spacing:0.18em !important;
    color:rgba(255,255,255,0.85) !important;font-weight:400;
    padding:0.4rem 0;width:100%;
  }
  .nav-links a::after{display:none}
  .nav-links a:hover{color:var(--gold-bright) !important}

  /* Backdrop overlay */
  .nav-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.4);
    opacity:0;pointer-events:none;transition:opacity 0.4s;z-index:998;
  }
  .nav-overlay.open{opacity:1;pointer-events:auto}
}

@media(max-width:768px){
  .header{padding:0.8rem 1rem}
  .header.scrolled{padding:0.6rem 1rem}
  .lang-btn,.lang-switcher a{font-size:0.72rem;padding:0.3rem 0.45rem;min-height:36px;display:inline-flex;align-items:center}
  .hero{min-height:100vh;min-height:100svh}
  .hero h1{font-size:clamp(1.4rem,6vw,2rem)}
  .hero-eyebrow{
    font-size:0.7rem;letter-spacing:0.18em;
    padding:0 0.5rem;line-height:1.6;margin-bottom:1.2rem;
  }
  .hero-eyebrow .x{margin:0 0.35em}
  .hero-vertical{display:none}
  .about{grid-template-columns:1fr;gap:2rem;padding:4rem 1.5rem}
  .about-image{height:260px;order:-1}
  .about-bg-kanji{right:-5%;font-size:40vw}
  .services{padding:4rem 1.5rem}
  .service-item{grid-template-columns:50px 1fr;gap:1rem;padding:1.8rem 0}
  .service-num{font-size:1.5rem}
  .contact{padding:4rem 1.5rem}
  .contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .contact-info{padding-top:0}
  .news-page{padding:6rem 1.25rem 3rem}
  .news-grid{grid-template-columns:1fr;gap:1.8rem}
  .news-card-thumb{height:180px}
  .single-news{padding:6rem 1.25rem 3rem}
  .single-news .post-thumb{margin:0 -0.5rem 2rem;height:220px}
  .single-news .post-content{font-size:1rem}
  .page-wrap{padding:6rem 1.25rem 3rem}
  /* Tables: enable horizontal scroll on small screens */
  .page-wrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:0.85rem}
  .page-wrap table th,.page-wrap table td{padding:0.5rem 0.6rem}
  /* Form inputs: 16px to prevent iOS zoom on focus */
  .form-group input,.form-group textarea{font-size:16px}
  /* Footer compaction */
  .footer{padding:1.8rem 1rem}
  .footer-links{font-size:0.7rem}
  .footer-links .sep{margin:0 0.4rem}
}

@media(max-width:480px){
  /* Tighten further on small phones */
  .hero h1{font-size:clamp(1.3rem,7vw,1.8rem);line-height:1.4}
  .hero-h1-ja{font-size:clamp(1.1rem,5.5vw,1.6rem)!important;line-height:1.55!important}
  .hero-sub{font-size:0.85rem !important}
  .hero-eyebrow{font-size:0.65rem;letter-spacing:0.15em}
  .scroll-down{bottom:1.5rem}
  .gold-divider{padding:1.2rem 0;gap:1rem}
  .gold-divider-line{width:50px}
  .about{padding:3rem 1.25rem}
  .services{padding:3rem 1.25rem}
  .contact{padding:3rem 1.25rem}
  .news-page h1{font-size:1.7rem}
  .news-page-intro{font-size:0.92rem;margin-bottom:2rem}
  .single-news h1{font-size:1.55rem}
  .page-wrap h1{font-size:1.55rem}
  /* Footer links: split to multiple lines if needed */
  .footer-links a{display:inline-block}
}

@media(max-width:380px){
  .header{padding:0.7rem 0.8rem}
  .logo svg{width:38px;height:22px}
  .logo-text{font-size:1.1rem;letter-spacing:0.18em}
  .lang-btn,.lang-switcher a{font-size:0.68rem;padding:0.25rem 0.35rem}
  .header-right{gap:0.4rem}
  .footer-links a{font-size:0.66rem;letter-spacing:0.08em}
  .footer-links .sep{margin:0 0.3rem}
}

/* Prevent body scroll when mobile menu is open */
body.nav-open{overflow:hidden}
