@import url('variables.css');
@import url('common.css');

/* ===== HERO — clean, no text ===== */
.hero {
  border-bottom: var(--b);
  overflow: hidden;
  line-height: 0;
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== INTRO STRIP ===== */
.intro-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--px);
  border-bottom: var(--b);
}
.intro-left { flex: 1; }
.intro-title {
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s1);
}
.intro-sub {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.06em;
  line-height: 1.6;
  max-width: 560px;
}
.intro-right {
  display: flex;
  gap: var(--s2);
  flex-shrink: 0;
}

/* ===== STATS BAR ===== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--b);
}
.stat {
  padding: var(--s4);
  border-right: var(--b);
}
.stat:last-child { border-right: none; }
.stat-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: var(--s1);
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ===== PROJECTS GRID ===== */
.projects-section { border-bottom: var(--b); }
.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.project {
  border-right: var(--b);
  border-bottom: var(--b);
  overflow: hidden;
}
.project:nth-child(3n) { border-right: none; }
.project:nth-last-child(-n+3) { border-bottom: none; }

.project-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s2) var(--s3);
  border-bottom: var(--b);
}
.project-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-g2);
}
.project-year {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.1em;
}

.project-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.project-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.project:hover .project-img-wrap img { transform: scale(1.04); }
.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.56);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--tr);
}
.project:hover .project-overlay { opacity: 1; }
.view-btn {
  font-family: var(--ff);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s2) var(--s4);
  border: 0.5px solid #fff;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.view-btn:hover { background: #fff; color: var(--c-text); }

.project-info {
  padding: var(--s3);
  border-top: var(--b);
}
.project-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--s1);
}
.project-meta {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== SERVICES PREVIEW ===== */
.svc-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--b);
}
.svc-card {
  padding: var(--s5) var(--s4);
  border-right: var(--b);
  display: flex;
  flex-direction: column;
}
.svc-card:last-child { border-right: none; }
.svc-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-g3);
  margin-bottom: var(--s3);
}
.svc-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.svc-desc {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--s4);
}
.svc-link {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: var(--b);
  padding-bottom: 2px;
  display: inline-block;
  transition: color var(--tr);
}
.svc-link:hover { color: var(--c-g2); }

/* ===== PROCESS ===== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--b);
}
.process-step {
  padding: var(--s5) var(--s4);
  border-right: var(--b);
}
.process-step:last-child { border-right: none; }
.step-num {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 700;
  color: var(--c-g3);
  line-height: 1;
  margin-bottom: var(--s3);
}
.step-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.step-desc {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  line-height: 1.7;
}

/* ===== ABOUT MINI ===== */
.about-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--b);
}
.about-mini-img {
  overflow: hidden;
  border-right: var(--b);
  min-height: clamp(260px, 35vw, 480px);
}
.about-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.about-mini-content {
  padding: var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
}
.about-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-g2);
  text-transform: uppercase;
}
.about-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.about-text {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  line-height: 1.75;
}

