/* SmartKoala 品牌配色方案 - 2026年定制版本 */
/* 主色: 亮蓝#0099CC | 深蓝#0077AA | 辅助黄#FFD700 | 文字#1A1A1A | 背景#FFFFFF */
:root{
  --lk-blue:#0099CC;
  --lk-blue-deep:#0077AA;
  --lk-blue-soft:#E6F5FF;
  --lk-yellow:#FFD700;
  --lk-ink:#1A1A1A;
  --lk-body:#FFFFFF;
}

body.smartkoala-template-active{
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN","Segoe UI",sans-serif;
}
.lk-wrap{
  background:var(--lk-body);
  padding-top:80px;
}
.lk-container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* 顶部导航 Koala 風 */
.lk-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:linear-gradient(90deg,#ffffff, #FFFFFF);
  box-shadow:0 4px 16px rgba(26,26,26,.06);
}
.lk-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
}
.lk-logo-mark{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.lk-logo-img{
  height:52px;
  width:auto;
}
.lk-logo-text{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
}
.lk-logo-text .jp{
  display:block;
  margin:0;
  padding:0;
  font-size:16px;
  font-weight:700;
  color:var(--lk-blue-deep);
  line-height:1.1;
  white-space:nowrap;
  width:100%;
}
.lk-logo-text .en{
  display:block;
  margin:0;
  padding:0;
  font-size:12px;
  letter-spacing:0.35em;
  text-align:left;
  color:#5b6473;
  line-height:1.1;
  white-space:nowrap;
  font-weight:500;
  width:100%;
}

/* 顶部主菜单 */
.lk-nav-main{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.lk-nav-item{
  position:relative;
}
.lk-nav-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  font-size:11px;
  letter-spacing:0;
  cursor: pointer;
  color:var(--lk-ink);
}
.lk-nav-link .en{
  font-weight:600;
}
.lk-nav-link .jp{
  font-size:11px;
  color:#7a8496;
}
.lk-nav-underline{
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  border-radius:999px;
  background:var(--lk-yellow);
  transition:width .18s ease;
}
.lk-nav-item:hover .lk-nav-link .en{
  color:var(--lk-blue);
}
.lk-nav-item:hover .lk-nav-underline{
  width:100%;
}

/* 顶部二级菜单 */
.lk-submenu{
  position:absolute;
  left:0;
  top:100%;
  min-width:230px;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(26,26,26,.12);
  border-radius:18px;
  padding:12px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .18s ease;
}
.lk-nav-item:hover .lk-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lk-submenu a{
  display:block;
  padding:8px 18px;
  text-decoration:none;
  font-size:12px;
  cursor: pointer;
}
.lk-submenu a .jp{
  display:block;
  color:#424a5a;
}
.lk-submenu a .en{
  display:block;
  font-size:11px;
  color:#9ba5ba;
}
.lk-submenu a:hover{
  background:var(--lk-blue-soft);
}
.lk-submenu a:hover .jp{
  color:var(--lk-blue);
}

/* Hero 三主图轮播（Koala配色） */
.lk-hero{
  position:relative;
  overflow:hidden;
  background:var(--lk-body);
}
.lk-hero-slider{
  position:relative;
  height:460px;
  min-height:460px;
}
.lk-hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(10px);
  transition:opacity .6s ease,transform .6s ease;
  display:flex;
  align-items:center;
}
.lk-hero-slide-active{
  opacity:1;
  transform:translateX(0);
}



.lk-hero-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.lk-hero-kicker{
  font-size:11px;
  letter-spacing:.24em;
  
  color:var(--lk-blue-deep);
  margin-bottom:12px;
}
.lk-hero h1{
  font-size:32px;
  line-height:1.5;
  margin:0 0 10px;
  color:var(--lk-ink);
}
.lk-hero-sub{
  font-size:14px;
  line-height:1.9;
  color:#4f5868;
  margin-bottom:22px;
}
.lk-hero-actions{
  display:flex;
  gap:12px;
}

.lk-hero-visual{
  position:relative;
  min-height:260px;
  border-radius:28px;
  overflow:hidden;
  background-image:
    url('../img/hero-1.jpg'),
    linear-gradient(135deg,rgba(141,211,255,0.85),rgba(64,160,224,0.85));
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}



.lk-hero-visual-graph{
  background-image:
    url('../img/hero-2.jpg'),
    linear-gradient(135deg,rgba(141,211,255,0.85),rgba(22,115,184,0.85));
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}



.lk-hero-visual-jp{
  background-image:
    url('../img/hero-3.jpg'),
    linear-gradient(135deg,rgba(141,211,255,0.85),rgba(64,160,224,0.85));
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}


.lk-hero-visual-note{
  display:none;
  position:absolute;
  bottom:18px;
  left:20px;
  font-size:11px;
  color:rgba(26,26,26,.6);
}

/* Hero dots */
.lk-hero-dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.lk-hero-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(26,26,26,.12);
  cursor:pointer;
  transition:all .2s ease;
}
.lk-hero-dot-active{
  width:22px;
  border-radius:999px;
  background:var(--lk-blue);
}

/* Buttons */
.lk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 20px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
  line-height:1.2;
  white-space:nowrap;
}


/* v1.47: .lk-button is an alias of .lk-btn for consistent button sizing across site */
.lk-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 20px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
}
.lk-btn-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}
.lk-btn-primary:hover{
  background:var(--lk-blue-deep);
  box-shadow:0 14px 30px rgba(22,115,184,.45);
}
.lk-btn-secondary{
  background:#ffffff;
  color:var(--lk-blue-deep);
  border:1px solid #d1e3f5;
}
.lk-btn-secondary:hover{
  border-color:var(--lk-blue);
}

/* Sections */
.lk-section{
  padding:72px 0;
  background:#ffffff;
}
.lk-section-light{
  background:#f8fbff;
}
.lk-section-news{
  background-color: var(--lk-blue-soft) !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.lk-section-dark{
  background:linear-gradient(135deg,#edf4ff,#d9e8ff);
  color:#3a3f4a;
}
.lk-section-title{
  font-size:24px;
  margin-bottom:24px;
}

/* Vision */
.lk-section-vision{
  background:#ffffff;
}
.lk-vision-block{
  max-width:760px;
  margin:0 auto;
}
.lk-vision-block p{
  font-size:14px;
  line-height:1.9;
  color:#4f5868;
  margin-bottom:14px;
}

/* Service business rows */
.lk-business-row{
  display:grid;
  grid-template-columns:1.05fr 1.1fr;
  gap:40px;
  align-items:center;
  margin-top:32px;
}
.lk-business-row:first-of-type{margin-top:8px;}
.lk-business-row-even{
  grid-template-columns:1.1fr 1.05fr;
}
.lk-business-row-even .lk-business-media{order:2;}
.lk-business-row-even .lk-business-text{order:1;}
.lk-business-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:26px;
  box-shadow:0 18px 40px rgba(26,26,26,.22);
}
.lk-business-text h3{
  font-size:20px;
  margin:0 0 10px;
  color:var(--lk-ink);
}
.lk-business-text p{
  font-size:14px;
  line-height:1.9;
  color:#4f5868;
  margin:0 0 8px;
}

/* Tech/Policy */
.lk-tech-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
}
.lk-tech-list{
  list-style:none;
  padding:0;
  margin:0;
}
.lk-tech-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  font-size:14px;
}
.lk-tech-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lk-yellow);
}

/* News */
.lk-news-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:8px;
}
.lk-news-item{
  padding:14px 0;
  border-bottom:1px solid #e1e5ef;
}
.lk-news-title{
  font-size:15px;
  font-weight:600;
  color:var(--lk-ink);
  text-decoration:none;
}
.lk-news-title:hover{
  color:var(--lk-blue);
}
.lk-news-meta{
  margin-top:4px;
  font-size:12px;
  color:#858fa3;
}
.lk-news-excerpt{
  margin-top:4px;
  font-size:13px;
  color:#4f5868;
}
.lk-news-more-wrap{margin-top:24px;}

/* Article */
.lk-post-title{
  font-size:26px;
  margin-bottom:8px;
}
.lk-post-content{
  font-size:14px;
  line-height:1.9;
  color:#333;
}
.lk-post-back{margin-top:24px;}

