/* ==========================================================================
   SCALY — design tokens
   ========================================================================== */
:root{
  --ink:#0a0a0a;
  --ink-soft:#141414;
  --paper:#f3ede2;
  --paper-dim:#e7ddcb;
  --steel:#8b909a;
  --steel-light:#c7cbd1;
  --accent:#7a1620;
  --accent-bright:#a8222c;
  --line:rgba(243,237,226,0.14);

  --font-serif:'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-jp:'Noto Serif JP', serif;
  --font-sans:'Inter', -apple-system, sans-serif;

  --ease-cinema: cubic-bezier(.16,.84,.28,1);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:#0a0a0a; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-weight:300;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--accent); color:var(--paper); }

[data-tilt]{
  transform-style:preserve-3d;
  will-change:transform;
}

/* page-to-page cut transition */
.page-slash{
  position:fixed; top:50%; left:50%;
  width:140vw; height:2px;
  transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg, transparent, #fff 15%, #ffdede 50%, #fff 85%, transparent);
  box-shadow:0 0 18px 2px rgba(255,255,255,0.85), 0 0 40px 8px rgba(168,34,44,0.6);
  opacity:0;
  z-index:10000;
  pointer-events:none;
}

/* easter egg: sakura petal burst (typing "sakura") */
.sakura-field{ position:fixed; inset:0; z-index:9997; pointer-events:none; overflow:hidden; }
.sakura-petal{
  position:absolute; top:-6vh;
  width:9px; height:9px;
  background:radial-gradient(circle at 30% 30%, #f2cdd3, #c98d97);
  border-radius:0 60% 0 60%;
  animation-name:sakuraFall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes sakuraFall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); }
  100%{ transform:translateY(112vh) translateX(50px) rotate(320deg); }
}

/* ambient sakura: a few petals drifting continuously behind every hero */
.sakura-ambient{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sakura-petal-loop{
  position:absolute; top:-6vh;
  background:radial-gradient(circle at 30% 30%, #f2cdd3, #c98d97);
  border-radius:0 60% 0 60%;
  animation-name:sakuraFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

/* easter egg: hanko seal */
.hanko-seal{
  position:fixed; bottom:90px; right:28px;
  z-index:10000;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-bright);
  color:#1a0507;
  font-family:var(--font-jp);
  font-size:1.5rem;
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
}

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent-bright), #e0555f);
  transform:scaleX(0);
  transform-origin:left;
  z-index:9998;
}

/* split-line headline reveal — initial hidden state is set programmatically via
   gsap.set() in js/scroll-animations.js so GSAP owns the transform outright
   (mixing a CSS transform: translateY() with GSAP's yPercent double-applies the offset) */
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-word-inner{ display:inline-block; }

/* ==========================================================================
   KATANA INTRO
   ========================================================================== */
