/* ============================================================
   JIN PROTEC — section components
   ============================================================ */

/* ---------- HEADER ---------- */
.site-header {
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  z-index        : 60;
  background     : rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  transition     : background .3s ease, box-shadow .3s ease, padding .3s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 24px rgba(20, 63, 55, .08)
}

.header-inner {
  max-width    : 1320px;
  margin-inline: auto;
  padding      : 14px 32px;
  display      : flex;
  align-items  : center;
  gap          : 30px;
  transition   : padding .3s ease;
}

.site-header.scrolled .header-inner {
  padding: 10px 32px
}

.brand {
  display    : flex;
  align-items: center;
  gap        : 12px;
  min-width  : 0
}

.brand-logo {
  max-height: 75px;
  max-width : 100%;
  width     : auto;
  height    : auto;
  display   : block
}

.nav {
  display    : flex;
  align-items: center;
  gap        : 26px;
  margin-left: auto
}

.nav a {
  font-size  : 14px;
  font-weight: 500;
  color      : var(--ink);
  display    : inline-flex;
  align-items: center;
  gap        : 5px;
  position   : relative;
  padding    : 6px 0;
  white-space: nowrap
}

.nav a::after {
  content   : "";
  position  : absolute;
  left      : 0;
  bottom    : 0;
  height    : 2px;
  width     : 0;
  background: var(--primary);
  transition: width .25s ease
}

.nav a:hover {
  color: var(--primary)
}

.nav a:hover::after {
  width: 100%
}

.nav .header-cta {
  display      : inline-flex;
  align-items  : center;
  gap          : 9px;
  background   : var(--primary);
  color        : #fff;
  font-weight  : 700;
  font-size    : 14px;
  padding      : 13px 20px;
  border-radius: 10px;
  box-shadow   : var(--shadow-sm);
  transition   : background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.nav .header-cta::after {
  display: none
}

.nav .header-cta:hover {
  background: var(--primary-dark);
  color     : #fff;
  transform : translateY(-2px);
  box-shadow: var(--shadow-md)
}

.menu-toggle {
  display   : none;
  background: none;
  border    : none;
  color     : var(--ink);
  padding   : 6px
}

/* ---------- HERO ---------- */
.hero {
  position   : relative;
  min-height : 660px;
  display    : flex;
  align-items: center;
  padding    : 150px 0 70px;
  overflow   : hidden
}

.hero-bg {
  position: absolute;
  inset   : 0;
  z-index : -2
}

.hero-bg .ph {
  position: absolute;
  inset   : 0
}

.hero-bg::after {
  content   : "";
  position  : absolute;
  inset     : 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .35) 52%, rgba(255, 255, 255, 0) 64%);
}

.hero-inner {
  display              : grid;
  grid-template-columns: 1.4fr .6fr;
  gap                  : 40px;
  width                : 100%;
  align-items          : center
}

.hero-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 9px;
  background   : var(--mint-2);
  color        : var(--primary-dark);
  font-weight  : 700;
  font-size    : 13.5px;
  padding      : 9px 18px;
  border-radius: 30px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size     : clamp(34px, 5vw, 55px);
  line-height   : 1.32;
  letter-spacing: .03em;
  color         : var(--ink)
}

.hero h1 .big {
  color    : var(--primary);
  font-size: 1.06em
}

.hero-lead {
  margin     : 26px 0 32px;
  color      : var(--ink-soft);
  font-size  : 15.5px;
  line-height: 2
}

.hero-actions {
  display    : flex;
  gap        : 16px;
  flex-wrap  : wrap;
  align-items: stretch
}

.hero-phone {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  gap            : 1px;
  background     : #fff;
  border         : 1.5px solid var(--mint-line);
  border-radius  : 12px;
  padding        : 11px 24px;
  box-shadow     : var(--shadow-sm);
}