/* Contact placeholder */
.lk-contact-placeholder{
  margin-top:24px;
  padding:24px;
  border-radius:18px;
  background:#f8fbff;
  border:1px dashed #cad8ee;
}

/* Footer */
.lk-footer{
  background:#07142b;
  color:#c8cedd;
  font-size:13px;
}
.lk-footer-nav{
  background:#050d20;
  padding:18px 0 20px;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.lk-footer-nav-row{
  display:flex;
  gap:32px;
  justify-content:flex-start;
}
.lk-footer-nav-col{min-width:150px;}
.lk-footer-nav-main a{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  margin-bottom:4px;
  cursor: pointer;
}
.lk-footer-nav-main .en{
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  
  color:#ffffff;
}
.lk-footer-nav-main .jp{
  font-size:11px;
  color:#9ea6c4;
}
.lk-footer-nav-main a:hover .en{color:var(--lk-yellow);}
.lk-footer-nav-sub{
  list-style:none;
  padding:4px 0 0;
  margin:0;
}
.lk-footer-nav-sub li{margin-bottom:4px;}
.lk-footer-nav-sub a{
  text-decoration:none;
  cursor: pointer;
}
.lk-footer-nav-sub .jp{
  display:block;
  font-size:11px;
  color:#c8cedd;
}
.lk-footer-nav-sub .en{
  display:block;
  font-size:10px;
  color:#8189a8;
}
.lk-footer-nav-sub a:hover .jp{color:var(--lk-blue);}
.lk-footer-nav-sub-empty{
  font-size:11px;
  color:#8189a8;
}
.lk-footer-bottom{
  padding:8px 0 6px;
}
.lk-footer-bottom-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.lk-footer-logo{
  font-weight:700;
  margin-bottom:4px;
  color:#ffffff;
}
.lk-footer-slogan{
  font-size:13px;
  color:#dde4ff;
  margin:0;
}
.lk-footer-copy{
  font-size:12px;
  color:#9aa4c8;
  text-align:right;
  white-space:nowrap;
}

/* Pagination */
.nav-links{
  margin-top:24px;
  display:flex;
  gap:8px;
}
.nav-links a,
.nav-links span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border-radius:16px;
  border:1px solid #c7d7ea;
  font-size:13px;
  text-decoration:none;
  color:#526076;
}
.nav-links .current{
  background:var(--lk-blue);
  color:#ffffff;
  border-color:var(--lk-blue);
}

/* Responsive */
@media(max-width:900px){
  .lk-topbar-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:10px 0;
  }
  .lk-hero-inner{
    grid-template-columns:1fr;
    gap:24px;
    padding:32px 0;
  }
  .lk-business-row,
  .lk-business-row-even{
    grid-template-columns:1fr;
  }
  .lk-business-row-even .lk-business-media,
  .lk-business-row-even .lk-business-text{
    order:unset;
  }
  .lk-tech-grid{
    grid-template-columns:1fr;
  }
  .lk-footer-nav-row{
    flex-wrap:wrap;
    gap:20px;
  }
  .lk-footer-nav-col{
    min-width:130px;
  }
  .lk-footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .lk-footer-copy{
    text-align:left;
  }
}
@media(max-width:780px){
  .lk-hero-slider{
    height:auto;
  }
  .lk-hero-slide{
    position:relative;
    opacity:0;
    transform:none;
  }
  .lk-hero-slide-active{
    opacity:1;
  }
}


/* Page breadcrumb / location indicator */
.lk-page-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  font-size:11px;
}
.lk-page-breadcrumb-main-en{
  font-weight:600;
  letter-spacing:.18em;
  
  color:var(--lk-blue-deep);
}
.lk-page-breadcrumb-main-jp{
  font-size:11px;
  color:#7a8496;
}
.lk-page-breadcrumb-sep{
  color:#b0b6c5;
}
.lk-page-breadcrumb-sub-jp{
  font-size:12px;
  color:#3a3f4a;
}
.lk-page-breadcrumb-sub-en{
  font-size:11px;
  color:#8a94aa;
}
@media(max-width:600px){
  .lk-page-breadcrumb{
    font-size:10px;
  }
}


/* Contact form error styles */
.lk-form-error{
  color:#d9534f;
  font-size:12px;
  margin-top:4px;
}
.lk-form-field-error{
  border-color:#d9534f !important;
}
.lk-form-group{
  margin-bottom:16px;
}
.lk-form-label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
align-self:flex-start;}
.lk-form-note{
  font-size:11px;
  color:#7a8496;
  margin-top:2px;
}
.lk-form-section-title{
  font-size:16px;
  margin: 32px 0 18px;
  font-weight:600;
  border-left:3px solid var(--lk-blue-deep);
  padding-left:10px;
}
.lk-required{
  color:#d9534f;
  font-size:11px;
  margin-left:4px;
}
.lk-form-actions{
  margin-top:24px;
}

/* Contact page: keep privacy policy links consistent with form typography */
.lk-main-contact .lk-form a{
  color: inherit;
  text-decoration: underline;
}
.lk-main-contact .lk-form a:hover{
  text-decoration: none;
}


/* Contact page tabs */
.lk-tabs{
  display:flex;
  gap:12px;
  margin-bottom:24px;
  border-bottom:1px solid #e2e6f0;
}
.lk-tab-button{
  border:none;
  background:none;
  padding:8px 18px;
  font-size:14px;
  cursor:pointer;
  border-bottom:3px solid transparent;
  color:#5b657a;
}
.lk-tab-button-active{
  border-bottom-color:var(--lk-blue-deep);
  color:#1f3c88;
  font-weight:600;
}
.lk-tab-panel{
  display:none;
}
.lk-tab-panel-active{
  display:block;
}
.lk-section-title-small{
  font-size:20px;
  margin-bottom:8px;
}
.lk-section-intro{
  font-size:14px;
  color:#5b657a;
  margin-bottom:20px;
}
.lk-hero-lead{
  font-size:15px;
  color:#5b657a;
  margin-top:8px;
}
.lk-alert{
  border-radius:6px;
  padding:12px 16px;
  margin-top:16px;
  margin-bottom:16px;
}
.lk-alert-success{
  background:#e9f7ef;
  border:1px solid #c3e6cb;
  color:#155724;
}


/* Simple card for thank-you page */
.lk-card{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(15,35,95,0.08);
  padding:32px 28px;
}


/* v10.8 simple inquiry grid layout */
.lk-form-grid{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:16px 20px;
  align-items:start;
  max-width: 860px;
}
.lk-form-row{ display:contents; }
.lk-form-label{ justify-self:start; align-self:center; font-weight:600; color:#24324a; align-self:flex-start;}
.lk-form-control .lk-input,
.lk-form-control .lk-textarea,
.lk-form-control .lk-select{ width:100%; max-width:520px; }
.lk-check-vert{ display:block; margin:0 0 8px 0; }
@media (max-width:720px){
  .lk-form-grid{ grid-template-columns:1fr; }
  .lk-form-label{ margin-bottom:6px; align-self:flex-start;}
}


/* v10.9 label top align fix */
.lk-form-label{align-self:flex-start;}

/* v10.10 cursor fix */
input[type=text], input[type=email], input[type=tel], textarea {
  cursor:text;
}
input[type=checkbox], label {
  cursor:pointer;
}
body, .lk-form-label {
  cursor:default;
}
.lk-button[disabled]{
  
  opacity:0.5;
}

/* v10.11 global cursor reset */
html, body {
  cursor: default !important;
}
input[type=text],
input[type=email],
input[type=tel],
textarea {
  cursor: text !important;
}
button,
.lk-button,
input[type=submit],
a,
input[type=checkbox],
label {
  cursor: pointer !important;
}

/* v10.13 global cursor override - SmartKoala优化 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  cursor: text !important;
}
a, button, .lk-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
label,
[role="button"] {
  cursor: pointer !important;
}

/* v11.0b application layout tuning */
#lk-application-form .lk-form-group{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  column-gap:20px;
  row-gap:4px;
  align-items:flex-start;
  margin-bottom:16px;
}

