/* ============================================================
   RUMAH AJWA — "Sacred Minimal (Madinah)" Theme
   Palette: dark forest-green + gold + cream
   Fonts: Cormorant (serif) + Montserrat (sans)
   ============================================================ */
:root{
  --ink:#16241c; --ink-2:#2c3f34; --gold:#B68A2E; --gold-d:#8f6c20; --gold-l:#d2a84e;
  --brown:#1d3a2c; --brown-2:#235c43; --cream:#F4F1E8; --cream-2:#E5ECE4;
  --line:#d8e0d4; --green:#1C5A3F; --muted:#6f7a6e; --wa:#1faf54; --wa-d:#178a43;
  --card:#fff; --serif:'Cormorant',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif;
  --shadow:0 4px 24px rgba(22,36,28,.08); --shadow-md:0 8px 36px rgba(22,36,28,.12);
  --radius:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);font-size:15.5px;line-height:1.7}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.1;margin:0 0 .4em;font-weight:600;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.5vw,3rem);font-weight:600}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600}
p{margin:0 0 1em}
address{font-style:normal}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.section{padding:96px 0}
.section-muted{background:var(--cream-2)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;font-weight:700;color:var(--gold-d);margin:0 0 1em;display:block}
.sec-head{max-width:640px;margin:0 auto 56px;text-align:center}
.sec-lead{font-size:1rem;color:var(--muted);margin-top:.6em}
.sec-cta-row{display:flex;justify-content:center;gap:14px;margin-top:52px;flex-wrap:wrap}
.empty-msg{text-align:center;color:var(--muted);padding:48px 0}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:200;border-radius:4px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:2px;font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-lg{padding:16px 36px;font-size:.84rem}
.btn-sm{padding:9px 18px;font-size:.76rem}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn-wa:hover{background:var(--wa-d);border-color:var(--wa-d);color:#fff}
.btn-gold{background:transparent;color:var(--gold-d);border-color:var(--gold);letter-spacing:.1em}
.btn-gold:hover{background:var(--gold);color:#fff}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-dark:hover{background:#000;border-color:#000;color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-d)}

/* ============================================================
   HEADER — centered brand + thin gold rules
   ============================================================ */
.header-gold-rule{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.site-header{position:sticky;top:0;z-index:60;background:rgba(244,241,232,.96);backdrop-filter:blur(12px)}
.header-top{display:flex;align-items:center;justify-content:space-between;height:82px;position:relative}
/* Centered brand */
.header-top .brand{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;color:var(--ink);white-space:nowrap}
.header-top .brand:hover{text-decoration:none}
.brand-logo{width:44px;height:auto;display:block;flex:none}
.brand-name-wrap{display:flex;flex-direction:column;line-height:1}
.brand-text{font-family:var(--serif);font-weight:700;font-size:1.55rem;color:var(--ink);letter-spacing:.02em}
.brand-sub{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}
/* lang toggle left */
.lang-toggle{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:2px;padding:7px 12px;color:var(--ink-2);transition:.15s;flex:none}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold-d);text-decoration:none}
/* wa icon right */
.header-wa-link{color:var(--wa);flex:none;transition:.15s;display:flex;align-items:center}
.header-wa-link:hover{color:var(--wa-d)}
/* thin divider under top */
.header-divider-rule{height:1px;background:var(--line)}
/* centered nav */
.main-nav{background:transparent}
.nav-inner{display:flex;align-items:center;justify-content:center;gap:36px;height:44px}
.main-nav a{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);position:relative;transition:.15s}
.main-nav a:hover{color:var(--gold-d);text-decoration:none}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:.2s}
.main-nav a:hover::after{width:100%}
.nav-contact{color:var(--green) !important}
/* hamburger */
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;width:40px;height:36px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:none}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:.2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   SECTION DIVIDER — 8-point star / crescent motif
   ============================================================ */
.sec-divider{display:flex;justify-content:center;align-items:center;padding:28px 0;color:var(--gold)}
.divider-svg{display:block;overflow:visible}

/* ============================================================
   HERO — full-width centered, generous whitespace
   ============================================================ */