.hero-phone .num {
  display       : flex;
  align-items   : center;
  gap           : 9px;
  font-family   : var(--font-serif);
  font-weight   : 700;
  font-size     : 23px;
  color         : var(--primary-dark);
  letter-spacing: .02em
}

.hero-phone .hours {
  font-size   : 11.5px;
  color       : var(--muted);
  padding-left: 31px
}

/* floating service cards */
.hero-cards {
  display             : flex;
  flex-direction      : column;
  gap                 : 16px;
  align-items         : flex-end;
  background          : rgba(255, 255, 255, .48);
  backdrop-filter     : blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius       : 20px;
  padding             : 22px 20px
}

.hcard {
  display    : flex;
  align-items: center;
  gap        : 14px;
  width      : min(260px, 100%);
}

.hcard .ic {
  width          : 44px;
  height         : 44px;
  flex           : 0 0 auto;
  background     : var(--primary);
  color          : #fff;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.hcard .tt {
  flex: 1
}

.hcard .tt b {
  font-family   : var(--font-serif);
  font-size     : 15px;
  color         : var(--ink);
  display       : block;
  letter-spacing: .02em;
  text-shadow   : 0 1px 8px rgba(255,255,255,.95)
}

.hcard .tt span {
  font-size  : 11.5px;
  color      : var(--ink-soft);
  line-height: 1.5;
  display    : block;
  margin-top : 2px;
  text-shadow: 0 1px 6px rgba(255,255,255,.9)
}

.hero-cards .note {
  font-size  : 11.5px;
  color      : var(--ink-soft);
  display    : flex;
  align-items: center;
  gap        : 10px;
  margin-top : 2px
}

.hero-cards .note::after {
  content   : "";
  width     : 40px;
  height    : 1px;
  background: var(--mint-line)
}

/* stat strip */
.hero-stats {
  margin-top : 46px;
  display    : flex;
  align-items: center;
  gap        : 18px;
  flex-wrap  : wrap
}

.stat {
  display    : flex;
  align-items: center;
  gap        : 12px
}

.stat .ic {
  width : 30px;
  height: 30px;
  color : var(--primary);
  flex  : 0 0 auto
}

.stat .lab {
  font-size: 11.5px;
  color    : var(--muted)
}

.stat .val {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size  : 16px;
  color      : var(--ink)
}

.stat-div {
  width     : 1px;
  height    : 34px;
  background: var(--line)
}

.wheat {
  color  : var(--accent);
  opacity: .85
}

/* ---------- TROUBLES ---------- */
.troubles {
  background: var(--mint-1);
  position  : relative;
  overflow  : hidden
}

.leaf-deco {
  position      : absolute;
  opacity       : .5;
  color         : #bcd6c6;
  pointer-events: none
}

.leaf-deco.tr {
  top  : 60px;
  right: -10px;
  width: 200px
}

.troubles-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 22px
}

.tcard {
  background   : #fff;
  border       : 1px solid var(--line);
  border-radius: 16px;
  padding      : 34px 26px;
  text-align   : center;
  box-shadow   : var(--shadow-sm);
  transition   : transform .3s ease, box-shadow .3s ease;
}

.tcard:hover {
  transform : translateY(-6px);
  box-shadow: var(--shadow-md)
}

.tcard .circ {
  width          : 78px;
  height         : 78px;
  border-radius  : 50%;
  background     : var(--mint-2);
  color          : var(--primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 auto 22px;
}

.tcard h3 {
  font-size     : 18px;
  letter-spacing: .03em;
  line-height   : 1.55
}

.tcard .check {
  display: block;
  color  : var(--accent);
  margin : 14px auto 16px;
  width  : 20px;
  height : 20px
}

.tcard p {
  font-size  : 12.5px;
  color      : var(--muted);
  line-height: 1.85
}

/* ---------- SERVICES ---------- */
.services {
  background: #fff
}

.svc-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 26px
}

