:root {
   --coast-blue: #00a3dd;
   --coast-navy: #101828;
   --coast-green: #16a34a;
   --coast-gold: #ffb600;
   --coast-muted: #667085;
   --coast-border: #e4e7ec;
   --coast-soft: #f7fbff;
}

body {
   color: var(--coast-navy);
}

.coast-header,
.coast-mobile-header {
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.tp-logo img {
   max-width: 178px;
   height: auto;
}

.tp-main-menu ul li a {
   color: var(--coast-navy);
   font-weight: 600;
}

.tp-main-menu ul li.active > a,
.tp-main-menu ul li a:hover {
   color: var(--coast-blue);
}

.coast-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--coast-blue);
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 14px;
}

.coast-kicker::before {
   content: "";
   width: 28px;
   height: 3px;
   background: var(--coast-gold);
   border-radius: 999px;
}

.coast-hero {
   min-height: 780px;
   display: flex;
   align-items: center;
   background: linear-gradient(135deg, #f7fbff 0%, #ffffff 56%, #eef8f2 100%);
}

.coast-hero .tp-hero-section-box p {
   max-width: 640px;
   color: #475467;
}

.coast-hero-actions {
   flex-wrap: wrap;
   gap: 16px;
}

.coast-hero-actions .mr-30,
.coast-hero-actions .mr-55 {
   margin-right: 0;
}

.tp-btn-sky,
.tp-btn-yellow,
.tp-btn-white {
   border-radius: 6px;
   font-weight: 700;
}

.tp-btn-sky {
   background: var(--coast-blue);
}

.tp-btn-yellow {
   color: var(--coast-navy);
}

.tp-btn-white {
   color: var(--coast-blue);
}

.coast-about-visual img,
.coast-image-panel img,
.coast-photo {
   width: 100%;
   min-height: 340px;
   object-fit: cover;
   border-radius: 8px;
}

.coast-hero .coast-photo {
   min-height: 520px;
   box-shadow: 0 24px 70px rgba(16, 24, 40, 0.14);
}

.coast-stat-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.coast-stat-grid div,
.coast-process-card,
.coast-info-card,
.coast-value-card,
.coast-mini-card,
.coast-service-detail,
.coast-form-card,
.coast-contact-card {
   background: #fff;
   border: 1px solid var(--coast-border);
   border-radius: 8px;
   box-shadow: 0 18px 45px rgba(16, 24, 40, 0.06);
}

.coast-stat-grid div {
   padding: 20px;
}

.coast-stat-grid strong {
   display: block;
   color: var(--coast-blue);
   font-size: 34px;
   line-height: 1;
}

.coast-stat-grid span {
   color: var(--coast-muted);
   font-size: 14px;
}

.coast-service-card .bpservice__item {
   min-height: 320px;
}

.coast-service-card .bpservice__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 32px;
}

.coast-section-icons {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin: -35px 0 52px;
}

.coast-section-icons span {
   display: inline-flex;
   width: 54px;
   height: 54px;
   align-items: center;
   justify-content: center;
   background: rgba(0, 163, 221, 0.1);
   color: var(--coast-blue);
   border: 1px solid rgba(0, 163, 221, 0.18);
   border-radius: 50%;
   font-size: 23px;
}

.coast-service-card p {
   min-height: 96px;
}

.coast-industries {
   background: #fff;
   border: 1px solid var(--coast-border);
   border-radius: 8px;
}

.coast-process-card {
   padding: 32px 28px;
   height: 100%;
}

.coast-process-card span {
   display: inline-flex;
   width: 46px;
   height: 46px;
   align-items: center;
   justify-content: center;
   background: var(--coast-blue);
   color: #fff;
   border-radius: 50%;
   font-weight: 800;
   margin-bottom: 22px;
   font-size: 20px;
}

.coast-process-card h3,
.coast-value-card h3,
.coast-service-detail h2,
.coast-form-card h2,
.coast-form-card h3,
.coast-contact-card h2 {
   font-size: 24px;
   margin-bottom: 14px;
}

.coast-process-card p,
.coast-info-card p,
.coast-value-card p,
.coast-service-detail p,
.coast-form-card p {
   color: var(--coast-muted);
}

.coast-page-hero {
   min-height: 430px;
   display: flex;
   align-items: center;
   padding: 150px 0 90px;
   position: relative;
   background-size: cover;
   background-position: center;
}

.coast-page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(16, 24, 40, 0.88), rgba(11, 94, 215, 0.62));
}

.coast-page-hero .container {
   position: relative;
   z-index: 1;
}

.coast-page-hero h1 {
   color: #fff;
   font-size: 58px;
   line-height: 1.05;
   margin-bottom: 22px;
}

.coast-page-hero p {
   color: rgba(255, 255, 255, 0.88);
   font-size: 19px;
   max-width: 760px;
}

.coast-page-hero .coast-kicker {
   color: #fff;
}

.coast-info-card,
.coast-value-card {
   padding: 34px;
   height: 100%;
}

.coast-card-icon {
   display: inline-flex;
   width: 52px;
   height: 52px;
   align-items: center;
   justify-content: center;
   background: rgba(11, 94, 215, 0.1);
   color: var(--coast-blue);
   border-radius: 8px;
   font-size: 24px;
   margin-bottom: 22px;
}

.coast-info-card h2 {
   font-size: 30px;
   margin-bottom: 15px;
}

.coast-check-list {
   display: grid;
   gap: 14px;
}

.coast-check-list span {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   background: #fff;
   border: 1px solid var(--coast-border);
   border-radius: 8px;
   padding: 16px 18px;
   font-weight: 700;
}

.coast-check-list i {
   color: var(--coast-green);
   margin-top: 4px;
}

