@charset "UTF-8";
/* ==========================================================================
   FLOCSS Based Architecture
   ========================================================================== */
/* --- Foundation --- */
/* --- Variables --- */
:root {
  --primary-color: #B80000;
  --primary-dark: #900000;
  --primary-rgb: 184, 0, 0;
  --text-color: #333333;
  --text-light: #666666;
  --text-dark: #444444;
  --bg-light: #f9f9f9;
  --bg-lighter: #f4f4f4;
  --bg-white: #ffffff;
  --bg-dark: #222222;
  --bg-darker: #111111;
  --border-color: #dddddd;
  --border-light: #eeeeee;
  --border-gray: #cccccc;
  --accent-gold: #d4af37;
  --accent-color: #B80000;
}

/* --- Mixin --- */
/* --- Reset --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.8;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--bg-white);
  overflow-x: hidden;
}

/* --- Layout --- */
/* --- Header --- */
header {
  background: #ffffff;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo img {
  height: 40px;
  vertical-align: middle;
}
header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  header .header-right {
    display: none;
  }
}
header .header-tel {
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
header .header-tel span {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: normal;
}
header .header-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* --- Mobile Fixed Bottom Bar --- */
.mobile-fixed-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  padding: 10px 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .mobile-fixed-bar {
    display: flex;
  }
}
.mobile-fixed-bar .mobile-btn {
  flex: 1;
  padding: 12px 10px;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
}

/* Add padding to body for fixed bar */
@media screen and (max-width: 767px) {
  body {
    padding-bottom: 70px;
  }
}
/* --- Footer --- */
footer {
  background: var(--bg-darker);
  color: var(--text-light);
  padding: 20px 0;
  text-align: center;
  font-size: 0.8rem;
}

/* --- Object : Utility --- */
/* --- Utility Classes --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.section {
  padding: 80px 0;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--primary-color);
}

.fw-bold {
  font-weight: 700;
}

.d-flex {
  display: flex;
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media screen and (max-width: 767px) {
  .container {
    max-width: 100%;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
/* Visibility Utilities */
.pc-only {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

.sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-only {
    display: block !important;
  }
}

/* --- Object : Component --- */
/* --- Buttons --- */
.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 6px rgba(184, 0, 0, 0.2);
}
.btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}
.btn-outline:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  padding-bottom: 20px;
  /*
  &::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background-color: var(--primary-color);
      margin: 10px auto 0;
  }
  */
}
@media screen and (max-width: 768px) {
  .section-title {
    font-size: 1.8rem;
  }
}

.section-lead {
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.8;
}

/* --- Object : Project --- */
/* --- Hero Section --- */
#hero {
  background-color: var(--bg-lighter);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  /* Left Side */
  /* Right Side - Fixed Form */
}
#hero .hero-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}
#hero .hero-content {
  flex: 1;
  max-width: 600px;
}
#hero .hero-trust {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
#hero .hero-trust .trust-badge {
  background: var(--accent-gold);
  color: #ffffff;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 2px;
}
#hero .hero-trust .service-badge {
  background: var(--primary-color);
  color: #ffffff;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 2px;
}
#hero .hero-catch {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #000000;
}
@media screen and (max-width: 767px) {
  #hero .hero-catch {
    font-size: 2rem;
  }
}
#hero .hero-catch span {
  color: var(--primary-color);
}
#hero .hero-sub {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: var(--text-dark);
}
#hero .hero-features-list {
  margin-bottom: 30px;
}
#hero .hero-features-list li {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}
#hero .hero-features-list li::before {
  content: "✔";
  color: var(--primary-color);
  position: absolute;
  left: 0;
  top: 0;
}
#hero .hero-image {
  max-width: 80%;
  margin-top: 20px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}
#hero .hero-form-container {
  width: 420px;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-top: 5px solid var(--primary-color);
  flex-shrink: 0;
}
#hero .hero-form-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 20px;
  background: var(--bg-light);
  padding: 10px;
  border-radius: 4px;
}

/* Form Styles */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 5px;
  font-weight: 700;
}
.form-group label span {
  background: var(--primary-color);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-gray);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
}

