.mj-joinery-page {
--bg: #fcf8f2;
      --bg-soft: #f7efe7;
      --surface: #fffdfa;
      --surface-2: #f4e8dc;
      --text: #241a14;
      --muted: #6d5a4f;
      --accent: #a96d3d;
      --accent-2: #c98a49;
      --accent-3: #e9c681;
      --border: rgba(36,26,20,.10);
      --shadow: 0 24px 60px rgba(31,24,20,.13);
      --shadow-soft: 0 12px 30px rgba(31,24,20,.07);
      --radius: 24px;
      --radius-sm: 18px;
      --max: 1240px;
}

.mj-joinery-page, .mj-joinery-page * {
box-sizing: border-box;
}

.mj-joinery-page {
margin: 0;
      font-family: "Inter", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(201,138,73,.14), transparent 28%),
        linear-gradient(180deg, #fcf8f2 0%, #f7efe8 100%);
      line-height: 1.7;
}

.mj-joinery-page img {
display:block; width:100%; height:auto;
}

.mj-joinery-page a {
color: inherit; text-decoration: none;
}

.mj-joinery-page .container {
width: min(var(--max), calc(100% - 48px)); margin-inline: auto;
}

.mj-joinery-page .section {
padding: 104px 0; position: relative;
}

.mj-joinery-page .section-sm {
padding: 78px 0;
}

.mj-joinery-page .section-soft {
background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(248,240,232,.94) 100%);
      border-top: 1px solid rgba(36,26,20,.04);
      border-bottom: 1px solid rgba(36,26,20,.04);
}