.scard {
  background    : #fff;
  border        : 1px solid var(--line);
  border-radius : 16px;
  padding       : 24px;
  box-shadow    : var(--shadow-sm);
  display       : flex;
  flex-direction: column;
  transition    : transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.scard:hover {
  transform   : translateY(-6px);
  box-shadow  : var(--shadow-md);
  border-color: var(--mint-line)
}

.scard:hover .card-arrow {
  background: var(--accent);
  color     : #fff
}

.scard-head {
  display      : flex;
  align-items  : center;
  gap          : 13px;
  margin-bottom: 18px
}

.num-badge {
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  background     : var(--primary);
  color          : #fff;
  flex           : 0 0 auto;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-serif);
  font-weight    : 700;
  font-size      : 14px;
}

.scard-head h3 {
  font-size     : 19px;
  letter-spacing: .04em
}

.scard .ph {
  height       : 158px;
  border-radius: 11px;
  margin-bottom: 18px
}

.scard p {
  font-size  : 13px;
  color      : var(--ink-soft);
  line-height: 1.85;
  flex       : 1
}

.scard .foot {
  display        : flex;
  justify-content: flex-end;
  margin-top     : 14px
}

.svc-cta {
  margin-top   : 40px;
  background   : var(--mint-1);
  border-radius: var(--radius-lg);
  padding      : 28px 40px;
  display      : flex;
  align-items  : center;
  gap          : 28px;
}

.svc-cta .illus {
  width        : 120px;
  height       : 96px;
  border-radius: 12px;
  flex         : 0 0 auto
}

.svc-cta .txt {
  flex: 1
}

.svc-cta .txt b {
  font-family   : var(--font-serif);
  font-size     : 21px;
  color         : var(--ink);
  display       : block;
  letter-spacing: .03em
}

.svc-cta .txt span {
  font-size: 13px;
  color    : var(--ink-soft)
}

.svc-cta .btn {
  flex: 0 0 auto
}

/* ---------- REASONS ---------- */
.reasons {
  background: #fff
}

.reasons-inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 54px;
  align-items          : start
}

.reasons-left h2 {
  font-size     : clamp(26px, 3vw, 36px);
  line-height   : 1.5;
  letter-spacing: .03em
}

.reasons-left p {
  margin-top : 24px;
  color      : var(--ink-soft);
  font-size  : 14px;
  line-height: 2
}

.reasons-photo {
  position  : relative;
  margin-top: 34px
}

.reasons-photo .ph {
  height       : 300px;
  border-radius: 16px
}

.reasons-photo .tag {
  position     : absolute;
  left         : -14px;
  bottom       : 26px;
  background   : #fff;
  border       : 1px solid var(--line);
  border-radius: 12px;
  padding      : 13px 18px;
  box-shadow   : var(--shadow-md);
  display      : flex;
  align-items  : center;
  gap          : 11px;
  font-size    : 12px;
  color        : var(--ink-soft);
  font-weight  : 500;
  max-width    : 210px;
  line-height  : 1.5;
}

.reasons-photo .tag .ic {
  color: var(--primary);
  flex : 0 0 auto
}

.reason-row {
  display              : grid;
  grid-template-columns: auto 1fr auto;
  gap                  : 22px;
  align-items          : center;
  background           : #fff;
  border               : 1px solid var(--line);
  border-radius        : 16px;
  padding              : 22px 24px;
  margin-bottom        : 18px;
  box-shadow           : var(--shadow-sm);
  transition           : transform .3s ease, box-shadow .3s ease
}

.reason-row:hover {
  transform : translateX(6px);
  box-shadow: var(--shadow-md)
}