.intro{
  position:fixed; inset:0;
  z-index:9999;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.intro[data-done="true"]{ pointer-events:none; }

.intro-atmosphere{ position:absolute; inset:0; z-index:2; }

.grain{
  position:absolute; inset:-20%;
  opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

.mist{
  position:absolute;
  width:70vw; height:70vw;
  border-radius:50%;
  filter:blur(60px);
  opacity:0;
  background:radial-gradient(circle, rgba(120,20,28,0.18), transparent 70%);
}
.mist-1{ top:-20%; left:-10%; }
.mist-2{ bottom:-25%; right:-10%; background:radial-gradient(circle, rgba(140,145,155,0.10), transparent 70%); }

.ambient-light{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 52%, rgba(168,34,44,0.10), transparent 70%);
  opacity:0;
}

.dust-field{ position:absolute; inset:0; pointer-events:none; }
.dust{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:rgba(243,237,226,0.5);
  opacity:0;
}

/* katana */
.intro-katana-wrap{
  position:relative;
  z-index:3;
  width:min(78vw, 820px);
  opacity:0;
  will-change:transform, opacity, filter;
}
.katana-svg{ width:100%; height:auto; overflow:visible; }
#bladeGroup{ filter:drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }

.blade-glint{
  position:absolute;
  top:38%; left:20%;
  width:60%; height:6%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  filter:blur(3px);
  opacity:0;
  transform:translateX(-30%);
}

/* slash line */
.slash-line{
  position:absolute;
  top:50%; left:50%;
  width:140vw; height:2px;
  z-index:3;
  transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg, transparent, #fff 15%, #ffdede 50%, #fff 85%, transparent);
  box-shadow:0 0 18px 2px rgba(255,255,255,0.8), 0 0 40px 8px rgba(168,34,44,0.6);
  opacity:0;
}

/* split panels */
.intro-panel{
  position:fixed; left:0; width:100%; height:50vh;
  background:#000;
  z-index:1;
}
.intro-panel-top{ top:0; }
.intro-panel-bottom{ bottom:0; }
.intro-panel::before{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.04;
  mix-blend-mode:overlay;
}

/* wordmark */
.intro-wordmark{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  display:flex; align-items:center; gap:0.9rem;
  opacity:0;
}
.wordmark-kanji{
  font-family:var(--font-jp);
  font-size:1.4rem;
  font-weight:300;
  color:var(--accent-bright);
  border-right:1px solid rgba(243,237,226,0.3);
  padding-right:0.9rem;
}
.wordmark-text{
  font-family:var(--font-serif);
  font-size:clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing:0.28em;
  font-weight:500;
  color:var(--paper);
}

.intro-skip{
  position:absolute; bottom:28px; right:28px;
  z-index:5;
  background:transparent;
  border:1px solid rgba(243,237,226,0.25);
  color:rgba(243,237,226,0.6);
  font-family:var(--font-sans);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:0.55em 1.1em;
  border-radius:2px;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.3s, color 0.2s, border-color 0.2s;
}
.intro-skip:hover{ color:var(--paper); border-color:rgba(243,237,226,0.6); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.25rem, 4vw, 3.5rem);
  background:linear-gradient(to bottom, rgba(10,10,10,0.85), transparent);
  opacity:0;
  transform:translateY(-12px);
  transition:background 0.3s, border-color 0.3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(10,10,10,0.92);
  border-bottom-color:var(--line);
}
.logo{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-serif);
  font-size:1.35rem;
  letter-spacing:0.22em;
  font-weight:500;
}
.logo-kanji{ font-family:var(--font-jp); font-size:1rem; color:var(--accent-bright); }
.main-nav{ display:flex; gap:2.4rem; }
.main-nav a{
  font-size:0.82rem;
  letter-spacing:0.06em;
  color:rgba(243,237,226,0.75);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--accent-bright);
  transition:width 0.25s var(--ease-cinema);
}
.main-nav a:hover{ color:var(--paper); }
.main-nav a:hover::after{ width:100%; }
.main-nav a.is-active, .main-nav a[aria-current="page"]{ color:var(--paper); }
.main-nav a.is-active::after, .main-nav a[aria-current="page"]::after{ width:100%; }