.mj-joinery-page .section-dark {
background: linear-gradient(135deg, #1e1916 0%, #2d241f 100%); color: #fff;
}

.mj-joinery-page .grid {
display: grid; gap: 24px;
}

.mj-joinery-page .grid-2 {
grid-template-columns: repeat(2, minmax(0,1fr));
}

.mj-joinery-page .grid-3 {
grid-template-columns: repeat(3, minmax(0,1fr));
}

.mj-joinery-page .grid-4 {
grid-template-columns: repeat(4, minmax(0,1fr));
}

.mj-joinery-page .align-center {
align-items: center;
}

.mj-joinery-page .eyebrow {
display:inline-flex; align-items:center; gap:10px;
      margin-bottom: 16px; color: var(--accent); font-size:13px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
      padding:8px 12px; border-radius:999px; background: rgba(169,109,61,.10);
}

.mj-joinery-page .eyebrow::before {
content:""; width:34px; height:2px; background: currentColor;
}

.mj-joinery-page .section-dark .eyebrow {
color: var(--accent-3); background: rgba(255,255,255,.10);
}

.mj-joinery-page h1, .mj-joinery-page h2, .mj-joinery-page h3 {
line-height:1.15; margin:0;
}

.mj-joinery-page h2 {
font-size: clamp(30px,3.2vw,42px); max-width: 760px;
}

.mj-joinery-page h2::after {
content:""; display:block; width:78px; height:3px; border-radius:999px; margin-top:16px; background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

.mj-joinery-page h3 {
font-size: 22px;
}

.mj-joinery-page .lead {
font-size: 18px; color: var(--muted); max-width: 760px; line-height:1.8;
}

.mj-joinery-page .section-dark .lead {
color: rgba(255,255,255,.78);
}

.mj-joinery-page .btn-row {
display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;
}

.mj-joinery-page .btn {
display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:999px; border:1px solid transparent; font-weight:700; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.mj-joinery-page .btn:hover {
transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

.mj-joinery-page .btn-primary {
background: linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff;
}

.mj-joinery-page .btn-secondary {
background:#fff; color:var(--text); border-color:rgba(47,36,31,.12);
}

.mj-joinery-page .btn-dark {
background:#1e1916; color:#fff;
}

.mj-joinery-page .btn-outline {
border-color: rgba(255,255,255,.22); color:#fff; background: transparent;
}

.mj-joinery-page .pill {
display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:13px;
}

.mj-joinery-page .hero {
position:relative; overflow:hidden; min-height:100vh; display:grid; align-items:center; background:
        linear-gradient(100deg, rgba(15,12,10,.88) 0%, rgba(15,12,10,.68) 45%, rgba(15,12,10,.24) 100%),
        url("https://images.pexels.com/photos/2724749/pexels-photo-2724749.jpeg?auto=compress&cs=tinysrgb&w=1800") center/cover;
      color:#fff;
}

.mj-joinery-page .hero::after {
content:""; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(201,151,98,.20), transparent 34%);
      pointer-events:none;
}

.mj-joinery-page .hero-content {
position:relative; z-index:1; padding:140px 0 110px; max-width:760px;
}

.mj-joinery-page .hero h1 {
font-family: "Cormorant Garamond", serif; font-size: clamp(46px, 7vw, 82px); line-height: 1; margin: 0 0 20px;
      letter-spacing:-.02em;
}

.mj-joinery-page .hero .lead {
font-size: 20px; color: rgba(255,255,255,.86);
}

.mj-joinery-page .hero-stats {
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; max-width:720px; margin-top:34px;
}

.mj-joinery-page .hero-stat {
padding:18px 16px; border-radius:18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.mj-joinery-page .hero-stat strong {
display:block; font-size: 24px; color: var(--accent-3);
}

.mj-joinery-page .hero-stat span {
font-size:14px; color: rgba(255,255,255,.78);
}

.mj-joinery-page .hero-badges {
display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
}

.mj-joinery-page .nav-wrap {
position:sticky; top:0; z-index:40; background: rgba(255,250,247,.90); backdrop-filter: blur(16px); border-bottom:1px solid var(--border); box-shadow: 0 6px 24px rgba(31,24,20,.04);
}

.mj-joinery-page .nav-wrap .container {
display:flex; justify-content:center;
}

.mj-joinery-page .nav {
display:flex; gap:12px 18px; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; max-width:1060px; overflow-x:auto; padding:14px 0; scrollbar-width:none;
}

.mj-joinery-page .nav::-webkit-scrollbar {
display:none;
}

.mj-joinery-page .nav a {
font-size:14px; font-weight:700; color: var(--text); white-space:nowrap; padding:10px 14px; border-radius:999px; transition: all .25s ease;
}

.mj-joinery-page .nav a:hover {
color: var(--accent); background: rgba(169,109,61,.10); transform: translateY(-1px);
}

.mj-joinery-page .card {
background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 28px;
      transition: transform .25s ease, box-shadow .25s ease;
}

.mj-joinery-page .card h3 {
margin-bottom: 10px;
}

.mj-joinery-page .card p {
margin:0; color: var(--muted);
}

.mj-joinery-page .card:hover {
transform: translateY(-5px); box-shadow: var(--shadow);
}

.mj-joinery-page .challenge-grid {
display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:20px; margin-top:30px;
}

.mj-joinery-page .challenge-card {
position:relative; padding:26px 24px; border-radius:22px; border:1px solid rgba(36,26,20,.08); background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,239,231,.96)); box-shadow: var(--shadow-soft);
      overflow:hidden;
}

.mj-joinery-page .challenge-card::before {
content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--accent), var(--accent-3));
}

.mj-joinery-page .challenge-card strong {
display:block; font-size:18px; color: var(--accent); margin-bottom:10px;
}

.mj-joinery-page .challenge-card p {
line-height:1.7;
}

.mj-joinery-page .grid-4 {
gap: 28px;
}

.mj-joinery-page .service-card {
position:relative; min-height:500px; overflow:hidden; padding:36px; border-radius: 34px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; background: #1e1916; isolation:isolate; box-shadow: 0 22px 50px rgba(31,24,20,.12);
}