@media screen and (max-width: 767px) {
  #hero .hero-wrapper {
    flex-direction: column;
  }
  #hero .hero-form-container {
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
  }
}
/* --- Pain Points --- */
#pain-points {
  background: #ffffff;
  /* Solution Box */
}
#pain-points .pain-wrapper {
  text-align: center;
}
#pain-points .pain-worrie-container {
  margin-bottom: 40px;
}
#pain-points .pain-worrie-container .pain-worrie-img {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
#pain-points .pain-bridge-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #000000;
}
#pain-points .pain-bridge-text span {
  font-size: 1.8rem;
  font-weight: 900;
}
#pain-points .pain-solution-box {
  max-width: 800px;
  margin: 0 auto;
  border: 4px solid var(--border-gray);
  border-radius: 15px;
  background: var(--bg-light);
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: hidden;
}
#pain-points .pain-solution-box .pain-solution-content {
  flex: 1;
  z-index: 2;
}
#pain-points .pain-solution-box .pain-solution-intro {
  font-size: 0.9rem;
  margin-bottom: 15px;
  font-weight: 500;
}
#pain-points .pain-solution-box .pain-solution-list {
  margin-bottom: 15px;
}
#pain-points .pain-solution-box .pain-solution-list li {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  padding-left: 30px;
  position: relative;
}
#pain-points .pain-solution-box .pain-solution-list li::before {
  content: "✔";
  color: var(--primary-color);
  position: absolute;
  left: 0;
  font-weight: 900;
}
#pain-points .pain-solution-box .pain-solution-outro {
  font-size: 0.9rem;
  color: var(--text-dark);
}
#pain-points .pain-solution-box .pain-solution-img-container {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#pain-points .pain-solution-box .pain-solution-img-container .pain-solution-img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  #pain-points .pain-solution-box {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }
  #pain-points .pain-solution-content {
    margin-bottom: 20px;
  }
  #pain-points .pain-solution-list li {
    text-align: left;
    display: inline-block;
  }
  #pain-points .pain-solution-img-container {
    width: 120px;
  }
}
/* --- Services Section --- */
#services {
  padding-top: 80px;
  padding-bottom: 80px;
}
#services .service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
#services .service-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: transform 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#services .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
#services .service-card .service-icon {
  width: 90px;
  height: 90px;
  background: var(--bg-light);
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}
#services .service-card .service-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
  color: var(--text-color);
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#services .service-card .service-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-light);
  text-align: left;
  width: 100%;
}

/* Responsive */
@media screen and (max-width: 767px) {
  #services .service-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #services .service-card {
    flex-direction: row;
    text-align: left;
    padding: 20px;
    align-items: flex-start;
  }
  #services .service-card .service-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    margin-bottom: 0;
    margin-right: 20px;
    flex-shrink: 0;
  }
  #services .service-card .service-title {
    min-height: auto;
    justify-content: flex-start;
    margin-bottom: 5px;
  }
  #services .service-card .service-content-wrapper {
    flex: 1;
  }
}
/* --- Reasons/Strengths --- */
#reasons {
  background: var(--bg-light);
  padding-top: 80px;
  padding-bottom: 80px;
}
#reasons .reasons-intro p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-dark);
}
#reasons .reasons-container {
  max-width: 1000px;
  margin: 0 auto;
}
#reasons .reason-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 80px;
  gap: 40px;
}
#reasons .reason-row:last-child {
  margin-bottom: 0;
}
#reasons .reason-row.reverse {
  flex-direction: row-reverse;
}
#reasons .reason-row .reason-img-col {
  flex: 1;
  max-width: 48%;
}
#reasons .reason-row .reason-img-col img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
#reasons .reason-row .reason-txt-col {
  flex: 1;
  max-width: 48%;
}
#reasons .reason-row .reason-badge {
  display: inline-block;
  background: var(--primary-color);
  color: #ffffff;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 10px;
}
#reasons .reason-row .reason-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}
#reasons .reason-row .reason-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--primary-color);
  line-height: 1;
}
#reasons .reason-row .reason-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-color);
  margin: 0;
}
#reasons .reason-row .reason-desc {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: var(--text-dark);
}
#reasons .reason-row .reason-list {
  margin-bottom: 20px;
}
#reasons .reason-row .reason-list li {
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
}
#reasons .reason-row .reason-list li::before {
  content: "•";
  color: var(--text-color);
  position: absolute;
  left: 0;
  font-weight: 900;
}
#reasons .reason-row .reason-result {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
}