.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:0.8rem;
  letter-spacing:0.06em;
  padding:0.8em 1.7em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.25s var(--ease-cinema);
}
.btn-primary{ background:var(--accent-bright); color:var(--paper); border-color:var(--accent-bright); }
.btn-primary:hover{ background:#c22834; border-color:#c22834; }
.btn-outline{ border-color:rgba(243,237,226,0.35); color:var(--paper); }
.btn-outline:hover{ border-color:var(--paper); background:rgba(243,237,226,0.06); }
.btn-ghost{ color:var(--paper); border-bottom:1px solid rgba(243,237,226,0.4); border-radius:0; padding:0.3em 0; }
.btn-ghost:hover{ border-color:var(--accent-bright); color:var(--accent-bright); }

.nav-cta{ }

.lang-switch{
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.76rem; letter-spacing:0.04em;
  margin-right:0.4rem;
}
.lang-switch a{
  color:rgba(243,237,226,0.45);
  padding:0.2em 0.1em;
  transition:color 0.2s;
}
.lang-switch a:hover{ color:var(--paper); }
.lang-switch a.is-active{ color:var(--accent-bright); }
.lang-switch .sep{ color:rgba(243,237,226,0.25); }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:32px; height:24px; flex-direction:column; justify-content:space-between;
  padding:0;
}
.nav-toggle span{ display:block; width:100%; height:1px; background:var(--paper); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--header-h) + 2rem) 1.5rem 4rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(122,22,32,0.14), transparent 60%),
    linear-gradient(180deg, #050505, #0a0a0a 60%, #0d0d0d);
}
.hero-texture{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.035;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.platform-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
  opacity:0;
}
.platform-canvas.is-ready{ opacity:1; transition:opacity 1.4s ease; }
.hero-vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 55% 42% at 50% 46%, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.25) 55%, transparent 78%);
}
.hero-inner{ position:relative; z-index:2; max-width:820px; }
.platform-strip{
  margin-top:2.6rem;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(243,237,226,0.35);
  opacity:0; transform:translateY(16px);
}
.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent-bright);
  margin-bottom:1.4rem;
  opacity:0; transform:translateY(14px);
}
.hero-title{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.08;
  letter-spacing:0.01em;
  opacity:0; transform:translateY(20px);
}
.hero-title em{ font-style:italic; color:var(--accent-bright); }
.hero-sub{
  margin:1.8rem auto 0;
  max-width:520px;
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(243,237,226,0.68);
  opacity:0; transform:translateY(16px);
}
.hero-actions{
  margin-top:2.6rem;
  display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(16px);
}
.hero-line{
  position:absolute; bottom:96px; left:50%;
  transform:translateX(-50%);
  width:1px; height:60px;
  background:linear-gradient(to bottom, transparent, rgba(243,237,226,0.4));
}
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(243,237,226,0.4);
}
.scroll-cue span{
  width:1px; height:26px;
  background:rgba(243,237,226,0.4);
  animation:scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%,100%{ transform:scaleY(0.4); opacity:0.3; transform-origin:top; }
  50%{ transform:scaleY(1); opacity:1; transform-origin:top; }
}

/* ==========================================================================
   SUBPAGE HERO + BREADCRUMB
   ========================================================================== */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + 5.5rem) clamp(1.5rem, 6vw, 6rem) 5rem;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(122,22,32,0.16), transparent 60%),
    linear-gradient(180deg, #050505, #0a0a0a 70%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero-texture{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.035; mix-blend-mode:overlay; pointer-events:none;
}
.page-hero-ink{
  position:absolute; inset:-10% -10%;
  background-image:url("../assets/img/ink-wash.jpg");
  background-size:cover; background-position:center;
  opacity:0.22; mix-blend-mode:screen; pointer-events:none;
}
.page-hero-temple{
  position:absolute; inset:-10% -10%;
  background-image:url("../assets/img/temple-roofline.jpg");
  background-size:cover; background-position:center;
  opacity:0.4; pointer-events:none;
}

/* full-bleed temple pause, dropped between sections for atmosphere */
.temple-band{
  position:relative;
  min-height:56vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(5,5,5,0.4), rgba(5,5,5,0.72) 65%, rgba(5,5,5,0.94)),
    url("../assets/img/torii-gate.jpg");
  background-size:cover; background-position:center 35%;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.temple-quote{
  position:relative; z-index:1;
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.5rem, 3.2vw, 2.3rem);
  color:var(--paper);
  max-width:640px; padding:0 1.5rem;
  line-height:1.55;
}
.temple-quote .accent{ color:var(--accent-bright); font-style:normal; }
.temple-mark{
  position:relative; z-index:1;
  font-family:var(--font-jp); color:var(--accent-bright);
  font-size:1.1rem; opacity:0.75; margin-bottom:1.2rem; letter-spacing:0.1em;
}

/* about page: image + text split layout */
.about-visual{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:3.5rem;
  align-items:center;
}
.about-visual-img{
  border-radius:2px; overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/5;
}
.about-visual-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual-text p{
  font-family:var(--font-serif); font-size:clamp(1.15rem, 2vw, 1.4rem);
  line-height:1.7; color:rgba(243,237,226,0.85); margin-bottom:1.2rem;
}
.about-visual-text p:last-child{ margin-bottom:0; }