.mj-joinery-page .service-card::before {
content:""; position:absolute; inset:0; z-index:-2; background: var(--card-bg, linear-gradient(135deg,#3b261d,#1a1614)); background-size:cover; background-position:center; transition: transform .35s ease; filter: contrast(1.02) saturate(1.02);
}

.mj-joinery-page .service-card::after {
content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.72) 100%);
}

.mj-joinery-page .service-card:hover {
transform: translateY(-8px); box-shadow: 0 30px 65px rgba(31,24,20,.18);
}

.mj-joinery-page .service-card:hover::before {
transform: scale(1.06);
}

.mj-joinery-page .service-card h3 {
color:#fff; margin-bottom:14px; font-size: 26px; letter-spacing: .01em;
}

.mj-joinery-page .service-card p {
color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.8; max-width: 92%;
}

.mj-joinery-page .service-card span {
margin-top:18px; color: #f5ddb9; font-weight:700; letter-spacing: .05em;
}

.mj-joinery-page .service-card::before {
background-blend-mode: luminosity;
}

.mj-joinery-page .service-card::after {
background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.58) 100%);
}

.mj-joinery-page .split {
display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center;
}

.mj-joinery-page .image-frame {
position:relative; overflow:hidden; border-radius: 28px; box-shadow: var(--shadow);
}

.mj-joinery-page .image-frame img {
height:100%; min-height: 420px; object-fit:cover;
}

.mj-joinery-page .image-badge {
position:absolute; left:20px; bottom:20px; padding:14px 16px; max-width:280px; border-radius: 14px; background: rgba(255,255,255,.92); color:var(--text); font-weight:700; backdrop-filter: blur(8px); box-shadow: 0 12px 24px rgba(31,24,20,.08);
}

.mj-joinery-page .metric-grid {
display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-top:24px;
}

.mj-joinery-page .metric {
padding:18px; border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(244,232,220,.95)); border:1px solid rgba(36,26,20,.08); box-shadow: var(--shadow-soft);
}

.mj-joinery-page .metric strong {
display:block; font-size:24px; color: var(--accent);
}

.mj-joinery-page .metric span {
font-size:14px; color: var(--muted);
}

.mj-joinery-page .check-list {
list-style:none; margin:18px 0 0; padding:0;
}

.mj-joinery-page .check-list li {
position:relative; padding-left:24px; margin:10px 0; color: var(--muted);
}

.mj-joinery-page .check-list li::before {
content:"✓"; position:absolute; left:0; top:0; color: var(--accent); font-weight:800;
}

.mj-joinery-page .process {
display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:14px;
}

.mj-joinery-page .step {
position:relative; padding:24px 18px 20px; border-radius: 20px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); min-height: 150px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.mj-joinery-page .step strong {
display:block; color: var(--accent-3); font-size: 32px; margin-bottom:8px;
}

.mj-joinery-page .step span {
font-size:14px; color: rgba(255,255,255,.82);
}

.mj-joinery-page .room-grid {
display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:24px; margin-top:30px;
}

.mj-joinery-page .room-card {
position:relative; overflow:hidden; min-height:550px; border-radius:28px; border:1px solid var(--border); box-shadow: var(--shadow-soft); background:var(--surface); display:flex; align-items:flex-end; isolation:isolate;
      transition: transform .25s ease, box-shadow .25s ease;
}

.mj-joinery-page .room-card::before {
content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(15,12,10,.08) 0%, rgba(15,12,10,.80) 100%);
}

.mj-joinery-page .room-card img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}

.mj-joinery-page .room-card:hover {
transform: translateY(-6px); box-shadow: var(--shadow);
}

.mj-joinery-page .room-card > div {
position:relative; z-index:2; width:100%; padding:28px; color:#fff;
}

.mj-joinery-page .room-card h3 {
font-size:24px; margin-bottom:12px; color:#fff;
}

