:root{
  --green:#118b78;
  --teal:#2fb8b1;
  --blue:#5366c7;
  --navy:#09214f;
  --gold:#d3a03a;
  --ink:#092f3a;
  --muted:#61747b;
  --soft:#f5fbfb;
  --line:#e4eeee;
  --white:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fff,#f8fcfc);color:var(--ink);font-family:'Inter',Arial,sans-serif;line-height:1.6}
h1,h2,h3,h4{margin:0 0 12px;line-height:1.1}
h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700}
h1{font-size:clamp(3rem,6vw,5.6rem)}
h2{font-size:clamp(2rem,3.5vw,3rem)}
p{font-size:1rem}
a{text-decoration:none;color:var(--green);font-weight:700}
.site-header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand img{height:58px;width:auto;max-width:220px;object-fit:contain}
.brand span{font-size:.92rem;font-weight:600;display:block;margin-left:-4px;color:var(--navy)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:#092f3a;font-size:.95rem}
.login-btn{background:linear-gradient(135deg,var(--green),var(--blue));color:#fff!important;padding:12px 18px;border-radius:8px;box-shadow:0 8px 20px rgba(47,184,177,.25)}
.menu-toggle{display:none;background:none;border:0;font-size:2rem;color:var(--green)}
.hero{position:relative;display:grid;grid-template-columns:1.1fr .85fr .75fr;gap:30px;align-items:center;min-height:590px;padding:64px 5%;overflow:hidden;background:linear-gradient(90deg,#f7fffd 0%,#effafa 42%,#dfeff5 100%)}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 40%,rgba(83,102,199,.23),transparent 34%),radial-gradient(circle at 62% 30%,rgba(47,184,177,.22),transparent 28%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-watermark{position:absolute;left:-130px;bottom:-130px;opacity:.22;z-index:0}
.hero-watermark img{width:520px}
.hero-copy h1{color:#064437}
.hero-copy h1 span{background:linear-gradient(90deg,var(--green),var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{max-width:590px;font-size:1.12rem}
.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-weight:800}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;border:0;border-radius:9px;padding:13px 22px;font-weight:800;cursor:pointer}
.gradient{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff!important}
.ghost{border:1px solid rgba(9,47,58,.45);color:var(--ink);background:rgba(255,255,255,.55)}
.grain-visual{height:430px;position:relative}
.grain-stem{position:absolute;left:45%;bottom:20px;width:5px;height:340px;background:linear-gradient(var(--gold),var(--green));border-radius:20px;transform:rotate(12deg)}
.grain-head{position:absolute;left:42%;top:55px;width:90px;height:210px;background:linear-gradient(135deg,#f6df93,#c89423);border-radius:50% 50% 45% 45%;clip-path:polygon(50% 0,70% 10%,62% 22%,82% 28%,64% 40%,86% 50%,64% 59%,78% 72%,55% 68%,52% 100%,45% 68%,22% 72%,36% 59%,14% 50%,36% 40%,18% 28%,38% 22%,30% 10%);filter:drop-shadow(0 18px 24px rgba(11,42,42,.18))}
.hero-quote{padding:28px;background:rgba(255,255,255,.42);border-radius:22px}
.quote-mark{font-size:5rem;line-height:.5;color:var(--teal);font-family:'Cormorant Garamond',serif;font-weight:700}
.hero-quote .line{width:50px;height:2px;background:var(--teal);margin:18px 0}
.source{font-weight:600}
.section{padding:58px 5%}
.center{text-align:center}
.section-heading p{color:var(--muted)}
.pillar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillar-card{min-height:310px;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 14px 40px rgba(17,139,120,.08);overflow:hidden}
.ifx-bg{background:linear-gradient(135deg,#fff,#eefaf7)}
.traveller-bg{background:linear-gradient(135deg,#fff,#fff2da)}
.mantiq-bg{background:linear-gradient(135deg,#fff,#eff6ff)}
.icon-circle{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:1.9rem;margin-bottom:10px}
.icon-circle.gold{background:var(--gold)}
.icon-circle.blue{background:#2c6fc5}
.pillar-logo{height:78px;max-width:260px;object-fit:contain;display:block;margin:0 0 14px}
.ifx-logo{height:68px}
.traveller-title{font-family:'Cormorant Garamond',serif;font-size:2.25rem;color:#0b6960}
.traveller-title em{font-weight:500;color:#d39625}
.pillar-card h4{color:#d39625}
.outline-btn{display:inline-block;margin-top:12px;border:1px solid currentColor;border-radius:8px;padding:10px 18px}
.outline-btn.green{color:var(--green)}
.outline-btn.gold{color:#ba7a13}
.outline-btn.blue{color:#2c62b7}
.dashboard-grid{display:grid;grid-template-columns:1.15fr 1fr 1.1fr;gap:18px;padding-top:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 14px 40px rgba(17,139,120,.08)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
.books-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.book-mini img{width:100%;height:230px;object-fit:contain;border-radius:12px;background:#f7fafa}
.book-mini h4{margin:14px 0 4px}
.book-mini p{font-size:.9rem}
.amazon{display:inline-block;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;padding:10px 14px;border-radius:8px;font-size:.9rem}
.article-preview-list a{display:grid;gap:4px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.article-preview-list span{font-size:.86rem;color:var(--gold)}
.advisory-preview{background:linear-gradient(135deg,#fff, #f1fbfb)}
.values-strip{margin:0 5% 55px;padding:18px 22px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#4f666b;font-size:.92rem}
.page-hero{padding:82px 5%;background:linear-gradient(135deg,#fff,#f1fbfb);border-bottom:1px solid var(--line)}
.page-hero p{max-width:760px;color:#4f666b}
.text-page{max-width:920px;margin:auto}
.text-page p{font-size:1.12rem}
.note,.muted{color:var(--muted);font-size:.92rem!important}
.book-grid,.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.book-card,.cards3 article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 14px 40px rgba(17,139,120,.08)}
.book-card img{width:100%;height:360px;object-fit:contain;background:#f7fafa;border-radius:12px}
.product-hero{padding:85px 5%;text-align:center;color:#fff}
.product-hero img{max-width:370px;max-height:260px;object-fit:contain;margin-bottom:20px}
.ifx-hero{background:linear-gradient(135deg,#0e6658,#2fb8b1)}
.traveller-hero{background:linear-gradient(135deg,#765019,#d2a03d)}
.mantiq-hero{background:linear-gradient(135deg,#061a3d,#174f9d)}
.split{display:grid;grid-template-columns:.75fr 1fr;gap:44px;align-items:center}
.feature-book{width:100%;max-height:560px;object-fit:contain;border-radius:16px}
.gold-solid{background:var(--gold);color:#fff!important}
.blue-solid{background:#2c62b7;color:#fff!important}
.pathway{text-align:center;background:#f2f7ff}
.pathway img{width:100%;max-width:1080px;border-radius:14px}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 14px 40px rgba(17,139,120,.08)}
.contact-form label{display:block;font-weight:700;margin-bottom:14px}
.contact-form input,.contact-form textarea,.subscribe-form input{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:12px;font:inherit}
.subscribe-form{display:grid;gap:10px}
.subscribe-form button{border:0;border-radius:8px;padding:12px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font-weight:800}
.footer{background:linear-gradient(135deg,#fff,#eefafa);border-top:1px solid var(--line);padding:45px 5% 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.4fr;gap:30px}
.footer-logo{height:72px;width:auto;max-width:240px;object-fit:contain;margin-bottom:12px}
.footer a{display:block;margin:7px 0;color:var(--ink)}
.footer-bottom{margin:34px -5% 0;padding:16px 5%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff}
@media(max-width:980px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:94px;left:0;right:0;background:#fff;padding:22px 5%;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .hero,.pillar-cards,.dashboard-grid,.books-mini,.book-grid,.cards3,.split,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .grain-visual{display:none}
  .hero{min-height:auto}
}


/* === Approved Sanabil homepage update, October 2026 ===
   Visual changes are scoped to homepage, About/Inspiration, and new pillar hub pages.
   Photographic accents are cropped from the previously AI-generated Sanabil mockup
   provided in this conversation, not downloaded third-party stock images.
*/
body {background:#ffffff; font-family:Roboto, Arial, sans-serif; color:#102e36;}
h1,h2,h3,h4,p,a,button,input,textarea {font-family:Roboto,Arial,sans-serif;}
h1,h2 {font-weight:700;}
.brand span {display:none !important;}
.brand img {height:58px; width:auto; max-width:230px;}
.site-header {background:rgba(255,255,255,.98);}
.site-header .nav a:not(.login-btn):hover {color:#0c9a87;}
/* Hero retains navigation and button placement, replaces the older quote illustration. */
.home-hero {
  display:flex; align-items:center; min-height:550px; padding:74px 6%;
  background-color:#ffffff;
  background-image:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.99) 23%,rgba(255,255,255,.84) 42%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 100%),
    url('assets/sanabil-hero-wheat.jpg');
  background-repeat:no-repeat;
  background-size:100% 100%, 68% auto;
  background-position:center, right center;
  border-bottom:1px solid #edf2f2;
}
.home-hero::after {display:none;}
.home-hero .hero-copy {max-width:640px;z-index:2;}
.home-hero .hero-copy h1 {
  font-family:Roboto,Arial,sans-serif; font-size:clamp(2.7rem,4.2vw,4.5rem);
  letter-spacing:-.045em; line-height:1.14; margin:0 0 22px; color:#0c3338;
}
.home-hero .hero-copy h1 span {background:none; -webkit-background-clip:initial; background-clip:initial;}
.home-hero .hero-copy h1 .hero-green {color:#176a57;}
.home-hero .hero-copy h1 .hero-gold {color:#bf882c;}
.home-hero .hero-copy h1 .hero-blue {color:#2c5db8;}
.home-hero .hero-copy>p {font-size:1.12rem;line-height:1.6;max-width:540px;}
.home-hero .hero-actions {margin-top:28px;gap:14px;align-items:center;}
.home-hero .hero-actions .btn {padding:14px 22px;border-radius:8px;}
.home-hero .btn span {margin-left:12px;}
.inspiration-link {
 display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:#10656c;
 padding:7px 0;font-weight:700;font-size:.98rem;
 border-bottom:1px solid transparent;
}
.inspiration-link:hover {border-bottom-color:#10656c;}
.inspiration-link span {font-size:1.28rem;}
/* Three pillars—soft visual cards, dedicated pillar identity, no products inside. */
.home-pillars {padding-top:58px;padding-bottom:48px;}
.home-pillars .section-heading {margin-bottom:26px;}
.home-pillars .section-heading h2 {
  font-family:Roboto,Arial,sans-serif; font-weight:700; font-size:clamp(2rem,3.1vw,3rem);
  color:#103b3e; letter-spacing:-.035em; margin-bottom:12px;
}
.home-pillars .accent-heading {color:#2e5fb4;}
.home-pillars .section-heading p {color:#56626c;font-size:1.04rem;line-height:1.55;margin:0 auto;}
.home-pillars .pillar-cards {gap:18px;}
.home-pillars .pillar-card {
  border:1px solid #ecf1ef; border-radius:15px; min-height:430px; position:relative;
  display:flex;padding:28px 27px 26px; box-shadow:0 10px 25px rgba(6,56,62,.06);
  background-color:#f8fcfb; overflow:hidden;
}
.home-pillars .pillar-card::before {
  content:"";position:absolute;inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.home-pillars .pillar-card::after {
  content:"";position:absolute;inset:0; z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.83) 35%,rgba(255,255,255,.7) 75%,rgba(255,255,255,.49) 100%);
}
.home-pillars .knowledge-card {background:#e7f3ec;border-color:#cfe4d8;}
.home-pillars .knowledge-card::before {background-image:url('assets/pillar-knowledge-background.jpg');opacity:.46;background-position:right bottom;}
.home-pillars .knowledge-card::after {background:linear-gradient(180deg,rgba(244,251,247,.94),rgba(216,239,225,.78));}
.home-pillars .character-card {background:#fffaf0;}
.home-pillars .character-card::before {background-image:url('assets/pillar-character-background.jpg');opacity:.42;}
.home-pillars .character-card::after {background:linear-gradient(180deg,rgba(255,251,245,.95),rgba(255,245,226,.68));}
.home-pillars .wisdom-card {background:#f2f8ff;}
.home-pillars .wisdom-card::before {background-image:url('assets/pillar-wisdom-background.jpg');opacity:.43;}
.home-pillars .wisdom-card::after {background:linear-gradient(180deg,rgba(246,251,255,.96),rgba(229,244,254,.71));}
.home-pillars .pillar-content {display:flex;flex-direction:column;position:relative;z-index:1;width:100%;}
.home-pillars .pillar-emblem {display:block;height:59px;width:72px;object-fit:contain;margin-bottom:20px;}
.home-pillars .knowledge-emblem {object-fit:cover; object-position:center; width:70px;height:57px;border-radius:9px;}
.home-pillars .character-emblem {width:92px;height:78px;object-fit:contain;mix-blend-mode:normal;margin-bottom:1px;}
.home-pillars .wisdom-emblem {width:67px;height:59px;mix-blend-mode:multiply;}
.home-pillars .pillar-card h3 {font-size:clamp(1.7rem,2.1vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;}
.home-pillars .knowledge-card h3 {color:#145648;}
.home-pillars .character-card h3 {color:#9c6924;}
.home-pillars .wisdom-card h3 {color:#2054a4;}
.home-pillars .pillar-card p {font-size:.96rem;line-height:1.65;margin:0 0 25px;color:#293b46;}
.pillar-button {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding:13px 12px;
  font-size:.9rem;font-weight:700;color:#fff!important;border-radius:8px;white-space:nowrap;text-align:center;
  box-shadow:0 7px 17px rgba(2,71,96,.09);}
.pillar-button span {font-size:1.17rem;line-height:1;}
.knowledge-button {background:linear-gradient(105deg,#176b55,#145648);}
.character-button {background:linear-gradient(105deg,#c98e2a,#a87a2f);}
.wisdom-button {background:linear-gradient(105deg,#1e8db2,#4e59c5);}
.pillar-button:hover {filter:brightness(1.08);transform:translateY(-1px);}
.dashboard-grid {padding-top:14px;}
/* About -> Our Inspiration */
.inspiration-hero {
  background-image:
   linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.18) 80%),
   url('assets/sanabil-hero-wheat.jpg');
  background-position:center,right center;background-size:100% 100%, 56% auto;
  background-repeat:no-repeat;
  scroll-margin-top:110px;
}
.inspiration-hero h1 {font-size:clamp(2.5rem,4.2vw,4.4rem);}
.inspiration-story {background:#fff;}
.inspiration-inner {max-width:900px;margin:auto;}
.inspiration-inner .eyebrow {color:#138c7e;}
.inspiration-inner h2 {font-size:clamp(2rem,3vw,3.1rem);letter-spacing:-.035em;color:#0a3441;margin:0 0 26px;}
.inspiration-inner p:not(.eyebrow) {font-size:1.08rem;line-height:1.85;color:#344957;margin:0 0 22px;}
.inspiration-inner .reference {color:#577e85;font-style:italic;white-space:nowrap;}
/* Pillar hub pages */
.pillar-hub-hero {padding:67px 6%; background:#f6fbfb;border-bottom:1px solid #e5efef;}
.pillar-hub-hero .hub-inner {max-width:1050px;margin:0 auto;display:flex;align-items:center;gap:32px;}
.pillar-hub-hero img {width:105px;height:105px;object-fit:contain;border-radius:12px;flex:none;}
.pillar-hub-hero h1 {font-size:clamp(2.8rem,4vw,4.7rem);line-height:1.14;}
.pillar-hub-hero p {max-width:740px;font-size:1.1rem;}
.pillar-hub-hero.knowledge {background:linear-gradient(100deg,#f0fbf7,#fff);}
.pillar-hub-hero.character {background:linear-gradient(100deg,#fffaf0,#fff);}
.pillar-hub-hero.wisdom {background:linear-gradient(100deg,#eef6ff,#fff);}
.pillar-hub-hero.knowledge h1 {color:#117d6c;}
.pillar-hub-hero.character h1 {color:#a77824;}
.pillar-hub-hero.wisdom h1 {color:#254fa3;}
.hub-intro {max-width:1080px;margin:0 auto;padding:48px 6% 8px;}
.hub-intro h2 {font-size:1.9rem;color:#143b45;}
.hub-intro p {font-size:1.07rem;color:#41535a;line-height:1.8;}
.hub-products {padding:36px 6% 70px;max-width:1300px;margin:0 auto;}
.hub-products h2 {font-size:2.2rem;margin:0 0 14px;}
.hub-products .hub-lead {color:#5b6e77;margin-bottom:24px;}
.hub-product-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;}
.hub-product {border:1px solid #e7eeed;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.045);padding:28px;}
.hub-product img {max-height:150px;max-width:85%;object-fit:contain;display:block;margin-bottom:22px;}
.hub-product h3 {font-size:1.35rem;color:#0a3441;}
.hub-product p {color:#485b63;font-size:1.01rem;}
.hub-product .outline-btn {border:1px solid #208a85;}
.hub-product .outline-btn:hover {background:#edf8f7;}
.hub-card-quiet {background:#f9fbfb;border-style:dashed;}
@media (max-width:980px){
 .home-hero {background-size:100% 100%, 78% auto;background-position:center,right center;min-height:520px;}
 .home-hero .hero-copy {max-width:580px;}
 .home-pillars .pillar-cards {grid-template-columns:repeat(3,minmax(0,1fr));}
 .home-pillars .pillar-card {padding:21px 18px;min-height:520px;}
 .pillar-button {white-space:normal;font-size:.83rem;}
}
@media (max-width:760px){
 .home-hero {padding:80px 6% 65px;min-height:535px;
   background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.82)),url('assets/sanabil-hero-wheat.jpg');
   background-size:100% 100%, cover;}
 .home-hero .hero-copy h1 {font-size:clamp(2.3rem,7vw,3.3rem);}
 .home-pillars .pillar-cards {grid-template-columns:1fr;}
 .home-pillars .pillar-card {min-height:340px;padding:28px;}
 .pillar-button {white-space:nowrap;}
 .hub-product-grid {grid-template-columns:1fr;}
 .pillar-hub-hero .hub-inner {flex-direction:column;align-items:flex-start;}
 .inspiration-hero {background-size:100% 100%,cover;}
}

/* Keep approved Roboto typography consistent across original subpages too. */
.traveller-title,.quote-mark {font-family:Roboto,Arial,sans-serif;}

/* Additional publication catalogue call-to-action; keeps original theme. */
.amazon-author-cta {padding-top:0;}
.amazon-author-inner {
  background:linear-gradient(100deg,#f4fbf9,#f4f8ff);
  border:1px solid #e2ecea;border-radius:15px;
  padding:32px;display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.amazon-author-inner h2 {font-size:1.5rem;color:#0c4c51;margin:0 0 7px;}
.amazon-author-inner p {margin:0;max-width:550px;}
.amazon-author-inner .btn {white-space:nowrap;}
@media(max-width:700px) {
 .amazon-author-inner {flex-direction:column;align-items:flex-start;}
 .amazon-author-inner .btn {white-space:normal;}
}

/* sanabil-consistent-roboto-20261019: previously approved typeface */
body,h1,h2,h3,h4,button,input,select,textarea{font-family:Roboto,Arial,sans-serif}

/* User-supplied authentic front cover artwork in the books directory */
.book-directory-cover{height:205px!important;width:auto!important;max-width:100%;object-fit:contain;object-position:left center;display:block;margin:0 0 20px;border-radius:2px;box-shadow:0 9px 19px rgba(29,46,47,.14)}

/* Shared AJAX form feedback on every main Sanabil page. */
.form-honeypot{position:absolute!important;left:-10000px!important;top:-10000px!important;opacity:0!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status:empty{display:none}
.form-status{font-size:12px;line-height:1.6;margin:9px 0 0;color:#365b69}
.form-status.is-success{color:#176b56}
.form-status.is-error{color:#9a4937}
.subscribe-form input{min-width:0}
.subscribe-form button:disabled{opacity:.65;cursor:wait}
.subscribe-note{font-size:11px;line-height:1.55;color:#657e87}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}