.craft-band{
  position:relative;
  overflow:hidden;
  background-image:url("../assets/img/craft-marks.jpg");
  background-size:cover; background-position:center 40%;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.craft-band::before{
  content:''; position:absolute; inset:-10% 0;
  background:rgba(6,6,6,0.6);
}
.craft-band > *{ position:relative; }
.breadcrumb{
  position:relative;
  max-width:760px; margin:0 auto 1.6rem;
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; color:rgba(243,237,226,0.45);
}
.breadcrumb a{ color:rgba(243,237,226,0.6); }
.breadcrumb a:hover{ color:var(--accent-bright); }
.breadcrumb .sep{ opacity:0.4; }
.page-hero-inner{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
.page-kicker{
  font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:1rem;
}
.page-hero h1{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.15;
}
.page-hero h1 em{ font-style:italic; color:var(--accent-bright); }
.page-hero-sub{
  margin:1.4rem auto 0; max-width:560px;
  font-size:1.05rem; line-height:1.7; color:rgba(243,237,226,0.68);
}

/* generic CTA band used at the end of subpages */
.cta-band{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:6rem clamp(1.5rem, 6vw, 6rem);
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.72), rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.8)),
    url("../assets/img/cta-glow.jpg");
  background-size:cover; background-position:center;
  border-top:1px solid var(--line);
}
.cta-band > *{ position:relative; }
.cta-band h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.8rem, 4vw, 2.6rem); margin-bottom:1.2rem; }
.cta-band p{ color:rgba(243,237,226,0.62); max-width:480px; margin:0 auto 2rem; }

/* simple FAQ / detail accordion-style list (no JS needed, native <details>) */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:1.3rem 0;
}
.faq-list summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-serif); font-size:1.15rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:'+'; color:var(--accent-bright); font-size:1.3rem; flex-shrink:0; }
.faq-list details[open] summary::after{ content:'–'; }
.faq-list p{ margin-top:0.9rem; color:rgba(243,237,226,0.62); font-size:0.95rem; line-height:1.65; }

/* ==========================================================================
   SHARED SECTION LAYOUT
   ========================================================================== */
main{ background:var(--ink); }
section{ padding:7rem clamp(1.5rem, 6vw, 6rem); position:relative; }
.section-head{ max-width:640px; margin:0 auto 3.6rem; text-align:center; }
.section-kicker{
  font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:0.9rem;
}
.section-head h2{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.25;
}
.section-sub{ margin-top:0.9rem; color:rgba(243,237,226,0.6); font-size:0.98rem; }

/* manifesto */
.manifesto{
  max-width:760px; margin:0 auto;
  text-align:center;
  padding:6rem 1.5rem;
}
.manifesto-mark{
  font-family:var(--font-jp);
  font-size:2rem;
  color:var(--accent-bright);
  opacity:0.7;
  margin-bottom:1.4rem;
}
.manifesto p{
  font-family:var(--font-serif);
  font-size:clamp(1.25rem, 2.4vw, 1.65rem);
  line-height:1.65;
  color:rgba(243,237,226,0.88);
  font-weight:400;
}

