/*
Theme Name: Astra Child
Template:   astra
Version:    3.0.0
Description: Corestein portal — dark design unified with www.corestein.com
*/

/* ================================================================
   CSS Variables — Dark Theme (unified with www.corestein.com)
   ================================================================ */
:root {
  --bg-dark:           #050505;
  --bg-card:           rgba(255,255,255,0.02);
  --bg-card-hover:     rgba(255,255,255,0.05);
  --accent-neon:       #00f2ff;
  --color-bg:          #050505;
  --color-surface:     rgba(255,255,255,0.025);
  --color-border:      rgba(255,255,255,0.07);
  --color-text:        #ffffff;
  --color-muted:       #9ca3af;
  --color-heading:     #ffffff;
  --color-accent:      #00f2ff;
  --color-accent-light:#33f4ff;
  --color-link:        #00f2ff;
  --color-link-hover:  #33f4ff;
  --font-heading: 'Inter', 'Noto Sans JP', sans-serif;
  --font-body:    'Inter', 'Noto Sans JP', sans-serif;
  --max-w:        1100px;
  --radius:       12px;
  --radius-card:  32px;
  --shadow-neon:  0 12px 32px -8px rgba(0,242,255,0.15);
}

/* ================================================================
   Base Reset
   ================================================================ */
html { background: var(--bg-dark); }

body {
  background-color: var(--bg-dark) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Radial gradient background (matches www.corestein.com) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 30%, #0a1628 0%, var(--bg-dark) 65%);
  pointer-events: none;
}

/* Grainy texture overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
}

/* Keep all Astra wrappers transparent */
#page, #content, .ast-container,
.content-area, .entry-content,
.ast-article-single, .site-content {
  background: transparent !important;
}

/* ================================================================
   Typography
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--color-heading) !important;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 600; }

a { color: var(--color-link); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--color-link-hover); text-decoration: none !important; }

p { margin-bottom: 1.2em; color: var(--color-muted); }
ul, ol { color: var(--color-muted); }
img { max-width: 100%; height: auto; }

/* ================================================================
   Astra Header Override
   ================================================================ */
#masthead,
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background-color: rgba(5,5,5,0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0;
  z-index: 100;
}

.site-title a,
.site-title a:hover {
  color: var(--color-text) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: 0 0 12px rgba(0,242,255,0.5) !important;
}

.main-header-bar-navigation .menu-item a,
.ast-header-break-point .menu-item a {
  color: rgba(255,255,255,0.65) !important;
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  transition: color .25s !important;
  text-decoration: none !important;
}
.main-header-bar-navigation .menu-item a:hover,
.main-header-bar-navigation .current-menu-item > a,
.main-header-bar-navigation .current-menu-ancestor > a {
  color: var(--accent-neon) !important;
}

.main-header-bar-navigation .sub-menu {
  background: rgba(5,5,5,0.97) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
.main-header-bar-navigation .sub-menu .menu-item a {
  padding: .65rem 1.2rem !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Mobile menu */
.ast-header-break-point .main-navigation,
.ast-mobile-header-stack .main-navigation {
  background: rgba(3,3,5,0.98) !important;
  border-top: 1px solid var(--color-border) !important;
}
.menu-toggle,
.ast-mobile-menu-trigger-fill .menu-toggle,
.ast-mobile-menu-buttons .ast-menu-toggle {
  color: var(--color-text) !important;
  background: transparent !important;
}

/* ================================================================
   Astra Footer Override
   ================================================================ */
.site-footer, #colophon, .ast-small-footer {
  background-color: rgba(0,0,0,0.88) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-muted) !important;
}
.ast-footer-copyright,
.ast-small-footer-copyright,
.site-footer p { color: var(--color-muted) !important; font-size: .82rem; }
.site-footer a, #colophon a { color: var(--color-muted) !important; }
.site-footer a:hover, #colophon a:hover { color: var(--accent-neon) !important; text-decoration: none !important; }
.ast-footer-credits, .ast-footer-credits *, [class*="coreserver"], .powered-by { display: none !important; }
.footer-nav-wrap, .footer-nav-wrap .menu-item a { color: var(--color-muted) !important; font-size: .82rem; }

/* ================================================================
   Entry Content Width
   ================================================================ */