.hero{background:var(--cream);padding:100px 0 0;position:relative;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(182,138,46,.06) 0%,transparent 70%);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.32em;font-size:.64rem;font-weight:700;color:var(--gold-d);margin:0 0 1.2em}
.hero-headline{font-family:var(--serif);font-size:clamp(3rem,7vw,5.6rem);font-weight:700;line-height:1.06;margin:0 0 .5em;max-width:800px;color:var(--ink)}
.hero-headline em{font-style:italic;color:var(--green)}
.hero-lead{font-size:1.05rem;color:var(--muted);max-width:580px;margin:0 auto 2.4em;line-height:1.8}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:64px}
.hero-images{width:100%;max-width:620px;margin:0 auto}
.hero-img-main{aspect-ratio:5/3;overflow:hidden;border-top-left-radius:2px;border-top-right-radius:2px;position:relative}
.hero-img-main::before{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:.3;z-index:1;pointer-events:none;border-radius:2px 2px 0 0}
.hero-img-main img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s}
.hero-img-main:hover img{transform:scale(1.03)}
.hero-bottom-fade{height:3px;background:linear-gradient(90deg,transparent,var(--gold-d),transparent);opacity:.3}

/* ============================================================
   PRODUCT CARDS — 2-column minimal grid, thin gold separators
   ============================================================ */
.pcard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:900px){.pcard-grid{grid-template-columns:repeat(3,1fr)}}
.pcard{background:var(--card);display:flex;flex-direction:column;color:inherit;transition:.2s;text-decoration:none}
.pcard:hover{text-decoration:none;background:#fdfcf8}
.pcard-media{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--cream-2)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-tag{position:absolute;top:14px;left:14px;background:var(--gold);color:#fff;font-family:var(--sans);font-size:.64rem;font-weight:700;padding:5px 12px;letter-spacing:.1em;text-transform:uppercase}
.pcard-body{padding:22px 24px 28px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:1px solid var(--line)}
.pcard-origin{font-family:var(--sans);font-size:.62rem;color:var(--gold-d);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.pcard-body h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:0;color:var(--ink)}
.pcard-desc{font-size:.88rem;color:var(--muted);flex:1;line-height:1.65}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.price{font-family:var(--serif);color:var(--green);font-weight:700;font-size:1.2rem}
.price small{font-family:var(--sans);font-weight:500;color:var(--muted);font-size:.65em;margin-left:2px}
.pcard-link{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d)}

/* ============================================================
   KEUTAMAAN — editorial pull-quote section
   ============================================================ */
.keutamaan{background:var(--ink);color:var(--cream);text-align:center}
.keutamaan-inner{display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto;gap:40px}
.keutamaan-text .eyebrow{color:var(--gold-l)}
.keutamaan-text h2{color:var(--cream);font-size:clamp(1.8rem,3vw,2.8rem)}
.pull-quote{border:none;margin:0;padding:32px 0;position:relative}
.pull-quote::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:var(--gold);opacity:.6}
.pull-quote::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:var(--gold);opacity:.6}
.pull-quote p{font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.9rem);font-style:italic;color:var(--cream);line-height:1.5;margin:0 0 .7em}
.pull-quote cite{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);font-style:normal}
.keutamaan-body p{color:#b8c8b2;font-size:.95rem;line-height:1.8;text-align:left;max-width:680px}
.virtue-list{list-style:none;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;gap:10px;max-width:680px}
.virtue-list li{display:flex;gap:14px;align-items:flex-start;font-size:.9rem;color:#b8c8b2}
.virtue-list li::before{content:"";width:16px;height:16px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:3px;background:rgba(182,138,46,.12)}
.keutamaan-action{margin-top:8px}

/* ============================================================
   PILLARS — 3-column icons
   ============================================================ */
.pillar-section{background:var(--cream)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.pillar{background:var(--card);padding:44px 36px;text-align:center}
.pillar-icon{width:60px;height:60px;margin:0 auto 22px;color:var(--gold-d);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
.pillar h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.5em;color:var(--ink)}
.pillar p{font-size:.88rem;color:var(--muted);line-height:1.75;margin:0}

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner{background:var(--ink);color:var(--cream);padding:72px 0 56px;text-align:center;position:relative}
.page-banner::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.page-banner-inner{max-width:680px;margin:0 auto}
.page-banner h1{color:var(--cream);margin-bottom:.3em}
.page-banner .eyebrow{color:var(--gold-l)}
.page-lead{font-size:1rem;color:#b8c8b2;line-height:1.8;margin:0}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-section{padding-top:56px}
.pd-top{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.pd-media img{width:100%;border-radius:2px;box-shadow:var(--shadow-md)}
.pd-ph{aspect-ratio:1;background:var(--cream-2);border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center}
.pd-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:18px 0;width:60px}
.pd-short{font-size:1.02rem;color:var(--ink-2);line-height:1.75}
.pd-price{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:var(--green);margin:.3em 0}
.pd-price small{font-family:var(--sans);font-weight:500;font-size:.45em;color:var(--muted);margin-left:4px}
.pd-price-note{font-size:.85rem;color:var(--muted);margin-top:-.3em}
.pd-meta-row{margin:18px 0 0}
.pd-meta-label{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pd-prose{max-width:780px;margin:0 auto}

/* ============================================================
   CHIPS
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:7px 16px;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink-2)}

/* ============================================================
   BENEFIT LIST
   ============================================================ */
.benefit-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.benefit-list li{display:flex;gap:14px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);padding-bottom:14px;border-bottom:1px solid var(--line)}
.benefit-list li::before{content:"";width:18px;height:18px;border:1px solid var(--gold);border-radius:50%;flex:none;margin-top:2px;background:rgba(182,138,46,.1)}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{padding:20px 0;font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.crumbs a{color:var(--muted);transition:.15s}
.crumbs a:hover{color:var(--green)}
.crumbs span{color:var(--ink-2)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-section{padding-top:40px}
.article-wrap{max-width:780px;margin:0 auto}
.article-head h1{margin:.1em 0 .15em;font-size:clamp(2rem,4vw,3.2rem)}
.article-head-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);width:60px;margin:20px 0}
.article-excerpt{font-size:1.1rem;color:var(--ink-2);line-height:1.7;font-style:italic}
.article-meta{font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;color:var(--muted);margin-top:8px}
.article-hero{margin:24px 0 40px}
.article-hero img{width:100%;border-radius:2px;box-shadow:var(--shadow-md)}
.article-hero figcaption{font-size:.74rem;margin-top:8px;color:var(--muted);text-align:center}
.article-body{font-size:1.05rem;line-height:1.85;color:var(--ink-2)}
.article-body h2{font-size:1.65rem;margin:2em 0 .5em;color:var(--ink)}
.article-body h3{font-size:1.28rem;margin:1.6em 0 .4em;color:var(--ink)}
.article-body p{margin:0 0 1.1em}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.1em}
.article-body li{margin-bottom:.5em}
.article-body blockquote{border-left:2px solid var(--gold);padding:4px 0 4px 20px;margin:1.4em 0;font-style:italic;color:var(--ink-2)}
.article-body strong{color:var(--ink)}
.article-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.93rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.article-body th{background:var(--cream-2);font-weight:700}
.article-body hr{border:none;border-top:1px solid var(--line);margin:2em 0}
.article-faq{margin-top:48px}
.article-faq h2{margin-bottom:20px}
.article-cta{margin-top:48px;text-align:center;padding:40px 0;border-top:1px solid var(--line)}

/* ============================================================
   PROSE (shared)
   ============================================================ */
.prose{font-size:1.02rem;color:var(--ink-2);line-height:1.8}
.prose h2,.prose h3{color:var(--ink);margin-top:1.6em}
.prose ul{padding-left:1.3em}
.prose li{margin-bottom:.45em}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:2px solid var(--gold);padding:4px 0 4px 18px;margin:1.2em 0;font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.93rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{background:var(--cream-2);font-weight:700}
.prose hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
.seo-prose{max-width:780px;margin:0 auto}
.page-prose{max-width:780px;margin:0 auto}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);margin-bottom:0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.15rem;font-weight:600;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.2rem;color:var(--gold-d);font-weight:300;flex:none;margin-left:16px}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--muted);font-size:.93rem;line-height:1.75}