@media screen and (max-width: 767px) {
  #reasons .reason-row {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }
  #reasons .reason-row .reason-img-col {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  #reasons .reason-row .reason-img-col img {
    max-width: 300px;
    margin: 0 auto;
  }
  #reasons .reason-row .reason-txt-col {
    max-width: 100%;
    width: 100%;
  }
  #reasons .reason-row.reverse {
    flex-direction: column;
  }
  #reasons .reason-txt-col {
    padding-left: 0;
    padding-right: 0;
  }
  #reasons .reason-title {
    font-size: 1.4rem;
  }
}
/* --- Plans --- */
#plans {
  background: #ffffff;
  /* Comparison Table */
}
#plans .plan-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
#plans .plan-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  background: #ffffff;
  /* Table Head */
  /* Body Rows */
  /* Merged Rows */
}
#plans .plan-compare th, #plans .plan-compare td {
  border: 1px solid var(--border-color);
  padding: 20px 15px;
  vertical-align: middle;
  font-size: 0.95rem;
  line-height: 1.6;
}
#plans .plan-compare thead th {
  background: var(--text-color);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  font-size: 1.1rem;
}
#plans .plan-compare thead th:first-child {
  background: var(--bg-dark);
  width: 15%;
}
#plans .plan-compare thead th:nth-child(3) {
  background: var(--text-color);
}
#plans .plan-compare tbody th {
  background: var(--bg-lighter);
  text-align: left;
  font-weight: 700;
  color: var(--text-color);
  width: 15%;
}
#plans .plan-compare tbody td {
  text-align: center;
  color: var(--text-dark);
}
#plans .plan-compare tbody td .plan-highlight {
  color: var(--primary-color);
  font-weight: bold;
}
#plans .plan-compare tr:nth-last-child(-n+4) td {
  text-align: left;
  padding-left: 30px;
}
#plans .plan-note {
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  #plans .plan-compare th, #plans .plan-compare td {
    padding: 15px 10px;
    font-size: 0.85rem;
  }
}
/* --- Flow --- */
#flow {
  background: var(--bg-light);
  padding-top: 80px;
  padding-bottom: 80px;
  /* --- Flow Bottom Note Custom Style --- */
}
#flow .flow-steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
#flow .flow-step-item {
  flex: 1;
  position: relative;
  padding-top: 20px;
}
#flow .flow-step-item::before {
  content: "";
  position: absolute;
  top: 55px;
  left: -10px;
  right: -10px;
  width: auto;
  height: 2px;
  background: var(--primary-color);
  z-index: 0;
}
#flow .flow-step-item:first-child::before {
  left: 50%;
  right: -10px;
  width: auto;
}
#flow .flow-step-item:last-child::before {
  left: -10px;
  right: 50%;
  width: auto;
}
#flow .flow-step-head {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
#flow .flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: var(--primary-color);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 900;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #ffffff;
}
#flow .flow-step-body {
  padding: 0 10px;
}
#flow .flow-step-label {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
#flow .flow-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 15px;
  min-height: 3.4rem;
}
#flow .flow-step-list {
  font-size: 0.9rem;
  margin-bottom: 15px;
}
#flow .flow-step-list li {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 5px;
}
#flow .flow-step-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-color);
}
#flow .flow-note-text {
  font-size: 0.95rem;
  font-weight: 700;
}
#flow .flow-bottom-note {
  position: relative;
  max-width: 900px;
  margin: 60px auto 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#flow .flow-bottom-note .flow-note-img {
  width: 130px;
  flex-shrink: 0;
  z-index: 2;
  margin-right: -30px;
  margin-bottom: -5px;
}
#flow .flow-bottom-note .flow-note-img img {
  width: 100%;
  height: auto;
  display: block;
}
#flow .flow-bottom-note .flow-note-content {
  background: var(--bg-light);
  border: 4px solid var(--border-gray);
  border-radius: 12px;
  padding: 30px 30px 30px 50px;
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
}
#flow .flow-bottom-note .flow-note-content p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-color);
}

@media screen and (max-width: 767px) {
  #flow .flow-steps {
    flex-direction: column;
    gap: 40px;
  }
  #flow .flow-step-item::before {
    width: 2px;
    height: 100%;
    top: 0;
    left: 35px;
  }
  #flow .flow-step-item:first-child::before {
    top: 50%;
    height: 50%;
    width: 2px;
    left: 35px;
  }
  #flow .flow-step-item:last-child::before {
    height: 50%;
    width: 2px;
    left: 35px;
  }
  #flow .flow-step-head {
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
  }
  #flow .flow-step-body {
    display: inline-block;
    width: calc(100% - 100px);
    vertical-align: top;
    padding: 0;
  }
  #flow .flow-step-title {
    min-height: auto;
  }
  #flow .flow-bottom-note {
    flex-direction: column;
    align-items: center;
  }
  #flow .flow-bottom-note .flow-note-img {
    margin-right: 0;
    margin-bottom: -20px;
    width: 100px;
  }
  #flow .flow-bottom-note .flow-note-content {
    padding: 40px 20px 20px;
    width: 100%;
    text-align: center;
  }
  #flow .flow-bottom-note .flow-note-content p {
    text-align: center;
  }
}
/* --- FAQ --- */
#faq {
  background: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}