.reason-row .circ {
  width          : 66px;
  height         : 66px;
  border-radius  : 50%;
  background     : var(--mint-2);
  color          : var(--primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex           : 0 0 auto
}

.reason-row .no {
  font-size     : 12px;
  font-weight   : 700;
  color         : var(--green-text);
  letter-spacing: .08em
}

.reason-row h3 {
  font-size     : 19px;
  margin        : 3px 0 7px;
  letter-spacing: .03em
}

.reason-row p {
  font-size  : 12.5px;
  color      : var(--muted);
  line-height: 1.8
}

.reason-row .thumb {
  width        : 96px;
  height       : 70px;
  border-radius: 10px;
  flex         : 0 0 auto
}

/* ---------- CASES ---------- */
.cases {
  background: var(--mint-1)
}

.cases-head {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : 20px;
  margin-bottom  : 40px
}

.cases-head h2 {
  font-size     : clamp(24px, 2.8vw, 34px);
  letter-spacing: .03em
}

.cases-head .more {
  display    : inline-flex;
  align-items: center;
  gap        : 12px;
  font-weight: 700;
  font-size  : 13px;
  color      : var(--primary-dark)
}

.cases-head .more:hover .arrow-pill {
  transform: translateX(3px)
}

.cases-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 26px
}

.ccard {
  background   : #fff;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : var(--shadow-sm);
  transition   : transform .3s ease, box-shadow .3s ease
}

.ccard:hover {
  transform : translateY(-6px);
  box-shadow: var(--shadow-md)
}

.ccard:hover .card-arrow {
  background  : var(--primary);
  color       : #fff;
  border-color: var(--primary)
}

.ccard .ph {
  height  : 200px;
  position: relative
}

.ccard .city {
  position      : absolute;
  top           : 14px;
  left          : 14px;
  background    : var(--primary-deep);
  color         : #fff;
  font-size     : 12px;
  font-weight   : 700;
  padding       : 5px 14px;
  border-radius : 7px;
  letter-spacing: .04em;
  z-index       : 2
}

.ccard-body {
  padding: 20px 22px 22px
}

.tags {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 7px;
  margin-bottom: 13px
}

.tag-chip {
  background   : var(--mint-1);
  color        : var(--ink-soft);
  font-size    : 11px;
  padding      : 4px 11px;
  border-radius: 5px
}

.ccard h3 {
  font-size     : 18px;
  letter-spacing: .03em;
  margin-bottom : 10px
}

.ccard p {
  font-size  : 12.5px;
  color      : var(--muted);
  line-height: 1.8
}

.ccard .foot {
  display        : flex;
  justify-content: flex-end;
  margin-top     : 14px
}

.cases-foot {
  display        : flex;
  justify-content: center;
  margin-top     : 40px
}

.btn-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 16px;
  background   : #fff;
  border       : 1.5px solid var(--mint-line);
  color        : var(--ink);
  font-weight  : 700;
  font-size    : 14px;
  padding      : 16px 34px;
  border-radius: 40px;
  transition   : transform .25s ease, box-shadow .25s ease
}

.btn-pill:hover {
  transform : translateY(-2px);
  box-shadow: var(--shadow-md)
}

/* ---------- FLOW ---------- */
.flow {
  background: #fff
}

.flow-steps {
  display              : grid;
  grid-template-columns: repeat(5, 1fr);
  gap                  : 8px;
  position             : relative
}

.fstep {
  text-align: center;
  position  : relative;
  padding   : 0 6px
}

.fstep .circ-wrap {
  position: relative;
  width   : 108px;
  margin  : 0 auto 22px
}

.fstep .circ {
  width          : 108px;
  height         : 108px;
  border-radius  : 50%;
  background     : var(--mint-1);
  color          : var(--primary-deep);
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
  z-index        : 2
}

.fstep .stepno {
  position       : absolute;
  top            : -6px;
  left           : 50%;
  transform      : translateX(-50%);
  z-index        : 3;
  width          : 30px;
  height         : 30px;
  border-radius  : 50%;
  background     : var(--primary);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-serif);
  font-weight    : 700;
  font-size      : 14px;
  box-shadow     : 0 0 0 4px #fff
}