.mj-joinery-page .room-card ul {
margin:8px 0 0; padding:0; list-style:none; display:grid; gap:8px;
}

.mj-joinery-page .room-card li {
color: rgba(255,255,255,.92); padding-left:16px; position:relative;
}

.mj-joinery-page .room-card li::before {
content:"•"; position:absolute; left:0; color: var(--accent-3);
}

.mj-joinery-page .table-wrap {
overflow-x:auto; border-radius:20px; border:1px solid var(--border); background:#fff; box-shadow: var(--shadow-soft);
}

.mj-joinery-page table {
width:100%; min-width:700px; border-collapse:collapse;
}

.mj-joinery-page th, .mj-joinery-page td {
padding:16px 18px; text-align:left; border-bottom:1px solid var(--border);
}

.mj-joinery-page th {
background:#1e1916; color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.12em;
}

.mj-joinery-page tr:last-child td {
border-bottom:0;
}

.mj-joinery-page .quote-card {
padding:40px; border-radius:28px; background: linear-gradient(135deg, #1f1815 0%, #34271f 100%); color:#fff; position:relative; overflow:hidden;
}

.mj-joinery-page .quote-card::before {
content:"“"; position:absolute; right:30px; top:-20px; font-family: Georgia, serif; font-size:180px; color: rgba(255,255,255,.06);
}

.mj-joinery-page .quote-card p {
font-size: 20px; line-height:1.7; color: rgba(255,255,255,.84); max-width:900px;
}

.mj-joinery-page .quote-card strong {
display:block; margin-top:18px; color: var(--accent-3);
}

.mj-joinery-page .faq {
margin-inline: auto;
}

.mj-joinery-page .faq details {
border:1px solid var(--border); background:#fff; border-radius: 16px; margin-bottom:12px; padding:0 22px; box-shadow: var(--shadow-soft); transition: all .28s ease;
}

.mj-joinery-page .faq details[open] {
background: linear-gradient(135deg, rgba(169,109,61,.04) 0%, rgba(201,138,73,.06) 100%); border-color: var(--accent);
}

.mj-joinery-page .faq summary {
cursor:pointer; list-style:none; padding:20px 0; font-weight:600; display: flex; justify-content: space-between; align-items: center; color: var(--text);
}

.mj-joinery-page .faq summary::-webkit-details-marker {
display:none;
}

.mj-joinery-page .faq summary::after {
content: "+"; font-weight:700; font-size:20px; color: var(--accent); transition: transform .28s ease;
}

.mj-joinery-page .faq details[open] summary::after {
content: "−"; transform: rotate(0deg);
}

.mj-joinery-page .faq p {
margin:0 0 18px; color: var(--muted);
}

.mj-joinery-page .form-card {
border-radius:28px; padding:28px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,239,231,.96)); box-shadow: var(--shadow); border:1px solid var(--border);
}

.mj-joinery-page .field {
display:flex; flex-direction:column; gap:8px;
}

.mj-joinery-page .field label {
font-size:14px; font-weight:700; color: var(--text);
}

.mj-joinery-page .field input, .mj-joinery-page .field select, .mj-joinery-page .field textarea {
width:100%; min-height:48px; border:1px solid rgba(47,36,31,.16); border-radius: 12px; padding:12px 14px; font:inherit; color:var(--text); background:#fff;
}

.mj-joinery-page .field textarea {
min-height:120px; resize:vertical;
}

.mj-joinery-page .field-full {
grid-column:1 / -1;
}

.mj-joinery-page .carousel {
position:relative; margin-top:30px;
}

.mj-joinery-page .carousel-track-wrapper {
overflow:hidden; border-radius:30px; box-shadow: var(--shadow);
}

.mj-joinery-page .carousel-track {
display:flex; transition: transform .45s ease;
}

.mj-joinery-page .carousel-slide {
min-width:100%; position:relative;
}

.mj-joinery-page .carousel-slide img {
width:100%; height:560px; object-fit:cover; display:block;
}