#faq .faq-container {
  max-width: 800px;
  margin: 0 auto;
}
#faq .faq-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
#faq .faq-question {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 20px 50px 20px 20px;
  cursor: pointer;
  position: relative;
  list-style: none;
  /* Custom + Icon */
  /* Q label styling */
}
#faq .faq-question::-webkit-details-marker {
  display: none;
}
#faq .faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--primary-color);
  font-weight: light;
}
#faq .faq-question::before {
  content: "Q.";
  color: var(--primary-color);
  margin-right: 10px;
  font-weight: 900;
}
#faq details[open] .faq-question::after {
  content: "-";
  font-size: 1.8rem;
}
#faq .faq-answer {
  padding: 0 20px 20px 20px;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid var(--bg-light);
}

/* --- Deliverables Section --- */
#deliverables {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--bg-light);
  /* Refactored to 2-column Grid */
  /* Card Styling */
  /* Summary Card specific override if needed */
}
#deliverables .deliverables-content {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
#deliverables .deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}
#deliverables .deliverable-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}
#deliverables .deliverable-card .deliv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}
#deliverables .deliverable-card .deliv-badge,
#deliverables .deliverable-card .deliv-cat {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 0.9rem;
}
#deliverables .deliverable-card .deliv-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
  min-height: 3.4rem;
}
#deliverables .deliverable-card .deliv-img-area {
  margin-bottom: 20px;
  text-align: center;
  max-width: 300px;
  margin: 0 auto;
}
#deliverables .deliverable-card .deliv-img-area img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
#deliverables .deliverable-card .deliv-desc {
  font-size: 0.95rem;
  margin-bottom: 15px;
}
#deliverables .deliverable-card .deliv-desc span {
  color: var(--primary-color);
  font-weight: bold;
}
#deliverables .deliverable-card .deliv-list {
  margin-bottom: 15px;
  font-size: 0.9rem;
  background: var(--bg-white);
  padding: 10px 10px 10px 25px;
  border-radius: 6px;
}
#deliverables .deliverable-card .deliv-list li {
  list-style-type: disc;
  margin-bottom: 5px;
  color: var(--text-color);
}
#deliverables .deliverable-card .deliv-note {
  font-size: 0.9rem;
  color: var(--text-light);
  background: var(--bg-lighter);
  padding: 10px;
  border-radius: 6px;
  margin-top: auto;
  line-height: 1.5;
}
#deliverables .summary-card {
  justify-content: space-between;
  background: var(--border-color);
  border: 2px solid var(--border-gray);
}
#deliverables .summary-card .summary-top-img {
  text-align: center;
  margin-bottom: 20px;
}
#deliverables .summary-card .summary-top-img img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#deliverables .summary-card .summary-intro {
  font-weight: bold;
  margin-bottom: 15px;
}
#deliverables .summary-card .summary-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
#deliverables .summary-card .summary-list li {
  margin-bottom: 10px;
  font-weight: bold;
  color: var(--primary-color);
}
#deliverables .summary-card .summary-outro {
  margin-bottom: 20px;
}
#deliverables .summary-card .summary-img-area {
  text-align: right;
  margin-top: auto;
}
#deliverables .summary-card .summary-img-area img {
  height: 150px;
  width: auto;
}

@media screen and (max-width: 767px) {
  #deliverables .deliverables-grid {
    grid-template-columns: 1fr;
  }
  .deliv-title {
    min-height: auto;
  }
}
/* --- Cases --- */
#cases {
  background: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}