.fstep:not(:last-child) .circ-wrap::after {
  content   : "";
  position  : absolute;
  top       : 54px;
  left      : calc(100% + 4px);
  width     : calc(100% - 28px);
  height    : 2px;
  background: repeating-linear-gradient(90deg, var(--mint-line) 0 6px, transparent 6px 11px)
}

.fstep h3 {
  font-size     : 17px;
  letter-spacing: .03em;
  margin-bottom : 9px
}

.fstep p {
  font-size  : 12px;
  color      : var(--muted);
  line-height: 1.75
}

/* ---------- AREA + COMPANY ---------- */
.area-company {
  display              : grid;
  grid-template-columns: 1fr 1.12fr;
  gap                  : 0
}

.area {
  background: var(--warm);
  padding   : 90px 5vw 90px max(28px, calc((100vw - var(--maxw))/2 + 28px));
  position  : relative
}

.area .eyebrow {
  justify-content: center
}

.area h2 {
  text-align    : center;
  font-size     : clamp(24px, 2.6vw, 32px);
  line-height   : 1.5;
  letter-spacing: .04em;
  margin-bottom : 34px
}

.area-map {
  display   : block;
  width     : 100%;
  height    : auto;
  margin    : 0 auto 16px
}

.area-caption {
  text-align : center;
  font-size  : 12.5px;
  color      : var(--ink-soft);
  line-height: 1.7
}

.company {
  background: #fff;
  padding   : 90px max(28px, calc((100vw - var(--maxw))/2 + 28px)) 90px 5vw
}

.company .eyebrow,
.area .eyebrow {
  margin-bottom: 18px
}

.company h2 {
  text-align    : center;
  font-size     : clamp(28px, 3vw, 38px);
  letter-spacing: .06em;
  margin-bottom : 34px
}

.info-table {
  width          : 100%;
  border-collapse: collapse;
  border         : 1px solid var(--line);
  font-size      : 13px
}

.info-table th,
.info-table td {
  border        : 1px solid var(--line);
  padding       : 14px 18px;
  text-align    : left;
  vertical-align: middle
}

.info-table th {
  background : var(--mint-1);
  color      : var(--ink);
  font-weight: 700;
  width      : 30%;
  white-space: nowrap
}

.info-table td {
  color      : var(--ink-soft);
  line-height: 1.7
}

.staff-box {
  grid-column: 1 / -1;
  border-top : 1px solid var(--mint-line);
  background : #fff;
  padding    : 48px max(28px, calc((100vw - 900px) / 2 + 28px));
  display    : flex;
  gap        : 48px;
  align-items: center
}

.staff-text {
  flex: 1
}

.staff-box .title {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  font-family  : var(--font-serif);
  font-size    : 17px;
  color        : var(--ink);
  margin-bottom: 12px;
  grid-column  : 1/-1
}

.staff-box .title .ic {
  color: var(--primary)
}

.staff-list {
  display       : flex;
  flex-direction: column;
  gap           : 9px
}

.staff-list li {
  display    : flex;
  align-items: flex-start;
  gap        : 9px;
  font-size  : 12.5px;
  color      : var(--ink-soft);
  line-height: 1.6;
  list-style : none
}

.staff-list .chk {
  color     : var(--primary);
  flex      : 0 0 auto;
  margin-top: 2px
}

.staff-box ul {
  margin : 0;
  padding: 0
}

.staff-box .ph {
  width      : 260px;
  height     : 195px;
  border-radius: 14px;
  flex-shrink: 0
}

.staff-box .closing {
  grid-column: 1/-1;
  font-size  : 12px;
  color      : var(--muted);
  line-height: 1.8;
  margin-top : 4px
}

/* ---------- CONTACT ---------- */
.contact {
  background: var(--mint-2);
  position  : relative;
  overflow  : hidden
}

.contact-inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 48px;
  align-items          : center
}

.contact h2 {
  font-size     : clamp(26px, 3vw, 38px);
  letter-spacing: .04em;
  line-height   : 1.4
}

