/*
Theme Name: MK Hair Expert Premium
Theme URI: https://penangheadspa.com
Author: MK Hair Expert
Description: Bespoke five-page English website for MK Hair Expert, Penang.
Version: 1.2.2
Text Domain: mk-hair-expert
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  color-scheme: only light;
  --ink: #171513;
  --ink-soft: #fffdfa;
  --panel: #ead8c3;
  --white: #fffdfa;
  --paper: #f4f1ec;
  --stone: #deddd9;
  --sand: #e3c29e;
  --silver: #7d756c;
  --muted: #746f69;
  --line: rgba(28,24,20,.14);
  --gold: #a97845;
  --max: 1240px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
body.page main { background:#f4f1ec; color:#171513; }
body.page .page-hero { background:linear-gradient(135deg,#f8f5f0,#e5d6c5); color:#171513; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: #fff; color: #000; padding: 10px 16px; }
.skip-link:focus { top: 16px; }
.site-shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,250,.92); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.header-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 230px; }
.brand img { width: 74px; height: 58px; object-fit: cover; object-position: center; }
.brand-copy { line-height: 1.1; }
.brand-copy strong { display: block; letter-spacing: .17em; font-size: .83rem; }
.brand-copy span { display: block; margin-top: 6px; color: var(--muted); letter-spacing: .2em; font-size: .58rem; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 25px; }
.main-nav a { color: #393530; font-size: .86rem; letter-spacing: .03em; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus, .main-nav .current { color: #000; }
.nav-cta, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; letter-spacing: .04em; font-weight: 600;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.main-nav .nav-cta { color:#fff; }
.main-nav .nav-cta:hover, .main-nav .nav-cta:focus { color:#fff; background:#3a332d; }
.nav-cta:hover, .button:hover { transform: translateY(-2px); background: #3a332d; color: #fff; }
.button.button-ghost { background: transparent; color: var(--ink); border-color: rgba(23,21,19,.55); }
.button.button-ghost:hover { background: var(--ink); color: #fff; }
.button.button-gold { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu-toggle { display: none; background: transparent; color: var(--ink); border: 0; width: 44px; height: 44px; padding: 9px; }
.menu-toggle span { display: block; height: 1px; background: currentColor; margin: 7px 0; transition: transform .2s ease; }

.eyebrow { margin: 0 0 16px; color: var(--gold); font-size: .73rem; letter-spacing: .23em; text-transform: uppercase; }
.display, h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(3rem, 6.3vw, 6.8rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.2rem, 4.2vw, 4.5rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }
p { margin: 0 0 1.3rem; color: #5e5953; }
.lead { font-size: clamp(1.03rem, 1.45vw, 1.3rem); line-height: 1.65; color: #4f4a45; }
.fine-print { color: var(--muted); font-size: .77rem; }
.accent { color: var(--gold); font-style: italic; }
.silver-line { width: 88px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 28px 0; }

.hero { min-height: min(790px, calc(100vh - 90px)); display: grid; grid-template-columns: .88fr 1.12fr; background:linear-gradient(135deg,#f7f4ef,#ede7df); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 86px max(5vw, 40px) 86px max(calc((100vw - var(--max))/2), 24px); }
.hero-copy .lead { max-width: 640px; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-media { position: relative; min-height: 620px; overflow: hidden; background: var(--sand); display:flex; align-items:center; padding:38px; }
.hero-media > img { width:100%;height:auto;max-height:calc(100vh - 150px);object-fit:contain;object-position:center;filter:none;box-shadow:0 28px 70px rgba(53,42,31,.16); }
.hero-media::after { content:none; }
.brand-stage { position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:35px;overflow:hidden; }
.brand-stage img { position:relative;z-index:2;width:min(56%,430px);height:auto;box-shadow:0 40px 100px rgba(0,0,0,.45); }
.brand-stage p { position:relative;z-index:2;margin:0;color:#b9bdc3;font-size:.7rem;letter-spacing:.22em; }
.brand-stage i { color:var(--gold);font-style:normal;margin:0 9px; }
.orbit { position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%; }
.orbit-one { width:72%;aspect-ratio:1; }
.orbit-two { width:49%;aspect-ratio:1;border-color:rgba(212,179,107,.18); }
.hero-tag { position: absolute; z-index: 2; right: 52px; bottom: 52px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.55); background: rgba(23,21,19,.88); color:#fff; letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; }
.hero-copy > * { opacity:0;animation:hero-copy-in .72s cubic-bezier(.22,1,.36,1) forwards; }
.hero-copy > :nth-child(1) { animation-delay:.08s; }
.hero-copy > :nth-child(2) { animation-delay:.16s; }
.hero-copy > :nth-child(3) { animation-delay:.25s; }
.hero-copy > :nth-child(4) { animation-delay:.34s; }
.hero-media > img { opacity:0;animation:hero-image-in 1.05s cubic-bezier(.22,1,.36,1) .18s forwards; }
.hero-tag { opacity:0;animation:hero-copy-in .65s cubic-bezier(.22,1,.36,1) .65s forwards; }
@keyframes hero-copy-in { from { opacity:0;transform:translateY(20px); } to { opacity:1;transform:none; } }
@keyframes hero-image-in { from { opacity:0;transform:scale(1.025); } to { opacity:1;transform:scale(1); } }

.trust-strip { border-block: 1px solid var(--line); background:#fff; }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.trust-item { padding: 28px 40px; border-right: 1px solid var(--line); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: 0; }
.trust-item strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; }
.trust-item span { color: var(--muted); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
.trust-item .trust-title { display:flex;align-items:center;gap:11px;margin-bottom:5px; }
.trust-item .trust-title strong { line-height:1.15; }
.trust-item .trust-stars { display:block;color:#a97845;font-size:.75rem;line-height:1;letter-spacing:.16em;margin:3px 0 8px; }

.section { padding: 120px 0; }
.section-tight { padding: 82px 0; }
.section-light { background: var(--white); color: var(--ink); }
.section-light p, .section-light .lead { color: #5a554f; }
.section-silver { background: linear-gradient(135deg,#e8d4bc,#d9b791); color:var(--ink); }
.section-silver p { color: #4f4439; }
.section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: end; margin-bottom: 54px; }
.section-head p { max-width: 680px; margin-bottom: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 7vw, 100px); align-items: center; }

.head-spa-feature { margin-bottom:64px; }
.head-spa-photo { margin:0; min-width:0; }
.head-spa-photo img { display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 20px 54px rgba(49,39,29,.09); }
.head-spa-photo figcaption { margin-top:10px; color:var(--muted); font-size:.72rem; letter-spacing:.02em; }
.journey-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.journey-card { min-height: 460px; position: relative; padding: 52px; background: #fff; border:1px solid var(--line); overflow: hidden; box-shadow:0 22px 60px rgba(49,39,29,.06); }
.journey-card:nth-child(2) { background:var(--sand); }
.journey-card::before { content:""; position:absolute; inset:0; opacity:.4; background: radial-gradient(circle at 100% 0,rgba(255,255,255,.8),transparent 45%); }
.journey-card > * { position: relative; }
.journey-number { color: var(--gold); font-size: .75rem; letter-spacing: .2em; }
.journey-card h3 { max-width: 420px; margin: 90px 0 22px; font-size: clamp(2rem,3vw,3.2rem); }
.journey-card p { max-width: 500px; }
.text-link { display: inline-flex; align-items:center; gap:10px; margin-top:20px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; }

.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { padding: 34px; background: #fff; border: 1px solid var(--line); border-top:3px solid #c9a277; min-height: 300px; display: flex; flex-direction: column; box-shadow:0 18px 48px rgba(49,39,29,.045); }
.service-card .icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--silver); border: 1px solid var(--line); border-radius: 50%; margin-bottom: 50px; }
.service-card h3 { font-size: 1.7rem; margin-bottom: 14px; }
.service-card p { font-size: .93rem; }
.service-card .meta { margin-top:auto; padding-top:24px; color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.section-light .service-card { background:#fff; border-color:#d9dadd; }
.section-light .service-card p { color:#55585e; }

.image-frame { position: relative; overflow: hidden; min-height: 560px; background:#151619; }
.image-frame img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:contrast(1.04) saturate(.82) brightness(1.04); }
.image-frame::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.2); pointer-events:none; }
.philosophy-panel { min-height:560px;position:relative;display:flex;align-items:flex-end;padding:54px;background:linear-gradient(145deg,#292521,#151311 72%);color:#fff;border:1px solid rgba(0,0,0,.2);overflow:hidden; }
.philosophy-panel p { color:#d8d0c8; }
.philosophy-panel::before { content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(212,179,107,.2);border-radius:50%;right:-130px;top:-110px;box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012); }
.philosophy-panel > div { position:relative;z-index:2; }
.philosophy-panel h3 { font-size:clamp(2.2rem,4vw,4.3rem); }
.vertical-word { position:absolute;right:28px;bottom:38px;color:rgba(255,255,255,.24);font-size:.66rem;letter-spacing:.25em;writing-mode:vertical-rl; }
.story-copy { max-width: 590px; }
.signature { font-family:var(--serif); font-size:2rem; font-style:italic; color:var(--gold); margin-top:28px; }

.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.metric { padding:42px; border-right:1px solid var(--line); }
.metric:first-child { padding-left:0; }
.metric:last-child { border-right:0; }
.metric strong { display:block; font-family:var(--serif); font-size:3rem; font-weight:500; }
.metric span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.metric .metric-kicker { display:flex;align-items:center;gap:9px;min-height:24px;margin-bottom:6px;color:#4b4742;font-size:.68rem; }
.metric-icon { width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round; }
.metric-google { position:relative;color:var(--ink);text-decoration:none; }
.metric-google::after { content:"";position:absolute;inset:16px;border:1px solid rgba(23,21,19,.13);opacity:0;transform:scale(.98);transition:opacity .3s ease,transform .3s ease;pointer-events:none; }
.google-g { display:inline-grid !important;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4 !important;font-size:1rem !important;font-weight:700;letter-spacing:0 !important;text-transform:none !important;box-shadow:0 2px 7px rgba(0,0,0,.08); }
.metric-google .metric-stars { display:block;color:#9a6a36;font-size:.9rem;letter-spacing:.18em;line-height:1;margin:-3px 0 12px;text-transform:none; }
.metric-google .review-link { display:block;margin-top:13px;color:var(--ink);font-size:.66rem; }

.page-hero { padding: 110px 0 86px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; background:linear-gradient(135deg,#f8f5f0,#e5d6c5); }
.page-hero::after { content:"MK"; position:absolute; right:-2vw; bottom:-7vw; font-family:var(--serif); font-size:clamp(12rem,28vw,30rem); line-height:1; color:rgba(111,79,48,.055); pointer-events:none; }
.page-hero h1 { max-width:1050px; }
.page-hero .lead { max-width:760px; margin-top:28px; }
.breadcrumb { color:var(--muted); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:38px; }

.service-group { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; padding:72px 0; border-top:1px solid var(--line); }
.service-group:first-child { border-top:0; padding-top:0; }
.service-list { display:grid; gap:0; border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:42px 1fr auto; gap:20px; align-items:start; padding:26px 0; border-bottom:1px solid var(--line); }
.service-row .num { color:var(--muted); font-size:.75rem; padding-top:4px; }
.service-row h3 { font-family:var(--sans); font-size:1.05rem; font-weight:600; letter-spacing:.01em; margin-bottom:6px; }
.service-row p { margin:0; font-size:.9rem; max-width:620px; }
.service-row .tag { color:var(--silver); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; }
.note-box { padding:36px; border:1px solid var(--line); background:#fff; box-shadow:0 20px 60px rgba(49,39,29,.06); }

.timeline { border-left:1px solid var(--line); margin-left:12px; }
.timeline-item { position:relative; padding:0 0 58px 46px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); position:absolute; left:-5px; top:9px; box-shadow:0 0 0 8px rgba(212,179,107,.1); }
.timeline-item time { color:var(--gold); font-size:.77rem; letter-spacing:.15em; }
.timeline-item h3 { margin:8px 0 12px; }

.credential-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; }
.certificate-photo { min-height:520px; background:#e7ddd2; overflow:hidden; border:1px solid var(--line); }
.certificate-photo img { width:100%; height:100%; object-fit:cover; filter:none; }
.credential-stack { display:grid; gap:18px; }
.credential-card { padding:38px; border:1px solid var(--line); background:#fff; }
.credential-card .seal { width:54px;height:54px;border:1px solid var(--gold);color:var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.2rem;margin-bottom:55px; }
.credential-card small { color:var(--muted);text-transform:uppercase;letter-spacing:.12em; }
.credential-card h3 { margin:10px 0 15px; }

.result-feature { display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);background:#fff;box-shadow:0 24px 70px rgba(49,39,29,.06); }
.result-image { min-height:680px; background:#e6ddd4; overflow:hidden; }
.result-image img { width:100%;height:100%;object-fit:cover;filter:none; }
.result-copy { padding:56px;display:flex;flex-direction:column;justify-content:center; }
.result-copy ul { list-style:none;padding:0;margin:28px 0; }
.result-copy li { padding:13px 0;border-bottom:1px solid var(--line);color:#49443f; }

.review-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.review-card { padding:36px;border:1px solid rgba(54,40,27,.16);background:#fff;box-shadow:0 18px 48px rgba(49,39,29,.045); }
.stars { color:var(--gold);letter-spacing:.13em;font-size:.78rem;margin-bottom:24px; }
.review-card blockquote { margin:0 0 28px;font-family:var(--serif);font-size:1.35rem;line-height:1.45; }
.review-card cite { color:var(--muted);font-style:normal;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; }

.contact-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:80px; }
.contact-list { margin:38px 0 0;border-top:1px solid var(--line); }
.contact-list a, .contact-list div { display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line); }
.contact-list span { color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; }
.contact-list strong { font-weight:500;color:var(--ink); }
.enquiry-form { padding:42px;background:#fff;color:#111;border:1px solid var(--line);box-shadow:0 24px 70px rgba(49,39,29,.08); }
.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.field { display:grid;gap:8px;margin-bottom:18px; }
.field label { font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#55595e; }
.field input, .field select, .field textarea { width:100%;border:0;border-bottom:1px solid #aeb1b5;background:transparent;border-radius:0;padding:12px 2px;color:#111;outline:none; }
.field textarea { min-height:110px;resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:#111; }
.enquiry-form .button { width:100%;background:#0b0c0d;color:#fff;border-color:#0b0c0d;cursor:pointer;margin-top:10px; }
.map-wrap { min-height:430px; }
.map-wrap iframe { width:100%;height:430px;border:0;filter:none; }

.faq-list { max-width:900px;margin-inline:auto;border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%;display:flex;justify-content:space-between;gap:24px;padding:26px 0;background:transparent;color:var(--ink);border:0;text-align:left;cursor:pointer;font-family:var(--serif);font-size:1.25rem; }
.faq-question::after { content:"+";font-family:var(--sans);font-weight:300; }
.faq-question[aria-expanded="true"]::after { content:"−"; }
.faq-answer { max-height:0;overflow:hidden;opacity:0;padding:0 54px 0 0;transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .28s ease,padding .42s ease; }
.faq-answer p { margin:0; }
.faq-question[aria-expanded="true"] + .faq-answer { max-height:360px;opacity:1;padding-bottom:24px; }

.cta-band { position:relative;overflow:hidden;border-block:1px solid var(--line);background:#e5c6a4; }
.cta-band-inner { display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;padding:78px 0; }
.cta-band h2 { max-width:800px;font-size:clamp(2.2rem,4.6vw,5rem); }

.site-footer { padding:78px 0 28px;border-top:1px solid var(--line);background:#050606; }
.site-footer p { color:#aaa39b; }
.footer-grid { display:grid;grid-template-columns:1.15fr .7fr .8fr .9fr;gap:54px; }
.footer-brand img { width:140px;height:110px;object-fit:cover; }
.footer-brand p { max-width:330px;margin-top:20px;font-size:.9rem; }
.footer-col h3 { font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;color:#d8d0c8; }
.footer-col a, .footer-col span { display:block;color:#b9bcc1;font-size:.88rem;margin:10px 0; }
.footer-col a:hover { color:#fff; }
.social-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:24px;max-width:330px; }
.social-row a { min-height:44px;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:9px;padding:7px 11px;color:#e8e5e1;font-size:.72rem;margin:0;transition:border-color .25s ease,background .25s ease,transform .25s ease; }
.social-row a span { color:inherit;font-size:inherit;margin:0; }
.social-icon { width:18px;height:18px;flex:0 0 18px;fill:currentColor; }
.social-icon-stroke { fill:none;stroke:currentColor;stroke-width:1.8; }
.social-icon-stroke .social-dot { fill:currentColor;stroke:none; }
.social-monogram { display:inline-grid !important;place-items:center;width:21px;height:21px;flex:0 0 21px;border-radius:5px;color:#fff !important;font-size:.48rem !important;font-weight:700;letter-spacing:.02em;line-height:1; }
.social-monogram-red { background:#e62d35; }
.social-monogram-google { border-radius:50%;background:#fff;color:#4285f4 !important;font-size:.92rem !important; }
.footer-whatsapp-button { display:flex !important;align-items:center;gap:12px;margin-top:22px !important;padding:12px 14px;border:1px solid rgba(255,255,255,.25);background:#183d2b;color:#fff !important;max-width:245px;transition:transform .25s ease,background .25s ease,border-color .25s ease; }
.footer-whatsapp-button svg { width:27px;height:27px;flex:0 0 27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.footer-whatsapp-button span { margin:0;color:#fff;font-size:.78rem;line-height:1.25; }
.footer-whatsapp-button small { display:block;color:#cbd8d0;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; }
.footer-whatsapp-button strong { display:block;margin-top:3px;font-size:.88rem;letter-spacing:.02em; }
.footer-bottom { display:flex;justify-content:space-between;gap:28px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);color:#8f8b86;font-size:.75rem; }

.floating-whatsapp { position:fixed;z-index:90;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#1f6d47;color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .25s ease,background .25s ease; }
.floating-whatsapp svg { width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.reveal { opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1;transform:none; }
.journey-grid.reveal .journey-card, .card-grid.reveal .service-card, .metric-grid.reveal .metric { opacity:0;transform:translateY(22px);transition:opacity .62s ease,transform .62s cubic-bezier(.22,1,.36,1),box-shadow .3s ease; }
.journey-grid.reveal.visible .journey-card, .card-grid.reveal.visible .service-card, .metric-grid.reveal.visible .metric { opacity:1;transform:none; }
.journey-grid.reveal.visible .journey-card:nth-child(2), .card-grid.reveal.visible .service-card:nth-child(2), .metric-grid.reveal.visible .metric:nth-child(2) { transition-delay:.1s; }
.card-grid.reveal.visible .service-card:nth-child(3), .metric-grid.reveal.visible .metric:nth-child(3) { transition-delay:.2s; }

@media (hover:hover) {
  .journey-card:hover, .service-card:hover, .review-card:hover { transform:translateY(-5px);box-shadow:0 28px 70px rgba(49,39,29,.1); }
  .metric-google:hover::after { opacity:1;transform:scale(1); }
  .social-row a:hover { transform:translateY(-2px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.42); }
  .footer-whatsapp-button:hover { transform:translateY(-2px);background:#245a3e;border-color:rgba(255,255,255,.5); }
  .floating-whatsapp:hover { transform:translateY(-3px) scale(1.03);background:#245a3e; }
}

@media (max-width: 1040px) {
  /* Keep the fixed menu relative to the viewport, including on iOS Safari. */
  .site-header { backdrop-filter:none; -webkit-backdrop-filter:none; background:#fffdfa; }
  .main-nav.open { z-index:101; height:calc(100vh - 90px); height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  body.menu-open .floating-whatsapp { visibility:hidden; }
  .main-nav { position:fixed;inset:90px 0 0;background:#fffdfa;padding:44px 24px;display:none;flex-direction:column;align-items:flex-start;gap:0; }
  .main-nav.open { display:flex; }
  .main-nav a { width:100%;padding:18px 0;border-bottom:1px solid var(--line);font-size:1.1rem; }
  .main-nav .nav-cta { margin-top:24px;width:auto;padding-inline:22px; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:560px;padding:80px 24px; }
  .hero-media { min-height:auto;padding:28px; }
  .section-head, .service-group, .contact-grid { grid-template-columns:1fr;gap:38px; }
  .section-head { align-items:start; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .credential-grid, .result-feature { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 700px) {
  .site-shell { width:min(calc(100% - 32px),var(--max)); }
  .header-inner { min-height:76px; }
  .brand { min-width:0; }
  .brand img { width:58px;height:46px; }
  .brand-copy strong { font-size:.72rem; }
  .brand-copy span { display:none; }
  .main-nav { inset:76px 0 0; }
  .main-nav.open { height:calc(100vh - 76px); height:calc(100dvh - 76px); }
  .hero { min-height:auto; }
  .hero-copy { min-height:auto;padding:68px 16px 60px; }
  .hero-media { min-height:auto;padding:16px; }
  .hero-media > img { max-height:none; }
  .hero-tag { right:28px;bottom:28px; }
  h1 { font-size:clamp(3.1rem,15vw,4.8rem); }
  .page-hero { padding:72px 0 58px; }
  .section { padding:78px 0; }
  .section-tight { padding:58px 0; }
  .trust-grid, .metric-grid { grid-template-columns:1fr; }
  .trust-item, .metric, .metric:first-child { padding:22px 0;border-right:0;border-bottom:1px solid var(--line); }
  .trust-item:last-child, .metric:last-child { border-bottom:0; }
  .journey-grid, .card-grid, .review-grid, .split, .footer-grid { grid-template-columns:1fr; }
  .journey-card { min-height:390px;padding:32px; }
  .journey-card h3 { margin-top:66px; }
  .service-row { grid-template-columns:32px 1fr; }
  .service-row .tag { grid-column:2; }
  .image-frame { min-height:420px; }
  .certificate-photo { min-height:410px; }
  .result-image { min-height:510px; }
  .result-copy, .enquiry-form { padding:30px; }
  .field-grid { grid-template-columns:1fr;gap:0; }
  .contact-list a, .contact-list div { grid-template-columns:1fr;gap:4px; }
  .cta-band-inner { grid-template-columns:1fr;padding:58px 0; }
  .footer-bottom { flex-direction:column;margin-top:42px; }
  .footer-whatsapp-button { max-width:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important;transition-duration:.01ms !important; }
  .reveal { opacity:1;transform:none; }
  .hero-copy > *, .hero-media > img, .hero-tag, .journey-grid.reveal .journey-card, .card-grid.reveal .service-card, .metric-grid.reveal .metric { opacity:1;transform:none;animation:none !important; }
}