#lk-application-form .lk-form-group .lk-form-label,
#lk-application-form .lk-form-group > span.lk-form-label{
  grid-column:1;
}

#lk-application-form .lk-form-group > *:not(.lk-form-label):not(span.lk-form-label){
  grid-column:2;
}

#lk-application-form .lk-form-group > label:not(.lk-form-label){
  display:block;
  margin-bottom:4px;
}

.lk-input,
.lk-select{
  padding:8px 10px;
  min-height:40px;
  box-sizing:border-box;
}

@media (max-width: 720px){
  #lk-application-form .lk-form-group{
    grid-template-columns:1fr;
  }
}


/* ======================================================
 * SmartKoala v12.0 visual refresh
 * - update brand colors to SmartKoala palette
 * - white header with blue hover underline
 * - unified buttons & inputs
 * ====================================================== */

/* 1) Brand color overrides */
:root{
  --lk-blue:#12B4FF;
  --lk-blue-deep:#0095DD;
  --lk-blue-soft:#E8F8FF;
  --lk-yellow:#FFE600;
  --lk-ink:#1C2A39;
  --lk-body:#F5F8FC;
}

/* 2) Global typography tweaks */
body.smartkoala-template-active{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#2D3A48;
}

/* 3) Header: white bar, dark text, blue hover underline */
.lk-topbar{
  background:#FFFFFF;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.lk-nav-link span.en,
.lk-nav-link span.jp{
  color:#1C2A39;
}
.lk-nav-link .lk-nav-underline{
  background:#12B4FF;
}

/* 4) Primary button — unified with .lk-btn-primary */
.lk-button.lk-button-primary,
button.lk-button-primary,
input[type="submit"].lk-button-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}
.lk-button.lk-button-primary:hover,
button.lk-button-primary:hover,
input[type="submit"].lk-button-primary:hover{
  background:var(--lk-blue-deep);
  box-shadow:0 14px 30px rgba(22,115,184,.45);
}

/* 5) Secondary button */
.lk-button.lk-button-secondary{
  background:#ffffff;
  color:var(--lk-blue-deep);
  border:1px solid #d1e3f5;
}
.lk-button.lk-button-secondary:hover{
  background:#E8F8FF;
}

/* 6) Forms: inputs & textarea */
.lk-form-control .lk-input,
.lk-form-control .lk-textarea,
.lk-form-control .lk-select,
.lk-input,
.lk-textarea,
.lk-select{
  border:1.5px solid #D6DFE6;
  border-radius:8px;
  padding:10px 14px;
  box-sizing:border-box;
}
.lk-form-control .lk-input:focus,
.lk-form-control .lk-textarea:focus,
.lk-input:focus,
.lk-textarea:focus{
  border-color:#12B4FF;
  box-shadow:0 0 0 2px rgba(18,180,255,0.25);
  outline:none;
}

/* 7) Cards */
.lk-card{
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

/* 8) Spacing rhythm */
.lk-section{
  padding-top:56px;
  padding-bottom:56px;
}



/* v12.1 logo enlargement */
.lk-topbar .lk-logo img{
    height:64px !important;
}
.lk-topbar .lk-logo{
    padding-top:8px !important;
    padding-bottom:8px !important;
}
.lk-topbar .lk-header-right{
    display:flex;
    align-items:center;
}


/* SmartKoala v12.2 logo sizing tweak */
.lk-logo-img{
  height:67px !important;
  width:auto;
}


/* SmartKoala v12.3 logo height adjust */
.lk-logo-img{
  height:83px !important;
  width:auto;
}


/* SmartKoala v12.4 logo further enlargement */
.lk-logo-img{
  height:93px !important;
  width:auto;
}


/* ============================================
 * v12.5 Contact page refinements
 * - tighten hero -> tabs spacing
 * - remove hand cursor from form labels
 * - enlarge & right-align submit button
 * ============================================ */

/* 1) Bring tabs closer to hero lead text on contact page */
.page-template-contact-koala-japan .lk-section-hero,
.lk-main-contact .lk-section-hero{
  padding-bottom:8px;
}
.page-template-contact-koala-japan .lk-section-hero + .lk-section,
.lk-main-contact .lk-section-hero + .lk-section{
  padding-top:0;
}

/* 2) Remove hand cursor on field labels (project names) */
form.lk-form label,
.lk-form .lk-form-label,
.lk-form-label{
  cursor: default !important;
}

/* 3) Submit button: larger, less rounded, right-aligned */
.page-template-page-contact .lk-form-actions{
  margin-top:24px;
  max-width:520px;
  margin-left:260px;
  text-align:right;
}
.page-template-page-contact .lk-form-actions .lk-button.lk-button-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}


/* =========================================================
 * v12.16
 * - Application form field widths (including 代表者性別) = 520px
 * - Submit buttons aligned with input right edge (red line)
 * ========================================================= */

/* 1) Application form: inputs / textareas / selects all 520px max (same as simple inquiry) */
#lk-application-form .lk-input,
#lk-application-form .lk-textarea,
#lk-application-form .lk-select,
#lk-application-form select{
  max-width:520px !important;
  width:100% !important;
  box-sizing:border-box;
}
/* v12.17: ensure representative gender select width matches 520px input column */
#lk-application-form #rep_gender{
  max-width:520px !important;
}


/* 2) Submit actions: align under input column (240px label + 520px field) on desktop */
.lk-form-actions,
.page-template-page-contact .lk-form-actions{
  margin-top:24px;
  max-width:520px;
  margin-left:260px;
  text-align:right;
}

/* Mobile: no left offset, keep button within full width */
@media (max-width:720px){
  .lk-form-actions,
  .page-template-page-contact .lk-form-actions{
    margin-left:0;
    max-width:100%;
  }
}

/* v12.17: application form button alignment - follow 520px field column starting from left */
#lk-application-form .lk-form-actions{
  margin-left:0;
}


/* v12.18: refine application sections spacing & button alignment */
#lk-application-form .lk-form-section-title{
  margin:40px 0 22px;
}

@media (max-width: 720px){
  .page-template-page-contact .lk-form-actions{
    margin-left:0;
    max-width:100%;
    text-align:center;
  }
}

/* v12.19 fixes */

#lk-application-form .lk-form-actions{
  max-width:520px !important;
  margin-left:260px !important;
  text-align:right !important;
}


/* v12.20: unify contact-page submit buttons with hero CTA style */
.page-template-page-contact .lk-button.lk-button-primary,
.page-template-page-contact button.lk-button-primary,
.page-template-page-contact input[type="submit"].lk-button-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}
.page-template-page-contact .lk-button.lk-button-primary:hover,
.page-template-page-contact button.lk-button-primary:hover,
.page-template-page-contact input[type="submit"].lk-button-primary:hover{
  background:var(--lk-blue-deep);
  box-shadow:0 14px 30px rgba(22,115,184,.45);
}


/* v12.21: Contact page submit buttons match home hero CTA */
.page-template-page-contact .lk-button.lk-button-primary,
.page-template-page-contact button.lk-button-primary,
.page-template-page-contact input[type="submit"].lk-button-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}
.page-template-page-contact .lk-button.lk-button-primary:hover,
.page-template-page-contact button.lk-button-primary:hover,
.page-template-page-contact input[type="submit"].lk-button-primary:hover{
  background:var(--lk-blue-deep);
  box-shadow:0 14px 30px rgba(22,115,184,.45);
}


/* v12.24 fixed width 240px */
.page-template-page-contact .lk-button.lk-button-primary{
  background:var(--lk-blue);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 24px rgba(64,160,224,.35);
}


/* v12.30: Force 240px unified width for submit buttons */
#lk-simple-inquiry-form .lk-button.lk-button-primary,
#lk-application-form .lk-button.lk-button-primary {
  min-width:120px !important;
  width:120px !important;
  text-align:center !important;
  justify-content:center !important;
  display:inline-flex !important;
}


/* v13.2b: enlarge header logo */
.lk-logo-img{height:78px;}


/* v13-3b hero backgrounds */