.entry-content > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.entry-content .alignfull { max-width: 100%; }
.wp-block-html { max-width: 100% !important; }

/* Hide Astra built-in page title & breadcrumbs */
.ast-breadcrumbs-wrapper, .breadcrumb-trail { display: none !important; }
.ast-page-title-wrap, .page-title-wrap { display: none !important; }
.ast-article-single .entry-header { display: none !important; }

/* ================================================================
   Page Hero
   ================================================================ */
.page-hero {
  padding: 80px 24px 72px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(10,22,40,0.85) 0%, transparent 100%) !important;
  position: relative;
}
.page-hero h1 {
  color: var(--color-text) !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  margin-bottom: .5em;
}
.page-hero .lead {
  font-size: 1.05rem;
  color: var(--color-muted) !important;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================================================================
   Content Sections
   ================================================================ */
.section {
  padding: 80px 24px;
  background: transparent;
}
.section--gray {
  background: rgba(255,255,255,0.018) !important;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section__inner { max-width: var(--max-w); margin: 0 auto; }

.section__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-neon);
  margin-bottom: .5rem;
}
.section__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  margin-bottom: 1.2rem;
}
.section__text { max-width: 760px; font-size: 1rem; color: var(--color-muted); line-height: 1.7; }

/* ================================================================
   Glass Cards
   ================================================================ */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  padding: 2.5rem !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .5s, border-color .5s, transform .5s, box-shadow .5s !important;
}
.card:hover {
  background: var(--bg-card-hover) !important;
  border-color: rgba(0,242,255,0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-neon) !important;
}
.card__label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-neon);
  margin-bottom: .5rem;
}
.card__title {
  font-family: var(--font-heading) !important;
  font-size: 1.35rem !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  margin-bottom: .75rem;
}
.card__text { font-size: .92rem; color: var(--color-muted); line-height: 1.7; }

/* ================================================================
   Two-Column Grid
   ================================================================ */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 40px;
}
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

/* ================================================================
   Service List
   ================================================================ */
.service-list { list-style: none; padding: 0; margin: 0; }
.service-list__item {
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0;
}
.service-list__item:first-child { border-top: 1px solid var(--color-border); }
.service-list__item h3 {
  font-size: 1.15rem !important;
  margin-bottom: .4rem;
  color: var(--color-text) !important;
  font-weight: 600 !important;
}
.service-list__item p { font-size: .92rem; color: var(--color-muted); margin: 0; }

/* ================================================================
   Buttons
   ================================================================ */
.btn {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: .75rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  border: 1px solid transparent;
}
.btn--primary {
  background: transparent !important;
  color: var(--color-text) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.btn--primary:hover {
  background: rgba(0,242,255,0.1) !important;
  border-color: var(--accent-neon) !important;
  color: var(--accent-neon) !important;
  box-shadow: 0 0 20px rgba(0,242,255,0.12) !important;
  text-decoration: none !important;
}
.btn--outline {
  background: transparent !important;
  color: var(--accent-neon) !important;
  border-color: rgba(0,242,255,0.4) !important;
}
.btn--outline:hover {
  background: rgba(0,242,255,0.1) !important;
  border-color: var(--accent-neon) !important;
  box-shadow: 0 0 18px rgba(0,242,255,0.12) !important;
  text-decoration: none !important;
}
/* Override hardcoded inline button colors */
.btn[style] { color: var(--accent-neon) !important; border-color: rgba(0,242,255,0.4) !important; }
.page-hero .btn--primary { color: var(--color-text) !important; border-color: rgba(255,255,255,0.2) !important; }
.page-hero .btn--primary:hover { color: var(--accent-neon) !important; border-color: var(--accent-neon) !important; }
.btn-wrap { margin-top: 28px; }

/* ================================================================
   Contact Form 7 — Dark Theme
   ================================================================ */
.wpcf7 { margin-top: 2rem; }
.cf7-field-group { margin-bottom: 1.4rem; }
.cf7-field-group label,
.wpcf7 label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: .45rem;
}
.wpcf7 span.required,
.cf7-field-group .required { color: var(--accent-neon); margin-left: .2em; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: .75rem !important;
  padding: .85rem 1.2rem !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  outline: none !important;
  transition: border-color .25s, box-shadow .25s !important;
  box-sizing: border-box !important;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--accent-neon) !important;
  box-shadow: 0 0 0 3px rgba(0,242,255,0.1) !important;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: rgba(255,255,255,0.22) !important; }