.coast-service-detail {
   display: flex;
   align-items: flex-start;
   gap: 24px;
   padding: 34px;
   height: 100%;
}

.coast-service-media {
   position: relative;
   min-height: 100%;
}

.coast-service-media img {
   width: 100%;
   height: 100%;
   min-height: 260px;
   object-fit: cover;
   border-radius: 8px;
}

.coast-service-icon {
   position: static;
   flex: 0 0 64px;
   width: 58px;
   height: 58px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 163, 221, 0.1);
   color: var(--coast-blue);
   border-radius: 8px;
   font-size: 28px;
}

.coast-service-detail h3 {
   font-size: 16px;
   margin: 20px 0 8px;
}

.coast-service-detail ul {
   margin: 0;
   padding-left: 18px;
   color: var(--coast-muted);
}

.coast-text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--coast-blue);
   font-weight: 800;
   margin-top: 18px;
}

.coast-mini-card {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 24px;
   height: 100%;
   color: var(--coast-navy);
   font-weight: 800;
}

.coast-mini-card i {
   display: inline-flex;
   width: 42px;
   height: 42px;
   align-items: center;
   justify-content: center;
   background: rgba(22, 163, 74, 0.1);
   color: var(--coast-green);
   border-radius: 8px;
   font-size: 20px;
   flex: 0 0 42px;
}

.coast-industry-icon {
   display: inline-flex;
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center;
   background: rgba(11, 94, 215, 0.1);
   color: var(--coast-blue);
   border-radius: 50%;
   font-size: 20px;
   margin-right: 18px;
}

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

.coast-career-panel {
   display: grid;
   grid-template-columns: 240px 1fr;
   background: #fff;
   border: 1px solid var(--coast-border);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 18px 45px rgba(16, 24, 40, 0.06);
   height: 100%;
}

.coast-career-panel__image img {
   width: 100%;
   height: 100%;
   min-height: 310px;
   object-fit: cover;
}

.coast-career-panel__content {
   padding: 34px;
}

.coast-career-panel__content h3 {
   font-size: 26px;
   margin-bottom: 14px;
}

.coast-career-panel__content p {
   color: var(--coast-muted);
}

.coast-career-contact {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 18px;
   background: var(--coast-soft);
   border-radius: 8px;
   margin-top: 24px;
   font-weight: 800;
}

.coast-career-contact i {
   color: var(--coast-blue);
}

.coast-form-card,
.coast-contact-card {
   padding: 40px;
   height: 100%;
}

.coast-form label {
   display: block;
   font-weight: 700;
   color: var(--coast-navy);
   margin-bottom: 20px;
}

.coast-form input,
.coast-form select,
.coast-form textarea {
   width: 100%;
   border: 1px solid var(--coast-border);
   border-radius: 6px;
   color: var(--coast-navy);
   font-weight: 500;
   margin-top: 8px;
   padding: 14px 16px;
   outline: none;
   background: #fff;
}

.coast-form input:focus,
.coast-form select:focus,
.coast-form textarea:focus {
   border-color: var(--coast-blue);
   box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12);
}

.coast-hp {
   position: absolute;
   left: -9999px;
   opacity: 0;
}

.coast-contact-card h2 {
   margin-bottom: 26px;
}

.coast-contact-item {
   display: flex;
   gap: 18px;
   padding: 22px 0;
   border-bottom: 1px solid var(--coast-border);
}

.coast-contact-item:last-child {
   border-bottom: 0;
}

.coast-contact-item i {
   flex: 0 0 46px;
   width: 46px;
   height: 46px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(22, 163, 74, 0.1);
   color: var(--coast-green);
   border-radius: 50%;
}

.coast-contact-item span {
   display: block;
   color: var(--coast-muted);
   font-size: 14px;
   font-weight: 700;
}

.coast-contact-item a,
.coast-contact-item p {
   color: var(--coast-navy);
   font-weight: 800;
   margin: 0;
}

.coast-alert {
   padding: 18px 20px;
   border-radius: 8px;
   margin-bottom: 28px;
   font-weight: 700;
}

.coast-alert-success {
   background: #ecfdf3;
   color: #067647;
   border: 1px solid #abefc6;
}

.coast-alert-error {
   background: #fef3f2;
   color: #b42318;
   border: 1px solid #fecdca;
}

.coast-map {
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--coast-border);
   box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
}

.coast-map iframe {
   width: 100%;
   min-height: 430px;
   border: 0;
   display: block;
}

.coast-footer .footer-widget-info {
   padding-bottom: 70px;
}

.coast-footer-cta {
   display: inline-flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 16px;
   margin-top: 16px;
}

.coast-footer-main {
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   padding-top: 62px;
}

.coast-contact-list a {
   line-height: 1.5;
}

.coast-copyright {
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   padding: 30px 0 50px;
}

.coast-copyright p {
   margin: 0;
}

@media (max-width: 1199px) {
   .coast-hero {
      min-height: auto;
      padding-top: 120px;
   }

   .coast-page-hero h1 {
      font-size: 48px;
   }
}

@media (max-width: 991px) {
   .coast-page-hero {
      padding-top: 120px;
   }

   .coast-stat-grid {
      grid-template-columns: 1fr;
   }

   .coast-service-detail {
      flex-direction: column;
   }

   .coast-career-panel {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 767px) {
   .coast-hero {
      padding-top: 80px;
   }

   .coast-hero .tp-hero-title {
      font-size: 44px;
   }

   .coast-page-hero h1 {
      font-size: 38px;
   }

   .coast-page-hero p {
      font-size: 17px;
   }

   .coast-form-card,
   .coast-contact-card,
   .coast-info-card,
   .coast-value-card,
   .coast-service-detail {
      padding: 26px;
   }

   .coast-footer-cta {
      width: 100%;
   }
}