:root { --ink:#111111; --muted:#686868; --gold:#c89420; --gold-deep:#9b6b10; --gold-pale:#fbf3de; --line:#e9e2d5; --paper:#ffffff; --soft:#f7f7f5; --navy:#102742; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; line-height:1.75; }
button, a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.announcement { background:var(--ink); color:#fff; text-align:center; font-size:13px; padding:8px 20px; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px clamp(22px,6vw,94px); border-bottom:1px solid #eee; position:sticky; top:0; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); z-index:10; }
.brand { display:inline-flex; direction:ltr; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark { width:42px; height:48px; display:grid; place-items:center; color:var(--gold-deep); background:linear-gradient(145deg,#fff 0%,#f2dfac 100%); border:3px solid var(--gold); clip-path:polygon(50% 0,100% 18%,89% 88%,50% 100%,11% 88%,0 18%); font-family:Cairo,sans-serif; font-weight:900; font-size:27px; line-height:1; }
.brand-copy { display:grid; line-height:1.1; text-align:left; }
.brand-copy strong { font-family:Cairo,sans-serif; font-weight:900; letter-spacing:0; font-size:17px; }
.brand-copy small { color:var(--gold-deep); font-weight:700; font-size:12px; text-align:center; margin-top:3px; }
.desktop-nav { display:flex; gap:28px; align-items:center; font-size:14px; font-weight:600; }
.desktop-nav a { transition:color .2s; }.desktop-nav a:hover { color:var(--gold-deep); }
.cart-trigger,.icon-button { border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cart-trigger { border:1px solid var(--line); padding:10px 12px; min-width:104px; font-weight:700; font-size:14px; }
.cart-trigger svg,.button svg,.text-button svg { width:18px; height:18px; stroke-width:2; }
.cart-count { background:var(--gold); color:#fff; border-radius:50%; min-width:20px; height:20px; font-size:12px; display:grid; place-items:center; }
.hero { min-height:650px; padding:72px clamp(22px,9vw,150px); display:grid; grid-template-columns:1fr 1.05fr; gap:30px; align-items:center; overflow:hidden; background:linear-gradient(100deg,#fff 0%,#fff 45%,#fbfaf6 100%); }
.eyebrow { font-size:13px; font-weight:800; color:var(--gold-deep); letter-spacing:0; margin:0 0 12px; }
h1,h2,h3,strong { font-family:Cairo,"IBM Plex Sans Arabic",sans-serif; }
h1 { font-size:clamp(38px,5vw,69px); letter-spacing:0; line-height:1.28; margin:0 0 20px; font-weight:900; }
h1 span { color:var(--gold-deep); }
.hero-lead { max-width:540px; color:#444; font-size:18px; margin:0 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:48px; padding:11px 18px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:14px; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }.button-primary { background:var(--ink); color:#fff; }.button-primary:hover { background:var(--gold-deep); }.button-quiet { background:#fff; border-color:var(--ink); color:var(--ink); }.button-quiet:hover { background:var(--gold-pale); border-color:var(--gold); }
.hero-note { color:var(--muted); margin-top:22px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }.hero-note svg{width:18px;color:var(--gold-deep)}
.hero-art { min-height:490px; position:relative; display:grid; place-items:center; }.hero-art img { width:min(710px,115%); max-height:505px; object-fit:contain; position:relative; z-index:2; }.hero-rings { position:absolute; width:92%; aspect-ratio:1; border:1px solid #e4c778; border-radius:50%; background:radial-gradient(circle at center,#f9f3e5 0,transparent 63%); }.hero-rings:before,.hero-rings:after { content:""; position:absolute; inset:10%; border:1px dashed #e1c06e; border-radius:50%; }.hero-rings:after { inset:25%; border-style:solid; opacity:.45; }.hero-label { position:absolute; z-index:3; background:#fff; border:1px solid var(--line); box-shadow:0 8px 28px #6f54101a; display:flex; gap:9px; align-items:center; padding:9px 12px; font-size:12px; font-weight:800; }.hero-label svg{width:18px;color:var(--gold-deep)}.hero-label-top{top:11%;right:5%}.hero-label-bottom{bottom:8%;left:6%}
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 clamp(22px,6vw,94px); }.trust-strip div { display:flex; align-items:baseline; justify-content:center; gap:9px; padding:22px 10px; border-left:1px solid var(--line); }.trust-strip div:last-child{border-left:0}.trust-strip strong{font-size:25px;color:var(--gold-deep)}.trust-strip span{font-size:13px;color:var(--muted);font-weight:700}
.section { padding:98px clamp(22px,9vw,150px); }.section-heading { display:flex; justify-content:space-between; gap:45px; align-items:end; margin-bottom:38px; }.section-heading h2,.path-copy h2,.about-section h2,.contact-section h2 { font-size:clamp(28px,3.2vw,45px); line-height:1.4; margin:0; letter-spacing:0; font-weight:900; }.section-heading > p { max-width:410px; margin:0; color:var(--muted); font-size:15px; }.book-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.book-card { border:1px solid var(--line); padding:17px; display:flex; flex-direction:column; min-height:600px; background:#fff; position:relative; transition:transform .25s,box-shadow .25s; }.book-card:hover { transform:translateY(-6px); box-shadow:0 20px 35px #34220012; }.book-card.featured { border-color:#dcb55a; }.featured-badge{position:absolute;left:17px;top:17px;z-index:2;background:var(--gold);color:#fff;padding:5px 8px;font-size:11px;font-weight:800}.cover-wrap { height:324px; background:#f4f0e8; overflow:hidden; display:grid; place-items:center; margin-bottom:18px; }.cover-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s; }.book-card:hover .cover-wrap img { transform:scale(1.03); }.book-meta{display:flex;align-items:center;gap:9px;color:var(--gold-deep);font-size:12px;font-weight:800}.book-number{color:var(--ink);font-family:Cairo,sans-serif}.book-card h3{font-size:25px;line-height:1.35;margin:8px 0 8px}.book-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.9}.book-footer{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.price{font-weight:800;font-size:12px;color:var(--gold-deep)}.text-button{padding:0;border:0;background:transparent;color:var(--ink);font-weight:800;font-size:13px;display:flex;gap:5px;align-items:center}.text-button:hover{color:var(--gold-deep)}
.path-section { padding:76px clamp(22px,9vw,150px); background:var(--ink); color:white; display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }.path-visual { min-height:410px; background:#152c47; overflow:hidden; }.path-visual img{width:100%;height:100%;object-fit:cover;display:block}.path-copy .eyebrow{color:#e6bc50}.path-copy h2{max-width:520px}.path-copy > p{color:#d7dce3;max-width:510px}.path-list{padding:0;margin:26px 0 0;list-style:none;display:grid;gap:13px}.path-list li{display:flex;align-items:center;gap:14px}.path-list li>span{width:30px;height:30px;background:var(--gold);color:var(--ink);display:grid;place-items:center;border-radius:50%;font-weight:900;font-size:13px}.path-list strong{display:block;font-size:15px}.path-list small{color:#cbd2db;font-size:13px}
.articles-section{background:var(--soft)}.compact{align-items:center}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-card{min-height:244px;background:#fff;padding:27px;display:flex;flex-direction:column;border-top:4px solid var(--gold)}.article-card.dark{background:var(--navy);color:white;border-color:#e1b343}.article-card span{color:var(--gold-deep);font-size:12px;font-weight:800}.article-card.dark span{color:#edc25d}.article-card h3{font-size:21px;line-height:1.55;margin:14px 0 8px}.article-card p{font-size:14px;color:var(--muted);margin:0}.article-card.dark p{color:#d3dce5}.article-card button{margin-top:auto;padding-top:16px}.article-card.dark button{color:#fff}
.about-section{display:grid;grid-template-columns:150px 1fr;gap:54px;max-width:980px;margin:auto;padding:102px 22px}.about-mark{height:128px;width:128px;display:grid;place-items:center;background:var(--gold);color:var(--ink);font-family:Cairo,sans-serif;font-weight:900;font-size:74px;clip-path:polygon(50% 0,100% 18%,88% 88%,50% 100%,12% 88%,0 18%)}.about-section>div:last-child>p:last-child{color:var(--muted);max-width:680px;font-size:16px}
.contact-section{margin:0 clamp(22px,6vw,94px) 75px;padding:52px clamp(22px,6vw,90px);background:var(--gold-pale);border-right:5px solid var(--gold);display:flex;justify-content:space-between;gap:30px;align-items:center}.contact-section p:last-child{max-width:560px;color:#665a40;margin-bottom:0}.contact-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.site-footer{border-top:1px solid var(--line);padding:28px clamp(22px,6vw,94px);display:flex;gap:26px;justify-content:space-between;align-items:center}.footer-brand .brand-mark{width:34px;height:40px;font-size:22px;border-width:2px}.site-footer p{color:var(--muted);font-size:12px;margin:0}.footer-links{display:flex;gap:14px}.footer-links button{border:0;background:transparent;color:var(--muted);font-size:12px}
.cart-drawer{position:fixed;z-index:30;left:0;top:0;height:100dvh;width:min(430px,100%);background:#fff;box-shadow:15px 0 45px #0002;transform:translateX(-105%);transition:transform .3s;display:flex;flex-direction:column;padding:25px}.cart-drawer.open{transform:none}.drawer-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.drawer-header span{display:block;font-size:12px;color:var(--gold-deep);font-weight:800}.drawer-header strong{font-size:23px}.icon-button{width:38px;height:38px;border:1px solid var(--line)}.cart-items{flex:1;overflow:auto;padding:20px 0}.empty-cart{color:var(--muted);min-height:300px;display:grid;place-content:center;text-align:center}.empty-cart svg{margin:auto;width:42px;height:42px;color:var(--gold)}.empty-cart strong{color:var(--ink);margin-top:12px}.empty-cart p{margin:4px 0}.cart-item{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}.cart-item img{width:58px;height:74px;object-fit:cover}.cart-item strong{font-size:14px;line-height:1.45}.cart-item span{display:block;font-size:12px;color:var(--gold-deep);margin-top:2px}.cart-item button{background:transparent;border:0;color:var(--muted)}.drawer-footer{border-top:1px solid var(--line);padding-top:18px}.cart-total{display:flex;justify-content:space-between;margin-bottom:15px;font-size:14px}.full-width{width:100%}.overlay{display:none;position:fixed;inset:0;z-index:20;background:#0005}.overlay.open{display:block}
dialog{border:0;padding:0;max-width:min(900px,calc(100% - 30px));background:#fff;box-shadow:0 18px 70px #0003}dialog::backdrop{background:#0008}.book-dialog{width:900px}.dialog-close{position:absolute;z-index:2;left:16px;top:16px;background:#fff}.dialog-content{display:grid;grid-template-columns:310px 1fr;gap:38px;padding:38px}.dialog-cover{width:100%;height:420px;object-fit:cover;background:#f5f0e5}.dialog-content h2{font-size:37px;margin:5px 0 10px;line-height:1.35}.dialog-content p{color:var(--muted)}.dialog-list{padding:0;margin:20px 0;list-style:none;display:grid;gap:8px}.dialog-list li{display:flex;gap:8px;align-items:start;font-size:14px}.dialog-list svg{width:17px;color:var(--gold-deep);flex:none;margin-top:5px}.message-dialog{width:min(490px,calc(100% - 30px));padding:42px}.message-content{text-align:center}.message-content svg{color:var(--gold-deep);width:38px;height:38px}.message-content h2{font-size:26px;margin:10px 0}.message-content p{color:var(--muted);font-size:14px}
@media (max-width:850px){.desktop-nav{display:none}.site-header{min-height:70px;padding:10px 18px}.brand-copy strong{font-size:14px}.cart-trigger span{display:none}.cart-trigger{min-width:auto}.hero{grid-template-columns:1fr;padding:55px 24px 35px}.hero-copy{order:1}.hero-art{order:2;min-height:350px}.hero-art img{max-height:370px}.hero-label-top{right:0}.hero-label-bottom{left:0}.trust-strip{grid-template-columns:repeat(2,1fr);margin:0 24px}.trust-strip div:nth-child(2){border-left:0}.trust-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}.section{padding:68px 24px}.section-heading{display:block;margin-bottom:26px}.section-heading>p{margin-top:12px}.book-grid,.article-grid{grid-template-columns:1fr}.book-card{min-height:0}.cover-wrap{height:355px}.path-section{grid-template-columns:1fr;padding:48px 24px;gap:30px}.path-visual{min-height:260px}.about-section{grid-template-columns:1fr;gap:20px;padding:70px 24px}.contact-section{margin:0 24px 48px;padding:38px 24px;display:block}.contact-actions{margin-top:23px}.site-footer{padding:28px 24px;display:block}.site-footer p{margin:16px 0}.dialog-content{grid-template-columns:1fr;padding:30px 22px}.dialog-cover{height:320px}.dialog-content h2{font-size:31px}.dialog-close{left:12px;top:12px}.article-card{min-height:220px}}

/* Sherif School identity refresh */
body { font-weight:500; }
:root { --muted:#505050; }
.brand-mark { width:45px; height:48px; color:#fff; background:var(--ink); border:2px solid var(--gold); border-radius:4px 4px 12px 12px; position:relative; margin-top:7px; clip-path:none; }
.brand-mark:before { content:""; position:absolute; width:38px; height:10px; top:-10px; background:var(--gold); clip-path:polygon(50% 0,100% 75%,50% 100%,0 75%); }
.brand-mark:after { content:""; position:absolute; width:2px; height:17px; right:1px; top:-8px; background:var(--gold); box-shadow:2px 16px 0 2px var(--gold); }
.brand-copy { display:block; }
.hero { gap:50px; }
.hero-lead { color:#333; font-weight:600; }
.hero-art { height:540px; min-height:0; display:block; overflow:hidden; background:#f6f1e7; border-bottom:4px solid var(--gold); }
.hero-art img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:center top; display:block; }
.book-meta { flex-wrap:wrap; }
.digital-label { margin-right:auto; background:var(--gold-pale); padding:3px 6px; display:inline-flex; align-items:center; gap:4px; color:#71510e; font-size:10px; }
.digital-label svg { width:12px; height:12px; }
.book-card p,.article-card p,.path-copy > p,.site-footer p,.footer-links button { font-weight:600; }
.path-visual { min-height:0; aspect-ratio:16/10; align-self:center; background:#f4efe5; }
.path-visual img { object-position:center; }
.article-card.dark button { background:#e2b349; color:#111; padding:9px 11px; margin-top:18px; align-self:flex-start; }
.article-card.dark button:hover { background:#fff; }
.footer-brand .brand-mark { width:34px; height:40px; }
.footer-brand .brand-mark:before { width:30px; }
@media (max-width:850px) { .hero-art { height:480px; min-height:0; } .hero-art img { max-height:none; } .path-visual { min-height:0; } }

/* Official Sherif School logo */
.brand-logo { display:block; width:174px; height:56px; object-fit:contain; object-position:center; }
.about-mark { height:152px; width:152px; overflow:hidden; background:var(--navy); display:grid; place-items:center; clip-path:none; }
.about-mark img { width:100%; height:100%; object-fit:cover; }
@media (max-width:850px) { .brand-logo { width:130px; height:48px; } .about-mark { width:132px; height:132px; } }