/* ============================================================
   ZMG — Public marketing + stays site
   Matched to the ZMG corporate reference: Playfair Display display type,
   navy #0D1B2A / deep #080F18 / gold #C9A84C / off-white #F9FAFB,
   square corners, small-caps eyebrows.
   ============================================================ */

.pub {
    --navy: #0d1b2a;
    --navy-deep: #080f18;
    --navy-soft: #16283b;
    --gold: #c9a84c;
    --gold-2: #b3923f;
    --gold-soft: rgba(201, 168, 76, 0.1);
    --ink: #0f1824;
    --body: #47566d;
    --muted: #8a97ad;
    --cream: #f9fafb;
    --line: #dae0e7;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.pub * { box-sizing: border-box; }
.pub h1, .pub h2, .pub h3, .pub h4 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; color: var(--ink); font-weight: 700; line-height: 1.15; margin: 0; }
.pub a { color: var(--navy); text-decoration: none; }
.pub p { margin: 0; }
.pub img { max-width: 100%; }

.pub-container { max-width: 1200px; margin: 0 auto; padding: 0 26px; }
.pub-section { padding: 90px 0; }
.pub-section.tight { padding: 62px 0; }
.pub-section.cream { background: var(--cream); }
.pub-section.navy { background: var(--navy); color: #c6d0dd; }
.pub-section.navy h2, .pub-section.navy h3, .pub-section.navy h4 { color: #fff; }
.pub-section.deep { background: var(--navy-deep); color: #c6d0dd; }
.pub-section.deep h2, .pub-section.deep h3 { color: #fff; }

.eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 16px; }
.pub-section.navy .eyebrow, .pub-section.deep .eyebrow { color: var(--gold); }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head p { margin-top: 16px; font-size: 1.04rem; line-height: 1.7; }

/* ===== BUTTONS (square) ===== */
.pub-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 0; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: 1.5px solid transparent; transition: all 0.16s; font-family: 'Inter', sans-serif; }
.pub-btn.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pub-btn.gold:hover { background: var(--gold-2); border-color: var(--gold-2); }
.pub-btn.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.pub-btn.navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.pub-btn.outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.pub-btn.outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.pub-btn.outline-dark { background: transparent; color: var(--navy); border-color: var(--line); }
.pub-btn.outline-dark:hover { border-color: var(--navy); }

/* ===== HEADER ===== */
.pub-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 2px solid var(--gold); }
.pub-header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.pub-logo { display: flex; flex-direction: column; line-height: 1; }
.pub-logo .mark { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.55rem; color: var(--navy); letter-spacing: 0.04em; }
.pub-logo .sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; color: var(--gold-2); text-transform: uppercase; margin-top: 3px; }
.pub-nav { display: flex; align-items: center; gap: 2px; }
.pub-nav a { padding: 8px 11px; font-size: 0.8rem; font-weight: 500; color: var(--body); transition: color 0.12s; white-space: nowrap; }
.pub-nav a:hover { color: var(--ink); }
.pub-nav a.active { color: var(--gold-2); font-weight: 600; }
.pub-header-actions { display: flex; align-items: center; gap: 10px; }
.pub-icon-btn { width: 42px; height: 42px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.pub-icon-btn:hover { border-color: var(--navy); }
.pub-burger { display: none; background: none; border: none; cursor: pointer; color: var(--navy); }
.pub-burger .material-icons { font-size: 28px; }

.pub-mobile-nav { display: none; flex-direction: column; padding: 10px 26px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.pub-mobile-nav a { padding: 11px 2px; font-size: 0.92rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--cream); }

@media (max-width: 1180px) { .pub-nav { display: none; } .pub-burger { display: block; } .pub-mobile-nav.open { display: flex; } }
@media (max-width: 560px) { .pub-header-actions .pub-btn { display: none; } }

/* ===== HERO ===== */
.pub-hero { position: relative; color: #fff; padding: 110px 0 92px; overflow: hidden; background: var(--navy-deep); }
.pub-hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0.32; }
.pub-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,24,0.55) 0%, rgba(13,27,42,0.82) 100%); }
.pub-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-badge { display: inline-block; border: 1px solid rgba(201,168,76,0.5); color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; margin-bottom: 26px; }
.pub-hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700; }
.pub-hero h1 .gold { color: var(--gold); }
.pub-hero p.lead { color: rgba(255,255,255,0.82); font-size: 1.14rem; line-height: 1.7; margin: 24px 0 34px; max-width: 620px; }
.pub-hero .tagline { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.pub-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-call { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.hero-call-icon { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(201,168,76,0.5); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.hero-call .lbl { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.hero-call .num { font-size: 1.05rem; font-weight: 600; color: #fff; }

/* ===== STATS BAR ===== */
.pub-stats { background: var(--gold); }
.pub-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.pub-stat { text-align: center; padding: 34px 12px; }
.pub-stat .v { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.2rem; color: var(--navy); line-height: 1; }
.pub-stat .l { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-top: 8px; }
@media (max-width: 720px) { .pub-stats-inner { grid-template-columns: repeat(2, 1fr); } }

/* ===== COMPANY CARDS ===== */
.company-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.company-card { background: #fff; padding: 34px 30px; display: flex; flex-direction: column; transition: background 0.18s; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.company-card:hover { background: var(--cream); }
.company-card .cc-mark { width: 48px; height: 48px; background: var(--gold-soft); color: var(--gold-2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.company-card .cc-mark .material-icons { font-size: 24px; }
.company-card h3 { font-size: 1.32rem; margin-bottom: 8px; }
.company-card .cc-tagline { font-size: 0.78rem; color: var(--gold-2); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 12px; }
.company-card p { font-size: 0.9rem; line-height: 1.6; }
.company-card .cc-bullets { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; }
.company-card .cc-bullets li { font-size: 0.82rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.company-card .cc-bullets li::before { content: ""; width: 5px; height: 5px; background: var(--gold); flex-shrink: 0; }
.company-card .cc-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.company-card .cc-link .material-icons { font-size: 16px; transition: transform 0.15s; }
.company-card:hover .cc-link .material-icons { transform: translateX(4px); }

/* ===== WHAT WE DO ===== */
.wwd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.wwd-item { display: flex; gap: 14px; align-items: flex-start; }
.wwd-item .material-icons { color: var(--gold-2); font-size: 22px; flex-shrink: 0; margin-top: 3px; }
.wwd-item h4 { font-size: 1.02rem; margin-bottom: 6px; }
.wwd-item p { font-size: 0.88rem; line-height: 1.6; }

/* ===== PORTFOLIO / STAYS GRID ===== */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proj-card { border: 1px solid var(--line); overflow: hidden; background: #fff; transition: box-shadow 0.18s; display: block; }
.proj-card:hover { box-shadow: 0 18px 44px rgba(13,27,42,0.1); }
.proj-card .pc-img { aspect-ratio: 4 / 3; background: var(--cream) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #c3ccda; }
.proj-card .pc-img .material-icons { font-size: 42px; opacity: 0.5; }
.proj-card .pc-body { padding: 20px; }
.proj-card .pc-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); }
.proj-card h4 { font-size: 1.1rem; margin: 8px 0 5px; }
.proj-card .pc-meta { font-size: 0.82rem; color: var(--body); }
.proj-card .pc-price { margin-top: 10px; font-size: 0.9rem; color: var(--ink); }
.proj-card .pc-price strong { font-weight: 700; }

/* before / after */
.ba-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.ba-wrap figure { margin: 0; }
.ba-wrap img { width: 100%; display: block; border: 1px solid var(--line); }
.ba-wrap figcaption { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-2); margin-top: 7px; }

/* ===== SERVICES LIST ===== */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
.svc-item { display: flex; gap: 12px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.svc-item .material-icons { color: var(--gold-2); font-size: 20px; flex-shrink: 0; }
.svc-item .svc-t { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.svc-item .svc-d { font-size: 0.85rem; margin-top: 3px; }

/* ===== STAY DETAIL ===== */
.stay-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 8px; margin-bottom: 34px; }
.stay-gallery .g0 { grid-row: span 2; grid-column: 1; }
.stay-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stay-gallery .more { display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--muted); font-size: 0.85rem; }
@media (max-width: 780px) { .stay-gallery { grid-template-columns: 1fr 1fr; } .stay-gallery .g0 { grid-column: span 2; grid-row: span 1; } }

.stay-layout { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; }
@media (max-width: 960px) { .stay-layout { grid-template-columns: 1fr; } }
.stay-facts { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink); margin: 6px 0 22px; }
.stay-facts span { display: flex; align-items: center; gap: 6px; }
.stay-facts .material-icons { font-size: 18px; color: var(--gold-2); }
.amenity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-top: 14px; }
.amenity-grid div { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; }
.amenity-grid .material-icons { font-size: 18px; color: var(--gold-2); }

.book-box { border: 1px solid var(--line); padding: 24px; position: sticky; top: 96px; }
.book-box .price { font-size: 1.4rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--ink); }
.book-box .price small { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--body); }
.book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.book-box label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.book-box input, .book-box select { width: 100%; padding: 10px; border: 1px solid var(--line); font-size: 0.88rem; font-family: inherit; }
.quote-lines { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; font-size: 0.88rem; }
.quote-lines .qr { display: flex; justify-content: space-between; padding: 5px 0; }
.quote-lines .qr.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.avail-bad { color: #b91c1c; font-size: 0.85rem; margin-top: 10px; }
.avail-good { color: #15803d; font-size: 0.85rem; margin-top: 10px; }

/* ===== LISTINGS (external link-outs) ===== */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.listing-card { border: 1px solid var(--line); overflow: hidden; background: #fff; }
.listing-card .lc-img { aspect-ratio: 3 / 2; background: var(--cream) center/cover no-repeat; }
.listing-card .lc-body { padding: 17px; }
.listing-card h4 { font-size: 1.02rem; }
.listing-card .lc-meta { font-size: 0.82rem; margin: 5px 0 12px; }
.listing-status { display: inline-block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; }
.listing-status.available { background: #dcfce7; color: #15803d; }
.listing-status.booked { background: #fee2e2; color: #b91c1c; }
.listing-status.soon { background: #fef9c3; color: #a16207; }

/* ===== SOCIAL ===== */
.social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.social-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border: 1px solid var(--line); font-size: 0.84rem; font-weight: 600; color: var(--navy); background: #fff; transition: all 0.14s; }
.social-chip:hover { border-color: var(--gold); background: var(--cream); }
.pub-section.navy .social-chip, .pub-section.deep .social-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); color: #fff; }

/* ===== FORMS ===== */
.pub-form { display: grid; gap: 16px; max-width: 660px; }
.pub-form.two { grid-template-columns: 1fr 1fr; }
.pub-form .full { grid-column: 1 / -1; }
.pub-field label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pub-field input, .pub-field select, .pub-field textarea {
    width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 0; font-size: 0.9rem;
    font-family: inherit; color: var(--ink); background: #fff;
}
.pub-field input:focus, .pub-field select:focus, .pub-field textarea:focus { outline: none; border-color: var(--gold-2); }
.pub-field textarea { min-height: 120px; resize: vertical; }
.pub-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 0.82rem; line-height: 1.5; }
.pub-consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== DISCLAIMER ===== */
.disclaimer { font-size: 0.82rem; color: var(--body); background: var(--cream); border-left: 3px solid var(--gold); padding: 13px 17px; line-height: 1.6; }

/* ===== FOOTER ===== */
.pub-footer { background: var(--navy-deep); color: #93a1b5; padding: 66px 0 30px; }
.pub-footer h5 { color: #fff; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 15px; }
.pub-footer a { display: block; color: #93a1b5; font-size: 0.85rem; padding: 5px 0; }
.pub-footer a:hover { color: var(--gold); }
.pub-footer .foot-mark { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 6px; }
.pub-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.pub-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 46px; padding-top: 24px; font-size: 0.76rem; line-height: 1.6; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.part-of-zmg { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 600; color: var(--gold-2); letter-spacing: 0.03em; }

@media (max-width: 980px) {
    .company-grid, .proj-grid, .wwd-grid, .listing-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-grid, .pub-form.two, .amenity-grid { grid-template-columns: 1fr; }
    .pub-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .company-grid, .proj-grid, .wwd-grid, .listing-grid { grid-template-columns: 1fr; }
    .ba-wrap { grid-template-columns: 1fr; }
    .pub-section { padding: 60px 0; }
}