/* 
 Theme Name:   Hello Elementor Child
 Theme URI:    
 Description:  
 Author:       mhamzashakeel1@gmail.com
 Author URI:   https://makkitailor.com
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

/* ========================================================= MAKKI TAILOR — Design tokens Signature motif: hand-drawn gold "spec sheet" line art + a woven fabric-weave CSS texture used everywhere a real product photo will later be dropped in by the client. ========================================================= */ :root {
  --black:#111111;
  --charcoal-2:#1B1B1B;
  --gold:#B88A3B;
  --gold-deep:#96702E;
  --gold-tint:#F3E9D8;
  --bg:#FAF9F6;
  --white:#FFFFFF;
  --muted:#6B6B6B;
  --border:#E8E4DC;
  --font-head:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
  --container:1180px;
  --radius:2px;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body.mkv_popup_body_locked  {
  overflow: hidden;
}

img {
  max-width:100%;
  display:block;
}

a {
  color:inherit;
  text-decoration:none;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}

button {
  font-family:inherit;
  cursor:pointer;
}

input,select,textarea {
  font-family:inherit;
  font-size:0.95rem;
}

h2,h3,h4 {
  font-family:var(--font-head);
  font-weight:600;
  margin:0;
  color:var(--black);
  letter-spacing:-0.01em;
}

h1 {
  font-family:var(--font-head);
  font-weight:600;
  margin:0;
  color:var(--white);
  letter-spacing:-0.01em;
}

a.logo img  {
  width: 200px;
}

.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--gold);
    padding: 6px 15px;
    border-radius: 10px;
    background: var(--gold-tint);
}

/*
.eyebrow::before {
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}

.eyebrow::after {
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
  display:inline-block;
} */

.muted {
  color:var(--muted);
}

.section {
  padding:110px 0;
  background: var(--bg);
}

.section-tight {
  padding:80px 0;
}

.section-head {
  max-width:620px;
  margin:0 0 56px;
}

.section-head.center {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-head h2 {
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  margin-top:14px;
  line-height:1.2;
}

.section-head p {
  margin-top:16px;
  font-size:1.02rem;
  color:var(--muted);
}

/* buttons */ .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 23px;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .25s ease;
  white-space:nowrap;
}

.btn-gold {
  background:var(--gold);
  color:var(--white);
  border-color:var(--gold);
  border-radius: 15px;
}

.btn-gold:hover {
  background:var(--gold-deep);
  border-color:var(--gold-deep);
  transform:translateY(-1px);
}

.btn-dark {
  background:var(--black);
  color:var(--white);
  border-color:var(--black);
  border-radius: 15px;
}

.btn-dark:hover {
  background:#000;
  transform:translateY(-1px);
}

.btn-outline {
  background:transparent;
  color:var(--black);
  border-color:var(--black);
  border-radius: 15px;
}

.btn-outline:hover {
  background:var(--black);
  color:var(--white);
}

.btn-outline-light {
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,0.45);
  border-radius: 15px;
}

.btn-outline-light:hover {
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
}

.btn-block {
  width:100%;
}

/* reveal animation */ .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible {
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity:1;
    transform:none;
    transition:none;
  }

  html {
    scroll-behavior:auto;
  }

}

/* fabric weave texture — the signature motif, used as photo placeholders */ .weave {
  position:relative;
  overflow:hidden;
  background-color:var(--charcoal-2);
  background-image: repeating-linear-gradient(45deg, rgba(184,138,59,0.14) 0, rgba(184,138,59,0.14) 1px, transparent 1px, transparent 10px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px);
}

.weave.weave-light {
  background-color:var(--gold-tint);
  background-image: repeating-linear-gradient(45deg, rgba(17,17,17,0.06) 0, rgba(17,17,17,0.06) 1px, transparent 1px, transparent 10px), repeating-linear-gradient(-45deg, rgba(184,138,59,0.18) 0, rgba(184,138,59,0.18) 1px, transparent 1px, transparent 10px);
}

.weave-label {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(255,255,255,0.55);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-align:center;
  padding:20px;
}

.weave.weave-light .weave-label {
  color:rgba(17,17,17,0.4);
}

.weave-label svg {
  width:30px;
  height:30px;
  opacity:0.6;
}

/* stitched divider */ .stitch-divider {
  width:100%;
  height:1px;
  background-image:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
  opacity:0.55;
}

/*============================ Top Bar ==========================*/ .top-bar {
  background:var(--black);
}

.top-bar-inner  {
  width: 1180px;
  margin: auto;
  padding: 10px;
  color: var(--white);
  text-align: center;
}

.top-bar-inner a {
  color: var( --gold);
  text-decoration: underline;
}

/* =========================== HEADER =========================== */ .site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(250,249,246,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:padding .3s ease;
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  transition:padding .3s ease;
}

.site-header.is-scrolled .header-inner {
  padding:13px 0;
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
}

.logo-mark {
  width:34px;
  height:34px;
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0;
  flex-shrink:0;
}

.logo-text {
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0.02em;
}

.logo-text span {
  display:block;
  font-family:var(--font-body);
  font-size:0.6rem;
  font-weight:500;
  letter-spacing:0.16em;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:1px;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:38px;
}

.main-nav a {
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--black);
  position:relative;
  padding:4px 0;
}

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

.main-nav a:hover::after {
  width:100%;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:18px;
}

.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
}

.hamburger span {
  width:22px;
  height:1.5px;
  background:var(--black);
  display:block;
  transition:.3s;
}

.mobile-nav {
  display:none;
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:1100;
  padding:26px 28px;
  flex-direction:column;
  transform:translateY(-100%);
  transition:transform .35s ease;
}

.mobile-nav.open {
  display:flex;
  transform:translateY(0);
}

.mobile-nav-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mobile-nav-close {
  background:none;
  border:none;
  font-size:1.6rem;
  color:var(--black);
  line-height:1;
}

