/* Brandin' You | the holding page's identity carried to the full site (preview, 2026-10-09).
   Source: the holding page as approved in September (logo, tanween, colour rule, newsletter and footer as one beige area, "منذ 2009").
   Loaded last on each page; it only adjusts the header, the tanween marks, the newsletter, the footer and yellow use. */

/* Header: the official logo instead of typed text; the side margin restored so the logo never touches the screen edge. */
header .nav-row{padding:16px 28px;}
header .logo.brand{display:block; line-height:0;}
header .brand-logo{width:clamp(162px,18vw,216px) !important; height:auto !important; max-width:none; object-fit:contain !important; display:block;}

/* Tanween: the official mark, in the brand's own colours. */
.mark-icon{color:#324427;}
.hero-eyebrow{color:#E8DFC7 !important;}            /* on the dark hero image: beige, not yellow */
.hero .label{color:#E8DFC7 !important;}              /* about page hero label on green */
.eyebrow-tanween{display:inline-flex; align-items:center; gap:9px;}
.eyebrow-tanween img{width:auto !important; height:1.05em !important; aspect-ratio:290/320; object-fit:contain !important; display:inline-block;}

/* Newsletter and footer: one calm beige area (green for type and the button, yellow never a button). */
.newsletter{background:#E8DFC7 !important; color:#22271B !important; width:100%;}
.newsletter-inner{display:block !important; min-height:0 !important;}
.newsletter-visual{display:none !important;}
.newsletter .by-news{max-width:1280px; margin:0 auto; padding:56px 28px 36px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(28px,5vw,80px); text-align:right;}
.newsletter .newsletter-copy{padding:0 !important; max-width:none !important; margin:0 !important; display:block;}
.newsletter h2{color:#324427 !important; font-size:clamp(1.6rem,2.4vw,2.05rem) !important; font-weight:700 !important; line-height:1.35; margin:0 0 12px !important;}
.newsletter p{color:#5F6354 !important; font-weight:300; line-height:1.85; max-width:470px; margin:0 !important;}
.newsletter p strong{color:#324427 !important;}
.newsletter .badge-pill{margin-bottom:14px;}
.newsletter .by-action{min-width:0; max-width:520px; width:100%; justify-self:end;}
.newsletter .sub-form{display:flex !important; align-items:stretch; width:100%; max-width:none !important; min-height:54px; padding:4px; background:#FBF9F2; border:1px solid rgba(50,68,39,.22) !important; border-radius:8px !important; box-shadow:0 6px 20px rgba(35,47,27,.035); overflow:visible !important; margin:0;}
.newsletter .sub-form:focus-within{border-color:#324427 !important; box-shadow:0 0 0 3px rgba(50,68,39,.12);}
.newsletter .sub-form input{flex:1; min-width:0; padding:9px 13px !important; border:0 !important; outline:0; background:transparent !important; color:#22271B !important; text-align:right; font-size:.95rem;}
.newsletter .sub-form input::placeholder{color:#8D9385 !important;}
.newsletter .sub-form button{border:0 !important; border-radius:5px !important; padding:9px 16px !important; background:#324427 !important; color:#FFFFFF !important; font-size:.84rem !important; font-weight:600 !important; white-space:nowrap;}
.newsletter .sub-form button:hover{background:#232F1B !important;}
.newsletter .fine{margin-top:10px !important; color:#5F6354 !important; font-size:.76rem !important;}
footer{background:#E8DFC7 !important; border-top:0 !important; margin-top:0 !important; padding-top:8px !important;}
footer .footer-grid{border-top:1px solid #DAD2B8; padding-top:40px;}
footer .footer-mark{width:auto !important; height:28px !important; aspect-ratio:290/320; object-fit:contain !important; display:block; margin-bottom:6px;}
footer .footer-signature{color:#324427; font-weight:600;}

@media (max-width:900px){
  .newsletter .by-news{grid-template-columns:1fr; gap:22px; padding:44px 24px 28px;}
  .newsletter .by-action{justify-self:stretch; max-width:none;}
}
@media (max-width:560px){
  header .nav-row{padding:12px 20px;}
  header .brand-logo{width:150px !important;}
  .newsletter .sub-form{flex-direction:column !important; gap:4px;}
  .newsletter .sub-form input{min-height:45px;}
  .newsletter .sub-form button{min-height:43px;}
}