/* ============================================================
   CTA BAND — dark forest + star motif
   ============================================================ */
.cta-section{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(182,138,46,.06) 0%,transparent 70%)}
.cta-inner{padding:88px 24px;text-align:center;position:relative;max-width:680px;margin:0 auto}
.cta-star{color:var(--gold);margin-bottom:24px}
.cta-inner h2{color:var(--cream);font-size:clamp(1.8rem,3.5vw,3rem);margin-bottom:.4em}
.cta-inner p{color:#b8c8b2;font-size:.97rem;line-height:1.8;margin-bottom:2em}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contact-info .prose{margin-bottom:28px}
.contact-list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;align-items:flex-start;gap:14px;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.contact-ico{color:var(--gold-d);margin-top:1px;flex:none}
.contact-list a{color:var(--green)}
.contact-list a:hover{text-decoration:underline}
.contact-form-wrap{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:36px;box-shadow:var(--shadow)}
.contact-form-title{font-family:var(--serif);font-size:1.6rem;margin-bottom:24px;color:var(--ink)}
.contact-form{display:flex;flex-direction:column;gap:0}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;color:var(--ink)}
.req{color:var(--gold-d)}
.form-field input,.form-field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--sans);font-size:.9rem;background:var(--cream);color:var(--ink);transition:.15s}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--gold)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--muted)}
.form-submit{width:100%;justify-content:center;margin-top:6px}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.alert-ok{background:#e8f4ed;border:1px solid #b4d9c2;color:#1a6640;padding:14px 16px;border-radius:2px;margin-bottom:16px;font-size:.9rem}
.err{color:#c0392b;font-size:.8rem;margin-top:4px;display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#a8bca8;margin-top:0}
.footer-star-divider{display:flex;justify-content:center;align-items:center;padding:28px 0 0;color:var(--gold);opacity:.6}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:48px;padding:48px 0 40px}
.footer-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;color:#e8ece4;text-decoration:none}
.footer-brand .brand-text{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:#e8ece4}
.footer-brand .brand-logo{width:38px}
.f-tagline{font-size:.88rem;color:#7a9080;line-height:1.7;margin-bottom:14px;font-style:italic}
.f-pills{display:flex;flex-wrap:wrap;gap:8px}
.fpill{background:#1e3128;border:1px solid #2e4a38;color:#8aaa8a;font-family:var(--sans);font-size:.66rem;font-weight:600;padding:5px 12px;letter-spacing:.06em;text-transform:uppercase}
.f-nav-col h4,.f-contact-col h4{font-family:var(--sans);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#e8ece4;margin-bottom:16px}
.foot-nav{display:flex;flex-direction:column;gap:10px}
.foot-nav a{font-size:.86rem;color:#7a9080;transition:.15s}
.foot-nav a:hover{color:#e8ece4;text-decoration:none}
.f-address{font-size:.85rem;color:#7a9080;line-height:1.8;margin-bottom:10px}
.f-contact-line{font-size:.85rem;color:#7a9080;margin-bottom:6px}
.f-contact-line a{color:#7a9080}
.f-contact-line a:hover{color:#e8ece4}
.email-link{color:#7a9080 !important}
.email-link:hover{color:#e8ece4 !important}
.footer-bottom{border-top:1px solid #253828;padding:22px 0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:#4e6050}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;padding:13px 20px;border-radius:2px;box-shadow:0 8px 28px rgba(31,175,84,.45);font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.wa-float:hover{background:var(--wa-d);color:#fff;text-decoration:none;transform:translateY(-2px)}
.wa-glyph{width:22px;height:22px;display:block;flex:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .pd-top,.contact-grid{grid-template-columns:1fr;gap:36px}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .f-brand{grid-column:1/-1}
  .header-top .brand{position:static;transform:none}
  .header-top{gap:14px;justify-content:space-between}
  .nav-toggle{display:flex}
  .main-nav{display:none;overflow:hidden}
  .main-nav.nav-open{display:block;border-top:1px solid var(--line)}
  .nav-inner{flex-direction:column;align-items:flex-start;height:auto;padding:16px 24px;gap:0}
  .main-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:.78rem;width:100%}
  .main-nav a::after{display:none}
  .hero{padding:72px 0 0}
  .hero-images{max-width:100%}
  .keutamaan-inner{padding:0 8px}
  .keutamaan-body p,.virtue-list{text-align:center;align-items:center}
  .pull-quote p{font-size:1.3rem}
}
@media(max-width:640px){
  .pcard-grid{grid-template-columns:1fr 1fr}
  .pillar-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .sec-divider{padding:20px 0}
  .section{padding:64px 0}
  .hero{padding:56px 0 0}
  .hero-headline{font-size:2.6rem}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-lead{font-size:.95rem}
  .wa-float{padding:0;width:58px;height:58px;justify-content:center;border-radius:50%;right:14px;bottom:14px;gap:0}
  .wa-float .wa-text{display:none}
  .wa-float .wa-glyph{width:30px;height:30px}
  .cta-inner{padding:64px 16px}
  .contact-form-wrap{padding:24px}
  .article-body table,.prose table{display:block;overflow-x:auto;max-width:100%}
}
@media(max-width:400px){
  .pcard-grid{grid-template-columns:1fr}
  h1{font-size:2.2rem}
  .wrap{padding:0 16px}
}
/* Global safety — no horizontal scroll */
html,body{max-width:100%;overflow-x:clip}