/* ==========
   BEAMDESIGN – main.css
   ========== */

:root{
  --bg:#d4d9d8;
  --fg:#111111;
  --muted:#6b6b6b;
  --line:rgba(0,0,0,.10);
  --overlay:rgba(255,255,255,.60);
  --overlay-dark:rgba(0,0,0,.18);
  /* XDレイアウト基準（1920px幅想定） */
  --max:1840px;           /* 1920 - 40 - 40 */
  --g:46px;               /* グリッド間隔（XDに合わせてやや広め） */
  --logo-size:30px;
  --nav-size:12px;
  --body-size:13px;
  --lh:2.2;
  --header-pad:24px;
}

html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: source-han-sans-japanese, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight:300;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
*{box-sizing:border-box;}
::selection{background:rgba(0,0,0,.08);}

.container{
  width:min(var(--max), calc(100% - 80px));
  margin:0 auto;
}

@media (max-width: 768px){
  .container{ width:calc(100% - 44px); }
  :root{ --header-pad:22px; --g:26px; }
}

/* ========== Header ========== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding: var(--header-pad) 0;
  pointer-events:none; /* allow hero to be clickable; we re-enable on inner area */
    overflow: visible !important;
}

.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
  width:min(var(--max), calc(100% - 80px));
  margin:0 auto;
    min-height: 24px !important;
}

@media (max-width:768px){
  .site-header .header-inner{ width:calc(100% - 44px); }
}

.brand{
  font-size: var(--logo-size);
  font-weight:300;
  letter-spacing:.05em;
  line-height:1;
}

.nav{
  display:flex;
  align-items:center;
  gap:20px;
  font-size: var(--nav-size);
  font-weight:400;
  letter-spacing:.12em;
}

.nav a{opacity:.92;}
.nav a:hover{opacity:1;}

.nav .ig{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  opacity:.9;
}

.ig svg{width:100%;height:100%;display:block;}
.nav-toggle{
  display:none;
  border:0; background:transparent;
  padding:8px;
  margin-left:6px;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
}
.nav-toggle svg{width:22px; height:22px; display:block;}

@media (max-width: 1024px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* mobile drawer */
.drawer{
  position:fixed;
  top:0; right:-340px;
  width:min(340px, 84vw);
  height:100%;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-left:1px solid var(--line);
  z-index:60;
  transition:right .28s ease;
  padding:26px 24px;
}
.drawer.open{ right:0; }
.drawer .drawer-close{
  border:0; background:transparent; padding:8px; margin-left:auto; display:block;
}
.drawer nav{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:13px;
  letter-spacing:.12em;
}
.drawer a{padding:6px 2px;}
.drawer .ig-row{display:flex; align-items:center; gap:10px; opacity:.9;}

.drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.18);
  z-index:55;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

/* header band on inner pages */
.header-band{
  position:fixed;
  top:0; left:0; right:0;
  height:90px;
  background:rgba(255,255,255,.0);
  backdrop-filter:none;
  z-index:40;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom: 1px solid rgba(0,0,0,0);
}
.header-band.on{
  background:rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
@media (max-width:768px){
  .header-band{ height:74px; }
}

/* theme switching for hero overlay */
.theme-dark{ --fg:#ffffff; --line:rgba(255,255,255,.18); }
.theme-dark .drawer{ background:rgba(15,15,15,.92); border-left:1px solid rgba(255,255,255,.12); }
.theme-dark .drawer a, .theme-dark .drawer nav{ color:#fff; }
.theme-dark .drawer-backdrop{ background:rgba(0,0,0,.36); }
.theme-dark .header-band.on{ background:rgba(10,10,10,.44); border-bottom:1px solid rgba(255,255,255,.12); }
.theme-dark .header-band{ border-bottom-color: rgba(255,255,255,0); }

/* ========== Footer ========== */
.site-footer{
  position: relative;
  left:auto; right:auto; bottom:auto;
  z-index: 1;
  padding: 18px 0;
  pointer-events:auto;
}
.site-footer .footer-inner{
  width:min(var(--max), calc(100% - 80px));
  margin:0 auto;
  display:flex;
  justify-content:flex-start;
  pointer-events:auto;
}
.site-footer small{
  font-size:10px;
  letter-spacing:.12em;
  opacity:.7;
}
@media (max-width:768px){
  .site-footer .footer-inner{ width:calc(100% - 44px); }
}

/* ========== Pages common ========== */
.page{
  /*
    Inner pages start position:
    The header is fixed. Keep content consistently ~60px below the header band.
    (previously 200px which pushed content too low on Service / Works etc.)
  */
  padding-top: 140px;
  padding-bottom: 120px;
}
@media (max-width:768px){
  .page{ padding-top: 110px; padding-bottom: 110px; }
}

.h1{
  font-size:18px;
  letter-spacing:.18em;
  font-weight:300;
  margin:0 0 22px;
}

.p{
  font-size: var(--body-size);
  line-height: var(--lh);
  margin:0;
  color:rgba(0,0,0,.72);
}
.theme-dark .p{ color:rgba(255,255,255,.80); }

.section-gap{ height:56px; }

/* ========== Hero slider ========== */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#d0d0d0;
}

.hero .slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  background:#d0d0d0;
}
.hero .slide.is-active{ opacity:1; }

.hero .slide .hero-media{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero .overlay{
  position:absolute; inset:0;
  pointer-events:none;
}

.hero .hud{
  position:absolute;
  left:min(40px, 5vw);
  bottom:min(42px, 6vh);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:10;
}

.stars{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
}
.stars button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:.35;
  transition:opacity .2s ease;
}
.stars button.is-on{ opacity:1; }
.stars svg{ width:12px; height:12px; }

.hero-caption{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:500;
  opacity:.9;
}

@media (max-width:768px){
  .hero .hud{
    left:22px;
    bottom:24px;
  }
}

/* ========== Works index ========== */
.works-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g);
}
@media (max-width: 1280px){
  .works-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px){
  .works-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .works-grid{ grid-template-columns: 1fr; }
}

.card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.thumb{
  width:100%;
  background:#cfcfcf;
  /* XD：横長サムネ比率 */
  aspect-ratio: 3 / 2;
  overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }

.card .meta{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:500;
  color:rgba(0,0,0,.62);
}

.more-wrap{
  display:flex;
  justify-content:center;
  margin-top:64px;
}
.more-btn{
  border:0;
  background:transparent;
  font-size:11px;
  letter-spacing:.18em;
  padding:14px 24px;
  cursor:pointer;
  opacity:.8;
}
.more-btn:hover{ opacity:1; }

/* ========== Work detail ========== */
.work-detail{
  /* XD：左寄せの細いカラム */
  max-width:700px;
  margin-left:266px; /* 306(画面) - 40(コンテナ余白) */
  margin-right:auto;
}
@media (max-width: 1100px){
  .work-detail{ margin-left:auto; margin-right:auto; max-width:860px; }
}
.work-toptext{
  font-size:12px;
  line-height:2.2;
  color:rgba(0,0,0,.70);
  margin:0 0 34px;
}
.work-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}
/* Works詳細：画像は横幅をキープしつつ、縦は元比率に追従（縦長もトリミングしない） */
.work-detail .figure{
  background:transparent;
  aspect-ratio:auto;
  overflow:hidden;
}
.work-detail .figure img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

.backlink{
  display:flex;
  justify-content:center;
  margin-top:54px;
  font-size:10px;
  letter-spacing:.18em;
  opacity:.7;
}
.backlink:hover{ opacity:1; }

/* ========== About ========== */
.about-wrap{
  max-width:900px;
  margin-left:411px; /* 451(画面) - 40(コンテナ余白) */
  margin-right:auto;
}
.about-title{
  font-size:18px;
  letter-spacing:.18em;
  font-weight:300;
  margin:0 0 18px;
  text-align:left;
}
.about-text{
  font-size:12px;
  line-height:2.2;
  color:rgba(0,0,0,.70);
  margin:0;
  max-width:760px;
}
.about-block{ margin-top:64px; }

@media (max-width: 1100px){
  .about-wrap{ margin-left:auto; margin-right:auto; }
  .about-wrap{ padding:0 24px; box-sizing:border-box; text-align:left; }
  .about-title{ text-align:left; }
  .about-text{ margin:0 auto; }
}

.profile{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:12px 34px;
  margin-top:24px;
  font-size:12px;
  line-height:2.2;
  color:rgba(0,0,0,.70);
}
.profile dt{ opacity:.85; }
.profile dd{ margin:0; }
@media (max-width:560px){
  .profile{ grid-template-columns: 110px 1fr; gap:10px 16px; }
}

/* ========== Service ========== */
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 426px));
  column-gap:49px;
  row-gap:86px;
  justify-content:center;
}
@media (max-width: 1024px){
  .service-grid{ grid-template-columns: repeat(2, minmax(0, 426px)); column-gap:36px; row-gap:64px; justify-content:center; }
}
@media (max-width: 560px){
  .service-grid{ grid-template-columns: 1fr; }
}

.service-card .thumb{ margin-bottom:18px; }

.service-card .title{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:500;
  margin:0;
}
.service-card .desc{
  margin-top:10px;
  font-size:11px;
  line-height:2.1;
  color:rgba(0,0,0,.68);
}

/* ========== Contact ========== */
.contact-wrap{
  max-width:700px;
  margin-left:411px; /* 450(画面) - 40(コンテナ余白) */
  margin-right:auto;
}
.contact-title{
  font-size:18px;
  letter-spacing:.18em;
  font-weight:300;
  text-align:left;
  margin:0 0 26px;
}
.contact-body{
  max-width:760px;
  margin:0;
  font-size:12px;
  line-height:2.2;
  color:rgba(0,0,0,.72);
}
.contact-body .mono{ letter-spacing:.06em; }

@media (max-width: 1100px){
  .contact-wrap{ margin-left:auto; margin-right:auto; }
  .contact-wrap{ padding:0 24px; box-sizing:border-box; text-align:left; }
  .contact-title{ text-align:left; }
  .contact-body{ margin:0 auto; }
}

/* ========== Utilities ========== */
.hidden{ display:none !important; }

/* Logo */
.brand{display:inline-flex;align-items:flex-start;text-decoration:none;}
.brand .logo{display:block;height:22px;width:auto;}
@media (min-width: 960px){ .brand .logo{height:26px;} }
html[data-ui-theme="dark"] .brand .logo{filter: invert(1) brightness(1.05);}