.contact-left .lead {
  margin     : 22px 0 30px;
  color      : var(--ink-soft);
  font-size  : 14px;
  line-height: 2
}

.contact-mail {
  display      : flex;
  align-items  : center;
  gap          : 14px;
  background   : var(--primary);
  color        : #fff;
  border-radius: 14px;
  padding      : 22px 28px;
  font-weight  : 700;
  font-size    : 18px;
  box-shadow   : var(--shadow-md);
  margin-bottom: 16px;
  transition   : transform .25s ease, background .25s ease
}

.contact-mail:hover {
  transform : translateY(-2px);
  background: var(--primary-dark)
}

.contact-mail .arrow {
  margin-left: auto
}

.contact-phone {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  background   : #fff;
  border       : 1.5px solid var(--mint-line);
  border-radius: 14px;
  padding      : 18px 28px;
  box-shadow   : var(--shadow-sm)
}

.contact-phone .ic {
  color: var(--primary)
}

.contact-phone .num {
  font-family   : var(--font-serif);
  font-weight   : 700;
  font-size     : 27px;
  color         : var(--primary-dark);
  letter-spacing: .02em
}

.contact-phone .hours {
  font-size: 11.5px;
  color    : var(--muted)
}

.contact-phone .arrow {
  margin-left: auto;
  color      : var(--muted)
}

.contact-note {
  display    : flex;
  align-items: center;
  gap        : 10px;
  margin-top : 22px;
  font-size  : 12.5px;
  color      : var(--ink-soft);
  line-height: 1.7
}

.contact-note .ic {
  color: var(--accent);
  flex : 0 0 auto
}

.form-card {
  background   : #fff;
  border-radius: 18px;
  padding      : 34px 36px;
  box-shadow   : var(--shadow-md)
}

.form-card h3 {
  font-size    : 18px;
  margin-bottom: 22px
}

.form-card h3 small {
  font-size  : 12px;
  color      : var(--muted);
  font-family: var(--font-sans);
  font-weight: 400;
  margin-left: 8px
}

.form-row {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px
}

.field {
  margin-bottom: 16px
}

.field label {
  display      : block;
  font-size    : 12.5px;
  font-weight  : 700;
  color        : var(--ink);
  margin-bottom: 7px
}

.req {
  color      : #c4543f;
  font-size  : 11px;
  margin-left: 5px;
  font-weight: 700
}

.field input,
.field select,
.field textarea {
  width        : 100%;
  border       : 1.5px solid var(--line);
  border-radius: 9px;
  padding      : 12px 14px;
  font-size    : 13.5px;
  font-family  : inherit;
  color        : var(--ink);
  background   : #fbfcfb;
  transition   : border-color .2s ease, box-shadow .2s ease
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline     : none;
  border-color: var(--primary);
  box-shadow  : 0 0 0 3px rgba(47, 125, 107, .13);
  background  : #fff
}

.field textarea {
  resize    : vertical;
  min-height: 92px
}

.field.err input,
.field.err select,
.field.err textarea {
  border-color: #d9694f;
  background  : #fdf3f1
}

.field .msg {
  font-size : 11px;
  color     : #c4543f;
  margin-top: 5px;
  display   : none
}

.field.err .msg {
  display: block
}

.form-submit {
  width          : 100%;
  background     : var(--primary);
  color          : #fff;
  border         : none;
  border-radius  : 11px;
  padding        : 18px;
  font-weight    : 700;
  font-size      : 16px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  box-shadow     : var(--shadow-sm);
  transition     : background .25s ease, transform .25s ease;
  margin-top     : 6px
}

.form-submit:hover {
  background: var(--primary-dark);
  transform : translateY(-2px)
}

.form-foot {
  font-size  : 11px;
  color      : var(--muted);
  text-align : left;
  margin-top : 14px;
  line-height: 1.6
}