#cases .swiper-container {
  width: 100%;
  padding-bottom: 50px;
  overflow: hidden;
}
#cases .swiper-wrapper {
  align-items: stretch;
}
#cases .swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
}
#cases .case-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--border-light);
  height: 100%;
  width: 100%;
}
#cases .case-card .case-header {
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 20px;
}
#cases .case-card .case-logo-area {
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}
#cases .case-card .case-logo-area .case-logo {
  width: auto;
}
#cases .case-card .case-logo-area .case-logo-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-light);
  letter-spacing: 1px;
}
#cases .case-card .case-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  min-height: 3.3rem;
  flex-grow: 0;
}
#cases .case-card .case-info {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: var(--text-color);
  background: var(--bg-white);
  padding: 10px;
  border-radius: 6px;
  flex-grow: 1;
}
#cases .case-card .case-info-item strong {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
#cases .case-card .case-points {
  margin-top: auto;
}
#cases .case-card .case-points .case-point-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 0.95rem;
}
#cases .case-card .case-points ul {
  list-style: none;
  padding: 0;
}
#cases .case-card .case-points ul li {
  font-size: 0.9rem;
  position: relative;
  padding-left: 15px;
  margin-bottom: 3px;
  color: var(--text-dark);
}
#cases .case-card .case-points ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* Swiper Pagination Customization */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--border-gray);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--primary-color);
}

/* Swiper Navigation Customization */
.swiper-button-next,
.swiper-button-prev {
  color: var(--primary-color);
  background-color: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.2rem;
  font-weight: bold;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(184, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .case-title {
    min-height: auto;
  }
}
/* --- CTA Section --- */
#cta {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--bg-dark);
  color: #ffffff;
  text-align: center;
}
#cta .cta-title {
  font-size: 2rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #cta .cta-title {
    font-size: 1.5rem;
  }
}
#cta .cta-btn {
  padding: 20px 60px;
  font-size: 1.5rem;
  margin-top: 20px;
}

/* --- Document Cards Section --- */
#document {
  background-color: var(--bg-light);
}

.doc-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .doc-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media screen and (max-width: 480px) {
  .doc-cards-grid {
    grid-template-columns: 1fr;
  }
}

.doc-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}
.doc-card .doc-card-icon {
  width: 70px;
  height: 70px;
  background: var(--bg-light);
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.doc-card .doc-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--text-color);
}
.doc-card .doc-card-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 20px;
  flex-grow: 1;
}
.doc-card .doc-card-btn {
  width: 100%;
  padding: 12px 15px;
  font-size: 0.85rem;
}

/* --- Document Modal --- */
.doc-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.doc-modal.is-active {
  display: block;
}

.doc-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.doc-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}
@media screen and (max-width: 767px) {
  .doc-modal-content {
    width: 95%;
    max-height: 95vh;
    border-radius: 8px;
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.doc-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: var(--bg-light);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}
.doc-modal-close:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.doc-modal-title {
  padding: 25px 60px 20px 25px;
  font-size: 1.2rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-color);
}

.doc-modal-body {
  padding: 0;
}
.doc-modal-body .pardot-frame {
  display: block;
  width: 100%;
  min-height: 700px;
  border: none;
}
@media screen and (max-width: 767px) {
  .doc-modal-body .pardot-frame {
    min-height: 600px;
  }
}

/* Body scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* --- Responsive (Consolidated) --- */
/*
   Ideally, responsive styles should be included within each component/project file inside media queries.
   However, if there were global responsive overrides that don't fit into specific components, they could go here.
   For this refactor, I'll attempt to keep the original media query structure if it spans multiple concerns,
   or better yet, distribute them to their respective files in a future step.
   For now, strictly following the extraction, I will place the leftover media queries here 
   OR distribute them.
   Looking at the original file, the media queries were at the end.
   To ensure FLOCSS compliance, it is better to have media queries inside the relevant mixins or files.
   However, to avoid breaking changes now, I will append the media queries below.
   BUT, I already moved some media queries into the partials (like in _flow.scss, _deliverables.scss).
   I should check if there are global responsive styles left.
*/
/* 
   Reviewing the original responsive section: 
   It contained overrides for Container, Hero, Grid, Pain Points, Reasons, Flow, Deliverables.
   I should move these into their respective files for better modularity.

   - Container, Grid -> foundation/base or object/utility
   - Hero -> object/project/hero
   - Pain Points -> object/project/pain
   - Reasons -> object/project/reasons
   - Flow -> object/project/flow
   - Deliverables -> object/project/deliverables

   I will append a separate responsive block here for any global adjustments that didn't fit,
   but most should be moved. 

   Actually, let's verify if I included responsive styles in the extracted files.
   I did NOT strictly include the big media query block in the extraction steps above for all files.
   I need to append the responsive styles to their respective files to be truly modular. 
   I will update this file to just be the imports, and then I will perform an update to the partials 
   to include the responsive styles.
*/

/*# sourceMappingURL=style.css.map */