/* ══════════════════════════════════════════════════════
HAIRLAB DUBAI — Global Styles for Tilda
Paste into: Site Settings → Custom CSS
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap');
:root {
--hl-bg: #b8b0a4;
--hl-bg-lt: #cec8c0;
--hl-bg-dk: #2c2825;
--hl-bg-card: #d4cec7;
--hl-bg-cream: #f5f2ee;
--hl-txt: #1e1b18;
--hl-txt-mid: #4a4540;
--hl-txt-lt: #f5f2ee;
--hl-txt-muted:#8a8178;
--hl-border: rgba(30,27,24,0.2);
--hl-serif: 'Cormorant Garamond', Georgia, serif;
--hl-sans: 'Montserrat', Arial, sans-serif;
--hl-tr: 0.28s ease;
--hl-mw: 1100px;
--hl-py: 80px;
}
.hl * { box-sizing: border-box; }
.hl img { display: block; max-width: 100%; height: auto; }
.hl a { text-decoration: none; color: inherit; }
.hl ul { list-style: none; padding: 0; margin: 0; }
.hl { font-family: var(--hl-sans); -webkit-font-smoothing: antialiased; color: var(--hl-txt); }
/* Sections */
.hl-s { width:100%; padding: var(--hl-py) 20px; background: var(--hl-bg); }
.hl-s-lt { background: var(--hl-bg-lt) !important; }
.hl-s-dk { background: var(--hl-bg-dk) !important; }
.hl-s-cr { background: var(--hl-bg-cream) !important; }
.hl-w { max-width: var(--hl-mw); margin: 0 auto; }
.hl-wm { max-width: 860px; margin: 0 auto; }
.hl-ws { max-width: 620px; margin: 0 auto; }
/* Typography */
.hl-display { font-family: var(--hl-serif); font-size: clamp(2.4rem,6vw,5rem); font-weight: 300; letter-spacing: 0.03em; line-height: 1.08; }
.hl-h1 { font-family: var(--hl-serif); font-size: clamp(1.9rem,4vw,3.2rem); font-weight: 400; letter-spacing: 0.05em; line-height: 1.18; }
.hl-h2 { font-family: var(--hl-serif); font-size: clamp(1.5rem,3vw,2.5rem); font-weight: 400; letter-spacing: 0.05em; line-height: 1.22; }
.hl-h3 { font-family: var(--hl-serif); font-size: clamp(1.1rem,2vw,1.7rem); font-weight: 400; letter-spacing: 0.04em; line-height: 1.3; }
.hl-label { font-family: var(--hl-sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hl-txt-muted); }
.hl-body { font-family: var(--hl-sans); font-size: 0.87rem; font-weight: 300; line-height: 1.8; color: var(--hl-txt-mid); }
.hl-micro { font-family: var(--hl-sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; color: var(--hl-txt-muted); }
.hl-lt { color: var(--hl-txt-lt) !important; }
.hl-div { width: 44px; height: 1px; background: var(--hl-txt-muted); margin: 16px 0; }
.hl-div-c { margin: 16px auto; }
.hl-div-lt { background: rgba(245,242,238,0.3); }
/* Buttons */
.hl-btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 34px; font-family:var(--hl-sans); font-size:0.66rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; border:1px solid var(--hl-txt); background:transparent; color:var(--hl-txt); transition:background var(--hl-tr),color var(--hl-tr); border-radius:2px; white-space:nowrap; cursor:pointer; }
.hl-btn:hover { background:var(--hl-txt); color:var(--hl-txt-lt); }
.hl-btn-f { background:var(--hl-txt); color:var(--hl-txt-lt); }
.hl-btn-f:hover { background:transparent; color:var(--hl-txt); }
.hl-btn-l { border-color:var(--hl-txt-lt); color:var(--hl-txt-lt); }
.hl-btn-l:hover { background:var(--hl-txt-lt); color:var(--hl-txt); }
.hl-btn-sm { padding:10px 22px; font-size:0.6rem; }
.hl-btns { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* Grid */
.hl-g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.hl-g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hl-g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hl-card { background:var(--hl-bg-card); padding:32px 28px; border:1px solid var(--hl-border); }
/* Service split layout */
.hl-split { display:grid; grid-template-columns:1fr 1fr; }
.hl-split-img img { width:100%; height:100%; object-fit:cover; min-height:400px; }
.hl-split-txt { padding:56px 48px; display:flex; flex-direction:column; justify-content:center; background:var(--hl-bg-lt); }
.hl-svc-tag { display:inline-block; font-family:var(--hl-sans); font-size:0.56rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; border:1px solid var(--hl-border); padding:5px 12px; margin-bottom:16px; color:var(--hl-txt-muted); }
.hl-inc li { font-family:var(--hl-sans); font-size:0.8rem; font-weight:300; color:var(--hl-txt-mid); padding:8px 0; border-bottom:1px solid var(--hl-border); display:flex; gap:10px; }
.hl-inc li::before { content:'—'; color:var(--hl-txt-muted); flex-shrink:0; }
/* Pricing */
.hl-pt { width:100%; border-collapse:collapse; }
.hl-pt th { font-family:var(--hl-sans); font-size:0.58rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--hl-txt-muted); padding:12px 14px; text-align:left; border-bottom:1px solid var(--hl-border); background:var(--hl-bg-lt); }
.hl-pt th:not(:first-child) { text-align:center; }
.hl-pt td { font-family:var(--hl-sans); font-size:0.8rem; font-weight:300; color:var(--hl-txt-mid); padding:13px 14px; border-bottom:1px solid var(--hl-border); }
.hl-pt td:not(:first-child) { text-align:center; font-weight:400; color:var(--hl-txt); }
.hl-pt-cat { font-family:var(--hl-sans); font-size:0.58rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--hl-txt-muted); padding:18px 14px 6px !important; background:var(--hl-bg-lt) !important; border-bottom:none !important; }
.hl-entry { background:var(--hl-bg-card); border:1px solid var(--hl-border); padding:32px 24px; text-align:center; }
.hl-entry-p { font-family:var(--hl-serif); font-size:3rem; font-weight:300; line-height:1; }
.hl-entry-c { font-family:var(--hl-sans); font-size:0.62rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--hl-txt-muted); margin-bottom:14px; }
/* FAQ */
.hl-faq-item { border-bottom:1px solid var(--hl-border); }
.hl-faq-q { display:flex; justify-content:space-between; align-items:center; padding:20px 0; cursor:pointer; gap:16px; }
.hl-faq-q-txt { font-family:var(--hl-sans); font-size:0.88rem; font-weight:400; color:var(--hl-txt-mid); line-height:1.4; }
.hl-faq-icon { width:24px; height:24px; flex-shrink:0; border:1px solid var(--hl-border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--hl-txt-muted); transition:transform 0.28s; }
.hl-faq-item.open .hl-faq-icon { transform:rotate(45deg); }
.hl-faq-a { display:none; padding-bottom:20px; }
.hl-faq-item.open .hl-faq-a { display:block; }
/* Quiz */
.hl-quiz { max-width:600px; margin:0 auto; background:var(--hl-bg-card); border:1px solid var(--hl-border); padding:48px 40px; }
.hl-quiz-prog { display:flex; gap:6px; margin-bottom:32px; }
.hl-quiz-dot { flex:1; height:2px; background:var(--hl-border); transition:background 0.3s; }
.hl-quiz-dot.on { background:var(--hl-txt); }
.hl-quiz-step { display:none; }
.hl-quiz-step.on { display:block; }
.hl-quiz-q { font-family:var(--hl-serif); font-size:clamp(1.3rem,3vw,1.85rem); font-weight:400; letter-spacing:0.04em; line-height:1.3; margin-bottom:24px; }
.hl-quiz-opts { display:flex; flex-direction:column; gap:8px; }
.hl-quiz-opt { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--hl-border); background:transparent; cursor:pointer; transition:all 0.28s; text-align:left; width:100%; font-family:var(--hl-sans); font-size:0.8rem; font-weight:300; color:var(--hl-txt-mid); border-radius:2px; }
.hl-quiz-opt:hover { border-color:var(--hl-txt); color:var(--hl-txt); }
.hl-quiz-opt.sel { border-color:var(--hl-txt); background:var(--hl-txt); color:var(--hl-txt-lt); }
.hl-quiz-marker { width:16px; height:16px; border:1px solid currentColor; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.5rem; }
.hl-quiz-opt.sel .hl-quiz-marker::after { content:'✓'; }
.hl-quiz-result { display:none; }
.hl-quiz-result.on { display:block; }
.hl-quiz-detail { background:var(--hl-bg); border:1px solid var(--hl-border); padding:16px 20px; margin:18px 0 24px; }
/* Trust strip */
.hl-trust-n { font-family:var(--hl-serif); font-size:2rem; font-weight:300; color:var(--hl-txt-lt); line-height:1; }
.hl-trust-l { font-family:var(--hl-sans); font-size:0.56rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(245,242,238,0.4); margin-top:4px; }
/* Method */
.hl-method-step { display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--hl-border); }
.hl-method-n { font-family:var(--hl-serif); font-size:2.2rem; font-weight:300; color:var(--hl-txt-muted); line-height:1; flex-shrink:0; width:46px; }
/* Results filter */
.hl-filter-btn { font-family:var(--hl-sans); font-size:0.58rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; padding:7px 16px; border:1px solid var(--hl-border); background:transparent; color:var(--hl-txt-muted); cursor:pointer; transition:all 0.28s; border-radius:2px; }
.hl-filter-btn:hover,.hl-filter-btn.on { border-color:var(--hl-txt); color:var(--hl-txt); background:rgba(30,27,24,0.06); }
.hl-result-card { background:var(--hl-bg-card); border:1px solid var(--hl-border); overflow:hidden; }
.hl-result-imgs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hl-border); }
.hl-result-imgs img { width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Contact */
.hl-contact-lbl { font-family:var(--hl-sans); font-size:0.6rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(245,242,238,0.4); margin-bottom:7px; }
.hl-contact-val { font-family:var(--hl-serif); font-size:1.1rem; color:var(--hl-txt-lt); }
/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 960px) {
:root { --hl-py: 60px; }
.hl-g4 { grid-template-columns: repeat(2,1fr); }
.hl-split { grid-template-columns: 1fr; }
.hl-split-img img { min-height: 260px; }
.hl-split-txt { padding: 36px 28px; }
}
@media (max-width: 768px) {
:root { --hl-py: 48px; }
.hl-g2, .hl-g3 { grid-template-columns: 1fr; }
.hl-g4 { grid-template-columns: 1fr 1fr; }
.hl-quiz { padding: 32px 20px; }
.hl-pt th, .hl-pt td { padding: 9px 10px; font-size: 0.74rem; }
.hl-split-txt { padding: 28px 20px; }
}
@media (max-width: 480px) {
:root { --hl-py: 40px; }
.hl-g4 { grid-template-columns: 1fr; }
.hl-btn { padding: 11px 22px; font-size: 0.62rem; }
.hl-card { padding: 22px 16px; }
.hl-quiz { padding: 24px 14px; }
.hl-faq-q-txt { font-size: 0.82rem; }
}