/* === TOP PAGE FIXES === */
.hero{position:relative;min-height:100vh;background:#ccc;}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s;}
.hero .slide.is-active{opacity:1;z-index:1;}
.hero .slide .hero-media{width:100%;height:100%;object-fit:cover;display:block;}

.hud{position:fixed;left:40px;bottom:40px;z-index:10;}
@media (min-width:1920px){
  .hud{left:60px;bottom:60px;}
}

.hero-caption{margin-top:8px;font-size:11px;letter-spacing:.08em;}

.site-header{position:fixed;top:0;left:0;width:100%;z-index:20;}
.header-inner{padding:24px 40px;}
@media (min-width:1920px){
  .header-inner{padding:32px 60px;}
}

/* theme switching */
html[data-ui-theme="dark"]{color:#fff;}
html[data-ui-theme="dark"] .nav a,
html[data-ui-theme="dark"] .hero-caption{color:#fff;}
html[data-ui-theme="light"]{color:#000;}
html[data-ui-theme="light"] .nav a,
html[data-ui-theme="light"] .hero-caption{color:#000;}


/* === TOP PAGE LAYOUT / HUD FIX v2 === */
.hero{position:relative;min-height:100vh;background:#cfcfcf;overflow:hidden;}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero .slide.is-active{opacity:1;}
.hero .slide .hero-media{width:100%;height:100%;object-fit:cover;display:block;}

/* prevent any text from showing inside brand link */
.brand{font-size:0;line-height:0;}
.brand .logo{font-size:0;line-height:0;}

/* fixed positions */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:30;}
.header-inner{padding:24px 40px;}
.hud{position:fixed;left:40px;bottom:40px;z-index:25;pointer-events:none;}
@media (min-width:1920px){
  .header-inner{padding:32px 60px;}
  .hud{left:60px;bottom:60px;}
}

/* stars + caption */
.stars{display:flex;gap:6px;align-items:center;}
.stars .star{font-size:12px;opacity:.35;transform:translateY(-1px);}
.stars .star.is-active{opacity:1;}
.hero-caption{margin-top:10px;font-size:11px;letter-spacing:.08em;}

/* theme colors */
html[data-ui-theme="dark"] .nav a,
html[data-ui-theme="dark"] .hero-caption,
html[data-ui-theme="dark"] .stars{color:#fff;}
html[data-ui-theme="light"] .nav a,
html[data-ui-theme="light"] .hero-caption,
html[data-ui-theme="light"] .stars{color:#000;}

/* logo invert already in file; keep */


/* === TOP FIX v3: header/hud edge lock + clickable stars + theme specificity === */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:30;}
.header-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:24px 40px !important;
}
@media (min-width: 960px){
  .header-inner{padding:28px 40px !important;}
}

/* lock HUD to viewport edge (no centering / no container) */
.hud{
  position:fixed;
  left:40px !important;
  bottom:40px !important;
  z-index:25;
  pointer-events:auto; /* enable clicking */
}
.stars{pointer-events:auto;}
.stars .star{
  cursor:pointer;
  user-select:none;
  color:currentColor; /* ensure theme applies */
}

/* Ensure nav + icons follow theme even if other rules exist */
html[data-ui-theme="dark"] .nav a,
html[data-ui-theme="dark"] .nav .ig,
html[data-ui-theme="dark"] .hero-caption,
html[data-ui-theme="dark"] .stars{color:#fff !important;}

html[data-ui-theme="light"] .nav a,
html[data-ui-theme="light"] .nav .ig,
html[data-ui-theme="light"] .hero-caption,
html[data-ui-theme="light"] .stars{color:#000 !important;}

/* === TOP FIX v4 (finalize) === */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:30;}
.header-band{position:fixed;top:0;left:0;width:100%;height:0;z-index:29;}
.header-inner{padding:32px 40px !important; width:100% !important; max-width:none !important; margin:0 !important;}
@media (min-width:1920px){ .header-inner{padding:40px 60px !important;} }

.brand{display:flex;align-items:flex-start;text-decoration:none;}
.brand img.logo{display:block;height:26px;width:auto;}
@media (min-width:1920px){ .brand img.logo{height:30px;} }

/* hero + hud */
.hero{position:relative;min-height:100vh;background:#cfcfcf;overflow:hidden;}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero .slide.is-active{opacity:1;}
.hero .slide .hero-media{width:100%;height:100%;object-fit:cover;display:block;}

.hud{position:fixed;left:40px;bottom:40px;z-index:25;}
@media (min-width:1920px){ .hud{left:60px;bottom:60px;} }

.stars{display:flex;gap:6px;align-items:center;}
.stars .star{
  appearance:none;border:0;background:transparent;padding:0;
  font-size:12px;line-height:1;
  opacity:.35;
  cursor:pointer;
  color:inherit !important;
}
.stars .star.is-active{opacity:1;}
.hero-caption{margin-top:10px;font-size:11px;letter-spacing:.08em;color:inherit !important;}

/* theme */
html[data-ui-theme="dark"] .nav a,
html[data-ui-theme="dark"] .nav .ig,
html[data-ui-theme="dark"] .hud,
html[data-ui-theme="dark"] .hero-caption,
html[data-ui-theme="dark"] .stars,
html[data-ui-theme="dark"] .stars .star{color:#fff !important;}

html[data-ui-theme="light"] .nav a,
html[data-ui-theme="light"] .nav .ig,
html[data-ui-theme="light"] .hud,
html[data-ui-theme="light"] .hero-caption,
html[data-ui-theme="light"] .stars,
html[data-ui-theme="light"] .stars .star{color:#000 !important;}

/* ensure any stray caption text node is not displayed elsewhere */
[data-slide][data-caption]{}

/* === TOP FIX v5 (caption selector + header height) === */
.header-inner{padding:44px 40px !important;}
@media (min-width:1920px){ .header-inner{padding:52px 60px !important;} }
.site-header{min-height:96px;}


/* =========================
   HEADER FIX（TOP ONLY） v6.3
   - header.site-header の上下padding(34px)が原因でヘッダーが低く見えるため、
     TOPだけ padding を0にして、位置は header-inner のpaddingで管理する
========================= */
body.is-home .site-header{
  padding-top:0 !important;
  padding-bottom:0 !important;
  height:auto !important;
}
body.is-home .header-inner{
  padding-top:40px !important;
  padding-left:40px !important;
  padding-right:40px !important;
}
@media (min-width:1920px){
  body.is-home .header-inner{
    padding-top:40px !important;
    padding-left:40px !important;
    padding-right:40px !important;
  }
}


/* =========================
   SUBPAGES HEADER POSITION FIX v6.6
   - トップと同じヘッダー位置に合わせる
========================= */
body:not(.is-home) .site-header{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body:not(.is-home) .header-inner{
  padding-top:56px !important;
  padding-bottom:0 !important;
  padding-left:40px !important;
  padding-right:40px !important;
}
@media (min-width:1920px){
  body:not(.is-home) .header-inner{
    padding-top:56px !important;
    padding-left:40px !important;
    padding-right:40px !important;
  }
}

body:not(.is-home) .site-header{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body:not(.is-home) .header-inner{
  padding-top:24px !important;  /* XD基準：上に詰める */
  padding-bottom:18px !important;
  padding-left:40px !important;
  padding-right:40px !important;
}
@media (min-width:1920px){
  body:not(.is-home) .header-inner{
    padding-top:24px !important;
    padding-bottom:18px !important;
    padding-left:40px !important;
    padding-right:40px !important;
  }
}


/* =========================
   PATCH v7 (2026-01-23)
   - Rig Shaded font usage (Light/Medium)
   - Subpage header +16px
   - Nav hover underline
   - Works index card hover brighten
   - Works detail centered + top line medium
   - Subpage scroll header band
   - About centered container
========================= */

/* Adobe Fonts (kit: rxn7yaw)
   Use the exact family names from Adobe Fonts first, then fall back. */
:root{
  --ff-rig-light: "rig-shaded-light-face", "rig-shaded", "Rig Shaded", "rig shaded", system-ui, -apple-system,
                  "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ff-rig-medium: "rig-shaded-medium-face", "rig-shaded", "Rig Shaded", "rig shaded", system-ui, -apple-system,
                   "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* --- Header position (subpages only) --- */
body.subpage .site-header{ top:16px; }
body.subpage .header-band{ top:16px; }

/* --- Subpage scroll band visibility (JS toggles .on) --- */
body.subpage .header-band{ background:rgba(255,255,255,0); border-bottom-color:rgba(0,0,0,0); }

/* --- Nav font + underline hover --- */
.nav{
  font-family:var(--ff-rig-medium);
  font-weight:500; /* Medium Face */
}
.nav a{
  position:relative;
  text-decoration:none;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after,
.nav a:focus-visible::after{
  transform:scaleX(1);
}

/* TOP：indicator caption font */
body.is-home .hero-caption{
  font-family:var(--ff-rig-medium);
  font-weight:500;
}

/* Subpages：copyright font */
body.subpage .site-footer small{
  font-family:var(--ff-rig-light);
  font-weight:300; /* Light Face */
}

/* About：PHILOSOPHY / PROFILE */
body.page-about .about-title{
  font-family:var(--ff-rig-light);
  font-weight:300;
}

/* About：center container but keep text-left */
body.page-about .about-wrap{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

/* Works index：card meta + MORE */
body.page-works .works-grid .meta{
  font-family:var(--ff-rig-light);
  font-weight:300;
}
body.page-works .more-btn{
  font-family:var(--ff-rig-medium);
  font-weight:500;
}

/* Works index：hover brighten */
body.page-works .works-grid .thumb img{
  transition:filter .2s ease;
}
body.page-works .works-grid .card:hover .thumb img{
  filter:brightness(1.06);
}

/* Service：card first line (title) */
body.page-service .service-card .title{
  font-family:var(--ff-rig-medium);
  font-weight:500;
}

/* Contact：CONTACT */
body.page-contact .contact-title{
  font-family:var(--ff-rig-light);
  font-weight:300;
}

/* Works detail：center align (remove left offset) */
body.page-works-detail .work-detail{
  margin-left:auto;
  margin-right:auto;
}

/* Works detail：top comment 1st line medium */
body.page-works-detail .work-toptext .line1{
  font-family:var(--ff-rig);
  font-weight:500 !important;
}


/* Works detail：BACK TO INDEX = Rig Shaded Medium */
body.page-works-detail .backlink{
  font-family:var(--ff-rig-medium);
  font-weight:500;
}


/* =========================================================
   FIX v3 (2026-01-23)
   - Subpage header translucent band on scroll (fade)
   - Contact alignment to About (title + body left line)
========================================================= */

/* Subpage header: keep +16px, add fade-in translucent background on scroll */
body.subpage .site-header{
  top:16px !important;
  background:transparent !important;
  transition: background .22s ease, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}
body.subpage.is-scrolled .site-header{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Contact: align title/body left line to About (PHILOSOPHY) */
body.page-contact .contact-wrap{
  max-width:900px !important;          /* match about-wrap */
  margin-left:411px !important;        /* same left start as about */
  margin-right:auto !important;
}
body.page-contact .contact-title{
  margin:0 0 18px !important;          /* match about-title rhythm */
  text-align:left !important;
}
body.page-contact .contact-body{
  max-width:760px !important;          /* match about-text width */
  margin:0 !important;                 /* keep left aligned */
  text-align:left !important;
}

/* Responsive: keep container centered but text left */
@media (max-width: 1100px){
  body.page-contact .contact-wrap{
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
  body.page-contact .contact-body{
    margin:0 !important;
  }
}


/* =========================================================
   FIX v4.1 (override at EOF)
========================================================= */
:root{ --about-left-start: 411px; }

/* CONTACT: match ABOUT text container exactly (centered container, text-left) */
body.page-contact .contact-wrap{
  max-width:900px !important;     /* match about-wrap */
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:left !important;
}
body.page-contact .contact-title{
  margin:0 0 18px !important;     /* match about-title rhythm */
  text-align:left !important;
}
body.page-contact .contact-body{
  max-width:760px !important;     /* match about-text width */
  margin:0 !important;
  text-align:left !important;
}

@media (max-width: 1100px){
  body.page-contact .contact-wrap{
    padding:0 24px !important;    /* match about-wrap responsive padding */
    box-sizing:border-box !important;
  }
}
/* SUBPAGES header band: from top 0, include gap, fade in on scroll */
body.subpage .header-band{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:106px !important; /* header height + subpage offset (16px) */
  z-index:40 !important;   /* behind header (logo/nav) */
  pointer-events:none !important;
  opacity:0 !important;
  background:rgba(255,255,255,.50) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:0 !important;              /* no line */
  border-bottom:0 !important;       /* no line */
  box-shadow:none !important;
  transition: opacity .25s ease !important;
}
body.subpage.is-scrolled .header-band{ opacity:1 !important; }

@media (max-width:768px){
  body.subpage .header-band{ height:90px !important; } /* 74px + 16px */
}

/* Keep header itself transparent; band handles overlay */
body.subpage .site-header,
body.subpage.is-scrolled .site-header{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Works detail title/body */
body.page-works-detail .work-title{
  margin:0 0 18px;
  font-size:18px;
  letter-spacing:.04em;
  line-height:1.7;
  color:rgba(0,0,0,.82);
  font-family:var(--ff-rig);
  font-weight:500 !important; /* Medium */
  text-align:left;
}
body.page-works-detail .work-body{
  margin:0 0 34px;
  font-size:12px;
  line-height:2.2;
  color:rgba(0,0,0,.70);
}

/* === FIX v5 (2026-01) : header band layering + contact alignment === */

/* Header band should sit BEHIND header content and fade in on scroll (subpages only) */
.header-band{
  pointer-events:none !important;
  border-bottom:0 !important;           /* no line */
}
body.subpage .header-band{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:120px !important;              /* cover header area (no top gap) */
  z-index:45 !important;                /* behind .site-header (50) */
  opacity:0 !important;
  background:rgba(255,255,255,0) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .22s ease, background .22s ease;
}
@media (max-width:768px){
  body.subpage .header-band{ height:96px !important; }
}
body.subpage.is-scrolled .header-band{
  opacity:1 !important;
  background:rgba(255,255,255,.50) !important; /* ~50% white */
}

/* Ensure header itself stays above and does not draw its own band */
.site-header{ z-index:50 !important; }
body.subpage.is-scrolled .site-header{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Contact should align left line exactly with About (PHILOSOPHY) */
body.page-contact .contact-wrap{
  max-width:900px !important;           /* match about */
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  text-align:left !important;
}

@media (max-width: 1100px){
  body.page-contact .contact-wrap{ padding:0 24px !important; }
}
body.page-contact .contact-title{
  margin:0 0 18px !important;           /* match about title rhythm */
  text-align:left !important;
}
body.page-contact .contact-body{
  margin:0 !important;
  text-align:left !important;
}

/* ==========================================================================
   Responsive + Fullscreen Menu Overlay (2026-01) — based on PC design
   - Mobile address bar safe: 100svh + --vh fallback
   ========================================================================== */

:root{
  /* iOS old fallback set by JS */
  --vh: 1vh;
}

/* Mobile viewport safe hero (avoid address bar overlap) */
.hero{
  min-height: calc(var(--vh) * 100);
  min-height: 100svh;
  height: auto;
}

/* Fullscreen overlay menu */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.menu-overlay.is-open{ display:block; }

.menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);
}

.menu-panel{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(18px, 4.5vw, 40px);
  min-height: calc(var(--vh) * 100);
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 3vw, 28px);
}

.menu-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}

.menu-brand .logo{
  width: auto;
  height: 30px;
  display:block;
}

.menu-close{
  border: 1px solid var(--line);
  background: transparent;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.menu-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 4vw, 46px);
  align-items: start;
}

.menu-nav{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.menu-nav a{
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 300;
  letter-spacing: .06em;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.menu-nav a:hover{ opacity: .7; }

.menu-side{
  display:flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.menu-ig a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 12px 14px;
}
.menu-ig a:hover{ opacity: .75; }

.menu-cta .btn{
  width: 100%;
  justify-content: center;
}

.menu-tel{
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 14px;
}
.menu-tel .tel-label{
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
}
.menu-tel .tel-number{
  display:inline-block;
  margin-top: 6px;
  font-size: 18px;
  letter-spacing: .04em;
}

.menu-bottom{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* Hamburger button always right top; keep desktop nav visible */
.nav-toggle{ border:0; background:transparent; }

/* Responsive adjustments */
@media (max-width: 560px){
  :root{ --header-pad:32px; --g: 24px; }
  .menu-grid{ grid-template-columns: 1fr; }
  .menu-side{ padding-top: 0; }
  .menu-nav a{ font-size: 28px; }
}
@media (max-width: 560px){
  :root{ --g: 18px; }
  .menu-panel{ padding: 18px; }
  .menu-nav a{ font-size: 24px; }
  .menu-tel .tel-number{ font-size: 17px; }
}

/* Scroll lock when menu open */
html.is-menu-open, body.is-menu-open{ overflow: hidden; }
/* =========================================================
   Responsive tweaks (SP breakpoint only) + Header behavior
   ========================================================= */

/* SP: header logo size (keep left position) */
@media (max-width: 600px){
  .site-header .brand .logo{ height:24px !important; width:auto; }
}


/* Top page: enable black/white switching for hamburger icon */
html[data-ui-theme="dark"] .nav-toggle{ color:#fff; }
html[data-ui-theme="light"] .nav-toggle{ color:#000; }

/* =========================================================
   SP layout baseline — 32px side padding (match XD menu)
   ========================================================= */
@media (max-width: 560px){
  /* 32px left/right padding => total 64px */
  .container{ width: calc(100% - 64px) !important; }
  .site-header .header-inner{ width: calc(100% - 64px) !important; }
  .site-footer .footer-inner{ width: calc(100% - 64px) !important; }

  /* Menu padding: 32px */
  .menu-panel{ padding: 32px !important; }

  /* Menu typography/layout to match XD */
  .menu-grid{ grid-template-columns: 1fr !important; }
  .menu-nav{
    align-items: center;
    text-align: center;
    gap: 26px;
    margin-top: 34px;
  }
  .menu-nav a{
    border-bottom: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    letter-spacing: .22em !important;
    font-weight: 300 !important;
  }

  .menu-side{
    align-items: center;
    text-align: center;
    gap: 22px;
    padding-top: 34px;
  }

  .menu-ig a{
    border: 0 !important;
    padding: 0 !important;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 12px;
  }
  .menu-ig svg{
    width: 22px;
    height: 22px;
    display:block;
  }
  .menu-ig .ig-arrow{ display:none !important; }

  .menu-actions{
    width: 100%;
    display:flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
  }
  .menu-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 42px;
    border-radius: 999px;
    background: rgba(0,0,0,.14);
    color: #111;
    font-size: 12px;
    letter-spacing: .10em;
  }

  .menu-bottom{
    justify-content: center;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 34px;
  }
}


@media (max-width: 560px){
  /* Nav toggle align (top-right) */
  .nav-toggle{ padding:0 !important; margin-left:0 !important; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }
  .nav-toggle svg{ width:22px; height:22px; }
}


@media (max-width: 560px){
  /* XD-like menu top */
  .menu-brand .logo{ height:24px !important; }
  .menu-close{
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .menu-close svg{ width: 22px; height: 22px; display:block; }
  .menu-nav a{ font-family: var(--ff-rig); }
  .menu-copy{ font-family: var(--ff-rig); font-weight:300; letter-spacing:.12em; }
}


/* Subpages: hide header/band on scroll down / show on scroll up (MOBILE ONLY) */
@media (max-width: 560px){
  body.subpage .site-header{
    transition: transform .26s ease;
    will-change: transform;
  }
  body.subpage.header-hidden .site-header{
    transform: translateY(-110%);
  }
  body.subpage .header-band{
    transition: transform .26s ease, background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
    will-change: transform;
  }
  body.subpage.header-hidden .header-band{
    transform: translateY(-110%);
  }
}


@media (max-width: 560px){
  /* XD: RigShaded Light + nav size */
  .menu-nav a{
    font-family: var(--ff-rig) !important;
    font-weight: 300 !important; /* Rig Shaded Light face */
    font-size: 20px !important;
  }
}


@media (max-width: 560px){
  .site-header .header-inner{ position: relative; }
  .nav-toggle{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}


.site-footer .footer-inner{
    width: auto;
    margin: 0;
  }
}


@media (max-width: 560px){
  /* Align menu header (logo/close) to site header (logo/menu button) */
  .menu-top{ position: relative; margin: 0; padding: 0; }
  .menu-brand .logo{ height:24px !important; width:auto; display:block; }
  .menu-close{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}


@media (max-width: 560px){
  .menu-actions .menu-pill{
    font-family: var(--ff-rig) !important;
    font-weight: 300 !important;
    letter-spacing: .08em;
  }
}


/* Home: no copyright */
body.is-home .site-footer{ display:none !important; }


/* PC: subpages copyright position */
@media (min-width: 861px){
  body.subpage .site-footer{
    position: fixed;
    left: 40px;
    bottom: 40px;
    right: auto;
    padding: 0;
    z-index: 20;
  }
  body.subpage .site-footer .footer-inner{
    width: auto;
    margin: 0;
  }
}

/* =========================================================
   Mobile: unify all pages to container width 311px (XD/SP baseline)
   ========================================================= */
@media (max-width: 560px){
  .container,
  .site-header .header-inner,
  .site-footer .footer-inner{
    width: min(311px, calc(100% - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


@media (max-width: 560px){
  /* Header align to menu overlay top (311px container) */
  .site-header .header-inner{ position: relative; display:flex; align-items:center; }
  .brand{ display:flex; align-items:center; }
  .brand .logo{ height:24px !important; width:auto; display:block; }
  .nav-toggle{
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 560px){
  /* About/Contact: force body text width to 311px container */
  body.page-about .about-wrap,
  body.page-contact .about-wrap{
    width: min(311px, calc(100% - 64px)) !important;
    max-width: 311px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
  body.page-about .about-text,
  body.page-contact .about-text,
  body.page-contact .contact-body{
    width: 100% !important;
    max-width: none !important;
  }
}


@media (max-width: 560px){
  /* Header logo: left align to 311px container edge */
  .site-header .header-inner{
    width: min(311px, calc(100% - 64px)) !important;
    justify-content: space-between !important;
  }
  .site-header .brand{
    margin: 0 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px){
  /* About/Contact: ensure CONTENT width is 311px (no inner side padding) */
  body.page-about .page,
  body.page-contact .page{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-about .about-wrap,
  body.page-contact .about-wrap{
    width: 311px !important;
    max-width: 311px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: content-box; /* keep content width 311 */
  }

  body.page-about .about-text,
  body.page-contact .about-text,
  body.page-contact .contact-body{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 311px !important;
    max-width: 311px !important;
    box-sizing: content-box;
  }
}

/* =========================================================
   Mobile header placement (311px container, 32px from edges)
   ========================================================= */
@media (max-width: 560px){
  .site-header{
    padding: 32px 0 0 !important;   /* 32px from top */
  }
  .site-header .header-inner{
    width: 311px !important;        /* container width */
    margin-left: auto !important;
    margin-right: auto !important;
    display:flex !important;
    align-items: flex-start !important;  /* top align */
    justify-content: space-between !important;
  }
  .site-header .brand{
    margin: 0 !important;
    padding: 0 !important;
    display:flex !important;
    align-items:flex-start !important;
  }
  .site-header .brand .logo{
    height: 24px !important;
    width: auto !important;
    display:block;
  }
  .site-header .header-inner{ position: relative !important; }
  .nav-toggle{
    position: absolute !important;
    right: 0 !important;           /* 32px from right via 311px centered container */
    top: 0 !important;             /* aligns with logo top */
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px;
    height: 24px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
  .nav-toggle svg{ width: 22px; height: 22px; display:block; }
}

/* =========================================================
   Mobile header: explicit XY placement (X32,Y32) & (X321,Y32)
   ========================================================= */
@media (max-width: 560px){
  .site-header{
    padding: 0 !important;
  }
  .site-header .header-inner{
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    display:block !important;
    min-height: 88px; /* ensures tap area below */
  }
  .site-header .brand{
    position: absolute !important;
    left: 32px !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header .brand .logo{
    height: 24px !important;
    width: auto !important;
    display:block;
  }
  .nav-toggle{
    position: absolute !important;
    left: 321px !important;
    top: 0 !important;
    right: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* =========================================================
   Mobile TOP page: header logo & menu Y = 32px
   ========================================================= */
@media (max-width: 560px){
  body.is-home .site-header .brand{
    top: 32px !important;
  }
  body.is-home .nav-toggle{
    top: 32px !important;
  }
}

/* =========================================================
   Mobile SUB pages:
   - header belt Y = 0
   - logo & menu Y = 32px
   ========================================================= */
@media (max-width: 560px){
  body.subpage .header-band{
    top: 0 !important;
  }
  body.subpage .site-header .brand{
    top: 32px !important;
  }
  body.subpage .nav-toggle{
    top: 32px !important;
  }
}

/* =========================================================
   Mobile SUB pages: header-belt flush to top (no extra padding)
   ========================================================= */
@media (max-width: 560px){
  body.subpage .header-band{
    top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.subpage .header-inner{
    padding-top: 0 !important;
  }
}

/* =========================================================
   Mobile SUB pages: remove header top gap, logo/menu at Y=32
   ========================================================= */
@media (max-width: 560px){
  body.subpage .site-header{
    padding-top: 0 !important;
  }
  body.subpage .header-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.subpage .header-band{
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.subpage .site-header .brand{
    top: 32px !important;
  }
  body.subpage .nav-toggle{
    top: 32px !important;
  }
}

/* =========================================================
   Mobile SUB pages: remove ALL space above header-band (true Y=0)
   ========================================================= */
@media (max-width: 560px){
  body.subpage{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.subpage .header-band{
    position: fixed !important;
    top: 0 !important;
    inset: 0 auto auto 0 !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.subpage .site-header{
    top: 0 !important;
    margin-top: 0 !important;
  }
}


/* =========================================
   v19 true0 patch: SP subpages copyright = 32px from page bottom
   ========================================= */
@media (max-width:768px){
  /* Ensure footer sits at the bottom on short pages */
  body.subpage{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  body.subpage main.page{ flex: 1; }

  /* Copyright position: 32px inside from bottom edge */
  body.subpage .site-footer{
    padding-top: 18px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 32px !important;
  }
  body.subpage .site-footer small{
    margin-bottom: 0 !important;
  }
}


/* =========================================
   v19 patch: Menu INSTAGRAM font size = 20px
   ========================================= */
.menu-ig .ig-label{
  font-size: 20px !important;
}
@media (max-width: 560px){
  .menu-ig a{
    font-size: 20px !important;
  }
}


/* =========================================
   FINAL PATCH: Menu Instagram (SP)
   ========================================= */
@media (max-width: 560px){
  /* Instagram icon size */
  .menu-ig svg{
    width: 22px !important;
    height: 22px !important;
  }

  /* Instagram label typography */
  .menu-ig .ig-label{
    font-family: var(--ff-rig) !important;
    font-weight: 300 !important; /* Rig Shaded Light */
    font-size: 20px !important;
    letter-spacing: .22em !important;
  }
}


/* === Hotfix: HOME hero background + HUD to viewport fixed === */
body.is-home .hero .slide{
  position:fixed; /* keep background fixed to viewport */
  inset:0;
}
body.is-home .hero .hud{
  position:fixed; /* keep indicator + caption fixed to viewport */
  left:min(40px, 5vw);
  bottom:min(42px, 6vh);
}
/* Ensure footer/content can appear above the fixed background */
body.is-home .site-footer{ position:relative; z-index:30; }
body.is-home .hero{ position:relative; z-index:0; }



/* ===== SERVICE PAGE OVERRIDES (scoped) ===== */
body.page-service img{ height:auto; }




/* v7: Force Service page start position to match Works index (reliable selector) */
@media (max-width:768px){
  }

/* === Service start position aligns with Works index (desktop) v9 === */
@media (min-width: 769px){
  .page.page-service{
    padding-top: 0px !important; /* align with Works */
  }
}
@media (max-width: 768px){
  .page.page-service{
    padding-top: 110px !important;
  }
}
/* safety: avoid any extra top spacing inside Service */
.page.page-service .container,
.page.page-service .service-grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* About lead title */
body.page-about .about-lead{ margin: 14px 0 10px; font-weight: 500; letter-spacing: .02em; }



@media (max-width: 1024px){
  .nav{ display:none !important; }
  .nav-toggle{
    display:inline-flex !important;
    position: fixed !important;
    right: 32px !important;
    top: 32px !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 9999 !important;
  }
  body.admin-bar .nav-toggle{
    top: 64px !important; /* WP admin bar(32px) + 32px */
  }
}












/* =========================================================
   v14-16 Final header fix (header-band ON, Solution A)
   - Header uses the same .container width as content at ALL sizes
   - 1024px and below: switch nav -> toggle ONLY (no layout shift)
   - Disable any header-hide transforms on responsive sizes
   ========================================================= */

/* Ensure header-band never changes content width */
.site-header .header-band{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header-inner is a .container: align to content edges */
.site-header .header-inner.container{
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive nav switch without repositioning */
@media (max-width: 1024px){
  .site-header .nav{ display:none !important; }
  .site-header .nav-toggle{
    display:inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Prevent any "hide on scroll" behaviors */
  body.subpage .site-header,
  body.subpage.header-hidden .site-header,
  body.subpage .header-band,
  body.subpage.header-hidden .header-band,
  body.subpage .header-inner,
  body.subpage.header-hidden .header-inner{
    transform: none !important;
  }
}

/* Mobile container width must match existing content rule */
@media (max-width: 560px){
  .site-header .header-inner.container{
    width: min(311px, calc(100% - 64px)) !important;
  }
}


/* =========================================================
   v14-21 Responsive header (belt only on subpages)
   - Desktop (>=1025px): keep existing header as-is
   - <=1024px:
       * Header fixed
       * Logo pinned top-left, menu/toggle pinned top-right (always)
       * Translucent belt ONLY on subpages (body.subpage)
       * TOP (home) has NO band (transparent, no blur)
       * Belt height: 68px (1024-376), 52px (<=375)
   ========================================================= */

@media (max-width: 1024px){
  .site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  body.admin-bar .site-header{ top: 32px !important; }
}
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px !important; }
}

/* ---- Height + layout (all responsive sizes) ---- */
@media (max-width: 1024px){
  .site-header{ height: 68px !important; }
  .header-band{ height: 68px !important; }
  .site-header .header-inner{
    position: relative !important;
    height: 68px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Always mobile nav behavior */
  .site-header .nav{ display:none !important; }
  .site-header .nav-toggle{
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Pin logo + toggle to viewport top corners within header */
  .site-header .brand{
    position: absolute !important;
    top: 16px !important;
    left: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }
  .site-header .brand .logo{
    height: 26px !important;
    width: auto !important;
    display:block !important;
  }

  .site-header .nav-toggle{
    position: absolute !important;
    top: 16px !important;
    right: 24px !important;
    z-index: 10001 !important;
    transform: none !important;
  }
  .site-header .nav-toggle svg{ width:22px !important; height:22px !important; display:block !important; }

  /* Never hide header on scroll */
  body.subpage .site-header,
  body.subpage.header-hidden .site-header,
  body.subpage .header-band,
  body.subpage.header-hidden .header-band{
    transform: none !important;
  }
}

/* ---- Subpages: translucent belt ON ---- */
@media (max-width: 1024px){
  body.subpage .header-band{
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
}

/* ---- Home/Top: NO band (transparent) ---- */
@media (max-width: 1024px){
  body.home .header-band,
  body.is-home .header-band,
  body.front-page .header-band{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---- 572-376: slightly tighter side inset to avoid crowding ---- */
@media (max-width: 572px) and (min-width: 376px){
  .site-header .brand{ left: 20px !important; top: 16px !important; }
  .site-header .nav-toggle{ right: 20px !important; top: 16px !important; }
}

/* ---- <=375: height 52px ---- */
@media (max-width: 375px){
  .site-header{ height: 52px !important; }
  .header-band{ height: 52px !important; }
  .site-header .header-inner{ height: 52px !important; }

  .site-header .brand{ top: 14px !important; left: 20px !important; }
  .site-header .nav-toggle{ top: 14px !important; right: 20px !important; }
  .site-header .brand .logo{ height: 22px !important; }
}


/* =========================================================
   v14-22 Header fixes
   - Desktop (>=1025px): logo pinned to viewport left, nav pinned to viewport right (full-width header)
   - <=560px: keep logo position as-is, align hamburger to 311px content edges (no dropping)
   ========================================================= */

/* Desktop: full width header row with fixed side paddings */
@media (min-width: 1025px){
  .site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  .site-header .header-inner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
  }
}

/* <=560: header content uses same 311px width as page content; hamburger aligns to that right edge */
@media (max-width: 560px){
  .site-header .header-inner{
    width: min(311px, calc(100% - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
  }
  /* keep existing logo rules; only ensure toggle is on the right edge of this inner */
  .site-header .nav-toggle{
    right: 0 !important;
  }
  .site-header .brand{
    left: 0 !important;
  }
}


/* =========================================================
   v14-23 Header fixed inset 40px (ALL sizes)
   Requirement:
   - Header elements are fixed to viewport with 40px inset from edges.
   - Logo: top-left (40px,40px)
   - Nav (desktop) or Toggle (mobile): top-right (40px,40px)
   Notes:
   - Does NOT change typography/layout; only positioning.
   - Admin bar aware.
   ========================================================= */

:root{
  --hdr-inset: 40px;
}

/* Keep header as a fixed overlay container */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transform: none !important;
}

/* Force brand/logo to viewport inset */
.site-header .brand{
  position: fixed !important;
  top: var(--hdr-inset) !important;
  left: var(--hdr-inset) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 10000 !important;
}

/* Desktop nav to viewport inset */
@media (min-width: 1025px){
  .site-header .nav{
    position: fixed !important;
    top: var(--hdr-inset) !important;
    right: var(--hdr-inset) !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10000 !important;
  }
}

/* Mobile toggle to viewport inset (works even if other rules hide/show it) */
@media (max-width: 1024px){
  .site-header .nav-toggle{
    position: fixed !important;
    top: var(--hdr-inset) !important;
    right: var(--hdr-inset) !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10001 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Admin bar offsets */
body.admin-bar .site-header .brand{
  top: calc(var(--hdr-inset) + 32px) !important;
}
@media (max-width: 782px){
  body.admin-bar .site-header .brand{
    top: calc(var(--hdr-inset) + 46px) !important;
  }
}
@media (min-width: 1025px){
  body.admin-bar .site-header .nav{
    top: calc(var(--hdr-inset) + 32px) !important;
  }
}
@media (min-width: 1025px) and (max-width: 782px){
  /* not a real range, kept harmless */
}
body.admin-bar .site-header .nav-toggle{
  top: calc(var(--hdr-inset) + 32px) !important;
}
@media (max-width: 782px){
  body.admin-bar .site-header .nav-toggle{
    top: calc(var(--hdr-inset) + 46px) !important;
  }
}

/* Prevent any hide-on-scroll transforms */
body.subpage .site-header,
body.subpage.header-hidden .site-header,
body.subpage .header-band,
body.subpage.header-hidden .header-band,
body.subpage .header-inner,
body.subpage.header-hidden .header-inner{
  transform: none !important;
}


/* =========================================================
   v14-24 Menu overlay (375px) - match provided design image
   ========================================================= */
@media (max-width: 375px){
  .menu-overlay{ z-index: 10050; }
  .menu-backdrop{ display:none; }
  .menu-panel{
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 100svh !important;
  }
  .menu-top{
    height: 0 !important;
    padding: 0 !important;
  }
  /* design has no close button visible */
  .menu-close{ display:none !important; }

  .menu-center{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 140px !important;
    gap: 26px !important;
  }
  .menu-nav{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 26px !important;
  }
  .menu-nav a{
    border: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    letter-spacing: .12em !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  .menu-ig{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 6px !important;
    text-decoration: none !important;
  }
  .menu-ig-icon{
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    color: #333 !important;
  }
  .menu-ig-icon svg{ width: 28px !important; height: 28px !important; display:block !important; }
  .menu-ig-text{
    font-size: 14px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  .menu-contact{
    width: 100% !important;
    margin-top: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  .menu-pill{
    width: 100% !important;
    background: #d6d6d6 !important;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: .10em !important;
    color: #333 !important;
    text-decoration: none !important;
    display:block !important;
  }

  .menu-bottom{
    width: 100% !important;
    border: 0 !important;
    padding: 0 0 28px 0 !important;
    justify-content: center !important;
    color: #9a9a9a !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }
}


/* =========================================================
   v14-25 Menu 375 refinements (center + header close)
   - Center all menu content as a single set
   - Keep header visible; use header toggle as CLOSE (X) when menu open
   - Instagram text matches design (tracking/size/weight)
   ========================================================= */
@media (max-width: 375px){
  /* Header above overlay */
  .site-header{ z-index: 20000 !important; }
  .menu-overlay{ z-index: 15000 !important; }

  /* Center stack */
  .menu-panel{
    justify-content: center !important;
  }
  .menu-center{
    padding-top: 0 !important;
    gap: 26px !important;
  }
  .menu-bottom{
    margin-top: 56px !important;
    padding-bottom: 0 !important;
  }

  /* Instagram typography */
  .menu-ig-text{
    font-size: 13px !important;
    letter-spacing: .14em !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
  }

  /* Use header toggle as X when menu open */
  .site-header .nav-toggle{
    width: 24px !important;
    height: 24px !important;
    position: fixed !important;
    top: calc(40px) !important;
    right: calc(40px) !important;
  }
  body.admin-bar .site-header .nav-toggle{ top: calc(40px + 32px) !important; }
  @media (max-width: 782px){
    body.admin-bar .site-header .nav-toggle{ top: calc(40px + 46px) !important; }
  }

  /* swap icon */
  body.is-menu-open .site-header .nav-toggle svg{ display:none !important; }
  body.is-menu-open .site-header .nav-toggle::before,
  body.is-menu-open .site-header .nav-toggle::after{
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 18px !important;
    height: 1px !important;
    background: currentColor !important;
    transform-origin: center !important;
  }
  body.is-menu-open .site-header .nav-toggle::before{
    transform: translate(-50%,-50%) rotate(45deg) !important;
  }
  body.is-menu-open .site-header .nav-toggle::after{
    transform: translate(-50%,-50%) rotate(-45deg) !important;
  }
}


/* =========================================================
   v14-26 Menu header palette = subpage header palette
   - When menu is open, force header colors/background to match subpage header
   - Prevent home->menu color flip (logo/toggle)
   ========================================================= */
body.is-menu-open .header-band{
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.is-menu-open .site-header,
body.is-menu-open .site-header a,
body.is-menu-open .site-header .nav-toggle{
  color: #222 !important;
}
body.is-menu-open .site-header .brand,
body.is-menu-open .site-header .brand .logo,
body.is-menu-open .site-header .brand svg{
  color: #222 !important;
  fill: currentColor !important;
}



/* --- FIX: when menu is open on TOP, use subpage-like (non-inverting) header --- */
html.is-menu-open .site-header{ color:#000 !important; }
html.is-menu-open .site-header .nav a,
html.is-menu-open .site-header .ig,
html.is-menu-open .site-header .nav-toggle{ color:#000 !important; }
html.is-menu-open .site-header .brand .logo{ filter:none !important; mix-blend-mode:normal !important; }



/* --- MENU TYPOGRAPHY FIX --- */

/* Main menu items */
.menu a,
.menu-item a,
.nav-menu a{
    font-family: "Rig Shaded Light Face", sans-serif !important;
    font-size:20px !important;
}

/* Email & Tel */
.menu .contact-mail,
.menu .contact-tel,
.menu-contact a{
    font-family: "Rig Shaded Light Face", sans-serif !important;
    font-size:16px !important;
}

/* Move block down 40px */
.menu,
.nav-menu{
    transform: translateY(40px) !important;
}



/* --- MENU POSITION FIX (about -> tel set) --- */
.menu-center{
    margin-top:40px !important;
    transform:none !important;
}

/* --- MENU IG TEXT HIDE + ICON SIZE --- */
.menu-ig-text{ display:none !important; }
.menu-ig-icon svg{
    width:30px !important;
    height:30px !important;
    display:block;
}



/* Ensure fonts apply to menu overlay links */
.menu-nav a,
.menu-ig,
.menu-ig-text{
    font-family: "Rig Shaded Light Face", sans-serif !important;
    font-size:20px !important;
}
.menu-contact .menu-pill{
    font-family: "Rig Shaded Light Face", sans-serif !important;
    font-size:16px !important;
}

/* normalize IG icon rendering */
.menu-ig-icon svg{
    width:30px !important;
    height:30px !important;
}
/* =========================================================
   v14-41 Remove header band on TOP page
   ========================================================= */
body.home .header-band,
body.is-home .header-band,
body.front-page .header-band{
    display:none !important;
}





/* =========================================================
   v14-46 Ensure TOP header-band stays removed even when menu opens
   ========================================================= */
body.home .header-band,
body.front-page .header-band,
body.is-home .header-band,
body.home.is-menu-open .header-band,
body.front-page.is-menu-open .header-band,
body.is-home.is-menu-open .header-band{
  display:none !important;
}



/* =========================================================
   v14-47 Menu overlay behavior for 376-1024
   - Show header (hamburger->close) above menu overlay
   - Keep content block centered (both axes)
   - Does NOT touch <=375 layout
   ========================================================= */
@media (min-width: 376px) and (max-width: 1024px){
  /* Header above overlay */
  .site-header{ z-index: 10060 !important; }
  .menu-overlay{ z-index: 10040 !important; }

  /* Ensure overlay toggling works */
  .menu-overlay{ display:none; }
  .menu-overlay.is-open{ display:block; }

  /* Center the content block only (layout inside stays same) */
  .menu-panel{ position:absolute !important; inset:0 !important; }
  .menu-center{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform: translate(-50%, -50%) !important;
    padding-top: 0 !important;  /* remove top offset; centering handles placement */
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 560px !important;
    box-sizing: border-box !important;
  }
  /* If content exceeds viewport, allow scroll inside block */
  .menu-center{ max-height: calc(100svh - 140px) !important; overflow:auto !important; }
}



/* =========================================================
   v14-47 Disable menu page at >=1025px
   ========================================================= */
@media (min-width: 1025px){
  .menu-overlay{ display:none !important; }
  html.is-menu-open .menu-overlay{ display:none !important; }
}



/* =========================================================
   v14-48 Fix (376-1024) menu display + header close icon + keep COPYRIGHT bottom
   - Does NOT touch <=375 rules
   ========================================================= */
@media (min-width: 376px) and (max-width: 1024px){
  /* Ensure overlay is visible when open */
  .menu-overlay{ display:none !important; z-index:10040 !important; }
  .menu-overlay.is-open{ display:block !important; }

  /* Keep header above overlay */
  .site-header{ z-index: 10060 !important; }

  /* Hamburger -> Close (X) when menu open */
  body.is-menu-open .site-header .nav-toggle svg{ display:none !important; }
  body.is-menu-open .site-header .nav-toggle::before,
  body.is-menu-open .site-header .nav-toggle::after{
    content:'' !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:18px !important;
    height:1px !important;
    background: currentColor !important;
    transform-origin:center !important;
    display:block !important;
  }
  body.is-menu-open .site-header .nav-toggle::before{ transform: translate(-50%,-50%) rotate(45deg) !important; }
  body.is-menu-open .site-header .nav-toggle::after { transform: translate(-50%,-50%) rotate(-45deg) !important; }

  /* Center only the block; keep footer at bottom */
  .menu-panel{
    position:absolute !important;
    inset:0 !important;
    min-height:100svh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .menu-center{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:560px !important;
    padding-top:0 !important;
    margin-top:0 !important;
    box-sizing:border-box !important;
  }
  .menu-bottom{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:34px !important;
  }
}

/* Keep TOP header-band removed even when menu opens (strong override) */
body.home.is-menu-open .header-band,
body.front-page.is-menu-open .header-band,
body.is-home.is-menu-open .header-band{
  display:none !important;
}


/* =========================================================
   v14-49 Menu overlay (376-1024) - clone 375 layout exactly - match provided design image
   ========================================================= */
@media (min-width: 376px) and (max-width: 1024px){

  /* Ensure overlay toggling works in this range */
  .menu-overlay{ display:none !important; }
  .menu-overlay.is-open{ display:block !important; }

  /* Header should be visible above overlay (hamburger -> close handled by existing global rules too) */
  .site-header{ z-index: 10060 !important; }
  .menu-overlay{ z-index: 10040 !important; }

  /* Force hamburger -> Close (X) when menu open (only visual, does not affect layout) */
  body.is-menu-open .site-header .nav-toggle svg{ display:none !important; }
  body.is-menu-open .site-header .nav-toggle::before,
  body.is-menu-open .site-header .nav-toggle::after{
    content:'' !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:18px !important;
    height:1px !important;
    background: currentColor !important;
    transform-origin:center !important;
    display:block !important;
  }
  body.is-menu-open .site-header .nav-toggle::before{ transform: translate(-50%,-50%) rotate(45deg) !important; }
  body.is-menu-open .site-header .nav-toggle::after { transform: translate(-50%,-50%) rotate(-45deg) !important; }

  .menu-overlay{ z-index: 10050; }
  .menu-backdrop{ display:none; }
  .menu-panel{
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 100svh !important;
  }
  .menu-top{
    height: 0 !important;
    padding: 0 !important;
  }
  /* design has no close button visible */
  .menu-close{ display:none !important; }

  .menu-center{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 140px !important;
    gap: 26px !important;
  }
  .menu-nav{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 26px !important;
  }
  .menu-nav a{
    border: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    letter-spacing: .12em !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  .menu-ig{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 6px !important;
    text-decoration: none !important;
  }
  .menu-ig-icon{
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    color: #333 !important;
  }
  .menu-ig-icon svg{ width: 28px !important; height: 28px !important; display:block !important; }
  .menu-ig-text{
    font-size: 14px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  .menu-contact{
    width: 100% !important;
    margin-top: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  .menu-pill{
    width: 100% !important;
    background: #d6d6d6 !important;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: .10em !important;
    color: #333 !important;
    text-decoration: none !important;
    display:block !important;
  }

  .menu-bottom{
    width: 100% !important;
    border: 0 !important;
    padding: 0 0 28px 0 !important;
    justify-content: center !important;
    color: #9a9a9a !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }
}



/* =========================================================
   v14-50 (376-1024) Center content block both axes + remove COPYRIGHT
   - Does NOT touch <=375 menu layout
   ========================================================= */
@media (min-width: 376px) and (max-width: 1024px){
  /* Center block */
  .menu-panel{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .menu-center{
    padding-top:0 !important;   /* positioning only */
  }
  /* Remove copyright */
  .menu-bottom{ display:none !important; }
}



/* =========================================================
   v14-51 Remove COPYRIGHT for <=735px (menu page)
   ========================================================= */
@media (max-width: 735px){
  .menu-bottom{ display:none !important; }
}



/* =========================================================
   v14-53 Raise content start by 100px on Desktop 1920px
   Target: about & contact pages only
   Scope: width >= 1920px
   ========================================================= */
@media (min-width: 1920px){
  body.page-about .page,
  body.page-contact .page{
    padding-top: 40px !important; /* original 140px - 100px */
  }
  body.page-about .page > *:first-child,
  body.page-contact .page > *:first-child{
    margin-top: 0 !important;
  }
}



/* =========================================================
   v14-55 Raise content start by 100px (561px–1919px)
   Target: about & contact pages only
   ========================================================= */
@media (min-width: 561px) and (max-width: 1919px){
  body.page-about .page,
  body.page-contact .page{
    padding-top: 40px !important; /* original 140px - 100px */
  }
  body.page-about .page > *:first-child,
  body.page-contact .page > *:first-child{
    margin-top: 0 !important;
  }
}






/* =========================================================
   v14-57 Fix about PHILOSOPHY body left alignment (888–1100px)
   Target: .about-text in about page only
   ========================================================= */
@media (min-width: 888px) and (max-width: 1100px){
  body.page-about .about-wrap{ text-align:left !important; }
  body.page-about .about-text{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}



/* =========================================================
   v14-58 Align service content start to works (<=768px)
   Target: service page only
   ========================================================= */
@media (max-width: 768px){
  body.page-service .page{
    padding-top: 110px !important; /* same as works page */
  }
}



/* =========================================================
   v14-59 Align Service visual start to Works (<=768px)
   - Remove extra top margin on first content block (service only)
   ========================================================= */
@media (max-width: 768px){
  .page.page-service > *:first-child{
    margin-top: 0 !important;
  }
}



/* =========================================================
   v14-60 Align Service start with Works (<=768px)
   Cause: Service has <h1 class="h1"> which pushes grid down; Works does not.
   Fix: hide the Service page title only in <=768px.
   ========================================================= */
@media (max-width: 768px){
  body.page-service .page.page-service > .container > .h1{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
  }
}



/* =========================================================
   v14-61 Fix: Service H1 not hidden because body class differs
   - Target by main.page.page-service instead of body.page-service
   - <=768px only
   ========================================================= */
@media (max-width: 768px){
  main.page.page-service > .container > h1.h1{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
  }
}



/* =========================================================
   v14-62 FORCE align Service start with Works at <=768px
   Strategy:
   - Keep padding-top = 110px (same as Works)
   - Remove ALL top offsets inside Service container
   ========================================================= */
@media (max-width: 768px){
  /* same base as works */
  main.page.page-service{
    padding-top:110px !important;
  }

  /* kill any internal top offsets */
  main.page.page-service > .container{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  main.page.page-service > .container > *{
    margin-top:0 !important;
  }
}



/* =========================================================
   v14-63 Service start still mismatched at 768px
   Root cause: Service has page title <h1 class="h1"> that Works does not.
   Fix: remove the title's layout contribution (<=768px) + ensure grid has no top gap.
   ========================================================= */
@media (max-width: 768px){
  /* remove SERVICE title block completely */
  main.page.page-service > .container > h1.h1{
    display:none !important;
  }

  /* ensure the grid starts immediately */
  main.page.page-service .service-grid{
    margin-top:0 !important;
    padding-top:0 !important;
  }
}



/* =========================================================
   v14-64 Align Service start with Works at 768px (<=768px)
   Root cause: header-band exists on Service but not on Works.
   Fix: hide header-band on Service only for <=768px.
   ========================================================= */
@media (max-width: 768px){
  body.page-service .header-band{
    display:none !important;
  }
}



/* =========================================================
   v14-65 Match Service layout to Works at 768px (<=768px)
   Findings from screenshots:
   - Works: main.page has no top padding (0)
   - Service: main.page.page-service has padding-top:110px -> creates extra blank space
   - Header block differs: .header-inner padding-top (Works:24px, Service:0px)
   Fix (<=768px, service page only):
   - Set main.page.page-service padding-top to 0 (same as Works)
   - Set header-inner padding-top to 24px (same as Works)
   ========================================================= */
@media (max-width: 768px){
  /* content start: match Works */
  body.page-service main.page.page-service{
    padding-top: 0 !important;
  }
  /* header logo / hamburger block: match Works */
  body.page-service header.site-header .header-inner{
    padding-top: 24px !important;
  }
}



/* =========================================================
   v14-66 Subpages: Fix copyright to footer (page-fixed) on all sizes
   Requirement:
   - All subpages, all sizes: copyright fixed at bottom-left
   - PC/TAB: left 40px, bottom 40px
   - SP: left 30px, bottom 30px
   Notes:
   - Scoped to body.subpage (theme already uses this class on subpages)
   - Does NOT affect fullscreen menu overlay rules (menu-bottom handled separately)
   ========================================================= */
body.subpage footer.site-footer{
  position: fixed !important;
  left: 40px !important;
  bottom: 40px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 50 !important;
}
body.subpage footer.site-footer .footer-inner{
  margin: 0 !important;
  padding: 0 !important;
}
body.subpage footer.site-footer small{
  display: inline-block !important;
  margin: 0 !important;
}

/* SP */
@media (max-width: 560px){
  body.subpage footer.site-footer{
    left: 30px !important;
    bottom: 30px !important;
  }
}



/* =========================================================
   v14-67 FIX: Place copyright IN footer (not screen-fixed)
   Requirement interpreted from feedback:
   - Do NOT fix to viewport. Keep in footer area.
   - If page is short, footer sits at bottom of viewport (sticky footer layout).
   - Position inside footer: left/bottom offsets via padding.
   ========================================================= */

/* Sticky footer layout for subpages */
body.subpage{
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
body.subpage main.page{
  flex: 1 0 auto !important;
}
body.subpage footer.site-footer{
  flex: 0 0 auto !important;
  position: relative !important; /* override fixed */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: auto !important;
  background: transparent !important;
  padding-left: 40px !important;
  padding-bottom: 40px !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
}
body.subpage footer.site-footer .footer-inner{
  padding: 0 !important;
  margin: 0 !important;
}
body.subpage footer.site-footer small{
  display: inline-block !important;
  margin: 0 !important;
}

/* SP */
@media (max-width: 560px){
  body.subpage footer.site-footer{
    padding-left: 30px !important;
    padding-bottom: 30px !important;
  }
}



/* =========================================================
   v14-68 Fix: About/Contact copyright sits too high
   Cause: footer is too short; padding-bottom alone does NOT anchor text to bottom.
   Fix (subpages, all sizes):
   - Make footer a positioning context with a minimum height
   - Absolutely position <small> at bottom-left inside footer
   - Keep sticky-footer (non-fixed) behavior
   ========================================================= */
body.subpage footer.site-footer{
  position: relative !important;
  min-height: 80px !important; /* ensures space for bottom offset */
  padding: 0 !important; /* reset */
}
body.subpage footer.site-footer small{
  position: absolute !important;
  left: 40px !important;
  bottom: 40px !important;
  margin: 0 !important;
}

/* SP */
@media (max-width: 560px){
  body.subpage footer.site-footer{
    min-height: 60px !important;
  }
  body.subpage footer.site-footer small{
    left: 30px !important;
    bottom: 30px !important;
  }
}



/* =========================================================
   v14-69 Fix: About(Contact) footer sits above bottom due to body padding-bottom.
   Observation from screenshots:
   - body.page-id-81 (ABOUT) and body.page-id-85 (CONTACT) have padding-bottom:120px
     which creates a gap below footer and lifts the copyright.
   Fix:
   - Remove bottom padding ONLY for those pages.
   - Keep sticky footer behavior (footer at bottom when page short).
   - Keep copyright anchored 40/40 (PC/TAB) and 30/30 (SP) INSIDE footer.
   ========================================================= */
body.page-id-81,
body.page-id-85{
  padding-bottom: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-id-81 main.page,
body.page-id-85 main.page{
  flex: 1 0 auto !important;
}
body.page-id-81 footer.site-footer,
body.page-id-85 footer.site-footer{
  margin-top: auto !important;
}

/* ensure footer positioning context */
body.page-id-81 footer.site-footer,
body.page-id-85 footer.site-footer{
  position: relative !important;
  min-height: 80px !important;
  padding: 0 !important;
}
body.page-id-81 footer.site-footer small,
body.page-id-85 footer.site-footer small{
  position: absolute !important;
  left: 40px !important;
  bottom: 40px !important;
  margin: 0 !important;
}
@media (max-width: 560px){
  body.page-id-81 footer.site-footer,
  body.page-id-85 footer.site-footer{
    min-height: 60px !important;
  }
  body.page-id-81 footer.site-footer small,
  body.page-id-85 footer.site-footer small{
    left: 30px !important;
    bottom: 30px !important;
  }
}



/* =========================================================
   v14-70 Nav underline: click -> hover (do NOT touch hamburger)
   Target: header desktop navigation links only
   - Remove underline that appears on click/focus/active
   - Show underline on hover (and focus-visible for keyboard)
   ========================================================= */

/* reset any "clicked/focused" underline/border for desktop nav */
@media (min-width: 1025px){
  header.site-header .main-navigation a{
    border-bottom: 1px solid transparent !important;
    text-decoration: none !important;
  }
  header.site-header .main-navigation a:focus,
  header.site-header .main-navigation a:active{
    border-bottom-color: transparent !important;
  }

  /* hover underline */
  header.site-header .main-navigation li:hover > a,
  header.site-header .main-navigation a:hover{
    border-bottom-color: currentColor !important;
  }

  /* keep keyboard accessibility */
  header.site-header .main-navigation a:focus-visible{
    border-bottom-color: currentColor !important;
  }
}


/* === HERO FULLSCREEN FIX (PC/SP media slot) === */
body.is-home .hero{
  height: 100svh;
  min-height: 100vh;
}
body.is-home .hero .slide{
  position:absolute;
  inset:0;
}
body.is-home .hero .slide .hero-media-slot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
body.is-home .hero .slide .hero-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =========================================================
   v14 Service SP header-band initial-visibility fix
   - Service page only
   - <=768px only
   - Keep band hidden before scroll, show only after scroll
   ========================================================= */
@media (max-width: 768px){
  body.page-service:not(.is-scrolled) .header-band{
    opacity: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.page-service.is-scrolled .header-band{
    opacity: 1 !important;
  }
}


/* ===== 2026-03-25 background force fix ===== */
html,
body,
#page,
.site,
.site-content,
.site-main,
main{
  background-color:var(--bg) !important;
}

/* page-level safety */
body.page-service,
body.page-works,
body.page-about,
body.page-contact,
body.home{
  background-color:var(--bg) !important;
}


/* v14 background admin color final fix
   - apply admin-controlled background only to page wrappers / footer
   - never color site-header or header-band
*/
html,
body,
body.subpage,
body.page-service,
body.page-works,
body.page-about,
body.page-contact,
body.home,
#page,
.site,
.site-content,
.site-main,
main,
main.page,
footer.site-footer,
footer.site-footer .footer-inner{
  background-color: var(--bg) !important;
}


/* v14 subpage text color target fix */
.brand .logo-svg{
  display:block;
  height:22px;
  width:auto;
}
.brand .logo-svg *{
  fill:currentColor;
  stroke:currentColor;
}
@media (min-width: 960px){
  .brand .logo-svg{ height:26px; }
}
@media (min-width:1920px){
  .brand .logo-svg{ height:30px; }
}

/* responsive menu page background should follow Theme Settings background color */
.menu-panel{
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}


/* v14 target fix 2
   - menu overlay text/icon targets
   - outlined contact pills
   - contact mail app button
*/
body.subpage .menu-contact{
  width: 100% !important;
}





body.subpage .menu-ig a,
body.subpage .menu-ig{
  border-color: currentColor !important;
}

body.subpage .site-footer small{
  color: inherit !important;
  opacity: 1 !important;
}

.contact-mail-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 0 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  line-height: 1.6 !important;
}

.contact-mail-button:hover{
  opacity: .75;
}




/* v14 target fix 3
   - menu overlay color follows text color on all entries
   - instagram icon stays outline-only like PC header
   - footer copyright mark can be targeted directly
   - contact email becomes a real mailto button
*/




.menu-overlay .menu-ig,
.menu-overlay .menu-ig a{
  color: inherit !important;
  border-color: currentColor !important;
}

.menu-overlay .menu-ig svg rect,
.menu-overlay .menu-ig svg circle[r="5"]{
  fill: none !important;
}

.menu-overlay .menu-ig svg path,
.menu-overlay .menu-ig svg rect,
.menu-overlay .menu-ig svg circle,
.menu-overlay .menu-ig svg line{
  stroke: currentColor !important;
}

.menu-overlay .menu-ig svg circle[fill]{
  fill: currentColor !important;
}

.site-footer .copyright-mark{
  color: inherit !important;
  opacity: 1 !important;
}

.contact-mail-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 0 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  line-height: 1.6 !important;
}

.contact-mail-button:hover{
  opacity: .75;
}




/* v14 final fix 5
   - copyright mark color follow
   - menu close x color follow
*/
footer.site-footer .copyright-mark,
footer.site-footer .copyright-mark::before,
footer.site-footer .copyright-mark::after,
body.subpage footer.site-footer .copyright-mark,
body.subpage footer.site-footer .copyright-mark::before,
body.subpage footer.site-footer .copyright-mark::after{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

.menu-overlay .menu-close,
.menu-overlay .menu-close svg,
.menu-overlay .menu-close path,
.menu-overlay .menu-close line,
.menu-overlay .menu-close rect,
.menu-overlay .menu-close circle{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  border-color: currentColor !important;
  opacity: 1 !important;
}


/* v14 perfect final fix
   - authoritative color/border handling for unresolved targets only
*/
html.is-menu-open .site-header .brand,
html.is-menu-open .site-header .brand .logo-svg,
html.is-menu-open .site-header .brand .logo-svg *{
  color: var(--subpage-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.menu-overlay .menu-close,
.menu-overlay .menu-close svg,
.menu-overlay .menu-close path,
.menu-overlay .menu-close line,
.menu-overlay .menu-close rect,
.menu-overlay .menu-close circle,
html.is-menu-open .menu-overlay .menu-close,
html.is-menu-open .menu-overlay .menu-close svg,
html.is-menu-open .menu-overlay .menu-close path,
html.is-menu-open .menu-overlay .menu-close line,
html.is-menu-open .menu-overlay .menu-close rect,
html.is-menu-open .menu-overlay .menu-close circle{
  color: var(--subpage-text) !important;
  fill: var(--subpage-text) !important;
  stroke: var(--subpage-text) !important;
  border-color: var(--subpage-text) !important;
  opacity: 1 !important;
}

.menu-overlay .menu-pill,
.menu-overlay .menu-pill *,
body.subpage .menu-pill,
body.subpage .menu-pill *{
  color: var(--subpage-text) !important;
  background: transparent !important;
  border: 1px solid var(--subpage-text) !important;
  box-shadow: none !important;
}

.menu-overlay .menu-ig,
.menu-overlay .menu-ig a,
.menu-overlay .menu-ig *,
html.is-menu-open .menu-overlay .menu-ig,
html.is-menu-open .menu-overlay .menu-ig a,
html.is-menu-open .menu-overlay .menu-ig *{
  color: var(--subpage-text) !important;
  border-color: var(--subpage-text) !important;
}

.menu-overlay .menu-ig svg rect,
.menu-overlay .menu-ig svg circle[r="5"]{
  fill: none !important;
  stroke: var(--subpage-text) !important;
}
.menu-overlay .menu-ig svg circle[fill]{
  fill: var(--subpage-text) !important;
}
.menu-overlay .menu-ig svg path,
.menu-overlay .menu-ig svg rect,
.menu-overlay .menu-ig svg circle,
.menu-overlay .menu-ig svg line{
  stroke: var(--subpage-text) !important;
}

footer.site-footer,
footer.site-footer .footer-inner,
footer.site-footer small,
footer.site-footer small *,
footer.site-footer .copyright-mark,
footer.site-footer .copyright-mark *,
body.subpage footer.site-footer,
body.subpage footer.site-footer .footer-inner,
body.subpage footer.site-footer small,
body.subpage footer.site-footer small *,
body.subpage footer.site-footer .copyright-mark,
body.subpage footer.site-footer .copyright-mark *{
  color: var(--subpage-text) !important;
  fill: var(--subpage-text) !important;
  stroke: var(--subpage-text) !important;
  opacity: 1 !important;
}


/* v14 close x final authoritative fix
   - bind close icon directly to --subpage-text
   - do not rely on inherited currentColor chains
*/
.menu-overlay .menu-close{
  --menu-close-color: var(--subpage-text) !important;
  color: var(--menu-close-color) !important;
  border-color: var(--menu-close-color) !important;
  background: transparent !important;
}
.menu-overlay .menu-close svg{
  color: var(--menu-close-color) !important;
}
.menu-overlay .menu-close path,
.menu-overlay .menu-close line,
.menu-overlay .menu-close rect,
.menu-overlay .menu-close circle{
  fill: none !important;
  stroke: var(--menu-close-color) !important;
  opacity: 1 !important;
}
html.is-menu-open .menu-overlay .menu-close,
html.is-menu-open .menu-overlay .menu-close svg,
html.is-menu-open .menu-overlay .menu-close path,
html.is-menu-open .menu-overlay .menu-close line,
html.is-menu-open .menu-overlay .menu-close rect,
html.is-menu-open .menu-overlay .menu-close circle,
body.is-menu-open .menu-overlay .menu-close,
body.is-menu-open .menu-overlay .menu-close svg,
body.is-menu-open .menu-overlay .menu-close path,
body.is-menu-open .menu-overlay .menu-close line,
body.is-menu-open .menu-overlay .menu-close rect,
body.is-menu-open .menu-overlay .menu-close circle{
  color: var(--menu-close-color) !important;
  stroke: var(--menu-close-color) !important;
  fill: none !important;
  border-color: var(--menu-close-color) !important;
}


/* v14 nav-toggle x real fix
   The visible close icon is generated by nav-toggle pseudo-elements
   when the menu is open. Make those bars follow the admin text color.
*/
body.is-menu-open .site-header .nav-toggle,
html.is-menu-open .site-header .nav-toggle{
  color: var(--subpage-text) !important;
}

body.is-menu-open .site-header .nav-toggle::before,
body.is-menu-open .site-header .nav-toggle::after,
html.is-menu-open .site-header .nav-toggle::before,
html.is-menu-open .site-header .nav-toggle::after{
  background: var(--subpage-text) !important;
  background-color: var(--subpage-text) !important;
  border-color: var(--subpage-text) !important;
  opacity: 1 !important;
}

body.is-menu-open .site-header .nav-toggle svg,
html.is-menu-open .site-header .nav-toggle svg{
  color: var(--subpage-text) !important;
  stroke: var(--subpage-text) !important;
}


/* v14 COPYRIGHT FINAL FORCE FIX
   absolutely override ANY opacity / color / inheritance issues
*/
footer.site-footer small{
  opacity: 1 !important;
}

footer.site-footer small,
footer.site-footer small *,
footer.site-footer .copyright-mark,
footer.site-footer .copyright-mark *{
  color: var(--subpage-text) !important;
  fill: var(--subpage-text) !important;
  stroke: var(--subpage-text) !important;
}

/* extra insurance against any opacity inheritance */
footer.site-footer small span{
  opacity: 1 !important;
}


/* v14 copyright SVG fix
   Replace font-dependent © glyph with SVG so footer color always follows theme text color.
*/
.site-footer .footer-copyright{
  display:inline-flex;
  align-items:center;
  gap:.38em;
  color: var(--subpage-text) !important;
  opacity: 1 !important;
}

.site-footer .footer-copyright,
.site-footer .footer-copyright *,
.site-footer .footer-copyright .copyright-text,
.site-footer .footer-copyright .copyright-icon{
  color: var(--subpage-text) !important;
  opacity: 1 !important;
}

.site-footer .footer-copyright .copyright-icon{
  width: .95em;
  height: .95em;
  flex: 0 0 auto;
  display:inline-block;
  vertical-align: middle;
}

.site-footer .footer-copyright .copyright-icon,
.site-footer .footer-copyright .copyright-icon *{
  fill: none !important;
  stroke: currentColor !important;
}

body.subpage .site-footer .footer-copyright,
footer.site-footer .footer-copyright{
  color: var(--subpage-text) !important;
}


/* v14 copyright vertical align fix */
.site-footer .footer-copyright{
  display:inline-flex;
  align-items:baseline !important;
}

.site-footer .footer-copyright .copyright-icon{
  width: 0.85em;
  height: 0.85em;
  transform: translateY(-0.04em); /* 微調整でテキスト高さに合わせる */
}


/* fine align correction */
.site-footer .footer-copyright{
  align-items: center !important;
}

.site-footer .footer-copyright .copyright-icon{
  vertical-align: middle;
}


/* beam letter spacing helper
   apply typography controls to the actual text node inside headings / bodies
*/
.beam-ls-text{
  display: inline;
  font: inherit;
  color: inherit;
}
.beam-ls-rich{
  white-space: inherit;
}


/* beam line-height helper */
.beam-ls-text{
  line-height: inherit;
}
.beam-ls-rich{
  line-height: inherit;
}

/* rich text bodies: unify block-level rendering across pages */
.beam-ls-text.beam-ls-rich{
  display:block;
  font: inherit;
  color: inherit;
}


/* === Typography normalization: same input number => same visual metrics across pages === */
body.page-about .about-text,
body.page-contact .contact-body,
body.page-service .service-card .desc,
body.page-works-detail .work-body,
body.page-about .profile,
body.page-about .profile dt,
body.page-about .profile dd{
  font-family: var(--ff-body, source-han-sans-japanese, sans-serif);
}

body.page-about .about-text,
body.page-contact .contact-body,
body.page-service .service-card .desc,
body.page-works-detail .work-body,
body.page-about .profile,
body.page-about .profile dt,
body.page-about .profile dd,
body.page-about .about-text .beam-ls-text,
body.page-about .about-text .beam-ls-rich,
body.page-contact .contact-body .beam-ls-text,
body.page-contact .contact-body .beam-ls-rich,
body.page-service .service-card .desc .beam-ls-text,
body.page-service .service-card .desc .beam-ls-rich,
body.page-works-detail .work-body .beam-ls-text,
body.page-works-detail .work-body .beam-ls-rich,
body.page-about .profile .beam-ls-text,
body.page-about .profile .beam-ls-rich{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

body.page-contact .contact-body .mono,
body.page-contact .contact-body .mono a,
body.page-contact .contact-body a.contact-mail-button{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}


body.page-about .about-text > .beam-ls-text.beam-ls-rich,
body.page-contact .contact-body > .beam-ls-text.beam-ls-rich,
body.page-service .service-card .desc > .beam-ls-text.beam-ls-rich,
body.page-works-detail .work-body > .beam-ls-text.beam-ls-rich,
body.page-about .profile dd > .beam-ls-text.beam-ls-rich{
  display:block;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  line-height:inherit !important;
  color:inherit !important;
}


/* Rig Shaded hard-fix (2026-03-26) */
body.page-about .about-title,
body.page-contact .contact-title,
body.page-service .service-card .title,
body.page-works .works-grid .meta,
body.page-works .more-btn,
body.page-works-detail .work-toptext .line1,
body.page-works-detail .backlink,
.site-header .nav,
.mobile-menu,
body.is-home .hero-caption,
body.subpage .site-footer small{
  font-family: var(--ff-rig-medium) !important;
}
body.page-about .about-title,
body.page-contact .contact-title,
body.subpage .site-footer small{
  font-family: var(--ff-rig-light) !important;
}


/* === 2026-03-27 safe final typography sync: title + body === */
body.page-about .about-title,
body.page-about .about-lead,
body.page-contact .contact-title,
body.page-service .service-card .title,
body.page-works-detail .work-title,
body.page-about .about-text,
body.page-contact .contact-body,
body.page-service .service-card .desc,
body.page-works-detail .work-body,
body.page-about .profile,
body.page-about .profile dt,
body.page-about .profile dd{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.page-about .about-title > .beam-ls-text,
body.page-about .about-lead > .beam-ls-text,
body.page-contact .contact-title > .beam-ls-text,
body.page-service .service-card .title > .beam-ls-text,
body.page-works-detail .work-title > .beam-ls-text,
body.page-about .about-text > .beam-ls-text,
body.page-about .about-text > .beam-ls-rich,
body.page-about .about-text > .beam-ls-text.beam-ls-rich,
body.page-contact .contact-body > .beam-ls-text,
body.page-contact .contact-body > .beam-ls-rich,
body.page-contact .contact-body > .beam-ls-text.beam-ls-rich,
body.page-service .service-card .desc > .beam-ls-text,
body.page-service .service-card .desc > .beam-ls-rich,
body.page-service .service-card .desc > .beam-ls-text.beam-ls-rich,
body.page-works-detail .work-body > .beam-ls-text,
body.page-works-detail .work-body > .beam-ls-rich,
body.page-works-detail .work-body > .beam-ls-text.beam-ls-rich,
body.page-about .profile dt > .beam-ls-text,
body.page-about .profile dd > .beam-ls-text,
body.page-about .profile dd > .beam-ls-rich,
body.page-about .profile dd > .beam-ls-text.beam-ls-rich{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

body.page-about .about-text > .beam-ls-text.beam-ls-rich,
body.page-contact .contact-body > .beam-ls-text.beam-ls-rich,
body.page-service .service-card .desc > .beam-ls-text.beam-ls-rich,
body.page-works-detail .work-body > .beam-ls-text.beam-ls-rich,
body.page-about .profile dd > .beam-ls-text.beam-ls-rich{
  display:block !important;
}

/* === 2026-03-27 nav typography precise fix === */
@media (min-width: 1025px){
  .site-header .nav,
  .site-header .nav a,
  .site-header .nav .ig,
  .site-header .nav .ig svg{
    font-family: var(--ff-rig-medium) !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 1024px){
  .menu-overlay .menu-nav a,
  .menu-overlay .menu-ig,
  .menu-overlay .menu-ig-text,
  .menu-overlay .menu-contact a,
  .menu-overlay .menu-pill{
    font-family: var(--ff-rig-light) !important;
    font-weight: 300 !important;
  }
}


/* v1.0.37 body text unified admin upload */
body.page-about .about-text,
body.page-about .about-text *,
body.page-about .profile dd,
body.page-about .profile dd *,
body.page-contact .contact-body,
body.page-contact .contact-body *,
body.page-service .service-card .desc,
body.page-service .service-card .desc *,
body.page-works-detail .work-body,
body.page-works-detail .work-body * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

body.page-about .about-text > .beam-ls-text,
body.page-about .about-text > .beam-ls-rich,
body.page-about .profile dd > .beam-ls-text,
body.page-about .profile dd > .beam-ls-rich,
body.page-contact .contact-body > .beam-ls-text,
body.page-contact .contact-body > .beam-ls-rich,
body.page-service .service-card .desc > .beam-ls-text,
body.page-service .service-card .desc > .beam-ls-rich,
body.page-works-detail .work-body > .beam-ls-text,
body.page-works-detail .work-body > .beam-ls-rich {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

body.page-contact .contact-body p,
body.page-contact .contact-body div,
body.page-service .service-card .desc p,
body.page-service .service-card .desc div,
body.page-works-detail .work-body p,
body.page-works-detail .work-body div,
body.page-about .about-text p,
body.page-about .about-text div,
body.page-about .profile dd p,
body.page-about .profile dd div {
  margin: 0 0 0.6em 0 !important;
}

body.page-contact .contact-body p:last-child,
body.page-contact .contact-body div:last-child,
body.page-service .service-card .desc p:last-child,
body.page-service .service-card .desc div:last-child,
body.page-works-detail .work-body p:last-child,
body.page-works-detail .work-body div:last-child,
body.page-about .about-text p:last-child,
body.page-about .about-text div:last-child,
body.page-about .profile dd p:last-child,
body.page-about .profile dd div:last-child {
  margin-bottom: 0 !important;
}


/* === v14: PC only / Works detail only / remove translucent header band === */
@media (min-width: 769px){
  body.page-works-detail .header-band{
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   v14 UI&front up001
   Mobile HOME first-view full-height stabilization
   - keep swipe behavior
   - prevent short hero causing vertical scroll on SP
   ========================================================= */
@media (max-width: 768px) {
  body.is-home,
  body.home,
  body.front-page {
    overflow-x: hidden;
  }

  body.is-home .hero,
  body.home .hero,
  body.front-page .hero {
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    height: 100svh !important;
    min-height: 100svh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden;
  }

  body.is-home .hero .slide,
  body.home .hero .slide,
  body.front-page .hero .slide,
  body.is-home .hero .slide .hero-media-slot,
  body.home .hero .slide .hero-media-slot,
  body.front-page .hero .slide .hero-media-slot,
  body.is-home .hero .slide .hero-media,
  body.home .hero .slide .hero-media,
  body.front-page .hero .slide .hero-media {
    height: 100% !important;
    min-height: 100% !important;
  }

  body.is-home .hero .hud,
  body.home .hero .hud,
  body.front-page .hero .hud {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
}


/* =========================================================
   v14 UI&front up004
   Mobile HOME indicator + caption spacing refinement
   - move HUD a little lower on SP
   - tighten gap between stars and caption
   ========================================================= */
@media (max-width: 768px) {
  body.is-home .hero .hud,
  body.home .hero .hud,
  body.front-page .hero .hud {
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 0 !important;
  }

  body.is-home .hero .stars,
  body.home .hero .stars,
  body.front-page .hero .stars {
    margin-bottom: 3px !important;
  }

  body.is-home .hero-caption,
  body.home .hero-caption,
  body.front-page .hero-caption {
    margin-top: 3px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   v14 UI&front up005
   Mobile HOME indicator tighter to caption
   ========================================================= */
@media (max-width: 768px) {
  body.is-home .hero .stars,
  body.home .hero .stars,
  body.front-page .hero .stars {
    margin-bottom: 1px !important;
  }

  body.is-home .hero-caption,
  body.home .hero-caption,
  body.front-page .hero-caption {
    margin-top: 0 !important;
    line-height: 1.3 !important;
  }
}