.lk-hero-bg-1{
  background-image:linear-gradient(135deg,#f2f8ff,#e5f4ff),url('../img/hero-1.jpg');
  background-size:cover;
  background-position:center;
}
.lk-hero-bg-2{
  background-image:linear-gradient(135deg,#f2f8ff,#fff7df),url('../img/hero-2.jpg');
  background-size:cover;
  background-position:center;
}
.lk-hero-bg-3{
  background-image:linear-gradient(135deg,#f2f8ff,#e9fbff),url('../img/hero-3.jpg');
  background-size:cover;
  background-position:center;
}



/* News list styles (v13.7) */
.lk-page-content-news-intro{
  margin-bottom:32px;
}
.lk-news-list{
  border-top:1px solid rgba(0,0,0,.06);
}
.lk-news-item{
  border-bottom:1px solid rgba(0,0,0,.06);
}
.lk-news-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  text-decoration:none;
  color:var(--lk-text-main,#16324f);
}
.lk-news-link:hover .lk-news-title{
  text-decoration:underline;
}
.lk-news-meta{
  font-size:14px;
  color:var(--lk-text-muted,#6b7785);
  margin-right:24px;
  white-space:nowrap;
}
.lk-news-title{
  font-size:16px;
  font-weight:600;
  flex:1;
}
.lk-news-empty{
  padding:24px 0;
  font-size:14px;
  color:var(--lk-text-muted,#6b7785);
}
.lk-news-pagination{
  margin-top:24px;
}
.lk-news-pagination .page-numbers{
  display:inline-block;
  margin:0 4px;
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
  text-decoration:none;
  color:var(--lk-text-main,#16324f);
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
}
.lk-news-pagination .page-numbers.current{
  background:var(--lk-blue,#0099CC);
  color:#ffffff;
  border-color:var(--lk-blue,#0099CC);
}
.lk-news-pagination .page-numbers:hover{
  background:var(--lk-blue-light,#8dd3ff);
  color:#16324f;
}



/* Sticky footer layout (v13.7.2) */
html, body{
  height:100%;
  margin:0;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.smartkoala-page{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
.lk-main{
  flex:1 0 auto;
}

.lk-footer{
  flex-shrink:0;
  margin-top:auto;
}
.lk-footer{
  flex-shrink:0;
}

/* footer single-line logo+slogan */
.lk-footer-logo-slogan{
  color:#fff;
  font-size:14px;
  white-space:nowrap;
  padding:4px 0;
}



/* Contact page: tighten title-tab spacing to near zero */
.page-template-page-contact-php .lk-section-hero{
  padding-bottom:4px !important;
}
.page-template-page-contact-php section.lk-section{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.page-template-page-contact-php .lk-tabs{
  margin-top:0 !important;
  padding-top:0 !important;
}



/* Contact page: reduce title bottom margin */
.page-template-page-contact-php .lk-section-hero .lk-section-title{
  margin-bottom:8px;
}


/* v15.6: Ensure Vision section button matches global secondary button style */




/* v15.7 FORCE FIX: Contact page spacing */
.page-template-page-contact-php .lk-section-hero{
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}
.page-template-page-contact-php .lk-section-hero .lk-hero-title{
    margin-bottom: 4px !important;
}
.page-template-page-contact-php .lk-section-hero .lk-hero-lead{
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.page-template-page-contact-php .lk-section-hero + .lk-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* v15.7 SUPER OVERRIDE: Vision section button must match secondary button */




/* v15.8 FINAL OVERRIDE — cannot be overridden */

/* Contact page spacing */
body.page-template-page-contact-php .lk-section-hero {
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}
body.page-template-page-contact-php .lk-section-hero + .lk-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Vision button unified */
body.home 


/* =========================================================
 * v1.10 新闻栏目样式
 * - 展示最新两条新闻
 * - 保持整体风格一致
 * ========================================================= */

.lk-news-section {
  background: transparent;
  padding: 0;
  margin-bottom: 40px;
}

.lk-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.lk-news-card {
  background: transparent;
  border-radius: 0;
  padding: 24px 0;
  box-shadow: none;
  border-bottom: none;
  transition: none;
  display: flex;
  flex-direction: column;
}

.lk-news-card:hover {
  box-shadow: none;
  transform: none;
}

.lk-news-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 12px 0;
  color: var(--lk-ink);
}

.lk-news-card-title a {
  color: var(--lk-ink);
  text-decoration: none;
  transition: color 0.3s ease;
}

.lk-news-card-title a:hover {
  color: var(--lk-blue);
}

.lk-news-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.lk-news-card-date {
  color: #9ba5ba;
  font-weight: 500;
}

.lk-news-card-excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: #4f5868;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.lk-news-card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--lk-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

.lk-news-card-link:hover {
  color: var(--lk-blue-deep);
}

.lk-news-more-wrap {
  text-align: center;
  padding-top: 16px;
}

@media (max-width: 768px) {
  .lk-news-grid {
    grid-template-columns: 1fr;
  }
}

/* SmartKoala v1.24 - 全局可点击元素指针优化 */
.lk-nav-link,
.lk-nav-item,
.lk-footer-nav-main a,
.lk-footer-nav-sub a,
.lk-tab-button,
.lk-btn,
.lk-btn-primary,
.lk-btn-secondary {
  cursor: pointer !important;
}

/* SmartKoala v1.25 - 表单元素光标优化 */
/* 文本输入框：编辑文字光标 */
.lk-input,
.lk-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="url"],
textarea {
  cursor: text !important;
}

/* 下拉菜单：小手光标 */
.lk-select,
select {
  cursor: pointer !important;
}

/* 复选框和单选框：小手光标 */
input[type="checkbox"],
input[type="radio"],
.lk-check-vert,
.lk-check-vert input[type="checkbox"],
.lk-check-vert input[type="radio"] {
  cursor: pointer !important;
}

/* 复选框标签：小手光标 */
.lk-check-vert label,
label input[type="checkbox"],
label input[type="radio"] {
  cursor: pointer !important;
}

/* 提交按钮：小手光标 */
input[type="submit"],
input[type="button"],
input[type="reset"],
.lk-button,
.lk-button-primary,
.lk-button-secondary {
  cursor: pointer !important;
}

/* 禁用状态：禁止光标 */
input[disabled],
input[type="submit"][disabled],
button[disabled],
.lk-button[disabled] {
  cursor: not-allowed !important;
}

/* SmartKoala v1.26 - 日期选择框和数字输入框光标优化 */
/* 日期选择框的日期选择按钮 - 小手光标 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::after {
  cursor: pointer !important;
}

/* 数字输入框的加减按钮 - 小手光标 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Firefox中数字输入框的加减按钮 - 小手光标 */
input[type="number"] {
  cursor: text !important;
}

/* 确保数字输入框的加减按钮可见且可交互 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  opacity: 1 !important;
  cursor: pointer !important;
}


/* ================================
 * v1.27 Hotfix: Homepage Vision button height
 * Scope: only within 

@media (max-width: 767px){
  /* allow wrapping only on very small screens */
  
}





/* =========================
   RDS three-image row (styled like reference)
   Usage: wrap 3 images inside .rds-media-row .rds-media-left/.rds-media-center/.rds-media-right
   ========================= */
.rds-media-row{
  display:flex;
  align-items:flex-start;
  gap:28px;
  margin:22px 0 26px;
  flex-wrap:nowrap;
}

.rds-media-row .rds-media-left,
.rds-media-row .rds-media-center,
.rds-media-row .rds-media-right{
  position:relative;
}

.rds-media-row img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
}

/* side cards */
.rds-media-row .rds-media-left{
  flex: 0 0 38%;
  transform: translateY(8px);
}
.rds-media-row .rds-media-right{
  flex: 0 0 40%;
  transform: translateY(8px);
  margin-left:-22px; /* slight overlap with center */
  z-index:1;
}

/* center laptop style */
.rds-media-row .rds-media-center{
  flex: 0 0 44%;
  margin-left:-18px; /* overlap with left */
  z-index:2;
}
.rds-media-row .rds-media-center img{
  border-radius:22px;
}

/* Mobile */
@media (max-width: 960px){
  .rds-media-row{
    flex-wrap:wrap;
    gap:14px;
  }
  .rds-media-row .rds-media-left,
  .rds-media-row .rds-media-center,
  .rds-media-row .rds-media-right{
    flex: 1 1 100%;
    transform:none;
    margin-left:0;
  }
}


/* =========================
   RDS layout refinements (v1.33)
   - Keep 3 images within content width
   - Make all 3 images same visual size (equal aspect ratio)
   - Provide single image & 2-column section helper
   ========================= */
.rds-media-row{
  max-width:100%;
  width:100%;
  overflow:hidden; /* prevent accidental overflow */
}

.rds-media-row .rds-media-left{
  flex: 0 0 34%;
  transform: translateY(8px);
}
.rds-media-row .rds-media-center{
  flex: 0 0 40%;
  transform: translateX(-14px);
  z-index:2;
}
.rds-media-row .rds-media-right{
  flex: 0 0 34%;
  transform: translateX(-28px) translateY(8px);
  z-index:1;
}

/* Equal visual size */
.rds-media-row img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Single image helper (for each section) */
.rds-media-single{
  margin:22px 0 26px;
}
.rds-media-single img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Two-column helper: text + image */
.rds-split{
  display:flex;
  gap:28px;
  align-items:flex-start;
  margin:14px 0 18px;
}
.rds-split .rds-split-text{
  flex: 1 1 0;
  min-width: 0;
}
.rds-split .rds-split-media{
  flex: 0 0 42%;
  min-width: 280px;
}
.rds-split .rds-split-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 960px){
  .rds-media-row{
    overflow:visible;
  }
  .rds-media-row .rds-media-left,
  .rds-media-row .rds-media-center,
  .rds-media-row .rds-media-right{
    flex: 1 1 100%;
    transform:none;
  }
  .rds-split{
    flex-wrap:wrap;
  }
  .rds-split .rds-split-media{
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* =========================
   RDS 3-image row: equal size + gaps (v1.34)
   ========================= */
.rds-media-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:24px;             /* visible spacing between images */
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:22px 0 26px;
}

.rds-media-row .rds-media-left,
.rds-media-row .rds-media-center,
.rds-media-row .rds-media-right{
  flex: 1 1 0;
  transform:none !important;
  margin-left:0 !important;
  z-index:auto !important;
}

.rds-media-row img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Mobile: stack */
@media (max-width: 960px){
  .rds-media-row{
    flex-wrap:wrap;
    gap:14px;
    overflow:visible;
  }
  .rds-media-row .rds-media-left,
  .rds-media-row .rds-media-center,
  .rds-media-row .rds-media-right{
    flex: 1 1 100%;
  }
}


/* =========================
   Koala Product Site System (Smaregi-like) v1.35
   Goals: consistent typography, spacing, content width, media styling, and reusable sections.
   This layer is additive (won't break existing pages).
   ========================= */

/* Tokens */
:root{
  --koala-container: 1180px;
  --koala-gutter: 24px;

  --koala-text: #111;
  --koala-muted: rgba(17,17,17,.68);
  --koala-border: rgba(17,17,17,.12);
  --koala-surface: #fff;

  --koala-radius: 18px;
  --koala-shadow: 0 18px 40px rgba(0,0,0,.10);

  --koala-h1: clamp(28px, 3.2vw, 44px);
  --koala-h2: clamp(20px, 2.2vw, 28px);
  --koala-h3: 18px;
  --koala-body: 16px;
  --koala-lead: 18px;

  --koala-space-1: 8px;
  --koala-space-2: 14px;
  --koala-space-3: 20px;
  --koala-space-4: 28px;
  --koala-space-5: 40px;
  --koala-space-6: 56px;
}

/* Container normalization (Smaregi-like) */
.lk-container,
.koala-container{
  max-width: var(--koala-container);
  padding-left: var(--koala-gutter);
  padding-right: var(--koala-gutter);
}

/* Typography scale */
.koala-page h1,
.koala-page .koala-h1{
  font-size: var(--koala-h1);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 var(--koala-space-3);
}
.koala-page h2,
.koala-page .koala-h2{
  font-size: var(--koala-h2);
  line-height: 1.25;
  margin: var(--koala-space-6) 0 var(--koala-space-3);
}
.koala-page h3,
.koala-page .koala-h3{
  font-size: var(--koala-h3);
  line-height: 1.35;
  margin: var(--koala-space-4) 0 var(--koala-space-2);
}
.koala-page p{
  font-size: var(--koala-body);
  line-height: 1.9;
  color: var(--koala-text);
  margin: 0 0 var(--koala-space-3);
}
.koala-page .koala-lead{
  font-size: var(--koala-lead);
  line-height: 1.9;
  color: var(--koala-muted);
  margin-bottom: var(--koala-space-4);
}
.koala-page .koala-kicker{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--koala-muted);
  margin-bottom: var(--koala-space-2);
}

/* Section block */
.koala-section{
  padding: var(--koala-space-6) 0;
  border-top: 1px solid var(--koala-border);
}
.koala-section:first-child{
  border-top: none;
  padding-top: var(--koala-space-4);
}

/* Media (single image) */
.koala-media img,
.koala-media > img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--koala-radius);
  box-shadow: var(--koala-shadow);
  background: var(--koala-surface);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.koala-media{
  margin: var(--koala-space-3) 0 var(--koala-space-4);
}

/* Feature list (Smaregi style) */
.koala-feature-list{
  margin: 0;
  padding-left: 1.1em;
}
.koala-feature-list li{
  margin: 0 0 10px;
  line-height: 1.7;
}
.koala-feature-list strong{
  color: var(--koala-text);
}

/* Split (text + media) */
.koala-split{
  display:flex;
  gap: var(--koala-space-4);
  align-items:flex-start;
}
.koala-split .koala-split-text{ flex: 1 1 0; min-width:0; }
.koala-split .koala-split-media{ flex: 0 0 42%; min-width: 280px; }
.koala-split .koala-split-media img{
  width:100%;
  border-radius: var(--koala-radius);
  box-shadow: var(--koala-shadow);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 960px){
  .koala-split{ flex-wrap:wrap; }
  .koala-split .koala-split-media{ flex: 1 1 100%; min-width:0; }
}

/* CTA band */
.koala-cta{
  border: 1px solid var(--koala-border);
  border-radius: 22px;
  padding: 26px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin: var(--koala-space-6) 0;
}
.koala-cta .koala-cta-title{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}
.koala-cta .koala-cta-text{
  margin:0;
  color: var(--koala-muted);
}
@media (max-width: 960px){
  .koala-cta{ flex-wrap:wrap; }
}

/* Buttons (non-invasive normalize) */
.koala-btn,
.koala-page a.koala-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--koala-border);
}


/* =========================
   Service templates unified (v1.36)
   - Smaregi-like rhythm: tighter hero, clear sections, consistent max width
   ========================= */
.koala-service-hero{
  padding-top: 22px;
  padding-bottom: 10px;
}
.koala-service-hero .lk-page-breadcrumb{
  margin-bottom: 14px;
}
.koala-service-hero .lk-section-title{
  margin: 0 0 18px;
}

/* content block rhythm */
.lk-page-content.koala-page > *:first-child{
  margin-top: 0;
}
.lk-page-content.koala-page{
  padding-bottom: 10px;
}

/* ensure media never overflows container */
.lk-page-content.koala-page img{
  max-width: 100%;
  height: auto;
}


/* =========================
   v1.36.1 Visible polish (Smaregi-like feel)
   - Stronger typographic hierarchy & spacing on Service templates
   - Cleaner breadcrumb & hero rhythm
   - Admin-only version badge to confirm deployment
   ========================= */

/* Admin-only version badge (only logged-in users see it) */
body.logged-in::before{
  content: "Koala Theme v1.68";
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99999;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17,17,17,.86);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  pointer-events: none;
  letter-spacing: .04em;
}

/* Service hero: more "product" rhythm */
.koala-service-hero{
  padding-top: 16px;
  padding-bottom: 8px;
}
.koala-service-hero .lk-page-breadcrumb{
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(17,17,17,.62);
  margin-bottom: 10px;
}
.koala-service-hero .lk-page-breadcrumb-main-en{
  color: #0b63ff;
  font-weight: 700;
  letter-spacing: .16em;
}
.koala-service-hero .lk-section-title{
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.12;
  margin: 0 0 22px;
  letter-spacing: .01em;
}

/* Content typography & spacing (applies to templates where we added .koala-page wrapper) */
.lk-page-content.koala-page{
  padding-top: 10px;
}
.lk-page-content.koala-page p{
  font-size: 16px;
  line-height: 1.95;
  color: #111;
  margin: 0 0 18px;
}
.lk-page-content.koala-page p strong{
  font-weight: 800;
}
.lk-page-content.koala-page h2{
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  margin: 54px 0 16px;
  letter-spacing: .01em;
}
.lk-page-content.koala-page h3{
  font-size: 18px;
  line-height: 1.35;
  margin: 34px 0 12px;
}
.lk-page-content.koala-page hr{
  margin: 34px 0;
  border: 0;
  border-top: 1px solid rgba(17,17,17,.12);
}

/* Lists: cleaner product-page look */
.lk-page-content.koala-page ul,
.lk-page-content.koala-page ol{
  margin: 0 0 18px;
  padding-left: 1.15em;
}
.lk-page-content.koala-page li{
  margin: 0 0 10px;
  line-height: 1.75;
}

/* Media blocks: keep within container and consistent */
.lk-page-content.koala-page img{
  max-width: 100%;
  height: auto;
}

/* Buttons inside content: give a consistent pill look if not already styled */
.lk-page-content.koala-page a.button,
.lk-page-content.koala-page a.wp-block-button__link{
  border-radius: 999px;
}


/* =========================
   v1.36.2 Reading container (Smaregi-grade content rhythm)
   - A dedicated reading width for text+media pages
   - Not tied to header vertical guides
   ========================= */
.koala-content-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.koala-content{
  width:100%;
  max-width: 920px;          /* reading width (narrower than site container) */
  padding-left: 8px;
  padding-right: 8px;
}

/* Ensure blocks/media never overflow the reading container */
.koala-content img,
.koala-content video,
.koala-content iframe{
  max-width: 100%;
  height: auto;
}

/* Disable Gutenberg wide/full alignment inside reading container (keep calm, product-doc style) */
.koala-content .alignwide,
.koala-content .alignfull{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Improve vertical rhythm inside reading container */
.koala-content > *:first-child{ margin-top: 0; }
.koala-content > *:last-child{ margin-bottom: 0; }

/* H1: slightly more restrained for Service sub-pages (keep your brand color rules) */
.koala-service-hero .lk-section-title{
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.14;
}


/* =========================
   v1.36.3 Service title joins reading container
   - Hero and content share the same reading width
   ========================= */
.koala-service-hero{
  padding-top: 14px;
  padding-bottom: 6px;
}
.koala-service-hero .lk-page-breadcrumb{
  margin-bottom: 10px;
}

/* H1: more balanced once inside reading container */
.koala-service-hero .lk-section-title{
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.18;
  margin: 0 0 18px;
}

/* When hero is inside reading container, keep container centering */
.lk-container > .koala-content-wrap{
  width: 100%;
}

/* Reading container: a bit more breathing on small screens */
@media (max-width: 768px){
  .koala-content{
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* =========================
   v1.36.4 Service breadcrumb restored; only title+content use reading container
   - Breadcrumb keeps Vision-like full-width alignment
   ========================= */
.koala-service-hero .lk-page-breadcrumb{
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin-bottom: 14px;
}
.koala-service-hero .lk-page-breadcrumb-main-en{
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Title remains within reading container */
.koala-service-hero .lk-section-title{
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.16;
  margin: 0 0 18px;
}


/* =========================
   v1.36.5 Restore Service breadcrumb (match Vision/default)
   - Keep breadcrumb full-width (no indent)
   - Restore original color/weight/letter-spacing
   ========================= */
.koala-service-hero .lk-page-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  font-size:11px;
}
.koala-service-hero .lk-page-breadcrumb-main-en{
  font-weight:600;
  letter-spacing:.18em;
  color:var(--lk-blue-deep);
}
.koala-service-hero .lk-page-breadcrumb-main-jp{
  font-size:11px;
  color:#7a8496;
}
.koala-service-hero .lk-page-breadcrumb-sep{
  color:#b0b6c5;
}
.koala-service-hero .lk-page-breadcrumb-sub-jp{
  font-size:12px;
  color:#3a3f4a;
}
.koala-service-hero .lk-page-breadcrumb-sub-en{
  font-size:11px;
  color:#8a94aa;
}
@media(max-width:600px){
  .koala-service-hero .lk-page-breadcrumb{ font-size:10px; }
}


/* =========================
   v1.36.8 Breadcrumb position + breathing
   - Keep breadcrumb aligned (Vision-like)
   - Add comfortable spacing between breadcrumb and title/content
   ========================= */

/* Service pages: breadcrumb should sit higher (like Vision) */
.koala-service-hero{
  padding-top: 0;
  padding-bottom: 0;
}

/* Spacing: breadcrumb (full width) then reading container below */
.koala-service-hero + .koala-content-wrap{
  margin-top: 40px;
}

/* Non-service content templates (breadcrumb directly followed by reading container) */
.lk-page-breadcrumb + .koala-content-wrap{
  margin-top: 40px;
}

/* Contact hero: breadcrumb exists inside hero content */
.lk-main-contact .lk-page-breadcrumb{
  margin-bottom: 18px;
}


/* v1.36.9 Contact tabs inside reading container */
.lk-main-contact .koala-content-wrap{
  margin-top: 40px;
}


/* =========================
   v1.38 Unify single pages & contact title
   ========================= */

/* Unify H1 size for content pages */
.koala-content .lk-section-title{
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.18;
  margin: 0 0 22px;
}

/* News single page spacing */
.single .koala-content-wrap{
  margin-top: 40px;
}


/* =========================
   v1.38.1 FIX
   - Scope H1 size strictly to content container
   - Prevent global title inflation
   ========================= */
.lk-section-title{ /* reset to theme default for non-content areas */
  font-size: inherit;
  line-height: inherit;
}

.koala-content .lk-section-title{
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.18;
}

/* v1.38.5 title smaller */
.lk-section-title{
  font-size: 28px;
  line-height: 1.25;
}


/* v1.38.6 force restore title size to legacy (v1.36.x) */
.koala-content .lk-section-title,
.lk-section-title{
  font-size: 24px !important;
  line-height: 1.25 !important;
}


/* =========================
   v1.39 Contact page rebuilt (safe title + container)
   ========================= */
.lk-page-breadcrumb + .koala-content-wrap{
  margin-top: 40px;
}
.lk-main-contact .lk-page-desc{
  margin: 0 0 22px;
  color: #5b6477;
  line-height: 1.8;
}
.lk-main-contact .lk-tabs{
  margin-top: 10px;
}





/* ==============================
   Mobile Optimizations (v1.50)
   Goal: improve readability, spacing and prevent overflow on small screens
   ============================== */
@media (max-width: 768px){
  /* Top bar */
  .lk-topbar-inner{
    min-height:72px;
    padding:10px 0;
  }
  .lk-logo-mark{height:44px;}
  .lk-logo-text .jp{font-size:14px;}
  .lk-logo-text .en{font-size:12px;}

  /* Hero */
  .lk-hero-slider{height:auto !important; min-height:0 !important;}
  .lk-hero-slide-inner{padding:0 16px;}
  .lk-hero h1{font-size:28px; line-height:1.2;}
  .lk-hero .lk-hero-sub{font-size:14px; line-height:1.6;}
  .lk-hero-actions{
    gap:10px;
    flex-wrap:wrap;
  }
  .lk-hero-actions .lk-btn{
    flex:1 1 auto;
    justify-content:center;
  }

  /* Sections */
  .lk-section{padding:56px 0;}
  .lk-section-title{margin-bottom:18px;}
  .lk-section-title h2{font-size:26px; line-height:1.25;}
  .lk-section-title .jp{font-size:14px;}

  /* Vision */
  .lk-vision-block{max-width:100%;}
  .lk-vision-block p{font-size:14px; line-height:1.75;}
}

@media (max-width: 600px){
  /* Top bar: keep compact and prevent wrapping issues */
  .lk-topbar-inner{
    min-height:64px;
  }
  .lk-nav-main{
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .lk-nav-link{
    font-size:13px;
    padding:8px 10px;
  }

  /* Hero */
  .lk-hero-slider{height:auto !important; min-height:0 !important;}
  .lk-hero h1{font-size:24px;}
  .lk-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .lk-hero-actions .lk-btn{
    width:100%;
  }

  /* Service/business rows: stack to one column */
  .lk-business-row,
  .lk-business-row-even{
    grid-template-columns:1fr;
    gap:18px;
  }
  .lk-business-row-even .lk-business-media,
  .lk-business-row-even .lk-business-text{
    order:unset;
  }
  .lk-business-media img{border-radius:18px;}

  /* Buttons: allow wrapping only when needed on very small screens */
  .lk-btn, .lk-button{
    white-space:normal;
    text-align:center;
  }

  /* News grid: avoid min width overflow */
  .lk-news-grid{
    grid-template-columns:1fr;
  }
  .lk-news-card{padding:18px 0;}
}

@media (max-width: 420px){
  .lk-hero h1{font-size:22px;}
  .lk-section-title h2{font-size:22px;}
}


/* === v1.52 Mobile Hero Slider Failsafe ===
   On some mobile browsers, opacity-based slides may remain invisible if initialization is delayed.
   This fallback switches the mobile slider to display-toggling via the active class. */
@media(max-width:780px){
  .lk-hero-slide{
    display:none;
    opacity:1;         /* make sure active slide is visible even if opacity rules conflict */
    transform:none;
  }
  .lk-hero-slide.lk-hero-slide-active{
    display:flex;
  }
}



/* === v1.53 Mobile Hero Slider Layout Fix ===
   Goal: On mobile, ensure hero text + background image are fully visible without cropping.
   We switch the slider to natural height, remove overflow clipping, and place dots below content. */
@media (max-width: 780px){
  .lk-hero{
    overflow: visible !important; /* avoid clipping tall slide content */
  }
  .lk-hero-slider{
    height: auto !important;
    min-height: unset !important;
    padding-bottom: 0 !important;
  }
  .lk-hero-slide{
    height: auto !important;
    min-height: unset !important;
    position: relative !important;
    padding: 46px 0 28px !important; /* give content breathing room */
  }
  /* If any older rule sets a fixed height on the slider, override it */
  .lk-hero-slider{ max-height: none !important; }

  /* Dots: move to flow instead of absolute bottom */
  .lk-hero-dots{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 12px auto 18px !important;
    justify-content: center !important;
  }

  /* Ensure inner layout stacks nicely and doesn't over-constrain */
  .lk-hero-inner{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .lk-hero-actions{
    margin-top: 14px !important;
  }
}


/* === v1.54 Responsive Hero Slider Tuning (Mobile vs Tablet) ===
   - Mobile (<=600px): keep v1.53 "natural height" fix, but remove extra blank area under dots.
   - Tablet (601-1024px): restore desktop-like hero presentation (fixed-height slider + absolute dots). */
@media (max-width: 600px){
  /* Keep the v1.53 approach but tighten vertical space */
  .lk-hero{ overflow: visible !important; }
  .lk-hero-slider{ height: auto !important; min-height: unset !important; padding-bottom: 0 !important; }
  .lk-hero-slide{ height: auto !important; min-height: unset !important; position: relative !important; padding: 40px 0 12px !important; }
  .lk-hero-dots{
    position: relative !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    margin: 10px auto 0 !important; /* remove the large blank block */
  }
}

/* Tablet: revert to desktop-like hero layout to avoid "mobile tall hero" */


/* === v1.55 Hero Slider Fixes (Tablet crop + Mobile dots gray bar) ===
   Tablet: increase hero height + ensure image area isn't clipped.
   Mobile: remove dots container background/height causing gray block. */

/* Mobile (<=600px): kill any reserved block under dots */
@media (max-width: 600px){
  .lk-hero-dots{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
  }
  /* Some themes wrap dots in a container that may have background/height */
  .lk-hero-dots-wrap,
  .lk-hero-dots-container,
  .lk-hero-dots-area{
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Reduce any extra space below the slider */
  .lk-hero-slider{
    margin-bottom: 0 !important;
  }
}

/* Tablet (601-1024px): prevent image from being cut at bottom */


/* === v1.56 Hero Slider Polish (Tablet overlap + Dots visibility + Mobile gray bar) ===
   1) Tablet (601-1024px): prevent hero from overlapping next section by restoring overflow:hidden,
      increase height so the visual isn't cropped, and ensure dots sit above slides via z-index.
   2) Mobile (<=600px): put dots back to absolute overlay to eliminate the gray bar area below image. */


/* Mobile: overlay dots on the visual area to remove the gray bar */
@media (max-width: 600px){
  .lk-hero{ overflow:hidden !important; } /* keep clean edge on mobile too */
  .lk-hero-slider{ position:relative !important; }
  .lk-hero-dots{
    position:absolute !important;
    left:50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important;
  }
  /* Ensure slide has a little room so dots don't collide with rounded visual */
  .lk-hero-visual{ margin-bottom: 34px !important; }
}


/* === v1.57 Hero Slider Responsive Fix (Mobile gray bar + Tablet dots position) ===
   Root cause:
   - On <=1024px, the hero slider kept a fixed height (e.g., 460px), leaving an empty "gray bar" below content.
   - On tablet, dots were absolutely positioned and ended up overlaying the image.
   Fix:
   - For <=1024px: use "natural height" slider (height:auto) + flow layout slides (position:relative),
     and switch to display-based slide toggling (active shows, others hidden).
   - Place dots in normal flow BELOW the visual, with tight spacing (no big blank block). */
@media (max-width: 1024px){
  .lk-hero{ overflow: hidden !important; }
  .lk-hero-slider{
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  .lk-hero-slide{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;            /* avoid "all invisible" issues */
    transition: none !important;      /* prevent opacity timing glitches */
    display: none !important;         /* JS toggles active class */
    padding: 56px 0 18px !important;
  }
  .lk-hero-slide-active{
    display: block !important;
  }

  /* Dots below content (no overlay) */
  .lk-hero-dots{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 12px auto 6px !important;
    z-index: 5 !important;
  }

  /* Ensure the visual doesn't reserve extra space that creates a bar */
  .lk-hero-visual{
    margin-bottom: 0 !important;
  }
}

/* Extra-tight on phones */
@media (max-width: 600px){
  .lk-hero-slide{ padding: 44px 0 10px !important; }
  .lk-hero-dots{ margin: 10px auto 0 !important; }
}


/* === v1.58 Hero Slider Layout Fix (Kill gray bar + Tablet button width) ===
   Observations:
   - On tablet/mobile, an empty band remained because .lk-hero-slider kept its fixed height rules winning.
   - Stronger specificity is used to ensure height:auto wins.
   - Tablet CTA button was stretching full width; limit it with max-width and auto width. */

@media (max-width: 1024px){
  /* Force slider to shrink-wrap content (no empty band) */
  .lk-hero .lk-hero-slider{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* If any ancestor enforces height, neutralize it */
  .lk-hero .lk-hero-slide{
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  /* Dots: keep them tight, no extra vertical space */
  .lk-hero .lk-hero-dots{
    margin: 10px auto 0 !important;
  }
  /* Also remove any padding/margin on hero that could look like a bar */
  .lk-hero{
    padding-bottom: 0 !important;
  }
}

/* Tablet CTA: don't span edge-to-edge */


/* === v1.59 Hero Slider Mobile/Tablet Hard Fix ===
   Goal:
   - Remove the extra gray band under the hero image on mobile/tablet.
   - Prevent CTA buttons from becoming full-width/overflowing on tablet/mobile.
   Strategy:
   - On <=1024px, make slider and slides shrink-wrap content (no fixed height).
   - Put dots back in normal flow (position: static) with small margin.
   - Override the older responsive rules that set .lk-hero-slider heights and .lk-hero-actions .lk-btn width:100%.
*/
@media (max-width: 1024px){

  /* Kill any fixed slider heights from earlier media rules */
  .lk-hero-slider,
  .lk-hero .lk-hero-slider{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Slides must be in normal flow */
  .lk-hero-slide,
  .lk-hero .lk-hero-slide{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    display: none; /* only active slide shows */
  }
  .lk-hero-slide-active{
    display: block !important;
  }

  /* Dots should NOT reserve a tall area: keep tight below image */
  .lk-hero-dots,
  .lk-hero .lk-hero-dots{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* Remove any spacing tricks that create the "band" */
  .lk-hero-visual{
    margin-bottom: 0 !important;
  }
  .lk-hero{
    padding-bottom: 0 !important;
  }

  /* CTA buttons: never full width, never overflow */
  .lk-hero-actions{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .lk-hero-actions .lk-btn,
  .lk-hero-actions .lk-button{
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* allow wrap on narrow screens */
    text-align: center !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}

/* Tablet (iPad portrait-ish): keep CTA from looking too long */

/* Phone: make buttons comfortable and prevent edge overflow */
@media (max-width: 600px){
  .lk-hero-actions .lk-btn,
  .lk-hero-actions .lk-button{
    max-width: calc(100vw - 32px) !important;
  }
}


/* === v1.60 Hero gray band removal (mobile+tablet) + CTA width safety ===
   Root cause of the "gray band":
   - .lk-hero-slider has a fixed height (460px) and .lk-hero-slide centers content vertically.
   - When the visual/text doesn't fill the fixed height, the remaining area shows as a blank band
     with the dots sitting inside it.
   Fix:
   - For <=1024px, switch hero slider to "natural height" and top-align content.
   - Keep dots in flow (below the visual) with tight spacing.
   - Ensure CTA buttons never overflow the viewport on small screens. */

@media (max-width: 1024px){
  /* Make slider shrink-wrap content */
  .lk-hero-slider{
    height: auto !important;
    min-height: 0 !important;
  }

  /* Stop absolute/centered layout that creates unused vertical space */
  .lk-hero-slide{
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    display: none !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 56px 0 14px !important;
  }
  .lk-hero-slide-active{
    display: block !important;
  }

  /* Dots: no overlay, no big padding block */
  .lk-hero-dots{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Ensure no phantom space under the visual */
  .lk-hero-visual{
    margin-bottom: 0 !important;
  }
}

/* Tablet: keep CTAs compact (not edge-to-edge) */

/* Mobile: buttons can be full-width but must NOT overflow */
@media (max-width: 600px){
  .lk-hero-actions{
    width: 100% !important;
  }
  .lk-hero-actions .lk-btn,
  .lk-hero-actions .lk-btn-primary,
  .lk-hero-actions .lk-btn-outline{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* === v1.61 Hero Slider: Desktop fixed height + Mobile/Tablet auto height (NO gray band) === */
@media (max-width: 1024px){
  .lk-hero .lk-hero-slider{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-bottom:0 !important;
  }
  /* Make slides participate in layout so container height is correct */
  .lk-hero .lk-hero-slide{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    transition:none !important;
    display:none !important;
    opacity:1 !important;
    height:auto !important;
  }
  .lk-hero .lk-hero-slide-active{ display:block !important; }

  /* Dots sit under the visual, no extra background band */
  .lk-hero .lk-hero-dots{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:10px auto 0 !important;
    padding:0 !important;
    background:transparent !important;
  }
}

/* Tablet: prevent CTA buttons from stretching full width */

/* Phone: CTA buttons should fit screen without overflow */
@media (max-width: 600px){
  .lk-hero-actions .lk-btn,
  .lk-hero-actions .lk-btn-primary,
  .lk-hero-actions .lk-btn-outline{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* === v1.62: Definitive HERO fix for mobile/tablet === */
/* The grey band is caused by fixed slider height showing its background under the slide. 
   We keep fixed height on desktop, but force auto height on <=1024px, and ensure no wrapper reserves space. */
@media (max-width: 1024px){
  .lk-hero .lk-hero-slider{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    background: transparent !important;
  }
  .lk-hero .lk-hero-slide{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  .lk-hero .lk-hero-slide{ display:none !important; }
  .lk-hero .lk-hero-slide-active{ display:block !important; }

  /* dots should not create/occupy a full-w/* tablet/mobile: place hero dots overlay, remove gray band */
  .lk-hero .lk-hero-dots-wrap,
  .lk-hero .lk-hero-dots-container,
  .lk-hero .lk-hero-dots-area{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  .lk-hero .lk-hero-dots{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  /* Prevent CTA overflow on narrow screens */
  .lk-hero .lk-hero-actions .lk-btn{
    max-width: 420px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 600px){
  .lk-hero .lk-hero-actions .lk-btn{
    width: 100% !important;
    max-width: 520px !important;
  }
}


/* === v1.64 Definitive Fix: Remove hero dots "gray bar" by taking dots out of normal flow ===
   Root cause confirmed in DevTools: .lk-hero-dots is a block in normal flow (e.g., 720x32),
   which always reserves vertical space -> visible gray band.
   Fix: make dots ABSOLUTE inside a RELATIVE slider (all breakpoints), so it occupies no layout height. */
.lk-hero-slider{
  position: relative !important;
}

/* Keep dots visible but not reserving space */
.lk-hero-dots{
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  /* eliminate any layout-driven sizing that could create a band */
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 10 !important;
}

/* Mobile tweak */
@media (max-width: 600px){
  .lk-hero-dots{
    bottom: 14px !important;
  }
}


/* v1.64 fixes: remove extra spacing under hero on tablet/mobile and constrain CTA button widths */
@media (max-width: 1024px){
  .lk-hero-actions{ justify-content:center !important; }
  .lk-hero-actions .lk-btn{
    width:auto !important;
    max-width: 420px !important;
    min-width: 240px !important;
  }
}
@media (max-width: 600px){
  .lk-hero-actions .lk-btn{
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* === v1.67 Hero Slider: remove gray bar on Tablet/Mobile ===
   Fix: make dots absolute overlay and remove flow spacing that created a blank light-gray block.
   Applies to <=1024px (tablet + mobile). */
@media (max-width: 1024px){
  .lk-hero{ overflow: hidden !important; }
  .lk-hero-slider{
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    padding-bottom: 0 !important;
  }
  .lk-hero-slide{
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    /* reserve a little space for dots overlay so they don't collide with rounded visual */
    padding-bottom: 46px !important;
  }
  .lk-hero-dots{
    position: absolute !important;
    left: 50% !important;
    bottom: 16px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    z-index: 20 !important;
  }
  /* Make sure nothing adds extra space below dots */
  .lk-hero + section{ margin-top: 0 !important; }
}


/* =========================================================
   v1.68 Hotfix: Tablet/Mobile hero dots + remove extra "grey bar"
   Goal:
   - Dots stay BELOW the hero image (not inside the image)
   - No extra empty bar/strip between hero and next section
   ========================================================= */
@media (max-width: 1024px) {
  /* Remove any reserved bottom space that created the grey strip */
  .lk-hero .lk-hero-slide {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ensure slider/slide backgrounds don't paint an empty strip */
  .lk-hero .lk-hero-slider,
  .lk-hero .lk-hero-slide,
  .lk-hero .lk-hero-dots-wrap,
  .lk-hero .lk-hero-dots-container,
  .lk-hero .lk-hero-dots-area {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Create a small "safe area" under the image for the dots */
  .lk-hero .lk-hero-visual {
    margin-bottom: 34px !important; /* space for dots */
  }

  /* Put dots into the safe area (below image), not over the image */
  .lk-hero .lk-hero-dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Kill any layout heights that may still contribute empty space */
  .lk-hero .lk-hero-dots-wrap,
  .lk-hero .lk-hero-dots-container,
  .lk-hero .lk-hero-dots-area {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Tablet CTA width: prevent full-bleed buttons */
  .lk-hero .lk-hero-actions .lk-btn,
  .lk-hero .lk-hero-actions a.lk-btn {
    width: auto !important;
    max-width: 360px !important;
  }
}

@media (max-width: 768px) {
  /* Keep mobile dots aligned and prevent accidental overflow */
  .lk-hero .lk-hero-visual { margin-bottom: 28px !important; }
  .lk-hero .lk-hero-dots { bottom: 8px !important; }
}