.mobile-nav ul {
  margin-top:50px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mobile-nav a {
  font-family:var(--font-head);
  font-size:1.6rem;
  font-weight:500;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.mobile-nav .btn {
  margin-top:36px;
}

@media (max-width:900px) {
  .main-nav {
    display:none;
  }

  .header-actions .btn {
    display:none;
  }

  .hamburger {
    display:flex;
  }

}

@media (max-width:768px) {
  a.logo img  {
    width: 180px;
  }

  .section {
    padding:60px 0;
  }

}

/* =========================== HERO =========================== */ /*.hero {
  padding:64px 0 90px;
  overflow:hidden;
}

.hero-grid {
  display:grid;
  grid-template-columns:1, 2fr;
  gap:64px;
  align-items:center;
  text-align: center;
}

.hero-content h1 {
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1.08;
  margin-top:18px;
  color: var(--black);
}

.hero-content h1 em {
  font-style:normal;
  color:var(--gold);
}

.hero-content p.lede {
  margin-top:22px;
  font-size:1.08rem;
  color:var(--muted);
  max-width:560px;
  justify-self: center;
}

.hero-ctas  {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-trust  {
  margin-top: 38px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: center;
}

.hero-trust .dot {
  width:3px;
  height:3px;
  background:var(--gold);
  border-radius:50%;
}

.hero-visual {
  position:relative;
  aspect-ratio:4/2;
  border-radius:20px;
}

.spec-card  {
  position: absolute;
  inset: 0;
  background: url(https://makkitailor.com/wp-content/uploads/2026/08/hero-image-bg.png);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width:900px) {
  .hero-grid {
    grid-template-columns:1fr;
    gap:48px;
  }

  .hero-visual {
    order:-1;
    aspect-ratio:16/11;
  }

  .spec-badge {
    left:16px;
    bottom:-20px;
  }

}

*/ /* =========================== HERO =========================== */ .hero {
  padding:64px 0 90px;
  overflow:hidden;
  background: var(--bg);
}

.hero-grid {
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}

/* Heading */ .hero-title  {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -2.5px;
  font-weight: 600;
  max-width: 900px;
  margin-top:20px;
}

.hero-title-static  {
  display: block;
  color: #111111;
}

/* Animated line — italic serif, quiet fade+rise crossfade */ .animated-wrapper  {
  display: block;
  height: 1.15em;
  overflow: hidden;
  margin-top: 2px;
}

.animated-text  {
  display: block;
  animation: headingCycle 10s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.animated-text span  {
  display: block;
  height: 1.15em;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: #b98732;
}

/* Quiet crossfade: each phrase rises a few px while fading in, holds, then fades down slightly on exit. No blur, no snap, no scale gimmicks — just a slow, even dissolve. */ @keyframes headingCycle  {
  0%  {
    transform: translateY(0);
    opacity: 1;
  }

  27%  {
    transform: translateY(0);
    opacity: 1;
  }

  30%  {
    transform: translateY(-6px);
    opacity: 0;
  }

  30.1%  {
    transform: translateY(-1.15em);
    opacity: 0;
  }

  33%  {
    transform: translateY(-1.15em);
    opacity: 1;
  }

  60%  {
    transform: translateY(-1.15em);
    opacity: 1;
  }

  63%  {
    transform: translateY(calc(-1.15em - 6px));
    opacity: 0;
  }

  63.1%  {
    transform: translateY(-2.3em);
    opacity: 0;
  }

  66%  {
    transform: translateY(-2.3em);
    opacity: 1;
  }

  93%  {
    transform: translateY(-2.3em);
    opacity: 1;
  }

  96%  {
    transform: translateY(calc(-2.3em - 6px));
    opacity: 0;
  }

  96.1%  {
    transform: translateY(0.15em);
    opacity: 0;
  }

  99%, 100%  {
    transform: translateY(0);
    opacity: 1;
  }

}

.hero-content p.lede {
  margin-top:22px;
  font-size:1.08rem;
  color:var(--muted);
  max-width:460px;
}

.hero-ctas {
  display:flex;
  gap:16px;
  margin-top:36px;
  flex-wrap:wrap;
}

.hero-trust {
  margin-top:38px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:0.76rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  flex-wrap:wrap;
  display: none;
}

.hero-trust .dot {
  width:3px;
  height:3px;
  background:var(--gold);
  border-radius:50%;
}

.hero-visual {
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius);
}

.spec-card  {
  position: absolute;
  inset: 0;
  background: url(https://makkitailor.com/wp-content/uploads/2026/08/hero-image-02-1.png);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}

.spec-card svg {
  width:100%;
  height:100%;
}

.spec-badge {
  position:absolute;
  bottom:-22px;
  left:-22px;
  background:var(--white);
  border:1px solid var(--border);
  padding:18px 22px;
  box-shadow:0 18px 40px rgba(17,17,17,0.12);
  display:flex;
  align-items:center;
  gap:14px;
}

.spec-badge .num {
  font-family:var(--font-head);
  font-size:1.6rem;
  color:var(--gold);
  font-weight:600;
}

.spec-badge .txt {
  font-size:0.72rem;
  color:var(--muted);
  letter-spacing:0.04em;
  line-height:1.35;
  max-width:120px;
}

@media (max-width:900px) {
  .hero-grid {
    grid-template-columns:1fr;
    gap:48px;
  }

  .hero-visual {
    order:-1;
    aspect-ratio:16/11;
  }

  .spec-badge {
    left:16px;
    bottom:-20px;
  }

}

/* SERVICES */ .service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}

.service-card {
  background:var(--white);
  padding:52px 40px;
  transition:background .4s var(--ease);
}

.service-card:hover {
  background:var(--bg);
}

.service-card .icon {
  width:34px;
  height:34px;
  margin-bottom:34px;
  color:var(--green);
}

.service-card h3 {
  font-size:20px;
  margin-bottom:12px;
  font-weight:500;
}

.service-card p {
  font-size:14px;
  color:var(--charcoal-soft);
  line-height:1.65;
  font-weight:300;
}

.service-card img  {
  width: 60px;
  margin-bottom: 20px;
}

/* stats */ .statistics .container  {
  max-width:100%;
  padding: 0;
  margin: 0;
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  max-width: var(--container);
  margin: auto;
}

.stats-cards:not(:last-child) {
    border-right: 1px solid var(--gold-tint);
}

.stats-cards {
  background:var(--white);
  padding:52px 40px;
  transition:background .4s var(--ease);
  text-align: center;
}

h2.stats-number  {
  font-size: 40px;
}

.stats-cards .icon {
  width:34px;
  height:34px;
  margin-bottom:34px;
  color:var(--green);
}

.stats-cards h3 {
  font-size:20px;
  font-weight:500;
}

.stats-cards p {
  font-size:14px;
  color:var(--charcoal-soft);
  line-height:1.65;
  font-weight:300;
}

/* =========================== FEATURED PRODUCT =========================== */ .featured  {
  width: 100%;
  padding: 0;
  background: var(--bg);
}

.featured-grid  {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* LEFT CONTENT */ .featured-content  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 8vw;
  align-items: flex-start;
}

.featured h2  {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  margin-top: 14px;
}

.featured-quote  {
  margin-top: 22px;
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 460px;
}

.feature-list  {
  margin-top: 30px;
  display: grid;
  gap: 14px;
}

.feature-list li  {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.feature-list svg  {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.featured .btn  {
  margin-top: 34px;
  width: fit-content;
}

/* RIGHT VIDEO */ .featured-visual  {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 650px;
  overflow: hidden;
  border-radius: 0;
}

.featured-visual video  {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================== TABLET / MOBILE =========================== */ @media (max-width: 900px)  {
  .featured-grid  {
    grid-template-columns: 1fr;
  }

  .featured-content  {
    padding: 80px 6vw;
  }

  .featured-visual  {
    order: -1;
    min-height: 600px;
  }

}

@media (max-width: 600px)  {
  .featured-content  {
    padding: 60px 24px;
  }

  .featured-visual  {
    min-height: 500px;
  }

}

/* ========================================================= GLOBAL COLORS ========================================================= */ /* ========================================================= FORM WRAPPER IMPORTANT: Everything is scoped under .mtf-form ========================================================= */ .mtf-form, .mtf-form *  {
  box-sizing: border-box;
}

.mtf-form  {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-body);
  color: var(--black);
}

.mtf-form-inner  {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
  padding: 80px 0;
}

/* ========================================================= HEADER ========================================================= */ .mtf-form-header  {
  max-width: 720px;
  margin: 0 auto 45px;
  text-align: center;
}

.mtf-form-eyebrow  {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/*.mtf-form-eyebrow::before, .mtf-form-eyebrow::after  {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gold);
}*/

.mtf-form-title  {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--black);
}

.mtf-form-description  {
  margin: 0 auto;
  max-width: 610px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* ========================================================= MAIN CARD ========================================================= */ .mtf-form-card  {
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 15px 45px rgba(0, 0, 0, 0.045);
}

/* ========================================================= PROGRESS ========================================================= */ .mtf-progress  {
  padding: 28px 35px;
  border-bottom: 1px solid var(--border);
  background: #fcfbf8;
}

.mtf-progress-list  {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  max-width: 850px;
  margin: 0 auto;
}

.mtf-progress-line  {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 17px;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.mtf-progress-step  {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  z-index: 1;
  color: #999;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.mtf-progress-number  {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: #999;
  font-family: var(--font-head);
  font-size: 12px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  border-radius: 8px;
}

.mtf-progress-step.is-active .mtf-progress-number, .mtf-progress-step.is-completed .mtf-progress-number  {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.mtf-progress-step.is-active, .mtf-progress-step.is-completed  {
  color: var(--black);
}

/* ========================================================= FORM BODY ========================================================= */ .mtf-body  {
  padding: 45px;
  background: var(--bg);
}

.mtf-step  {
  display: none;
  animation: mtfFadeIn 0.35s ease both;
}

.mtf-step.is-active  {
  display: block;
}

@keyframes mtfFadeIn  {
  from  {
    opacity: 0;
    transform: translateY(8px);
  }

  to  {
    opacity: 1;
    transform: translateY(0);
  }

}

/* ========================================================= STEP HEADER ========================================================= */ .mtf-step-header  {
  margin-bottom: 32px;
}

.mtf-step-number  {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mtf-step-title  {
  margin: 0 0 9px;
  font-family: var(--font-head);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mtf-step-description  {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ========================================================= GRID ========================================================= */ .mtf-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mtf-field-full  {
  grid-column: 1 / -1;
}

/* ========================================================= FIELD ========================================================= */ .mtf-field  {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mtf-label  {
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal-2);
}

.mtf-required  {
  color: var(--gold);
}

.mtf-input, .mtf-select, .mtf-textarea  {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  padding: 14px 15px;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border-radius: 10px;
}

.mtf-input, .mtf-select  {
  min-height: 49px;
}

.mtf-textarea  {
  min-height: 130px;
  resize: vertical;
  line-height: 1.65;
}

.mtf-input::placeholder, .mtf-textarea::placeholder  {
  color: #a6a6a6;
}

.mtf-input:focus, .mtf-select:focus, .mtf-textarea:focus  {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 138, 59, 0.1);
}

.mtf-input.mtf-error, .mtf-select.mtf-error, .mtf-textarea.mtf-error  {
  border-color: #b94a48;
}

/* ========================================================= GARMENT SELECTION ========================================================= */ .mtf-garment-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mtf-garment-option  {
  position: relative;
}

.mtf-garment-option input  {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mtf-garment-label  {
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 15px;
}

.mtf-garment-label:hover  {
  border-color: #d1c4af;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.045);
}

.mtf-garment-option input:checked + .mtf-garment-label  {
  border-color: var(--gold);
  background: #fffcf7;
  box-shadow: 0 0 0 1px var(--gold), 0 10px 30px rgba(184, 138, 59, 0.08);
}

.mtf-garment-top  {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.mtf-garment-icon  {
  width: 50px;
  height: 50px;
}

.mtf-garment-check  {
  width: 19px;
  height: 19px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  transition: 0.2s ease;
  border-radius: 5px;
}

.mtf-garment-option input:checked + .mtf-garment-label .mtf-garment-check  {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--white);
}

.mtf-garment-name  {
  margin-top: 15px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
}

.mtf-garment-description  {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ========================================================= MEASUREMENT PANELS ========================================================= */ .mtf-measurements  {
  margin-top: 28px;
}

.mtf-measurement-panel  {
  display: none;
  padding: 25px;
  background: #fcfbf8;
  border: 1px solid var(--border);
  animation: mtfFadeIn 0.3s ease both;
}

.mtf-measurement-panel.is-active  {
  display: block;
}

.mtf-measurement-title  {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
}

.mtf-measurement-note  {
  margin: -10px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ========================================================= MEASUREMENT GRID ========================================================= */ .mtf-measurement-grid  {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ========================================================= OPTION GROUPS ========================================================= */ .mtf-options  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mtf-option  {
  position: relative;
}

.mtf-option input  {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mtf-option label  {
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--charcoal-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: 0.2s ease;
  border-radius: 10px;
  user-select: none;
}

.mtf-option label:hover  {
  border-color: #d0c4b2;
}

.mtf-option input:checked + label  {
  background: var(--gold-tint);
  border-color: var(--gold);
  color: var(--gold-deep);
  font-weight: 600;
}

/* ========================================================= REQUIREMENT BLOCK ========================================================= */ .mtf-requirement  {
  padding: 22px;
  background: #fcfbf8;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}

.mtf-requirement:last-child  {
  margin-bottom: 0;
}

.mtf-requirement-title  {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
}

/* ========================================================= UPLOAD ========================================================= */ .mtf-upload  {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 1px dashed #cfc8bc;
  background: #fcfbf8;
  text-align: center;
  transition: 0.25s ease;
}

.mtf-upload:hover, .mtf-upload.is-dragover  {
  border-color: var(--gold);
  background: var(--gold-tint);
}

.mtf-upload-input  {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.mtf-upload-content  {
  pointer-events: none;
}

.mtf-upload-icon  {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-tint);
  color: var(--gold);
  font-size: 20px;
}

.mtf-upload-title  {
  margin: 0 0 5px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
}

.mtf-upload-text  {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.mtf-upload-text strong  {
  color: var(--gold-deep);
}

/* ========================================================= FILE PREVIEW ========================================================= */ .mtf-file-preview  {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mtf-file-item  {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  min-width: 0;
}

.mtf-file-thumb  {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: cover;
  background: var(--gold-tint);
}

.mtf-file-name  {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--charcoal-2);
}

/* ========================================================= REVIEW ========================================================= */ .mtf-review  {
  border: 1px solid var(--border);
  background: #fcfbf8;
}

.mtf-review-section  {
  padding: 22px;
  border-bottom: 1px solid var(--border);
}

.mtf-review-section:last-child  {
  border-bottom: 0;
}

.mtf-review-title  {
  margin: 0 0 15px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
}

.mtf-review-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 30px;
}

.mtf-review-item  {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  border-bottom: 1px solid #ece8e0;
  font-size: 12px;
}

.mtf-review-item:last-child  {
  border-bottom: 0;
}

.mtf-review-label  {
  color: var(--muted);
}

.mtf-review-value  {
  font-weight: 600;
  text-align: right;
}

/* ========================================================= NAVIGATION ========================================================= */ .mtf-navigation  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid var(--border);
}

.mtf-button  {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border-radius: 15px;
}

.mtf-button:hover  {
  transform: translateY(-1px);
}

.mtf-button-back  {
  background: transparent;
  border-color: var(--border);
  color: var(--charcoal-2);
}

.mtf-button-back:hover  {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.mtf-button-next  {
  margin-left: auto;
  background: var(--black);
  color: var(--white);
}

.mtf-button-next:hover  {
  background: var(--charcoal-2);
}

.mtf-button-submit  {
  margin-left: auto;
  background: var(--gold);
  color: var(--white);
}

.mtf-button-submit:hover  {
  background: var(--gold-deep);
}

.mtf-button-submit:disabled  {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ========================================================= SUCCESS ========================================================= */ .mtf-success  {
  display: none;
  padding: 60px 30px;
  text-align: center;
}

.mtf-success.is-visible  {
  display: block;
  animation: mtfFadeIn 0.4s ease both;
}

.mtf-success-icon  {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-tint);
  color: var(--gold);
  font-size: 24px;
}

.mtf-success-title  {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
}

.mtf-success-text  {
  max-width: 500px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px)  {
  .mtf-form-inner  {
    padding: 60px 0;
  }

  .mtf-body  {
    padding: 35px;
  }

  .mtf-measurement-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mtf-file-preview  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px)  {
  .mtf-form-inner  {
    width: min(100% - 20px, var(--container));
    padding: 45px 0;
  }

  .mtf-form-header  {
    margin-bottom: 30px;
  }

  .mtf-form-title  {
    font-size: 29px;
  }

  .mtf-form-description  {
    font-size: 13px;
  }

  .mtf-progress  {
    padding: 22px 12px;
  }

  .mtf-progress-step  {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .mtf-progress-number  {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .mtf-progress-line  {
    top: 15px;
    left: 10%;
    right: 10%;
  }

  .mtf-body  {
    padding: 25px 18px;
  }

  .mtf-step-title  {
    font-size: 22px;
  }

  .mtf-grid  {
    grid-template-columns: 1fr;
  }

  .mtf-garment-grid  {
    grid-template-columns: 1fr;
  }

  .mtf-measurement-grid  {
    grid-template-columns: 1fr 1fr;
  }

  .mtf-measurement-panel  {
    padding: 18px;
  }

  .mtf-options  {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mtf-option label  {
    width: 100%;
    min-width: 0;
  }

  .mtf-review-grid  {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mtf-file-preview  {
    grid-template-columns: 1fr;
  }

  .mtf-navigation  {
    flex-wrap: wrap;
  }

  .mtf-button  {
    flex: 1;
  }

  .mtf-button-next, .mtf-button-submit  {
    margin-left: 0;
  }

}

@media (max-width: 400px)  {
  .mtf-measurement-grid  {
    grid-template-columns: 1fr;
  }

  .mtf-progress-step span:last-child  {
    display: none;
  }

}

/* =========================== HOW IT WORKS =========================== */ .steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  position:relative;
}

.step-item  {
  padding: 30px;
  position: relative;
  border: 1px solid var(--gold);
  border-radius: 20px;
  text-align: center;
}

.step-item .step-number {
  font-family:var(--font-head);
  font-size:2.1rem;
  font-weight:600;
  color:var(--gold);
  background:var(--white);
  display:inline-block;
  padding-right:14px;
  position:relative;
  z-index:2;
}

.step-item h3 {
  font-size:1.2rem;
}

.step-item p {
  margin-top:10px;
  color:var(--muted);
  font-size:0.92rem;
}

@media (max-width:820px) {
  .steps-grid {
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
  }

  .steps-grid::before {
    display:none;
  }

  .step-item {
    padding:0;
  }

}

/* =========================== TESTIMONIALS =========================== */ section.section.testimonial {
  background:var(--white);
}

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

.testi-card {
  background:var(--white);
  border:1px solid var(--border);
  padding:34px;
  border-radius: 20px;
}

.stars {
  color:var(--gold);
  font-size:20px;
  letter-spacing:2px;
}

.testi-card p {
  margin-top:16px;
  font-size:0.95rem;
  color:var(--black);
  line-height:1.7;
}

.testi-name {
  margin-top:20px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.9rem;
}

.testi-name span {
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.78rem;
  color:var(--muted);
  margin-top:2px;
}

@media (max-width:860px) {
  .testi-grid {
    grid-template-columns:1fr;
  }

}

/* =========================== FINAL CTA =========================== */ .final-cta  {
  background: var(--bg);
  padding: 0 0 80px 0;
}

.final-cta-inner  {
  position: relative;
  text-align: center;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  background: url(https://makkitailor.com/wp-content/uploads/2026/08/cta-bg-image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 0;
  border-radius: 20px;
}

.final-cta h2 {
  color:var(--white);
  font-size:clamp(2rem,3.6vw,2.8rem);
  margin-top:16px;
}

.final-cta p {
  margin-top:16px;
  color:rgba(255,255,255,0.65);
  font-size:1.03rem;
}

.final-cta-ctas {
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:36px;
  flex-wrap:wrap;
}

/* =========================== CONTACT =========================== */ .contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.contact-info h3 {
  font-size:2.6rem;
}

.contact-info .tagline {
  color:var(--muted);
  margin-top:6px;
  font-size:0.95rem;
}

.contact-rows  {
  margin: 20px 0px;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 2fr);
}

.contact-row {
  display:flex;
  gap:16px;
}

.contact-row  {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 10px;
}

.contact-row svg {
  width:20px;
  height:20px;
  color:var(--gold);
  flex-shrink:0;
  margin-top:2px;
}

.contact-row .label {
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
}

.contact-row .value {
  font-size:15px;
  margin-top:3px;
}

.whatsapp-btn {
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#1f2a24;
  color:#fff;
  padding:15px 26px;
  border-radius:30px;
  font-size:0.85rem;
  font-weight:600;
  border:1px solid #2c3a32;
}

.contact-info.reveal.is-visible  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.whatsapp-btn svg {
  width:18px;
  height:18px;
  color:#4ADE80;
}

.map-box  {
  background: url(https://makkitailor.com/wp-content/uploads/2026/08/workspace-01.png);
  height: 600px;
  border: 1px solid var(--border);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
}

iframe  {
  border-radius: 20px;
}

@media (max-width:900px) {
  .contact-grid {
    grid-template-columns:1fr;
    gap:40px;
  }

  .contact-rows  {
    grid-template-columns: repeat(1, 3fr);
    width: 100%;
  }

  .map-box {
    overflow:hidden;
  }

}

/* =========================== FOOTER =========================== */ .site-footer {
  background:var(--white);
  border-top:1px solid var(--border);
  padding:64px 0 26px;
}

.footer-top {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:50px;
}

.footer-desc {
  margin-top:16px;
  color:var(--muted);
  font-size:0.9rem;
  max-width:280px;
}

.footer-col h4 {
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}

.footer-col ul {
  display:grid;
  gap:12px;
}

.footer-col a {
  font-size:0.9rem;
}

.footer-col a:hover {
  color:var(--gold-deep);
}

.social-row {
  display:flex;
  gap:12px;
  margin-top:18px;
}

.social-row a {
  width:34px;
  height:34px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-row a:hover {
  border-color:var(--gold);
  color:var(--gold-deep);
}

.social-row svg {
  width:15px;
  height:15px;
}

.footer-bottom {
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  font-size:0.78rem;
  color:var(--muted);
  flex-wrap:wrap;
  gap:10px;
}

@media (max-width:760px) {
  .footer-top {
    grid-template-columns:1fr;
    gap:34px;
  }

}

/* mobile sticky whatsapp/cta bar */ .mobile-bar {
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:900;
  background:var(--white);
  border-top:1px solid var(--border);
  padding:12px 16px;
  gap:10px;
}

@media (max-width:640px) {
  .mobile-bar {
    display:flex;
  }

  body {
    padding-bottom:68px;
  }

}

.mobile-bar .btn {
  flex:1;
  padding:13px 10px;
  font-size:0.72rem;
}

/* ================================ CF7 FORM FIXES ================================ */ .form-wrap .wpcf7-form  {
  width: 100%;
}

.form-wrap .wpcf7-form-control-wrap  {
  display: block;
  width: 100%;
}

.form-wrap input, .form-wrap select, .form-wrap textarea  {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ================================ MULTI STEP ================================ */ .form-wrap .form-step  {
  display: none;
}

.form-wrap .form-step.active  {
  display: block;
}

/* ================================ NAVIGATION ================================ */ .form-wrap .form-nav  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.form-wrap #submitBtn  {
  display: none;
}

/* ================================ CF7 SUBMIT ================================ */ .form-wrap .wpcf7-submit  {
  cursor: pointer;
}

/* ================================ ERROR ================================ */ .form-wrap .field-error  {
  border-color: #c62828 !important;
}

/* ================================ CF7 RESPONSE ================================ */ .form-wrap .wpcf7-response-output  {
  /*margin: 15px 0 0 !important;
  padding: 10px 0 !important;
  border: 0 !important;
  */ font-size: 13px;
}

/* Hide CF7 response while user is going through the steps */ .form-wrap .wpcf7-not-valid-tip  {
  font-size: 12px;
  margin-top: 5px;
}

/* ================================ SUCCESS ================================ */ .form-success  {
  display: none;
}

.form-success.show  {
  display: block;
}

/* ================================ CF7 RADIO ================================ */ .form-wrap .pill-group .wpcf7-form-control  {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-wrap .pill-group .wpcf7-list-item  {
  margin: 0;
}

fieldset.hidden-fields-container  {
  display: none;
}

/* ========================================================== HOW TO MEASURE — namespaced to .htm- to drop into any site ========================================================== */ .htm-section  {
  --htm-surface: #FFFFFF;
  --htm-ink: #23262B;
  --htm-ink-soft: #6B6F76;
  --htm-gold: #A9824C;
  --htm-gold-soft: #D9C8A9;
  --htm-border: #E8E2D4;
  --htm-shadow: 0 1px 2px rgba(35,38,43,0.05), 0 10px 28px rgba(35,38,43,0.06);
  --htm-radius: 14px;
  --htm-font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --htm-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;
  color: var(--htm-ink);
  font-family: var(--htm-font-body);
  padding: 110px 24px;
  -webkit-font-smoothing: antialiased;
}

.htm-section *, .htm-section *::before, .htm-section *::after  {
  box-sizing: border-box;
}

.htm-inner  {
  max-width: 1180px;
  margin: 0 auto;
}

/* ========================================= guid SECTION ========================================== */ .htm-section  {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

/* ========================================= HEADING ========================================== */ .htm-heading  {
  text-align: center;
  margin-bottom: 28px;
}

.htm-heading-label  {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--htm-gold);
}

.htm-heading h2  {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.htm-heading p  {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--htm-ink-soft);
}

/* ========================================= CATEGORY TABS TOP OF CONTENT ========================================== */ .htm-tabs-wrap  {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 40px;
}

.htm-tabs  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(620px, 100%);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* ========================================= TAB ========================================== */ .htm-tab  {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 10px;
  color: #77736d;
  font-family: var(--htm-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* ========================================= TAB HOVER ========================================== */ .htm-tab:hover  {
  color: var(--htm-ink);
}

/* ========================================= ACTIVE TAB ========================================== */ .htm-tab.is-active  {
  color: var(--white);
  background: var(--black);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.035);
}

/* ========================================= TAB CLICK ========================================== */ .htm-tab:active  {
  transform: scale(0.985);
}

/* ========================================= TAB FOCUS ========================================== */ .htm-tab:focus-visible  {
  outline: 2px solid var(--htm-gold);
  outline-offset: 2px;
}

/* ========================================= MAIN GRID ========================================== */ .htm-grid  {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ========================================= IMAGE CARD ========================================== */ .htm-figure  {
  position: sticky;
  top: 32px;
  padding: 28px 28px 22px;
  background: var(--htm-surface);
  border: 1px solid var(--htm-border);
  border-radius: var(--htm-radius);
  box-shadow: var(--htm-shadow);
}

/* ========================================= IMAGE FRAME ========================================== */ .htm-figure-frame  {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: #f8f6f1;
}

/* ========================================= IMAGE ========================================== */ .htm-figure-img  {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.45s cubic-bezier(0.22, 0.68, 0, 1), transform 0.55s cubic-bezier(0.22, 0.68, 0, 1);
}

.htm-figure-img.is-active  {
  opacity: 1;
  transform: scale(1);
}

/* ========================================= IMAGE CAPTION ========================================== */ .htm-figure-caption  {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.htm-swatch  {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--htm-gold);
}

#htmImageLabel  {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ========================================= RIGHT CONTENT CARD ========================================== */ .htm-panel-wrap  {
  padding: 8px 28px;
  background: var(--htm-surface);
  border: 1px solid var(--htm-border);
  border-radius: var(--htm-radius);
  box-shadow: var(--htm-shadow);
}

/* ========================================= CATEGORY TITLE ========================================== */ .htm-category-title  {
  margin: 24px 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--htm-border);
  color: var(--htm-ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ========================================= ACCORDION ========================================== */ .htm-accordion  {
  display: block;
}

.htm-accordion.is-hidden  {
  display: none;
}

/* ========================================= ACCORDION ITEM ========================================== */ .htm-item  {
  border-bottom: 1px solid var(--htm-border);
}

.htm-item:last-child  {
  border-bottom: none;
}

/* ========================================= ACCORDION HEADING ========================================== */ .htm-item h4  {
  margin: 0;
}

/* ========================================= ACCORDION BUTTON ========================================== */ .htm-trigger  {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  color: var(--htm-ink);
  font-family: var(--htm-font);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.25s ease;
}

/* ========================================= HOVER ========================================== */ .htm-trigger:hover  {
  color: var(--htm-gold);
}

/* ========================================= ACTIVE ========================================== */ .htm-trigger[aria-expanded="true"]  {
  color: var(--htm-gold);
}

/* ========================================= ACTIVE SIDE LINE ========================================== */ .htm-trigger-line  {
  position: absolute;
  left: -28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.25s ease;
}

.htm-trigger[aria-expanded="true"] .htm-trigger-line  {
  background: var(--htm-gold);
}

/* ========================================= FOCUS ========================================== */ .htm-trigger:focus-visible  {
  outline: 2px solid var(--htm-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================= PLUS ICON ========================================== */ .htm-icon  {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.htm-icon::before, .htm-icon::after  {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.htm-icon::before  {
  width: 12px;
  height: 1.5px;
}

.htm-icon::after  {
  width: 1.5px;
  height: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ========================================= OPEN ICON ========================================== */ .htm-trigger[aria-expanded="true"] .htm-icon::after  {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ========================================= ACCORDION PANEL ========================================== */ .htm-panel  {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.htm-panel.is-open  {
  grid-template-rows: 1fr;
}

.htm-panel-inner  {
  overflow: hidden;
  min-height: 0;
}

.htm-panel-inner p  {
  margin: 0 0 18px;
  padding-right: 8px;
  color: var(--htm-ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* ========================================= TIP ========================================== */ .htm-tip  {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 28px 0 0;
  padding: 16px 18px;
  color: var(--htm-ink-soft);
  background: var(--htm-surface);
  border: 1px dashed var(--htm-border);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.65;
}

.htm-tip strong  {
  flex: none;
  color: var(--htm-ink);
  font-weight: 600;
}

/* ========================================= TABLET ========================================== */ @media (max-width: 900px)  {
  .htm-grid  {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .htm-figure  {
    position: relative;
    top: auto;
  }

  .htm-figure-frame  {
    max-height: 650px;
  }

}

/* ========================================= MOBILE ========================================== */ @media (max-width: 600px)  {
  .htm-section  {
    width: calc(100% - 24px);
    margin: 50px auto;
  }

  .htm-heading  {
    margin-bottom: 24px;
  }

  .htm-heading h2  {
    font-size: 32px;
  }

  .htm-heading p  {
    font-size: 14px;
  }

  /* ===================================== MOBILE TABS ====================================== */ .htm-tabs-wrap  {
    margin-bottom: 25px;
  }

  .htm-tabs  {
    gap: 4px;
    padding: 5px;
  }

  .htm-tab  {
    min-height: 48px;
    padding: 10px 5px;
    font-size: 11px;
  }

  /* ===================================== MOBILE IMAGE ====================================== */ .htm-figure  {
    padding: 14px;
  }

  /* ===================================== MOBILE ACCORDION ====================================== */ .htm-panel-wrap  {
    padding: 6px 18px;
  }

  .htm-trigger-line  {
    left: -18px;
  }

  .htm-trigger  {
    font-size: 15px;
  }

  .htm-tip  {
    font-size: 12.5px;
  }

}

/* ========================================= VERY SMALL MOBILE ========================================== */ @media (max-width: 380px)  {
  .htm-tab  {
    font-size: 10px;
    letter-spacing: 0;
  }

}

/* ========================================================= TESTIMONIAL CAROUSEL ========================================================= */ .testimonials-list  {
  display: flex;
  gap: 14px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.testimonial-carousel-area  {
  width: 60%;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

/* Each card */ .testimonials-list .testimonial-card  {
  flex: 0 0 calc(50% - 7px);
  min-width: 0;
}

.testimonials-intro  {
  width: 40%;
}

.testimonials-intro h2  {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-top: 14px;
  line-height: 1.2;
}

.testimonials-grid  {
  display: flex;
  gap:50px;
  align-items: center;
}

.testimonial-card  {
  flex: 0 0 calc(50% - 7px);
  min-width: 0;
  background: var(--white);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.025);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover  {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* ========================================================= WHITE QUOTE AREA ========================================================= */ .testimonial-content  {
  min-height: 153px;
  padding: 14px 15px 15px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 5px;
}

/* ========================================================= STARS ========================================================= */ .stars  {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 20px;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 1px;
}

/* ========================================================= QUOTE ========================================================= */ .testimonial-content p  {
  margin: 0;
  font-size: 0.95rem;
  color: var(--black);
  line-height: 1.7;
}

/* ========================================================= AUTHOR ========================================================= */ .testimonial-author  {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
}

/* ========================================================= AVATAR ========================================================= */ .author-avatar  {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient( 145deg, var(--gold), var(--gold-tint) );
  color: #fff;
  overflow: hidden;
}

.author-avatar span  {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ========================================================= AUTHOR INFO ========================================================= */ .testimonial-author > div:last-child  {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-author strong  {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
}

.testimonial-author div:last-child span  {
  margin-top: 1px;
  font-size: 0.62rem;
  line-height: 1.2;
  color: #777;
}

/* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px)  {
  .testimonials-list  {
    gap: 12px;
  }

  .testimonials-list .testimonial-card  {
    flex: 0 0 100%;
  }

  .testimonial-content  {
    min-height: auto;
  }

  .testimonial-content p  {
    max-width: none;
  }

}

/* ========================= PRICING SECTION ========================= */ .pricing-section  {
  width: 100%;
  padding: 120px 24px;
  color: #242522;
}

.pricing-container  {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-container .section-head  {
  margin: 0 auto 56px;
  max-width: 680px;
}

/* ========================= HEADER ========================= */ .pricing-header  {
  max-width: 680px;
  margin: 0 auto 65px;
  text-align: center;
}

.pricing-label  {
  display: inline-block;
  margin-bottom: 18px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #526b58;
}

.pricing-header h2  {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -2px;
}

.pricing-header h2 span  {
  display: block;
  color: #526b58;
}

.pricing-header p  {
  max-width: 560px;
  margin: 22px auto 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: #77766f;
}

/* ========================= GRID ========================= */ .pricing-grid  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* ========================= CARD ========================= */ .pricing-card  {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: 38px 34px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #e5e2da;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.pricing-card:hover  {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(35, 40, 34, 0.08);
}

.pricing-card .eyebrow  {
  display: flex;
  padding-top: 25px;
}

.pricing-card .eyebrow::before  {
  width: 50%;
}

.pricing-card .eyebrow::after  {
  width: 50%;
}

/* ========================= CARD TOP ========================= */ .pricing-card-top  {
  margin-bottom: 30px;
}

.pricing-card h3  {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.pricing-subtitle  {
  margin: 7px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9b9a93;
}

/* ========================= PRICE ========================= */ .pricing-price  {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-currency  {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #77766f;
}

.price-value  {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1px;
}

/* ========================= DESCRIPTION ========================= */ .pricing-description  {
  margin: 25px 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: #77766f;
}

/* ========================= FEATURES ========================= */ .pricing-features  {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.price-eyebrow::before {
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}

.price-eyebrow::after {
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
  display:inline-block;
} 

.pricing-features li  {
  position: relative;
  padding-left: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #4f504b;
}

.pricing-features li::before  {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  font-weight: 600;
  color: #526b58;
}

/* ========================= BUTTON ========================= */ .mkv_pricing_btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 25px;
  border-radius: 15px;
  padding: 16px 32px;
  text-decoration: none;
  background: #242822;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.3s ease, transform 0.3s ease;
}

.mkv_pricing_btn span  {
  font-size: 17px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.mkv_pricing_btn:hover  {
  background: var(--gold);
}

.mkv_pricing_btn:hover span  {
  transform: translate(3px, -3px);
}

/* ========================= TABLET ========================= */ @media (max-width: 900px)  {
  .pricing-section  {
    padding: 90px 20px;
  }

  .pricing-grid  {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .pricing-card  {
    min-height: auto;
  }

}

/* ========================= MOBILE ========================= */ @media (max-width: 600px)  {
  .pricing-section  {
    padding: 75px 18px;
  }

  .pricing-header  {
    margin-bottom: 45px;
  }

  .pricing-header h2  {
    font-size: 38px;
    letter-spacing: -1.5px;
  }

  .pricing-header p  {
    font-size: 13px;
  }

  .pricing-card  {
    padding: 30px 25px;
  }

  .pricing-card h3  {
    font-size: 23px;
  }

}

/* ========================================= MAKKI PREMIUM FAQ ========================================= */ .makki-faq  {
  width: 100%;
  padding: 105px 0;
  background: var(--bg);
  color: #252722;
}

.makki-faq-wrap  {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* ========================================= HEADER ========================================= */ .makki-faq-header  {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 100px;
  margin-bottom: 75px;
}

.makki-faq-kicker  {
  display: block;
  margin-bottom: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #526b58;
}

.makki-faq-heading h2  {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(45px, 6vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -3.5px;
}

.makki-faq-heading h2 span  {
  display: block;
  color: #526b58;
}

.makki-faq-intro  {
  padding-bottom: 5px;
}

.makki-faq-intro p  {
  max-width: 360px;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.9;
  color: #777970;
}

/* ========================================= FAQ LIST ========================================= */ .makki-faq-list  {
  border-top: 1px solid #d8d6ce;
}

/* ========================================= ITEM ========================================= */ .makki-faq-item  {
  border-bottom: 1px solid #d8d6ce;
}

/* ========================================= QUESTION BUTTON ========================================= */ .makki-faq-question  {
  position: relative;
  width: 100%;
  display: flex;
  gap: 25px;
  padding: 15px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #252722;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* ========================================= QUESTION ========================================= */ .makki-faq-question-text  {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* ========================================= PLUS ICON ========================================= */ .makki-faq-plus  {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #d0cec5;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.makki-faq-plus span  {
  position: absolute;
  width: 11px;
  height: 1px;
  background: #526b58;
  transition: transform 0.35s ease;
}

.makki-faq-plus span:last-child  {
  transform: rotate(90deg);
}

/* ========================================= ANSWER ========================================= */ .makki-faq-answer  {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.makki-faq-answer-inner  {
  overflow: hidden;
}

.makki-faq-answer p  {
  max-width: 90%;
  margin: 0;
  padding: 0 15px 35px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #777970;
}

/* ========================================= ACTIVE ========================================= */ .makki-faq-item.active .makki-faq-answer  {
  grid-template-rows: 1fr;
}

.makki-faq-item.active .makki-faq-question-text  {
  color: var(--gold);
}

.makki-faq-item.active .makki-faq-plus  {
  background: var(--gold);
  border-color: var(--gold);
}

.makki-faq-item.active .makki-faq-plus span  {
  background: #fff;
}

.makki-faq-item.active .makki-faq-plus span:last-child  {
  transform: rotate(0deg);
}

/* ========================================= HOVER ========================================= */ .makki-faq-question:hover .makki-faq-question-text  {
  color: var(--gold);
}

.makki-faq-question:hover .makki-faq-plus  {
  border-color: var(--gold);
}

/* ========================================= TABLET ========================================= */ @media (max-width: 850px)  {
  .makki-faq  {
    padding: 100px 22px;
  }

  .makki-faq-header  {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 55px;
  }

  .makki-faq-intro p  {
    max-width: 550px;
  }

}

/* ========================================= MOBILE ========================================= */ @media (max-width: 600px)  {
  .makki-faq  {
    padding: 80px 18px;
  }

  .makki-faq-heading h2  {
    font-size: 44px;
    letter-spacing: -2.3px;
  }

  .makki-faq-header  {
    margin-bottom: 45px;
  }

  .makki-faq-question  {
    min-height: 82px;
    grid-template-columns: 32px 1fr 34px;
    gap: 12px;
    padding: 17px 0;
  }

  .makki-faq-question-text  {
    font-size: 13px;
    line-height: 1.55;
  }

  .makki-faq-plus  {
    width: 30px;
    height: 30px;
  }

  .makki-faq-plus span  {
    width: 9px;
  }

  .makki-faq-answer p  {
    padding: 0 25px 28px 44px;
    font-size: 11px;
    line-height: 1.85;
  }

}

/* ========================================================= TAILOR MEASUREMENT FORM Premium / Minimal / Luxury Styling ========================================================= */ :root  {
  --tailor-gold: #B88A3B;
  --tailor-gold-dark: #96702E;
  --tailor-cream: #F3E9D8;
  --tailor-black: #111111;
  --tailor-text: #222222;
  --tailor-muted: #777777;
  --tailor-border: #E4DED4;
  --tailor-bg: #FFFFFF;
  --tailor-input-bg: #FFFFFF;
}

/* ========================================================= MAIN FORM CONTAINER ========================================================= */ .wpcf7 form.wpcf7-form  {
  max-width: 1060px;
  margin: 30px auto;
  padding: 0;
  background: var(--tailor-bg);
  border: 1px solid var(--tailor-border);
  box-sizing: border-box;
  color: var(--tailor-text);
  font-family: Arial, Helvetica, sans-serif;
}

/* Remove default CF7 spacing */ .wpcf7 form.wpcf7-form p  {
  margin: 0;
}

/* ========================================================= HIDDEN CF7 FIELDS ========================================================= */ .wpcf7 .hidden-fields-container  {
  display: none !important;
}

/* ========================================================= PROGRESS BAR ========================================================= */ .wpcf7 .steps-form  {
  display: block;
  width: 100%;
  margin: 0;
  padding: 25px 55px 28px;
  border-bottom: 1px solid var(--tailor-border);
  box-sizing: border-box;
}

/* Progress row */ .wpcf7 .steps-form .steps-row  {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Horizontal line */ .wpcf7 .steps-form .steps-row::before  {
  content: "";
  position: absolute;
  top: 16px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--tailor-border);
  z-index: 0;
}

/* Individual step */ .wpcf7 .steps-form .steps-step  {
  position: relative;
  z-index: 2;
  width: 25%;
  text-align: center;
}

/* Step link */ .wpcf7 .steps-form .steps-step .btn-circle  {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  padding: 0 !important;
  border: 1px solid var(--tailor-border);
  border-radius: 7px;
  background: #fff;
  color: #999;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

/* Number inside step */ .wpcf7 .steps-form .steps-step .btn-circle::before  {
  content: counter(tailor-step, decimal-leading-zero);
}

/* Counter */ .wpcf7 .steps-form .steps-row  {
  counter-reset: tailor-step;
}

.wpcf7 .steps-form .steps-step  {
  counter-increment: tailor-step;
}

/* Hide original step text inside button */ .wpcf7 .steps-form .steps-step .btn-circle p  {
  display: none !important;
}

/* Active step */ .wpcf7 .steps-form .steps-step .btn-circle.uacf7-btn-active  {
  background: var(--tailor-gold);
  border-color: var(--tailor-gold);
  color: #fff;
}

/* Hover */ .wpcf7 .steps-form .steps-step .btn-circle:hover  {
  border-color: var(--tailor-gold);
  color: var(--tailor-gold);
  transform: translateY(-1px);
}

.wpcf7 .steps-form .steps-step .btn-circle.uacf7-btn-active:hover  {
  color: #fff;
}

/* Step labels */ .wpcf7 .steps-form .steps-step .btn-circle::after  {
  position: absolute;
  top: 43px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
}

/* Labels */ .wpcf7 .steps-form .steps-step:nth-child(1) .btn-circle::after  {
  content: "Details";
}

.wpcf7 .steps-form .steps-step:nth-child(2) .btn-circle::after  {
  content: "Garment";
}

.wpcf7 .steps-form .steps-step:nth-child(3) .btn-circle::after  {
  content: "Measurements";
}

.wpcf7 .steps-form .steps-step:nth-child(4) .btn-circle::after  {
  content: "Requirements";
}

/* Active label */ .wpcf7 .steps-form .steps-step .btn-circle.uacf7-btn-active::after  {
  color: var(--tailor-black);
}

/* ========================================================= FORM CONTENT ========================================================= */ .wpcf7 .uacf7-multisetp-form  {
  width: 100%;
}

.wpcf7 .uacf7-form-wrapper-container  {
  width: 100%;
}

.wpcf7 .uacf7-step  {
  padding: 42px 40px 38px;
  box-sizing: border-box;
}

/* ========================================================= FIRST STEP INTRO ========================================================= */ .wpcf7 .uacf7-step:first-child::before  {
  content: "STEP 01";
  display: block;
  margin-bottom: 10px;
  color: var(--tailor-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ========================================================= FIELD GRID ========================================================= */ .wpcf7 .uacf7-row  {
  display: flex;
  width: 100%;
  margin: 0 -9px 18px;
  box-sizing: border-box;
}

/* Columns */ .wpcf7 .uacf7-row > [class*="uacf7-col-"]  {
  padding: 0 9px;
  box-sizing: border-box;
}

/* 6 columns = 50% */ .wpcf7 .uacf7-col-6  {
  width: 50%;
}

/* 4 columns = 33.333% */ .wpcf7 .uacf7-col-4  {
  width: 33.333333%;
}

/* ========================================================= FIRST STEP FIELD LAYOUT ========================================================= */ /* First row: 2 columns */ .wpcf7 .uacf7-step:first-child .uacf7-row:nth-of-type(1) .uacf7-col-6  {
  width: 50%;
}

/* Second row: email + city */ .wpcf7 .uacf7-step:first-child .uacf7-row:nth-of-type(2) .uacf7-col-4  {
  width: 50%;
}

/* Delivery address full width */ .wpcf7 .uacf7-step:first-child .uacf7-row:nth-of-type(2) .uacf7-col-4:nth-child(3)  {
  width: 100%;
}

/* ========================================================= INPUT LABELS Generated from existing field names ========================================================= */ .wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap  {
  position: relative;
  display: block;
  width: 100%;
}

/* Labels */ .wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap::before  {
  display: block;
  margin-bottom: 8px;
  color: var(--tailor-text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}

/* Specific labels */ .wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="text-566"]::before  {
  content: "Full Name *";
}

.wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="text-812"]::before  {
  content: "Phone Number *";
}

.wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="email-468"]::before  {
  content: "Email Address";
}

.wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="text-573"]::before  {
  content: "City *";
}

.wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="text-142"]::before  {
  content: "Delivery Address";
}

/* ========================================================= INPUTS ========================================================= */ .wpcf7 input.wpcf7-form-control.wpcf7-text, .wpcf7 input.wpcf7-form-control.wpcf7-email, .wpcf7 textarea.wpcf7-form-control  {
  width: 100%;
  min-height: 44px;
  padding: 13px 14px;
  border: 1px solid var(--tailor-border);
  border-radius: 9px;
  background: var(--tailor-input-bg);
  color: var(--tailor-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* Placeholder */ .wpcf7 input::placeholder, .wpcf7 textarea::placeholder  {
  color: #aaa;
  opacity: 1;
}

/* Focus */ .wpcf7 input.wpcf7-form-control:focus, .wpcf7 textarea.wpcf7-form-control:focus  {
  border-color: var(--tailor-gold);
  box-shadow: 0 0 0 3px rgba(184, 138, 59, .08);
}

/* Textarea */ .wpcf7 textarea.wpcf7-form-control  {
  min-height: 120px;
  resize: vertical;
}

/* ========================================================= DELIVERY ADDRESS ========================================================= */ .wpcf7 .uacf7-step:first-child .wpcf7-form-control-wrap[data-name="text-142"]  {
  margin-top: 0;
}

/* ========================================================= STEP HEADINGS ========================================================= */ .wpcf7 .uacf7-step h3  {
  margin: 0 0 25px;
  color: var(--tailor-black);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
}

.wpcf7 .uacf7-step h5  {
  margin: 0 0 12px;
  color: var(--tailor-black);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

/* ========================================================= CONDITIONAL MEASUREMENT SECTIONS ========================================================= */ .wpcf7 .uacf7_conditional  {
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid var(--tailor-border);
  border-radius: 10px;
  background: #fff;
}

.wpcf7 .uacf7_conditional h3  {
  margin-bottom: 22px;
  color: var(--tailor-gold-dark);
  font-size: 16px;
  letter-spacing: .02em;
}

/* Measurement inputs */ .wpcf7 .uacf7_conditional .wpcf7-form-control-wrap  {
  display: block;
  width: 100%;
}

/* ========================================================= GARMENT RADIO BUTTONS ========================================================= */ .wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio  {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}

.wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio .wpcf7-list-item  {
  margin: 0;
}

.wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio label  {
  position: relative;
  display: block;
  cursor: pointer;
}

.wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio input  {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio .wpcf7-list-item-label  {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 15px;
  border: 1px solid var(--tailor-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tailor-text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all .25s ease;
}

/* Selected garment */ .wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio input:checked + .wpcf7-list-item-label  {
  border-color: var(--tailor-gold);
  background: var(--tailor-gold);
  color: #fff;
}

/* ========================================================= CHECKBOX / REQUIREMENTS OPTIONS ========================================================= */ .wpcf7 .wpcf7-checkbox  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item  {
  margin: 0;
}

.wpcf7 .wpcf7-checkbox label  {
  position: relative;
  display: block;
  cursor: pointer;
}

.wpcf7 .wpcf7-checkbox input  {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--tailor-border);
  border-radius: 8px;
  background: #fff;
  color: var(--tailor-text);
  font-size: 12px;
  font-weight: 500;
  box-sizing: border-box;
  transition: all .25s ease;
}

.wpcf7 .wpcf7-checkbox input:checked + .wpcf7-list-item-label  {
  background: var(--tailor-gold);
  border-color: var(--tailor-gold);
  color: #fff;
}

/* ========================================================= FILE UPLOAD ========================================================= */ .wpcf7 input[type="file"]  {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--tailor-border);
  border-radius: 9px;
  background: #faf9f7;
  font-size: 12px;
  box-sizing: border-box;
}

/* ========================================================= BUTTON AREA ========================================================= */ .wpcf7 .uacf7-buttons  {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px !important;
  padding-top: 23px;
}

/* Previous */ .wpcf7 .uacf7-prev  {
  margin-right: 10px;
  padding: 12px 20px !important;
  border: 1px solid var(--tailor-border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--tailor-text) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

.wpcf7 .uacf7-prev:hover  {
  border-color: var(--tailor-gold) !important;
  color: var(--tailor-gold) !important;
}

/* Next */ .wpcf7 .uacf7-next  {
  min-width: 105px;
  padding: 13px 20px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #111 !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
}

.wpcf7 .uacf7-next:hover  {
  background: var(--tailor-gold-dark) !important;
  transform: translateY(-2px);
}

/* ========================================================= SUBMIT BUTTON ========================================================= */ .wpcf7 input.wpcf7-submit  {
  display: inline-flex;
  min-width: 145px;
  margin-top: 25px;
  padding: 14px 25px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #111 !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

.wpcf7 input.wpcf7-submit:hover  {
  background: var(--tailor-gold) !important;
  transform: translateY(-2px);
}

/* ========================================================= CF7 VALIDATION ========================================================= */ .wpcf7-not-valid  {
  border-color: #c94b4b !important;
}

.wpcf7-not-valid-tip  {
  margin-top: 5px;
  color: #c94b4b;
  font-size: 11px;
}

/* Response */ .wpcf7 .wpcf7-response-output  {
  font-size: 12px;
}

/* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px)  {
  .wpcf7 form.wpcf7-form  {
    margin: 15px auto;
  }

  /* Progress */ .wpcf7 .steps-form  {
    padding: 22px 15px 28px;
  }

  .wpcf7 .steps-form .steps-row::before  {
    left: 12%;
    right: 12%;
  }

  .wpcf7 .steps-form .steps-step  {
    width: 25%;
  }

  .wpcf7 .steps-form .steps-step .btn-circle  {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 10px;
  }

  .wpcf7 .steps-form .steps-step .btn-circle::after  {
    top: 40px;
    font-size: 8px;
  }

  /* Content */ .wpcf7 .uacf7-step  {
    padding: 35px 20px 30px;
  }

  /* All columns full width */ .wpcf7 .uacf7-col-6, .wpcf7 .uacf7-col-4, .wpcf7 .uacf7-step:first-child .uacf7-row:nth-of-type(1) .uacf7-col-6, .wpcf7 .uacf7-step:first-child .uacf7-row:nth-of-type(2) .uacf7-col-4  {
    width: 100% !important;
  }

  .wpcf7 .uacf7-row  {
    margin-bottom: 0;
  }

  .wpcf7 .uacf7-row > [class*="uacf7-col-"]  {
    margin-bottom: 16px;
  }

  /* Garment options */ .wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio  {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Conditional boxes */ .wpcf7 .uacf7_conditional  {
    padding: 18px;
  }

  /* Checkbox options */ .wpcf7 .wpcf7-checkbox  {
    gap: 8px;
  }

  .wpcf7 .wpcf7-checkbox .wpcf7-list-item-label  {
    min-width: auto;
    width: 100%;
  }

  /* Buttons */ .wpcf7 .uacf7-buttons  {
    justify-content: space-between;
  }

  .wpcf7 .uacf7-prev, .wpcf7 .uacf7-next  {
    flex: 1;
  }

}

/* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px)  {
  .wpcf7 .steps-form  {
    padding-left: 8px;
    padding-right: 8px;
  }

  .wpcf7 .steps-form .steps-step .btn-circle::after  {
    font-size: 7px;
    letter-spacing: .04em;
  }

  .wpcf7 .uacf7-step  {
    padding: 30px 15px 25px;
  }

  .wpcf7 .uacf7-step h3  {
    font-size: 20px;
  }

  .wpcf7 .uacf7-step:nth-child(2) .wpcf7-radio  {
    grid-template-columns: 1fr;
  }

}

/* ========================================================= MKV VIDEO CAROUSEL Completely isolated styles ========================================================= */ .mkv_video_section  {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 0 100px 0;
  background: var(--bg);
}

.mkv_video_carousel  {
  width: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mkv_video_carousel.mkv_is_dragging  {
  cursor: grabbing;
}

.mkv_video_track  {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.mkv_video_item  {
  flex: 0 0 320px;
  width: 320px;
  height: 460px;
  overflow: hidden;
  position: relative;
  background: #111;
  border-radius: 20px;
}

.mkv_video_item video  {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Tablet */ @media (max-width: 1024px)  {
  .mkv_video_track  {
    gap: 16px;
  }

  .mkv_video_item  {
    flex-basis: 280px;
    width: 280px;
    height: 400px;
  }

}

/* Mobile */ @media (max-width: 767px)  {
  .mkv_video_track  {
    gap: 12px;
  }

  .mkv_video_item  {
    flex-basis: 220px;
    width: 220px;
    height: 320px;
  }

}

/* ========================================================= MKV PRICING POPUP Completely isolated styles ========================================================= */ .mkv_popup_overlay  {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mkv_popup_overlay.mkv_popup_active  {
  opacity: 1;
  visibility: visible;
}

.mkv_popup_box  {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  padding: 48px;
  transform: translateY(25px) scale(.97);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

.mkv_popup_overlay.mkv_popup_active .mkv_popup_box  {
  transform: translateY(0) scale(1);
}

.mkv_popup_close  {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: #111;
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease;
}

.mkv_popup_close:hover  {
  transform: rotate(90deg);
  opacity: .55;
}

.mkv_popup_eyebrow  {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #777;
}

.mkv_popup_content h2  {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.15;
  color: #111;
}

.mkv_popup_content > p  {
  margin: 0 0 25px;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}

/* Selected Plan */ .mkv_selected_plan  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding: 16px 18px;
  background: #f6f6f4;
  border-left: 2px solid #111;
}

.mkv_selected_plan_label  {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #777;
}

.mkv_selected_plan strong  {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-align: right;
}

/* CF7 */ .mkv_cf7_wrapper .wpcf7-form  {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mkv_cf7_wrapper .wpcf7-form label  {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #222;
}

.mkv_cf7_wrapper input:not( [type="submit"] ):not( [type="hidden"] ), .mkv_cf7_wrapper textarea  {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fafafa;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .25s ease;
}

.mkv_cf7_wrapper input:focus, .mkv_cf7_wrapper textarea:focus  {
  border-color: #111;
}

.mkv_cf7_wrapper textarea  {
  min-height: 110px;
  resize: vertical;
}

.mkv_cf7_wrapper input[type="submit"]  {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 0;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.mkv_cf7_wrapper input[type="submit"]:hover  {
  background: #333;
  transform: translateY(-2px);
}

body.mkv_popup_body_locked  {
  overflow: hidden;
}

.mkv_popup_box .wpcf7 form.wpcf7-form {
  border: none;
  margin: 0 !important;
}

@media (max-width: 767px)  {
  .mkv_popup_overlay  {
    padding: 15px;
  }

  .mkv_popup_box  {
    padding: 40px 24px 30px;
  }

  .mkv_popup_content h2  {
    font-size: 27px;
  }

  .mkv_selected_plan  {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .mkv_selected_plan strong  {
    text-align: left;
  }

}--------------------------------------------*/