/* platforms */
.platform-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.platform-card{
  border:1px solid var(--line);
  padding:2.4rem 2rem;
  transition:border-color 0.3s, transform 0.1s;
  perspective:800px;
}
.platform-card:hover{ border-color:rgba(168,34,44,0.5); }
.platform-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  margin-bottom:1.4rem;
  border-radius:50%;
  border:1px solid rgba(243,237,226,0.25);
  background:radial-gradient(circle at 35% 30%, rgba(243,237,226,0.08), transparent 70%);
  position:relative;
}
.platform-icon::before{
  content:'';
  width:22px; height:22px;
  background:rgba(243,237,226,0.85);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.platform-icon[data-icon="instagram"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.3' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.3' fill='black'/%3E%3C/svg%3E"); }
.platform-icon[data-icon="tiktok"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3c.5 2.4 2 4 4.5 4.2V10c-1.7 0-3.2-.5-4.5-1.5v6.6a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3H15Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3c.5 2.4 2 4 4.5 4.2V10c-1.7 0-3.2-.5-4.5-1.5v6.6a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3H15Z' fill='black'/%3E%3C/svg%3E"); }
.platform-icon[data-icon="meta"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 3.5h-2.2c-2.3 0-3.8 1.5-3.8 3.9v2.3H6.3v3.2h2.2V21h3.4v-8.1h2.4l.5-3.2h-2.9V7.8c0-.9.4-1.4 1.4-1.4h1.7V3.5Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 3.5h-2.2c-2.3 0-3.8 1.5-3.8 3.9v2.3H6.3v3.2h2.2V21h3.4v-8.1h2.4l.5-3.2h-2.9V7.8c0-.9.4-1.4 1.4-1.4h1.7V3.5Z' fill='black'/%3E%3C/svg%3E"); }
.platform-icon[data-icon="linkedin"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='3.4' height='11.5' fill='black'/%3E%3Ccircle cx='4.7' cy='4.7' r='2' fill='black'/%3E%3Cpath d='M10.2 9h3.3v1.6h.1c.5-.9 1.7-1.9 3.4-1.9 3.6 0 4.3 2.2 4.3 5.2v6.6h-3.4v-5.9c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1v6h-3.4V9Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='3.4' height='11.5' fill='black'/%3E%3Ccircle cx='4.7' cy='4.7' r='2' fill='black'/%3E%3Cpath d='M10.2 9h3.3v1.6h.1c.5-.9 1.7-1.9 3.4-1.9 3.6 0 4.3 2.2 4.3 5.2v6.6h-3.4v-5.9c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1v6h-3.4V9Z' fill='black'/%3E%3C/svg%3E"); }
.platform-icon[data-icon="youtube"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5.5' width='20' height='13' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 9.2v5.6l5-2.8-5-2.8Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5.5' width='20' height='13' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 9.2v5.6l5-2.8-5-2.8Z' fill='black'/%3E%3C/svg%3E"); }
.platform-icon[data-icon="google"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.2c0-.7-.1-1.4-.2-2H12v3.9h5c-.2 1.2-.9 2.2-1.9 2.9v2.4h3.1c1.8-1.7 2.8-4.2 2.8-7.2Z' fill='black'/%3E%3Cpath d='M12 21c2.6 0 4.7-.8 6.3-2.3l-3.1-2.4c-.9.6-2 .9-3.2.9-2.5 0-4.6-1.6-5.3-3.9H3.5v2.5A9 9 0 0 0 12 21Z' fill='black'/%3E%3Cpath d='M6.7 13.3a5.4 5.4 0 0 1 0-3.4V7.4H3.5a9 9 0 0 0 0 8.4l3.2-2.5Z' fill='black'/%3E%3Cpath d='M12 6.1c1.4 0 2.7.5 3.7 1.4l2.7-2.6A9 9 0 0 0 3.5 7.4l3.2 2.5C7.4 7.7 9.5 6.1 12 6.1Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.2c0-.7-.1-1.4-.2-2H12v3.9h5c-.2 1.2-.9 2.2-1.9 2.9v2.4h3.1c1.8-1.7 2.8-4.2 2.8-7.2Z' fill='black'/%3E%3Cpath d='M12 21c2.6 0 4.7-.8 6.3-2.3l-3.1-2.4c-.9.6-2 .9-3.2.9-2.5 0-4.6-1.6-5.3-3.9H3.5v2.5A9 9 0 0 0 12 21Z' fill='black'/%3E%3Cpath d='M6.7 13.3a5.4 5.4 0 0 1 0-3.4V7.4H3.5a9 9 0 0 0 0 8.4l3.2-2.5Z' fill='black'/%3E%3Cpath d='M12 6.1c1.4 0 2.7.5 3.7 1.4l2.7-2.6A9 9 0 0 0 3.5 7.4l3.2 2.5C7.4 7.7 9.5 6.1 12 6.1Z' fill='black'/%3E%3C/svg%3E"); }
.platform-card h3{ font-family:var(--font-serif); font-size:1.3rem; font-weight:500; margin-bottom:0.7rem; }
.platform-card p{ color:rgba(243,237,226,0.62); font-size:0.92rem; line-height:1.6; }

/* services */
.services-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--ink);
  padding:2.6rem 2.2rem;
  transition:background 0.3s;
}
.service-card:hover{ background:var(--ink-soft); }
.service-index{
  display:block; font-family:var(--font-serif); font-size:0.95rem;
  color:var(--accent-bright); margin-bottom:1.2rem; letter-spacing:0.08em;
}
.service-card h3{
  font-family:var(--font-serif); font-size:1.35rem; font-weight:500; margin-bottom:0.8rem;
}
.service-card p{ color:rgba(243,237,226,0.62); font-size:0.92rem; line-height:1.6; }

/* detailed service blocks (subpages) */
.services-detail{
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column;
}
.service-detail{
  padding:3rem 0;
  border-bottom:1px solid var(--line);
}
.services-detail .service-detail:first-child{ padding-top:0; }
.service-detail-head{
  display:flex; align-items:baseline; gap:1.2rem; margin-bottom:1rem;
}
.service-detail-head h2{ font-family:var(--font-serif); font-weight:500; font-size:1.7rem; }
.service-detail > p{ color:rgba(243,237,226,0.68); font-size:1rem; line-height:1.75; max-width:640px; }
.service-detail-list{
  margin-top:1.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 2rem;
}
.service-detail-list li{
  font-size:0.9rem; color:rgba(243,237,226,0.6);
  padding-left:1.1rem; position:relative;
}
.service-detail-list li::before{
  content:''; position:absolute; left:0; top:0.55em;
  width:5px; height:1px; background:var(--accent-bright);
}

/* process */
.process-wrap{ position:relative; max-width:760px; margin:0 auto; }
.process-list{
  display:flex; flex-direction:column; gap:0;
}
.process-line{
  position:absolute; left:1.15rem; top:0.4rem; bottom:0.4rem;
  width:1px;
  background:var(--line);
}
.process-line-fill{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--accent-bright), #e0555f);
  transform:scaleY(0);
  transform-origin:top;
}
.process-list li{
  position:relative;
  display:flex; gap:2rem; align-items:flex-start;
  padding:2rem 0;
  border-bottom:1px solid var(--line);
}
.process-list li:first-child{ border-top:1px solid var(--line); }
.process-num{
  position:relative; z-index:1;
  font-family:var(--font-serif); font-size:1.4rem; color:var(--accent-bright);
  min-width:2.4rem;
  background:var(--ink);
}
.process-list h3{ font-family:var(--font-serif); font-size:1.3rem; font-weight:500; margin-bottom:0.4rem; }
.process-list p{ color:rgba(243,237,226,0.6); font-size:0.92rem; line-height:1.6; }
.process-list-detailed p{ max-width:600px; font-size:0.98rem; line-height:1.7; }

/* pricing */
.pricing-grid{
  max-width:1140px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.price-card{
  border:1px solid var(--line);
  padding:2.6rem 2.2rem;
  display:flex; flex-direction:column;
  position:relative;
}
.price-card-featured{
  border-color:var(--accent-bright);
  background:linear-gradient(180deg, rgba(122,22,32,0.08), transparent);
}
.price-badge{
  position:absolute; top:-13px; left:2.2rem;
  background:var(--accent-bright); color:var(--paper);
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.35em 0.8em; border-radius:2px;
}
.price-card h3{ font-family:var(--font-serif); font-size:1.5rem; font-weight:500; }
.price-desc{ color:rgba(243,237,226,0.55); font-size:0.88rem; margin-top:0.5rem; min-height:2.4em; }
.price-amount{
  font-family:var(--font-serif); font-size:2.4rem; margin:1.2rem 0 1.6rem; font-weight:500;
}
.price-amount span{ font-size:0.9rem; color:rgba(243,237,226,0.5); font-family:var(--font-sans); }
.price-card ul{ flex:1; margin-bottom:1.8rem; }
.price-card li{
  font-size:0.88rem; color:rgba(243,237,226,0.72);
  padding:0.5em 0; border-top:1px solid var(--line);
}
.price-card li:first-child{ border-top:none; }
.price-card .btn{ text-align:center; }
.pricing-note{
  text-align:center; margin-top:2.4rem;
  font-size:0.85rem; color:rgba(243,237,226,0.5);
}

/* "see more" links under teaser sections on the homepage */
.section-more{
  text-align:center; margin-top:2.8rem;
  font-size:0.88rem; letter-spacing:0.02em;
}
.section-more a{
  color:var(--accent-bright);
  border-bottom:1px solid rgba(168,34,44,0.4);
  padding-bottom:2px;
  transition:border-color 0.2s, color 0.2s;
}
.section-more a:hover{ color:var(--paper); border-color:var(--paper); }

/* why */
.why{ background:var(--ink-soft); }
.why-inner{ max-width:760px; margin:0 auto; }
.why-list{ display:flex; flex-direction:column; gap:0; }
.why-list li{
  display:flex; align-items:center; gap:1.6rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line);
  font-size:1.02rem; color:rgba(243,237,226,0.82);
}
.why-list li:first-child{ border-top:1px solid var(--line); }
.why-list span{
  font-family:var(--font-serif); color:var(--accent-bright); font-size:1.1rem; min-width:2rem;
}

/* contact */
.contact-grid{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:3.5rem;
}
.form-row{ margin-bottom:1.3rem; display:flex; flex-direction:column; gap:0.5rem; }
.form-row label{ font-size:0.78rem; letter-spacing:0.06em; color:rgba(243,237,226,0.6); }
.form-row input, .form-row textarea{
  background:transparent;
  border:1px solid var(--line);
  color:var(--paper);
  padding:0.85em 1em;
  font-family:var(--font-sans);
  font-size:0.95rem;
  border-radius:2px;
  resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--accent-bright);
}
.form-note{ margin-top:1rem; font-size:0.85rem; color:var(--accent-bright); min-height:1.2em; }
.contact-info p{
  display:flex; flex-direction:column; gap:0.3rem;
  padding:1.2rem 0; border-bottom:1px solid var(--line);
  font-size:0.98rem;
}
.contact-info p:first-child{ padding-top:0; }
.contact-info span{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(243,237,226,0.45); }
.contact-info a:hover{ color:var(--accent-bright); }

/* footer */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.2rem;
  padding:2rem clamp(1.5rem, 6vw, 6rem);
  border-top:1px solid var(--line);
  font-size:0.8rem; color:rgba(243,237,226,0.45);
}
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a{ color:rgba(243,237,226,0.5); font-size:0.8rem; }
.footer-nav a:hover{ color:var(--accent-bright); }
.footer-mark{ font-family:var(--font-jp); color:var(--accent-bright); opacity:0.6; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .services-grid{ grid-template-columns:1fr; }
  .platform-grid{ grid-template-columns:1fr; }
  .service-detail-list{ grid-template-columns:1fr; }
  .about-visual{ grid-template-columns:1fr; gap:2rem; }
  .about-visual-img{ aspect-ratio:16/10; max-width:420px; margin:0 auto; }
  .pricing-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
  section{ padding:5rem 1.5rem; }
  .wordmark-text{ letter-spacing:0.18em; }
  .platform-canvas.is-ready{ opacity:0.5; }
  .page-hero{ padding:calc(var(--header-h) + 3rem) 1.5rem 3.5rem; }
  .cta-band{ padding:4rem 1.5rem; }
  .hero-vignette{ background:radial-gradient(ellipse 70% 55% at 50% 46%, rgba(5,5,5,0.82) 0%, rgba(5,5,5,0.4) 55%, transparent 78%); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .scroll-cue span{ animation:none; }
  [data-tilt]{ transform:none !important; }
  .platform-canvas{ display:none; }
}