/* ===== CTA ===== */
.cta-dark {
  background: var(--c-bg);
  color: var(--c-text);
  border-top: var(--b);
  border-bottom: var(--b);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s6) var(--px);
}
.cta-dark-txt {}
.cta-dark-title {
  font-size: clamp(1.3rem, 3.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.cta-dark-sub {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  margin-top: var(--s2);
  max-width: 480px;
  line-height: 1.6;
}

/* ===== CAROUSEL 3-UP ===== */
.s3-section {
  border-bottom: var(--b);
  background: #fff;
}

.s3-outer {
  display: flex;
  align-items: center;
  padding: var(--s4) 0;
}

.s3-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.s3-track {
  display: flex;
  gap: 12px;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.s3-slide {
  flex: 0 0 calc((100% - 24px) / 3);
  display: flex;
  flex-direction: column;
  border: var(--b);
  background: var(--c-bg);
  overflow: hidden;
}

.s3-img-wrap {
  height: clamp(220px, 44vh, 520px);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.s3-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.s3-slide-meta {
  padding: var(--s2) var(--s3);
  border-top: var(--b);
}

.s3-slide-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.s3-slide-loc {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Circular arrow buttons */
.s3-arrow {
  flex-shrink: 0;
  width: clamp(34px, 4vw, 50px);
  height: clamp(34px, 4vw, 50px);
  border-radius: 50%;
  border: var(--b);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  font-family: var(--ff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr), color var(--tr);
  margin: 0 var(--s3);
}
.s3-arrow:hover { background: var(--c-text); color: var(--c-bg); }

/* Dot indicators */
.s3-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--s3) var(--px);
  border-top: var(--bl);
}

.s3-dot {
  width: 22px;
  height: 3px;
  background: var(--c-g3);
  border: none;
  cursor: pointer;
  transition: background var(--tr), width var(--tr);
  padding: 0;
}

.s3-dot.active {
  background: var(--c-text);
  width: 34px;
}

@media (max-width: 900px) {
  .s3-slide { flex: 0 0 calc((100% - 12px) / 2); }
}
@media (max-width: 540px) {
  .s3-slide { flex: 0 0 100%; }
  .s3-track { gap: 0; }
  .s3-arrow { margin: 0 var(--s2); }
  .s3-img-wrap { height: clamp(240px, 72vw, 480px); }
}

/* ===== PRICE CALCULATOR ===== */
.calc-section {
  border-bottom: var(--b);
}
.calc-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
  border-top: var(--b);
}
.calc-left {
  padding: var(--s6) var(--px);
  border-right: var(--b);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
.calc-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: pre-line;
}
.calc-sub {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  line-height: 1.75;
  max-width: 360px;
}
.calc-right {
  padding: var(--s5) var(--px);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.calc-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.calc-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.calc-lbl {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-g2);
}
.calc-input {
  padding: var(--s3);
  border: var(--b);
  font-family: var(--ff);
  font-size: var(--fs-sm);
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
  width: 100%;
  appearance: none;
}
.calc-input:focus { outline: 1px solid var(--c-text); }
.calc-btns {
  display: flex;
  gap: 0;
  border: var(--b);
}
.calc-type-btn {
  flex: 1;
  padding: var(--s2) var(--s2);
  font-family: var(--ff);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--c-bg);
  color: var(--c-g2);
  border: none;
  border-right: var(--b);
  transition: background var(--tr), color var(--tr);
  line-height: 1.3;
  text-align: center;
}
.calc-type-btn:last-child { border-right: none; }
.calc-type-btn.active { background: var(--c-text); color: var(--c-bg); }
.calc-result {
  padding: var(--s3) var(--s4);
  border: var(--b);
}
.calc-result-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-g2);
  margin-bottom: var(--s1);
}
.calc-result-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: var(--s1);
}
.calc-result-note {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.06em;
}
.calc-size-hint {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  letter-spacing: 0.06em;
  margin-top: var(--s1);
}
.calc-disclaimer {
  font-size: var(--fs-xs);
  color: var(--c-g2);
  line-height: 1.65;
  padding: var(--s2) var(--s3);
  border: 0.5px dashed var(--c-g3);
}
.calc-contact-hint {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.calc-cta-row {
  display: flex;
  gap: var(--s2);
  align-items: stretch;
}
.calc-cta-row .calc-input { margin: 0; }
.calc-cta-row .btn { white-space: nowrap; flex-shrink: 0; }

/* ===== SEO BLOCK ===== */
.seo-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--b);
}
.seo-col {
  padding: var(--s5) var(--px);
  border-right: var(--b);
}
.seo-col:last-child { border-right: none; }
.seo-h {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
  line-height: 1.3;
}
.seo-p {
  font-size: var(--fs-xs);
  color: var(--c-g1);
  line-height: 1.75;
}

@media (max-width: 900px) {
  .calc-inner { grid-template-columns: 1fr; }
  .calc-left { border-right: none; border-bottom: var(--b); }
  .calc-btns { flex-direction: column; }
  .calc-type-btn { border-right: none; border-bottom: var(--b); }
  .calc-type-btn:last-child { border-bottom: none; }
  .seo-block { grid-template-columns: 1fr; }
  .seo-col { border-right: none; border-bottom: var(--b); }
  .seo-col:last-child { border-bottom: none; }
}
@media (max-width: 540px) {
  .calc-cta-row { flex-direction: column; }
  .calc-cta-row .btn { width: 100%; text-align: center; }
}

/* ===== DESC ===== */
.desc-section {
  padding: var(--s5) var(--px);
  border-bottom: var(--b);
}
.desc-text {
  font-size: var(--fs-sm);
  color: var(--c-g1);
  line-height: 1.8;
  max-width: 780px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .intro-strip { flex-direction: column; align-items: flex-start; }
  .intro-right { width: 100%; }
  .intro-right .btn { flex: 1; text-align: center; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3) { border-top: var(--b); }
  .stat:nth-child(4) { border-top: var(--b); border-right: none; }

  .projects { grid-template-columns: repeat(2, 1fr); }
  .project:nth-child(3n) { border-right: var(--b); }
  .project:nth-child(2n) { border-right: none; }
  .project:nth-last-child(-n+3) { border-bottom: var(--b); }
  .project:nth-last-child(-n+2) { border-bottom: none; }

  .svc-preview { grid-template-columns: 1fr; }
  .svc-card { border-right: none; border-bottom: var(--b); }
  .svc-card:last-child { border-bottom: none; }

  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: var(--b); }
  .process-step:last-child { border-bottom: none; }

  .about-mini { grid-template-columns: 1fr; }
  .about-mini-img { border-right: none; border-bottom: var(--b); }

  .cta-dark { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}
@media (max-width: 540px) {
  .projects { grid-template-columns: 1fr; }
  .project:nth-child(2n) { border-right: none; }
  .project:nth-last-child(-n+2) { border-bottom: var(--b); }
  .project:last-child { border-bottom: none; }
}