.wpcf7 select option { background: #0d0d1a !important; color: var(--color-text) !important; }
.wpcf7-form-control-wrap { display: block; margin-bottom: 1.2rem; }

.wpcf7 .wpcf7-submit {
  width: 100% !important;
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: .75rem !important;
  padding: .95rem 2.5rem !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .3s !important;
  font-family: var(--font-body) !important;
  margin-top: .5rem;
}
.wpcf7 .wpcf7-submit:hover {
  background: rgba(0,242,255,0.1) !important;
  border-color: var(--accent-neon) !important;
  color: var(--accent-neon) !important;
  box-shadow: 0 0 20px rgba(0,242,255,0.12) !important;
}
.wpcf7-response-output {
  border: none !important;
  padding: 1rem 1.5rem !important;
  border-radius: .75rem !important;
  font-size: .9rem !important;
  margin-top: 1rem !important;
}
.wpcf7-mail-sent-ok { background: rgba(0,242,255,0.08) !important; color: var(--accent-neon) !important; }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng { background: rgba(255,80,80,0.08) !important; color: #ff7070 !important; }
.wpcf7-not-valid-tip { color: #ff7070 !important; font-size: .8rem !important; margin-top: .2rem; display: block; }

.cf7-acceptance .wpcf7-list-item { display: flex; align-items: center; gap: .5rem; margin: 0 !important; }
.cf7-acceptance input[type="checkbox"] { width: 1.1rem !important; height: 1.1rem !important; accent-color: var(--accent-neon); cursor: pointer; }
.cf7-acceptance a { color: var(--accent-neon) !important; }
.wpcf7 .ajax-loader { filter: invert(1) !important; }

/* CF7 shortcode block: center + max-width */
.wp-block-shortcode,
.entry-content .wp-block-shortcode {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 2rem;
}

/* ================================================================
   Legal Pages
   ================================================================ */
.legal-content { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
.legal-content h2 {
  font-size: 1.15rem !important;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
.legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.legal-content th,
.legal-content td {
  text-align: left;
  padding: .65rem .9rem;
  border: 1px solid var(--color-border) !important;
  font-size: .9rem;
  vertical-align: top;
  color: var(--color-muted);
}
.legal-content th {
  background: rgba(255,255,255,0.03) !important;
  font-weight: 600;
  color: var(--color-text) !important;
  width: 30%;
}

/* js-email obfuscated link */
.js-email,
a.js-email { color: var(--accent-neon) !important; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 768px) {
  .section { padding: 48px 16px; }
  .card { padding: 1.75rem !important; border-radius: 1.5rem !important; }
  .page-hero { padding: 56px 20px 48px; }
  .btn { padding: .65rem 1.5rem; }
  .wp-block-shortcode { padding: 2rem 1rem !important; }
  .legal-content { padding: 40px 16px; }
}

/* ================================================================
   Home Hero Section (Three.js canvas)
   ================================================================ */
.home-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.home-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-hero__canvas canvas { width:100%!important; height:100%!important; }
.home-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  margin-top: 64px;
}
.home-hero__title {
  font-size: clamp(3rem,8vw,6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  margin-bottom: 1rem !important;
  color: #fff !important;
}
.gradient-text {
  color: transparent !important;
  background: linear-gradient(135deg,#00f2ff 0%,#3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero__sub {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================================================================
   Bento Grid
   ================================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}
.bento-grid > * { display: flex; }
.bento-grid .card--wide  { grid-column: span 2; }
.bento-grid .card--tall  { grid-row: span 2; }

.card--image { padding: 0 !important; overflow: hidden !important; position: relative !important; }
.card--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
  transition: opacity .7s, transform .7s;
}
.card--image:hover img { opacity: .9; transform: scale(1.06); }
.card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
  padding: 1.5rem;
  display: flex;
  align-items: flex-end;
}

a.card--link { text-decoration: none !important; color: var(--color-text) !important; }
a.card--link:hover { color: var(--color-text) !important; }

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2,1fr); }
  .bento-grid .card--tall { grid-row: span 1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1rem 3rem; }
  .bento-grid .card--wide,
  .bento-grid .card--tall { grid-column: 1 !important; grid-row: span 1 !important; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.page-hero {
  padding: 80px 24px 60px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,242,255,.10) 0%, transparent 60%);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.page-hero__sub {
  color: #9ca3af;
  font-size: 1.1rem;
  margin: 0;
}

.services-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.services-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color .3s;
}
.services-card:hover { border-color: rgba(0,242,255,.4); }

.services-card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 32px 0;
}
.services-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(0,242,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.services-card-num {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #00f2ff;
  margin: 0 0 4px;
}
.services-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.services-card-body {
  padding: 24px 32px 32px;
}
.services-card-desc {
  color: #9ca3af;
  line-height: 1.8;
  margin: 0 0 24px;
}
.services-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.services-subheading {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #00f2ff;
  margin: 0 0 12px;
}
.services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.services-list-dot {
  padding-left: 16px;
  position: relative;
  color: #d1d5db;
  font-size: .9rem;
  line-height: 1.6;
}
.services-list-dot::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f2ff;
}
.services-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0 24px;
  aspect-ratio: 16 / 6;
}
.services-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) saturate(1.2);
}
.services-btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid rgba(0,242,255,.5);
  border-radius: 100px;
  color: #00f2ff;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.services-btn:hover {
  background: rgba(0,242,255,.12);
  color: #00f2ff;
  text-decoration: none;
}
.services-btn--primary {
  background: #00f2ff;
  color: #050505 !important;
  border-color: #00f2ff;
  font-weight: 600;
}
.services-btn--primary:hover {
  background: rgba(0,242,255,.85);
  color: #050505 !important;
  text-decoration: none;
}