.mj-joinery-page .carousel-copy {
position:absolute; left:24px; right:24px; bottom:24px; z-index:2; padding:28px; border-radius:24px; background: linear-gradient(180deg, rgba(13,11,9,.05), rgba(13,11,9,.88)); color:#fff; max-width:560px;
}

.mj-joinery-page .carousel-copy span {
display:inline-block; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color: var(--accent-3); margin-bottom:8px;
}

.mj-joinery-page .carousel-copy h3 {
font-size:28px; margin:0 0 10px;
}

.mj-joinery-page .carousel-copy p {
margin:0; font-size:16px; line-height:1.8; color: rgba(255,255,255,.92);
}

.mj-joinery-page .carousel-button {
position:absolute; top:50%; transform: translateY(-50%); width:56px; height:56px; border-radius:50%; border:none; background: rgba(255,255,255,.92); color: var(--text); font-size:30px; cursor:pointer; box-shadow: var(--shadow-soft); transition: transform .2s ease, background .2s ease; z-index:3;
}

.mj-joinery-page .carousel-button:hover {
transform: translateY(-50%) scale(1.05); background: #fff;
}

.mj-joinery-page .carousel-button.prev {
left:18px;
}

.mj-joinery-page .carousel-button.next {
right:18px;
}

.mj-joinery-page .carousel-dots {
display:flex; justify-content:center; gap:10px; margin-top:18px;
}

.mj-joinery-page .carousel-dot {
width:12px; height:12px; border-radius:50%; border:1px solid rgba(36,26,20,.18); background: rgba(255,255,255,.65); cursor:pointer; transition: background .25s ease, transform .25s ease;
}

.mj-joinery-page .carousel-dot.active {
background: var(--accent); transform: scale(1.15);
}

.mj-joinery-page .whatsapp {
position:fixed; right:22px; bottom:22px; z-index:50; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#fff; font-size:24px; font-weight:800; box-shadow:0 16px 36px rgba(0,0,0,.22);
}

@media (max-width: 1100px) {
.mj-joinery-page .grid-4 {
grid-template-columns: repeat(2,1fr);
}

.mj-joinery-page .metric-grid {
grid-template-columns: repeat(2,1fr);
}

.mj-joinery-page .process {
grid-template-columns: repeat(4, minmax(0,1fr));
}

.mj-joinery-page .split {
grid-template-columns: 1fr;
}
}

@media (max-width: 820px) {
.mj-joinery-page .section {
padding: 72px 0;
}

.mj-joinery-page .grid-2, .mj-joinery-page .grid-3 {
grid-template-columns: 1fr;
}

.mj-joinery-page .hero {
min-height: 860px;
}

.mj-joinery-page .hero-stats {
grid-template-columns: 1fr;
}

.mj-joinery-page .room-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mj-joinery-page .process {
grid-template-columns: repeat(2, minmax(0,1fr));
}

.mj-joinery-page .metric-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 560px) {
.mj-joinery-page .container {
width: min(100% - 28px, var(--max));
}

.mj-joinery-page .btn-row {
flex-direction:column;
}

.mj-joinery-page .btn {
width:100%;
}

.mj-joinery-page .hero-content {
padding: 100px 0 70px;
}

.mj-joinery-page .grid-4 {
grid-template-columns: 1fr;
}

.mj-joinery-page .room-grid {
grid-template-columns: 1fr;
}

.mj-joinery-page .challenge-grid {
grid-template-columns: 1fr;
}

.mj-joinery-page .process {
grid-template-columns: 1fr;
}

.mj-joinery-page .quote-card {
padding: 28px;
}
}

.mj-joinery-page { width: 100%; overflow: clip; }
.mj-joinery-page button { font-family: inherit; }
body.admin-bar .mj-joinery-page .nav-wrap { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .mj-joinery-page .nav-wrap { top: 46px; }
}