/* =========================================
   コミュラボ - Main stylesheet
   neat-gate-921.css
   ========================================= */

/* reset-ish */
*,*:before,*:after { box-sizing: border-box; }
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Noto Sans JP', Arial, sans-serif;
    color: #2c2c2c;
    line-height:1.6;
    background: #faf8f5;
    -webkit-font-smoothing: antialiased;
}

/* ===== HEADER ===== */
.site-header{
    background: transparent;
    padding: 20px 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    transition: all .3s ease;
}
.site-header.scrolled {
  background: #faf8f5;
  padding: 12px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.site-header .container { display:flex; align-items: center; justify-content:space-between;}

.logo { display:flex; align-items:center; text-decoration:none; }
.logo svg { width:52px; height:52px; }
.logo-text { margin-left:10px; font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:#fff; line-height:1.1; }
.logo-text span { display:block; font-size:11px; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; opacity:.8; }
.site-header.scrolled .logo-text { color:#2c2c2c; }
.site-header.scrolled .logo-text span { opacity:.6; }

/* nav */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding:0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
.main-nav ul li a {
    color: #fff;
    text-decoration:none;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}
.main-nav ul li a:hover { color:#8B6F47; }
.site-header.scrolled .main-nav ul li a { color:#2c2c2c; }
.site-header.scrolled .main-nav ul li a:hover { color:#8B6F47; }

/* burger */
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.burger span { display:block; width:24px; height:2px; background:#fff; transition:.3s; }
.site-header.scrolled .burger span { background:#2c2c2c; }
.mobile-nav { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(26,26,26,0.97); z-index:9998; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { color:#fff; text-decoration:none; font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:2px; }
.mobile-nav a:hover { color:#8B6F47; }
.mobile-nav .close-btn { position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; }

/* HERO */
.hero-section {
    position: relative;
    height: 85vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display:flex;
    align-items: center;
}
.hero-section::before {
    content:'';
    position: absolute;
    top:0; left:0;
    width: 100%;
    height:100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.18) 70%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width:600px;
  padding: 0 20px;
}
.hero-content .pre-title{
    color: #fff;
    font-size:14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    opacity: .9;
}
.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 20px;
}
.hero-content p {
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom:30px;
    max-width: 480px;
}

/* BUTTONS */
.btn,
.btn-primary{
    display:inline-block;
    background: #8B6F47;
    border: 1px solid #8B6F48;
    padding: 14px 32px;
    border-radius: 4px;
    color:#fff;
    font-weight:600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size:13px;
    transition: all 0.3s;
    cursor: pointer;
}
.btn:hover { background:#a08359; border-color: #75593a; transform: translateY(-2px);}
.btn.btn-outline{
    background: transparent;
    color:#8B6F47;
    border:1px solid #8B6F47;
}
.btn.btn-outline:hover { background:#8B6F47; color:#fff; }

/* SECTIONS */
.section { padding: 80px 0; }
.section-intro { padding:100px 0 80px; }      /* asymmetric */
.section-services { padding: 70px 0 90px; }   /* why different?? */
.section-process{padding:80px 0 80px;}
.section-cta { padding:60px 0; background:#1a1a1a; }
.section-guarantee{ padding: 90px 0 70px;}
.section-price { padding:80px 0; background:#fff; }
.section-faq { padding:80px 0; background:#f7f5f0; }
.section-contact { padding:80px 0; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left:20px;
    padding-right: 20px;
}

/* section headings */
.section-heading { text-align:center; margin-bottom:50px; }
.section-heading h2 { font-family:'Playfair Display',serif; font-size:38px; color:#2c2c2c; margin:0 0 15px; }
.section-heading p { color:#555; font-size:16px; max-width:620px; margin:0 auto; }
.section-heading .sub { font-size:13px; text-transform:uppercase; letter-spacing:2px; color:#8B6F47; margin-bottom:10px; display:block; }

/* INTRO BLOCK */
.intro-block {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items: center;
}
.intro-block .text h2 {
    font-family: 'Playfair Display', serif;
    font-size:38px;
    color: #2c2c2c;
    margin: 0 0 25px;
    line-height: 1.2;
}
.intro-block .text p {color:#555; font-size: 16px; margin-bottom: 20px;}
.intro-block ul.checks { list-style:none; padding:0; margin: 25px 0 0;}
.intro-block ul.checks li{
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color:#2C2C2C;
  font-size: 15px;
}
.intro-block ul.checks li:before{
    content: '✓';
    position:absolute;
    left:0;
    top:0;
    color: #2d8659;
    font-weight:700;
    font-size: 18px;
}
.intro-block .image img,
.intro-block .image{ border-radius: 6px; overflow:hidden;}
.intro-block .image img { width:100%; display:block; }

/* SERVICE GRID - the long stacked rows */
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap:30px;}
.service-card{
    background: #faf8f5;
    border-radius:6px;
    overflow: hidden;
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
}
.service-card .service-img{
  width: 45%;
  flex-shrink: 0;
}
.service-card .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.service-card .service-body{
    padding: 30px 28px;
    width: 55%;
}
.service-card h3{
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color:#2c2c2c;
  margin: 0 0 12px;
}
.service-card p{ color:#555555; font-size:14px; line-height: 1.6; margin: 0 0 15px;}
.service-card .read-more{
    color: #8B6F47;
    font-size: 13px;
    text-decoration:none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.service-card.last { margin-bottom: 0; }

/* PRICE CARDS */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:40px; }
.price-card {
    background:#faf8f5;
    border:1px solid #e5e5e5;
    border-radius:6px;
    padding: 40px 30px;
    text-align:center;
    position:relative;
    transition: transform .3s, box-shadow .3s;
}
.price-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.09); }
.price-card.featured { border-color:#8B6F47; background:#fff; }
.price-card .badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#8B6F47; color:#fff; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 16px; border-radius:20px; white-space:nowrap; }
.price-card h3 { font-family:'Playfair Display',serif; font-size:20px; color:#2c2c2c; margin:0 0 10px; }
.price-card .price { font-size:44px; font-weight:700; color:#8B6F47; line-height:1; margin:16px 0 4px; }
.price-card .price span { font-size:16px; font-weight:400; color:#666; }
.price-card .price-sub { font-size:13px; color:#666; margin-bottom:24px; }
.price-card ul { list-style:none; padding:0; margin:0 0 28px; text-align:left; }
.price-card ul li { font-size:14px; color:#555; padding:7px 0 7px 26px; position:relative; border-bottom:1px solid #f0ede8; }
.price-card ul li:last-child { border-bottom:none; }
.price-card ul li:before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:0; top:7px; color:#2d8659; font-size:12px; }

/* PROCESS / 4-COL */
.process-row {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top:40px;
}
.process-card{
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 35px 25px 30px;
  text-align:center;
  border-radius: 4px;
}
.process-card .num{
    font-family: 'Playfair Display', serif;
    font-size:42px;
    color: #8B6F47;
    margin-bottom: 15px;
    display: block;
}
.process-card h4{
    font-size:17px;
    margin: 0 0 10px;
    color:#2c2c2c;
}
.process-card p{font-size: 13px; color: #666;line-height:1.5;}

/* GUARANTEE / CHECK LIST CENTERED */
.guarantee-section { text-align: center; background:#f7f5f0; }
.guarantee-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  margin: 0 0 30px;
}
.guarantee-section .checks-inline{
    list-style:none;
    padding:0;
    margin: 30px auto 0;
    max-width: 700px;
}
.guarantee-section .checks-inline li{
    padding: 10px 0 10px 30px;
    position:relative;
    text-align:left;
}
.guarantee-section .checks-inline li:before{
  content: '✓';
  color: #2d8659;
  position: absolute;
  left:0; top: 10px;
  font-weight:700;
}

/* FAQ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid #e5e5e5; }
.faq-question {
    width:100%; background:none; border:none; padding:22px 40px 22px 0;
    font-size:16px; font-weight:600; color:#2c2c2c; text-align:left; cursor:pointer;
    position:relative; transition: color .2s;
}
.faq-question:hover { color:#8B6F47; }
.faq-question:after { content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:13px; color:#8B6F47; transition:transform .3s; }
.faq-item.open .faq-question:after { transform:translateY(-50%) rotate(180deg); }
.faq-answer { display:none; padding:0 0 22px; color:#555; font-size:15px; line-height:1.7; }
.faq-item.open .faq-answer { display:block; }

/* CONTACT FORM */
.contact-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-info h2 { font-family:'Playfair Display',serif; font-size:32px; color:#2c2c2c; margin:0 0 20px; }
.contact-info p { color:#555; font-size:15px; margin-bottom:14px; }
.contact-info .ci-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.contact-info .ci-item i { color:#8B6F47; font-size:18px; margin-top:3px; flex-shrink:0; }
.contact-info .ci-item span { color:#555; font-size:15px; line-height:1.5; }
.contact-form { background:#fff; border:1px solid #e5e5e5; border-radius:6px; padding:40px 35px; }
.contact-form h3 { font-family:'Playfair Display',serif; font-size:22px; color:#2c2c2c; margin:0 0 22px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#2c2c2c; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-group label .req { color:#c0392b; margin-left:2px; }
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding:12px 14px; border:1px solid #e5e5e5; border-radius:4px;
    font-size:15px; font-family:inherit; color:#2c2c2c; background:#faf8f5; transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:#8B6F47; outline:none; background:#fff; }
.form-group textarea { height:110px; resize:vertical; }
.form-note { font-size:12px; color:#888; margin-top:8px; }
.form-submit { width:100%; }

/* CTA BAND */
.cta-band {
  background:#1A1A1A;
  color:#fff;
  text-align: center;
  padding: 50px 20px;
}
.cta-band h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    margin: 0 0 25px;
    color: #fff !important;
}
.cta-band .btn{ background:#8B6F47;}
.cta-band .btn:hover{background:#a08359 !important;}

/* utility nav strip - dark */
.utility-bar{
    background: #1a1a1a;
    color: #fff;
    padding: 12px 0;
    font-size: 13px;
}
.utility-bar a {color:#fff; text-decoration:none; margin-right:20px;}
.utility-bar a:hover{color: #8B6F47 !important;}

/* FOOTER */
.site-footer{
    background:#1a1a1a;
    color:#999;
    padding: 60px 0 40px;
}
.site-footer .container{ display:flex; justify-content: space-between; flex-wrap:wrap; gap: 40px;}
.site-footer h5 { color:#fff; margin: 0 0 18px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;}
.site-footer ul { list-style:none; padding:0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer ul li a { color:#999; text-decoration:none; font-size: 14px;}
.site-footer ul li a:hover { color: #fff; }
.site-footer .footer-logo-text { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:#fff; margin-bottom:8px; }
.site-footer .footer-logo-sub { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#666; margin-bottom:18px; }
.footer-bottom { border-top:1px solid #2a2a2a; margin-top:40px; padding-top:25px; text-align:center; font-size:13px; color:#555; }
.footer-social { display:flex; gap:12px; margin-top:16px; }
.footer-social a { color:#666; font-size:16px; text-decoration:none; transition:color .2s; }
.footer-social a:hover { color:#8B6F47; }

/* page hero (inner pages) */
.page-hero { background:#1a1a1a; padding:120px 0 60px; text-align:center; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:44px; color:#fff; margin:0 0 14px; }
.page-hero p { color:#999; font-size:16px; max-width:560px; margin:0 auto; }
.page-hero .breadcrumb { font-size:13px; color:#666; margin-bottom:16px; }
.page-hero .breadcrumb a { color:#8B6F47; text-decoration:none; }

/* page content */
.page-content { padding:80px 0; }
.page-content h2 { font-family:'Playfair Display',serif; font-size:30px; color:#2c2c2c; margin:40px 0 16px; }
.page-content h2:first-child { margin-top:0; }
.page-content p { color:#555; font-size:15px; line-height:1.8; margin-bottom:18px; }
.page-content ul { color:#555; font-size:15px; line-height:1.8; padding-left:22px; margin-bottom:18px; }
.page-content ul li { margin-bottom:8px; }

/* location map placeholder */
.map-placeholder { background:#e8e5df; border-radius:6px; height:380px; display:flex; align-items:center; justify-content:center; margin-bottom:40px; }
.map-placeholder i { font-size:48px; color:#8B6F47; }

/* cookie strip */
.cookie-bar{
    position: fixed;
    bottom:0; left: 0;
    width:100%;
    background:#fff;
    border-top:1px solid #e5e5e5;
    padding:18px 20px;
    font-size: 13px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:16px;
}
.cookie-bar p { margin:0; color:#555; line-height:1.5; }
.cookie-bar p a { color:#8B6F47; }
.cookie-bar .actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-bar .actions .btn { padding:8px 20px; font-size:12px; }
.cookie-bar .actions a.deny { color:#888; font-size:13px; text-decoration:none; align-self:center; }
.cookie-bar .actions a.deny:hover { color:#2c2c2c; }

/* legacy bootstrap-ish helpers still hanging around */
.clearfix:after{ content:""; display: table; clear: both;}
.pull-left  { float:left; }
.pull-right { float:right; }
.hidden-xs { display: block; }
.text-center{ text-align: center;}
.text-left { text-align:left;}

/* temp fix - remove after launch */
.section + .section{ margin-top: 0px;}

/* why does this work?? */
body .main .container .service-card .service-body h3 { font-weight: 700 !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .container { max-width: 960px;}
    .hero-content h1 { font-size: 44px;}
    .process-row { grid-template-columns: repeat(2, 1fr); gap:20px; }
    .price-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width: 768px){
    .site-header { padding: 12px 0;}
    .main-nav { display:none; }
    .burger { display:flex; }
    .hero-section { height:auto; min-height: 500px; padding: 100px 0 60px;}
    .hero-content h1 { font-size:34px;}
    .intro-block { grid-template-columns: 1fr; gap: 30px;}
    .services-grid{ grid-template-columns: 1fr; gap: 20px;}
    .service-card { flex-direction: column;}
    .service-card .service-img,
    .service-card .service-body { width:100%; }
    .service-card .service-img { height:220px; }
    .section, .section-intro, .section-services { padding: 50px 0 !important; }
    .site-footer .container { flex-direction: column;}
    .cookie-bar { flex-direction: column; gap:10px; text-align: center;}
    .contact-wrapper { grid-template-columns:1fr; }
    .price-grid { grid-template-columns:1fr; }
}

@media (max-width:480px){
    .hero-content h1 { font-size: 28px;}
    .intro-block .text h2,
    .guarantee-section h2 { font-size: 26px;}
    .process-row{ grid-template-columns: 1fr;}
    .btn, .btn-primary{ padding: 12px 22px; font-size: 12px;}
    .page-hero h1 { font-size:30px; }
    .section-heading h2 { font-size:28px; }
}