@media (max-width: 600px) {
  .services-cols { grid-template-columns: 1fr; }
  .services-card-header { padding: 24px 20px 0; }
  .services-card-body { padding: 20px 20px 28px; }
  .services-card-title { font-size: 1.3rem; }
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
}
.glass-card:hover {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,242,255,0.4);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 30px -10px rgba(0,242,255,0.15);
}
.image-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
/* fade-in: always visible on portal (no IntersectionObserver) */
.fade-in { opacity:1 !important; transform:translateY(0) !important; }

/* ============================================================
   CONTACT MODAL (www match — Tailwind + glass-card handles rest)
   ============================================================ */
#contact-modal {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.6);
}


/* Services page Lucide icon sizing */
.services-card-icon i[data-lucide],
.services-card-icon svg { display: block; }

/* ============================================================
   SHOP PAGE — light theme (cs-shop style override)
   ============================================================ */
body.page-slug-shop::before,
body.page-slug-shop::after { display:none !important; }
body.page-slug-shop {
  background:#fff !important;
  color:#1a1a1a !important;
}
body.page-slug-shop .site,
body.page-slug-shop .site-content,
body.page-slug-shop main,
body.page-slug-shop .entry-content,
body.page-slug-shop .ast-container,
body.page-slug-shop #content { background:#fff !important; }
/* h2以下の見出し: 白背景用暗色 */
body.page-slug-shop h2,
body.page-slug-shop h3,
body.page-slug-shop h4 {
  color:#111827 !important;
  font-family:'Plus Jakarta Sans','Inter',sans-serif !important;
}
/* h1 (ヒーロー)はインラインの color:#fffに委謞— !important上書きしない */
body.page-slug-shop h1 {
  font-family:'Plus Jakarta Sans','Inter',sans-serif !important;
}
/* ヒーローセクション内の全テキストを白に強制 */
body.page-slug-shop .shop-hero,
body.page-slug-shop .shop-hero h1,
body.page-slug-shop .shop-hero p,
body.page-slug-shop .shop-hero * {
  color:#ffffff !important;
}
body.page-slug-shop p,
body.page-slug-shop li { color:#374151 !important; }
body.page-slug-shop a { color:#2563eb !important; }
body.page-slug-shop a:hover { color:#1d4ed8 !important; }
/* Header — light */
/* shopページ: Astraヘッダーを非表示—カスタムヘッダーをページ内HTMLで提供 */
body.page-slug-shop #masthead,
body.page-slug-shop #ast-desktop-header,
body.page-slug-shop #ast-mobile-header { display:none !important; }
/* nav スタイル: shopページの Astra nav は非表示のため不要 */
/* Footer — light */
body.page-slug-shop .site-footer,
body.page-slug-shop footer {
  background:#f9fafb !important;
  border-top:1px solid #e5e7eb !important;
}
body.page-slug-shop .site-footer *,
body.page-slug-shop .ast-footer-copyright { color:#6b7280 !important; }
body.page-slug-shop .site-footer a:hover { color:#2563eb !important; }

/* ポータル全体: 検索アイコン非表示（検索機能なし） */
.ast-header-search,.search-toggle,.ast-search-icon,.ast-header-search-icon,
.main-header-bar .ast-header-search { display:none !important; }

/* shop page nav 視認性強化 */
/* Astra header wrap - shopページでは山忘 */
body.page-slug-shop .main-header-menu .menu-link,
body.page-slug-shop .main-header-menu .menu-item > a,
body.page-slug-shop .main-header-menu > li > a,
body.page-slug-shop .main-header-bar-navigation a {
  color:#374151 !important;
  opacity:1 !important;
}
body.page-slug-shop .main-header-menu .menu-link:hover,
body.page-slug-shop .main-header-menu .menu-item > a:hover {
  color:#2563eb !important;
}
body.page-slug-shop .site-title a,
body.page-slug-shop .ast-site-identity .site-title a {
  color:#111827 !important;
  opacity:1 !important;
}

/* Shop site: 全コンテナを 100%幅にし、幅制御は .cs-page-inner(1200px)に委謞 */
body.page-shop-site #masthead,
body.page-shop-site #ast-desktop-header,
body.page-shop-site #ast-mobile-header { display:none !important; }
body.page-shop-site #content,
body.page-shop-site .site-content,
body.page-shop-site .ast-container,
body.page-shop-site .content-area,
body.page-shop-site #primary,
body.page-shop-site .site-main,
body.page-shop-site article.ast-article-single,
body.page-shop-site .entry-content {
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.page-shop-site .entry-header { display:none !important; }
body.page-shop-site,
body.page-shop-site .site,
body.page-shop-site .site-content,
body.page-shop-site main,
body.page-shop-site .entry-content { background:#fff !important; }
body.page-shop-site .cs-shop-topbar { width:100% !important; max-width:100% !important; }
body.page-shop-site .cs-shop-topbar a,
body.page-shop-site .cs-shop-topbar .shop-site-title,
body.page-shop-site .cs-shop-topbar .shop-nav a { color:#fff !important; opacity:1 !important; }
body.page-shop-site a.cs-btn-primary { color:#fff !important; }
body.page-shop-site .cs-shop-hero { width:100% !important; max-width:100% !important; }
body.page-shop-site .site-footer,
body.page-shop-site footer { background:#f9fafb !important; border-top:1px solid #e5e7eb !important; }
body.page-shop-site .site-footer * { color:#6b7280 !important; }

/* cs-shop font-size base (112.5% = 18px) */
body.page-shop-site .cs-page-wrap,
body.page-shop-site .cs-shop-body { font-size: 18px; }

/* ===========================================================
   SHOP TOPBAR フォントサイズ修正 (cs-shop一致)
   =========================================================== */
/* site title: cs-shop = 18px */
body.page-shop-site .cs-shop-topbar .shop-site-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
/* nav links: cs-shopは body継承(18px)だが視覚的に16px程度 */
body.page-shop-site .cs-shop-topbar .shop-nav a,
body.page-shop-site .cs-shop-topbar .shop-nav li a {
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* topbar全体の高さをcs-shopの Astraヘッダーに合わせる */
body.page-shop-site .cs-shop-topbar-inner {
  height: 70px !important;
}

/* ===========================================================
   SHOP サブページ 上部空白小さく (サービス/About/Contact)
   =========================================================== */
/* ホームページ(page-id-58)以外のサブページ: top paddingをcs-shopの entry-header等価に */
body.page-shop-site:not(.page-id-58) .cs-page-inner {
  padding-top: 20px !important;
}
/* Astraの article上部 marginもリセット */
body.page-shop-site article.ast-article-single {
  margin-top: 0 !important;
}

/* ================================================================
   SHOP SITE: cs-shop exact px font sizes (root 18px 差分を訂正)
   ================================================================ */
/* Base body text */
body.page-shop-site .cs-page-wrap,
body.page-shop-site .cs-page-wrap p,
body.page-shop-site .cs-page-wrap li,
body.page-shop-site .cs-page-wrap td,
body.page-shop-site .cs-page-wrap th,
body.page-shop-site .cs-info-box,
body.page-shop-site .cs-page-inner > p {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
/* Headings: cs-shop exact px values */
body.page-shop-site .cs-page-wrap h1 {
  font-size: 64px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
body.page-shop-site .cs-page-wrap h2 {
  font-size: 48px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
body.page-shop-site .cs-page-wrap h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
body.page-shop-site .cs-page-wrap h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
/* Entry title (ページタイトル): cs-shop = 32px */
body.page-shop-site .cs-entry-title {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  color: #1e293b !important;
}
/* Table cells */
body.page-shop-site .cs-page-wrap table,
body.page-shop-site .cs-page-wrap th,
body.page-shop-site .cs-page-wrap td {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
/* CF7 form */
body.page-shop-site .cs-page-wrap .wpcf7-form label,
body.page-shop-site .cs-page-wrap .wpcf7-form p,
body.page-shop-site .cs-page-wrap .wpcf7-form input,
body.page-shop-site .cs-page-wrap .wpcf7-form select,
body.page-shop-site .cs-page-wrap .wpcf7-form textarea {
  font-size: 18px !important;
}
/* Category card headings (inline-styleオーバーライド) */
body.page-shop-site div[style*='border-radius'] h3,
body.page-shop-site div[style*='background:#f0f4f8'] h3,
body.page-shop-site div[style*='background:#f8fafc'] h3 {
  font-size: 20px !important;
}
body.page-shop-site div[style*='border-radius'] p,
body.page-shop-site div[style*='background:#f0f4f8'] p,
body.page-shop-site div[style*='background:#f8fafc'] p {
  font-size: 16px !important;
}
/* CTA button */
body.page-shop-site .cs-btn-primary {
  font-size: 18px !important;
}

/* ================================================================
   SHOP SITE 総合修正: 色消え修正 + ページタイトルサイズ + topbar
   ================================================================ */

/* h2/h3/h4: ダークテーマの white !important を詳細度で打ち勝つ */
body.page-shop-site .cs-page-wrap h1,
body.page-shop-site .cs-page-wrap h2,
body.page-shop-site .cs-page-wrap h3,
body.page-shop-site .cs-page-wrap h4,
body.page-shop-site .cs-page-wrap h5,
body.page-shop-site .cs-page-wrap h6 { color:#1e293b !important; }

body.page-shop-site .cs-page-wrap p,
body.page-shop-site .cs-page-wrap li { color:#67768e !important; }
body.page-shop-site .cs-page-wrap strong { color:#1e293b !important; }
body.page-shop-site .cs-page-wrap td { color:#374151 !important; }
body.page-shop-site .cs-page-wrap th { color:#1e293b !important; background:#f0f4f8 !important; }

/* cs-entry-title: 詳細度 (0,3,0) で .cs-page-wrap h1 (0,2,1) を超える → 32px */
body.page-shop-site .cs-page-wrap .cs-entry-title {
  font-size: 32px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif !important;
  margin: 0 0 1.5rem !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* topbar: 高詳細度の追加ルールで 18px を強制 */
body.page-shop-site .cs-shop-topbar .shop-site-title,
body.page-shop-site div.cs-shop-topbar a.shop-site-title {
  font-size: 18px !important;
  color: #ffffff !important;
}
body.page-shop-site .cs-shop-topbar ul.shop-nav li a,
body.page-shop-site .cs-shop-topbar .shop-nav li a {
  font-size: 16px !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ヒーロー h1: 白を維持 */
body.page-shop-site .cs-shop-hero h1 { color:#ffffff !important; }
body.page-shop-site .cs-shop-hero .cs-shop-hero-content h1 { color:#ffffff !important; }

/* カテゴリカード内文字 */
body.page-shop-site .cs-page-wrap div h3 { color:#1e293b !important; font-size:20px !important; }
body.page-shop-site .cs-page-wrap div p { color:#67768e !important; }