.form-ok {
  display      : none;
  align-items  : center;
  gap          : 10px;
  background   : var(--mint-1);
  color        : var(--primary-dark);
  border-radius: 10px;
  padding      : 14px 18px;
  font-size    : 13px;
  font-weight  : 700;
  margin-top   : 14px
}

.form-ok.show {
  display: flex
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--primary-deep);
  color     : rgba(255, 255, 255, .8)
}

.footer-main {
  display              : grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap                  : 40px;
  padding              : 64px 0 48px
}

.footer-brand-logo {
  max-height: 90px;
  max-width : 100%;
  width     : auto;
  height    : auto;
  display   : block;
  margin-bottom: 4px;
  filter    : brightness(0) invert(1)
}

.footer-brand p {
  font-size  : 12.5px;
  line-height: 1.95;
  margin     : 20px 0 22px;
  color      : rgba(255, 255, 255, .7)
}

.footer-ghost {
  display      : inline-flex;
  align-items  : center;
  gap          : 14px;
  border       : 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 9px;
  padding      : 12px 22px;
  font-size    : 13px;
  font-weight  : 700;
  color        : #fff;
  transition   : background .25s ease
}

.footer-ghost:hover {
  background: rgba(255, 255, 255, .1)
}

.footer-col h4 {
  font-family   : var(--font-sans);
  font-size     : 13px;
  color         : #fff;
  font-weight   : 700;
  letter-spacing: .06em;
  margin-bottom : 18px
}

.footer-col ul {
  list-style    : none;
  margin        : 0;
  padding       : 0;
  display       : flex;
  flex-direction: column;
  gap           : 11px
}

.footer-col a {
  font-size : 12.5px;
  color     : rgba(255, 255, 255, .72);
  transition: color .2s ease
}

.footer-col a:hover {
  color: #fff
}

.footer-contact .fnum {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  font-family  : var(--font-serif);
  font-weight  : 700;
  font-size    : 25px;
  color        : #fff;
  margin-bottom: 4px
}

.footer-contact .fhours {
  font-size    : 11px;
  color        : rgba(255, 255, 255, .6);
  margin-bottom: 18px
}

a.footer-mail {
  display      : inline-flex;
  align-items  : center;
  gap          : 10px;
  background   : #fff;
  color        : var(--primary-deep);
  font-weight  : 700;
  font-size    : 13px;
  padding      : 12px 20px;
  border-radius: 9px;
  margin-bottom: 24px;
  transition   : transform .2s ease
}

a.footer-mail:hover {
  color    : var(--primary-deep);
  transform: translateY(-2px)
}

.footer-contact .area-lab {
  font-size    : 12px;
  color        : #fff;
  font-weight  : 700;
  margin-bottom: 7px
}

.footer-contact .area-txt {
  font-size  : 12px;
  color      : rgba(255, 255, 255, .7);
  line-height: 1.8
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.footer-bottom .wrap {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding-block  : 18px;
  gap            : 20px
}

.footer-bottom .links {
  display  : flex;
  gap      : 22px;
  font-size: 12px
}

.footer-bottom .links a {
  color: rgba(255, 255, 255, .7)
}

.footer-bottom .links a:hover {
  color: #fff
}

.footer-bottom .copy {
  font-size     : 11.5px;
  color         : rgba(255, 255, 255, .55);
  letter-spacing: .04em
}

/* back to top */
.totop {
  position       : fixed;
  right          : 26px;
  bottom         : 26px;
  z-index        : 55;
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  background     : var(--primary);
  color          : #fff;
  border         : none;
  display        : flex;
  align-items    : center;
  justify-content: center;
  box-shadow     : var(--shadow-md);
  opacity        : 0;
  visibility     : hidden;
  transform      : translateY(10px);
  transition     : all .3s ease
}

.totop.show {
  opacity   : 1;
  visibility: visible;
  transform : none
}

.totop:hover {
  background: var(--primary-dark)
}