/* اتجاه التصميم: «مرفأ الحجر» — حداثة متوسطية مؤسسية بألوان العاجي والفحم وبرونز المرسى. */
:root { --ink:#242725; --ink-2:#363a36; --stone:#ded8cc; --stone-2:#f0ede6; --paper:#fbfaf6; --bronze:#ad7c38; --bronze-light:#d0aa6b; --olive:#5d6857; --line:rgba(36,39,37,.16); --muted:#6f716c; --white:#fff; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Tahoma, Arial, sans-serif; font-size:16px; line-height:1.8; text-align:right; overflow-x:hidden; }
img { display:block; max-width:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:fixed; right:1rem; top:-5rem; background:var(--ink); color:#fff; padding:.65rem 1rem; z-index:1000; transition:top .18s var(--ease-out); }
.skip-link:focus { top:1rem; }
.section { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(251,250,246,.94); border-bottom:1px solid rgba(36,39,37,.1); backdrop-filter:blur(16px); transition:box-shadow .22s var(--ease-out), background .22s var(--ease-out); }
.site-header.is-scrolled { box-shadow:0 7px 25px rgba(26,25,21,.08); background:rgba(251,250,246,.98); }
.topline { min-height:32px; display:flex; align-items:center; gap:1.15rem; justify-content:flex-start; padding:0 max(24px, calc((100vw - 1180px)/2)); color:#d9d7d1; background:var(--ink); font-size:11px; letter-spacing:.02em; }
.topline p { margin:0; margin-inline-end:auto; }
.topline a { transition:color .16s var(--ease-out); }
.topline a:hover { color:var(--bronze-light); }
.nav-wrap { height:78px; width:min(1320px, calc(100% - 48px)); margin-inline:auto; display:flex; align-items:center; gap:1.8rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand img { width:50px; height:50px; object-fit:contain; }
.brand__copy { display:grid; line-height:1.15; }
.brand__copy strong { font-size:20px; font-weight:700; letter-spacing:-.04em; }
.brand__copy small { color:var(--muted); font-size:10px; letter-spacing:.08em; margin-top:.28rem; }
.primary-nav { display:flex; align-items:center; gap:1.35rem; margin-inline:auto; font-size:13px; font-weight:700; color:#4f514c; }
.primary-nav a { white-space:nowrap; position:relative; }
.primary-nav a::after { content:""; position:absolute; right:0; bottom:-8px; width:0; height:1px; background:var(--bronze); transition:width .2s var(--ease-out); }
.primary-nav a:hover::after { width:100%; left:0; }
.nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-size:13px; line-height:1; font-weight:700; transition:transform .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out); }
.nav-cta { color:#fff; background:var(--ink); padding:.8rem 1rem; white-space:nowrap; }
.nav-cta:hover { background:var(--bronze); }
.nav-cta:active,.button:active { transform:scale(.97); }
.menu-toggle { width:44px; height:42px; display:none; place-content:center; gap:5px; padding:0; border:1px solid var(--line); background:transparent; }
.menu-toggle span { display:block; width:20px; height:1.5px; background:var(--ink); margin-inline:auto; transition:transform .2s var(--ease-out), opacity .2s var(--ease-out); }
.hero { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.hero__grid { width:min(1320px, calc(100% - 48px)); margin-inline:auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); min-height:670px; direction:rtl; }
.hero__copy { padding:7.3rem 4rem 4rem 0; position:relative; z-index:2; }
.eyebrow,.kicker { display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--bronze-light); }
.eyebrow span { height:1px; width:38px; background:var(--bronze); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:700; letter-spacing:-.045em; line-height:1.22; }
h1 { margin-bottom:1.4rem; font-size:clamp(43px,5vw,75px); max-width:720px; }
h1 span { display:block; color:var(--bronze-light); font-family:Arial, sans-serif; font-weight:400; }
.hero__copy > p { max-width:520px; margin-bottom:2rem; color:#dddcd5; font-size:16px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.button { min-height:48px; padding:0 1.25rem; border:1px solid transparent; }
.button--bronze { background:var(--bronze); color:#fff; }
.button--bronze:hover { background:#c28d45; }
.button--ghost { color:#f8f6ef; border-color:rgba(255,255,255,.45); }
.button--ghost:hover { background:#fff; color:var(--ink); }
.button--dark { background:var(--ink); color:#fff; }
.button--dark:hover { background:var(--bronze); }
.hero__meta { margin-top:5rem; border-top:1px solid rgba(255,255,255,.22); padding-top:1.15rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:480px; }
.hero__meta div { display:grid; gap:.2rem; }
.hero__meta b { font-size:13px; }
.hero__meta span { font-size:10px; color:#bcbdb6; line-height:1.6; }
.hero__visual { position:relative; align-self:stretch; min-height:460px; margin-left:-4rem; clip-path:polygon(11% 0,100% 0,100% 100%,0 100%,0 11%); }
.hero__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(36,39,37,.72), transparent 56%),linear-gradient(0deg,rgba(23,25,24,.25),transparent 55%); }
.hero__visual img { width:100%; height:100%; min-height:670px; }
.hero__visual-label { position:absolute; bottom:2.4rem; left:2.4rem; z-index:1; display:flex; align-items:center; gap:.75rem; color:#fff; border-bottom:1px solid var(--bronze-light); padding-bottom:.55rem; }
.hero__visual-label span { font-size:18px; color:var(--bronze-light); font-family:Arial,sans-serif; }
.hero__visual-label p { margin:0; font-size:11px; line-height:1.5; }
.hero__rail { width:min(1320px, calc(100% - 48px)); margin:auto; position:absolute; bottom:1.5rem; right:50%; transform:translateX(50%); display:flex; align-items:center; direction:ltr; gap:.6rem; color:#afb0aa; font:10px Arial,sans-serif; letter-spacing:.12em; }
.hero__rail i { width:50px; height:1px; background:var(--bronze); }
.intro { padding:7.5rem 0; }
.section__intro { display:grid; grid-template-columns:1fr .8fr; gap:5rem; align-items:end; padding-bottom:3.2rem; border-bottom:1px solid var(--line); }
.kicker { color:var(--bronze); margin-bottom:.7rem; }
.kicker::before { content:""; width:20px; height:1px; background:currentColor; }
.kicker--light { color:var(--bronze-light); }
h2 { font-size:clamp(32px,4vw,56px); margin-bottom:0; }
h2 em { color:var(--bronze); font-style:normal; font-weight:400; }
.lead { color:var(--muted); font-size:15px; margin:0; max-width:490px; }
.intro__layout { display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; padding-top:3.2rem; align-items:start; }
.intro__image { position:relative; margin:0; }
.intro__image img { width:100%; aspect-ratio:4/3; }
.intro__image figcaption { position:absolute; bottom:-1.4rem; left:-1.4rem; width:min(75%,340px); background:var(--bronze); padding:1.1rem 1.25rem; color:#fff; display:grid; line-height:1.5; }
.intro__image figcaption span { font-size:10px; color:#f4dfbd; margin-bottom:.25rem; }
.intro__image figcaption b { font-size:13px; }
.intro__details { padding-top:1rem; }
.stateless-card { display:grid; grid-template-columns:45px 1fr; gap:.85rem; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.card-no { color:var(--bronze); font:12px Arial,sans-serif; padding-top:.2rem; }
.stateless-card h3 { font-size:18px; margin-bottom:.35rem; }
.stateless-card p { color:var(--muted); font-size:13px; line-height:1.75; margin:0; }
.materials-strip { display:grid; grid-template-columns:.95fr 1.05fr; background:var(--olive); color:#fff; min-height:400px; position:relative; overflow:hidden; }
.materials-strip__image { clip-path:polygon(0 0,100% 0,88% 100%,0 100%); }
.materials-strip__image img { width:100%; height:100%; min-height:400px; }
.materials-strip__content { align-self:center; padding:4rem clamp(24px,7vw,9rem) 4rem 2rem; max-width:600px; position:relative; z-index:2; }
.materials-strip h2 { color:#fff; font-size:clamp(35px,4vw,55px); margin-bottom:1rem; }
.materials-strip h2 em { color:var(--bronze-light); }
.materials-strip__content > p:not(.kicker) { color:#e2e5dc; max-width:360px; font-size:14px; }
.text-link { display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; border-bottom:1px solid currentColor; padding-bottom:.35rem; color:var(--ink); font-size:13px; font-weight:700; transition:color .18s var(--ease-out), gap .18s var(--ease-out); }
.text-link:hover { color:var(--bronze); gap:.85rem; }
.text-link--light { color:#fff; }
.materials-strip__mark { position:absolute; color:rgba(255,255,255,.1); font:220px Arial,sans-serif; bottom:-87px; left:4%; }
.products { padding:8rem 0; }
.products__heading { display:grid; grid-template-columns:1fr .62fr; align-items:end; gap:3.5rem; }
.products__heading > p { color:var(--muted); font-size:14px; margin:0; max-width:350px; }
.product-filters { display:flex; flex-wrap:wrap; gap:.4rem; padding:2.5rem 0 1.7rem; border-bottom:1px solid var(--line); }
.filter { border:1px solid var(--line); background:transparent; color:var(--muted); padding:.55rem .85rem; font-size:12px; cursor:pointer; transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out); }
.filter:hover,.filter.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem 1.4rem; padding-top:2.2rem; }
.product-card { background:#fff; border:1px solid rgba(36,39,37,.11); transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out); overflow:hidden; }
.product-card:hover { transform:translateY(-7px); box-shadow:0 16px 35px rgba(30,28,23,.12); }
.product-card.is-hidden { display:none; }
.product-card__image { position:relative; height:245px; overflow:hidden; background:#dedbd3; }
.product-card__image img { width:100%; height:100%; transition:transform .55s var(--ease-out); }
.product-card:hover .product-card__image img { transform:scale(1.055); }
.product-card__image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(34,35,31,.25),transparent 46%); }
.product-card__image span { position:absolute; right:1rem; top:.9rem; z-index:1; font:11px Arial,sans-serif; color:#fff; border-bottom:1px solid var(--bronze-light); padding-bottom:.3rem; }
.product-card__body { padding:1.25rem 1.25rem 1.35rem; }
.product-type { color:var(--bronze); font-size:10px; letter-spacing:.08em; margin-bottom:.4rem; }
.product-card h3 { font-size:22px; margin-bottom:.45rem; }
.product-card__body > p:not(.product-type) { color:var(--muted); font-size:13px; margin-bottom:1.1rem; line-height:1.7; min-height:43px; }
.product-card dl { margin:0 0 1rem; padding:0; border-top:1px solid var(--line); }
.product-card dl div { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid var(--line); font-size:10px; }
.product-card dt { color:var(--muted); }
.product-card dd { margin:0; font-weight:700; text-align:left; }
.product-link { display:flex; justify-content:space-between; align-items:center; color:var(--ink); font-size:12px; font-weight:700; transition:color .18s var(--ease-out); }
.product-link span { color:var(--bronze); font-size:17px; transition:transform .18s var(--ease-out); }
.product-link:hover { color:var(--bronze); }.product-link:hover span { transform:translateX(-5px); }
.section--muted { background:var(--stone-2); width:100%; padding:7rem max(24px, calc((100vw - 1180px)/2)); }
.showroom__layout { max-width:1180px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr .42fr; align-items:center; gap:1.7rem; }
.showroom__copy h2 { margin-bottom:1.2rem; }.showroom__copy > p:not(.kicker) { color:var(--muted); font-size:14px; max-width:350px; margin-bottom:1.6rem; }
.showroom__image { position:relative; margin:0; }.showroom__image img { width:100%; aspect-ratio:4/3; }.showroom__image figcaption { position:absolute; bottom:0; right:0; background:var(--ink); color:#fff; padding:.8rem 1rem; font-size:12px; line-height:1.55; }.showroom__small { align-self:end; margin:0 0 -2.8rem; border:9px solid var(--paper); box-shadow:0 8px 20px rgba(25,25,21,.12); }.showroom__small img { aspect-ratio:3/4; }
.import { color:#fff; min-height:670px; position:relative; overflow:hidden; background:var(--ink); }.import__visual { position:absolute; inset:0; }.import__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(29,31,29,.94) 0%,rgba(29,31,29,.7) 48%,rgba(29,31,29,.32) 100%); }.import__visual img { height:100%; width:100%; }.import__content { min-height:560px; position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:7rem; }.import__title h2 { color:#fff; margin-bottom:1.1rem; }.import__title h2 em { color:var(--bronze-light); }.import__title > p:not(.kicker) { color:#d6d7d1; font-size:14px; max-width:380px; }.country-list { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.28); border-right:1px solid rgba(255,255,255,.28); }.country { min-height:115px; padding:1.2rem; display:grid; grid-template-columns:25px 1fr auto; gap:.5rem; align-items:start; border-left:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28); background:rgba(30,32,30,.16); transition:background .2s var(--ease-out); }.country:hover { background:rgba(173,124,56,.42); }.country b { font:10px Arial,sans-serif; color:var(--bronze-light); }.country span { font-size:19px; font-weight:700; }.country i { font:10px Arial,sans-serif; font-style:normal; color:#dbd8ce; padding-top:.35rem; }.import__route { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding-bottom:2.2rem; font-size:11px; color:#dbd8d0; }.import__route i { height:1px; flex:1; background:linear-gradient(90deg,var(--bronze),rgba(255,255,255,.35)); }.import__route b { color:var(--bronze-light); }
.why { padding:8rem 0; display:grid; grid-template-columns:.72fr 1.28fr; gap:6rem; }.why__header > p:not(.kicker) { color:var(--muted); font-size:14px; max-width:290px; margin-top:1.25rem; }.why__grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-right:1px solid var(--line); }.why-card { min-height:195px; padding:1.35rem; border-left:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s var(--ease-out); }.why-card:hover { background:var(--stone-2); }.why-card span { font:11px Arial,sans-serif; color:var(--bronze); }.why-card h3 { font-size:19px; margin:.9rem 0 .45rem; }.why-card p { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }.logistics-banner { height:min(68vw,535px); min-height:380px; position:relative; color:#fff; overflow:hidden; }.logistics-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,27,25,.8),rgba(24,27,25,.06) 70%); }.logistics-banner img { width:100%; height:100%; }.logistics-banner__copy { position:absolute; z-index:1; right:max(24px,calc((100vw - 1180px)/2)); top:50%; transform:translateY(-50%); }.logistics-banner__copy span { color:var(--bronze-light); font-size:12px; }.logistics-banner__copy h2 { color:#fff; margin-top:.55rem; }.logistics-banner__copy h2 em { color:var(--bronze-light); }.section--soft { padding:6rem 0; display:grid; grid-template-columns:1fr .82fr; gap:5rem; align-items:center; }.shipment__image img { width:100%; aspect-ratio:16/9; }.shipment__text > p:not(.kicker) { color:var(--muted); font-size:14px; max-width:360px; }.shipment__text h2 { margin-bottom:1.1rem; }
.contact { position:relative; color:#fff; background:var(--ink); overflow:hidden; }.contact__background { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.12) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.09) 50%,transparent 51%); background-size:86px 86px; transform:skewY(-5deg) scale(1.2); }.contact__inner { position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:6rem; padding-top:7rem; padding-bottom:7rem; }.contact__heading h2 { color:#fff; margin-bottom:1.1rem; }.contact__heading h2 em { color:var(--bronze-light); }.contact__heading > p:not(.kicker) { color:#d8dad2; font-size:14px; max-width:350px; }.contact__cards { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.26); border-right:1px solid rgba(255,255,255,.26); }.contact-card { min-height:125px; display:flex; align-items:center; gap:.8rem; padding:1rem; border-left:1px solid rgba(255,255,255,.26); border-bottom:1px solid rgba(255,255,255,.26); transition:background .2s var(--ease-out); }.contact-card:hover { background:rgba(173,124,56,.3); }.contact-card__icon { width:30px; color:var(--bronze-light); font-family:Arial,sans-serif; font-size:21px; text-align:center; }.contact-card span:nth-child(2) { display:grid; line-height:1.4; }.contact-card small { color:#d2d2cc; font-size:10px; }.contact-card b,.contact-card bdi { font-size:13px; color:#fff; font-weight:700; word-break:break-word; }.contact-card i { margin-inline-start:auto; font-style:normal; color:var(--bronze-light); }.contact-card--location { background:rgba(255,255,255,.045); }.site-footer { background:#181a18; color:#deded9; }.footer__top { padding-top:4rem; padding-bottom:3rem; display:flex; justify-content:space-between; gap:4rem; }.brand--footer img { width:60px; height:60px; }.brand--footer .brand__copy strong { color:#fff; }.brand--footer .brand__copy small { color:#aeb0a8; }.footer__brand > p { margin:1.2rem 0 0; max-width:290px; color:#adb0a8; font-size:12px; }.footer__links { display:flex; gap:5rem; }.footer__links div { display:grid; align-content:start; gap:.55rem; font-size:12px; }.footer__links p { color:var(--bronze-light); margin:0 0 .35rem; font-size:11px; }.footer__links a,.footer__links span { color:#deded9; transition:color .18s var(--ease-out); }.footer__links a:hover { color:var(--bronze-light); }.footer__bottom { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.15); padding-top:1rem; padding-bottom:1rem; color:#a3a69e; font-size:10px; }.footer__bottom a { color:var(--bronze-light); }.whatsapp-float { position:fixed; z-index:90; left:20px; bottom:20px; display:flex; align-items:center; gap:.45rem; background:#286347; color:#fff; padding:.72rem .95rem; box-shadow:0 8px 20px rgba(14,27,20,.3); font-size:12px; transition:transform .18s var(--ease-out),background .18s var(--ease-out); }.whatsapp-float:hover { transform:translateY(-3px); background:#347a57; }.whatsapp-float span { border:1px solid rgba(255,255,255,.65); width:18px; height:18px; display:grid; place-content:center; border-radius:50%; font-size:12px; }.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); }.reveal.is-visible { opacity:1; transform:none; }.reveal--delay { transition-delay:.09s; }
@media (max-width:1050px) { .primary-nav { gap:.8rem; font-size:12px; }.nav-cta { font-size:11px; }.hero__grid { grid-template-columns:.95fr 1.05fr; }.hero__copy { padding-right:0; }.intro__layout { gap:3rem; }.product-grid { grid-template-columns:repeat(2,1fr); }.showroom__layout { grid-template-columns:.8fr 1.2fr; }.showroom__small { display:none; }.why { gap:3rem; }.contact__inner { gap:3rem; } }
@media (max-width:780px) { body { font-size:15px; }.section { width:min(100% - 36px, 620px); }.topline { padding:0 18px; gap:.55rem; font-size:9px; }.topline a:last-child { display:none; }.nav-wrap { width:calc(100% - 36px); height:68px; gap:.75rem; }.brand img { width:43px; height:43px; }.brand__copy strong { font-size:18px; }.brand__copy small { font-size:8px; }.menu-toggle { display:grid; margin-inline-start:auto; }.nav-cta { display:none; }.primary-nav { display:none; position:absolute; top:100%; right:0; left:0; margin:0; padding:1rem 18px 1.25rem; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 10px 20px rgba(33,34,30,.08); }.primary-nav.is-open { display:grid; gap:.85rem; }.primary-nav a { padding:.3rem 0; }.menu-toggle.is-open span:first-child { transform:translateY(6px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity:0; }.menu-toggle.is-open span:last-child { transform:translateY(-6px) rotate(-45deg); }.hero__grid { width:100%; min-height:auto; display:flex; flex-direction:column; }.hero__copy { padding:4rem 24px 2.4rem; }.hero__visual { order:-1; height:300px; min-height:0; margin:0; clip-path:none; }.hero__visual img { min-height:0; height:100%; }.hero__visual::after { background:linear-gradient(0deg,rgba(36,39,37,.62),transparent 60%); }.hero__visual-label { bottom:1rem; left:1.2rem; }.hero__rail { display:none; }.hero__copy > p { font-size:14px; }.hero__meta { margin-top:2.3rem; }.section__intro,.intro__layout,.materials-strip,.products__heading,.showroom__layout,.import__content,.why,.section--soft,.contact__inner { grid-template-columns:1fr; gap:2rem; }.intro { padding:4.5rem 0; }.section__intro { padding-bottom:2.2rem; }.intro__image figcaption { left:0; bottom:0; max-width:100%; width:auto; }.intro__details { padding-top:0; }.materials-strip { min-height:0; }.materials-strip__image { clip-path:none; height:280px; }.materials-strip__image img { min-height:0; }.materials-strip__content { padding:3rem 24px; }.materials-strip__mark { font-size:140px; bottom:-57px; }.products { padding:4.5rem 0; }.products__heading > p { max-width:unset; }.product-grid { grid-template-columns:1fr; gap:1.5rem; }.product-card__image { height:255px; }.section--muted { padding:4.5rem 18px; }.showroom__copy { order:0; }.showroom__image { order:1; }.import { min-height:0; }.import__content { width:calc(100% - 36px); min-height:0; padding:4.5rem 0 2rem; }.import__visual::after { background:rgba(29,31,29,.76); }.country-list { margin-top:.5rem; }.import__route { width:calc(100% - 36px); flex-wrap:wrap; gap:.45rem; padding-bottom:2.5rem; }.import__route i { min-width:16px; }.why { padding:4.5rem 0; }.why__grid { margin-top:.5rem; }.why-card { min-height:170px; padding:1rem; }.why-card h3 { font-size:16px; }.logistics-banner { min-height:350px; height:80vw; }.logistics-banner__copy { right:24px; }.section--soft { padding:4.5rem 0; }.shipment__text { padding-inline:0; }.contact__inner { padding-top:4.5rem; padding-bottom:4.5rem; }.footer__top { flex-direction:column; gap:2rem; padding-top:3.2rem; }.footer__links { justify-content:space-between; gap:1.5rem; }.footer__bottom { flex-direction:column; padding:1rem 0; }.whatsapp-float { left:14px; bottom:14px; }.whatsapp-float b { display:none; }.whatsapp-float { width:46px; height:46px; padding:0; justify-content:center; } }
@media (max-width:410px) { h1 { font-size:39px; }.hero__meta { gap:.8rem; }.country { padding:.9rem; grid-template-columns:20px 1fr; }.country i { display:none; }.contact__cards { grid-template-columns:1fr; }.why__grid { grid-template-columns:1fr; }.footer__links { gap:1rem; }.product-filters { gap:.3rem; }.filter { padding:.45rem .6rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.reveal { opacity:1; transform:none; } }

/* تعزيز هوية «مرفأ الحجر»: القوس/الرافعة ومسار التوريد وملصقات الشحن. */
.brand { position:relative; }
.brand::before { content:""; width:4px; height:43px; position:absolute; right:25px; top:3px; background:var(--bronze); opacity:.72; z-index:-1; }
.brand img { width:60px; height:60px; filter:drop-shadow(0 5px 7px rgba(36,39,37,.12)); }
.brand__copy strong { letter-spacing:-.06em; }
.hero::before { content:""; position:absolute; z-index:1; right:0; bottom:0; width:56%; height:5px; border-top:1px solid rgba(208,170,107,.85); border-bottom:1px solid rgba(208,170,107,.45); pointer-events:none; }
.hero__rail { z-index:2; }
.hero__rail::before { content:""; width:22px; height:22px; border:1px solid var(--bronze); border-left-color:transparent; transform:rotate(-45deg); margin-left:.25rem; }
.intro,.products,.why { position:relative; }
.intro::before,.products::before,.why::before { content:""; position:absolute; pointer-events:none; left:max(18px,calc((100vw - 1280px)/2)); top:0; width:1px; height:108px; background:var(--bronze); box-shadow:7px 0 0 rgba(173,124,56,.28); }
.intro::after { content:""; position:absolute; pointer-events:none; left:max(20px,calc((100vw - 1310px)/2)); bottom:34px; width:132px; height:132px; background:url('../icons/saraia-mark.webp') center / contain no-repeat; opacity:.05; }
.products__heading .kicker,.why__header .kicker { letter-spacing:.16em; font-size:10px; }
.product-card { position:relative; border-color:rgba(36,39,37,.2); box-shadow:inset 0 0 0 4px rgba(251,250,246,.8); }
.product-card::before { content:""; position:absolute; z-index:2; top:9px; left:9px; right:9px; height:3px; border-top:1px solid rgba(173,124,56,.9); border-bottom:1px solid rgba(173,124,56,.48); pointer-events:none; }
.product-card__image { height:258px; }
.product-card__image span { top:auto; bottom:-8px; right:1rem; border:0; padding:0; color:rgba(255,255,255,.92); font-size:50px; line-height:1; font-weight:700; text-shadow:0 2px 13px rgba(0,0,0,.2); }
.product-card__body { position:relative; padding-top:2rem; }
.product-card__body::before { content:"SB / LY  •  أسواق متعددة"; position:absolute; top:.7rem; right:1.25rem; color:var(--bronze); font-family:Arial,sans-serif; letter-spacing:.12em; font-size:8px; font-weight:700; }
.product-card .product-type { text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.product-card dl { border-top:1px dashed rgba(36,39,37,.32); background:linear-gradient(90deg,transparent 0,rgba(240,237,230,.64) 100%); padding:.2rem .5rem; }
.product-card dl div { border-bottom:1px dashed rgba(36,39,37,.18); }
.product-card dl div:last-child { border-bottom:0; }
.product-link { border-top:1px solid rgba(173,124,56,.5); padding-top:.7rem; }
.import__content { position:relative; }
.import__content::after { content:"SB"; position:absolute; left:0; bottom:25px; color:rgba(208,170,107,.45); font:700 34px Arial,sans-serif; border:1px solid rgba(208,170,107,.52); padding:.25rem .55rem; letter-spacing:.06em; }
.country { position:relative; }
.country::before { content:""; position:absolute; left:10px; top:10px; width:15px; height:15px; border-left:1px solid rgba(208,170,107,.65); border-top:1px solid rgba(208,170,107,.65); }
.why__grid { position:relative; }
.why__grid::before { content:"مسار التوريد  /  SB"; position:absolute; left:0; top:-26px; color:var(--bronze); font:700 9px Arial,sans-serif; letter-spacing:.13em; }
.site-footer { position:relative; overflow:hidden; }
.site-footer::before { content:""; position:absolute; left:-32px; bottom:-58px; width:214px; height:214px; background:url('../icons/saraia-mark.webp') center / contain no-repeat; opacity:.055; filter:grayscale(1); }
.brand--footer img { width:72px; height:72px; }
@media (max-width:780px) { .brand img { width:49px; height:49px; }.brand::before { right:20px; height:36px; }.intro::before,.products::before,.why::before { height:64px; left:12px; }.intro::after { width:92px; height:92px; bottom:8px; left:10px; }.product-card__image { height:265px; }.import__content::after { left:0; bottom:12px; font-size:25px; }.hero::before { width:72%; }.brand--footer img { width:65px; height:65px; } }