{"id":37,"date":"2026-07-14T10:55:15","date_gmt":"2026-07-14T10:55:15","guid":{"rendered":"https:\/\/chemcastscientific.com\/?page_id=37"},"modified":"2026-07-14T13:12:10","modified_gmt":"2026-07-14T13:12:10","slug":"about-us","status":"publish","type":"page","link":"https:\/\/chemcastscientific.com\/?page_id=37","title":{"rendered":"About us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"37\" class=\"elementor elementor-37\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2b2777 e-con-full e-flex e-con e-parent\" data-id=\"c2b2777\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b73e07 elementor-widget elementor-widget-html\" data-id=\"8b73e07\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     DIYAR AL SAFWA \u2014 ABOUT US PAGE\r\n     Paste into a single Elementor HTML widget. Assumes your theme\r\n     supplies the site header\/nav and footer \u2014 neither is included\r\n     here. The hero (video + headline) IS included.\r\n     Search \"EDITABLE\" for every spot to adjust.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Manrope:wght@400;500;700;800&display=swap');\r\n\r\n  .das-page {\r\n    --das-teal-deep:  #075464;\r\n    --das-teal-dark:  #073F49;\r\n    --das-gold:       #B8A077;\r\n    --das-gold-soft:  #CDBA98;\r\n    --das-gold-pale:  #E4DAC4;\r\n    --das-ivory:      #F7F5F0;\r\n    --das-white:      #FFFFFF;\r\n    --das-gray:       #E8E5DE;\r\n    --das-text:       #0E3A42;\r\n    --das-text-soft:  #4A6B70;\r\n\r\n    --das-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\r\n    --das-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    --das-ease: cubic-bezier(0.16, 1, 0.3, 1);\r\n\r\n    font-family: var(--das-sans);\r\n    color: var(--das-text);\r\n    background: var(--das-white);\r\n    overflow-x: hidden;\r\n    position: relative;\r\n    scroll-behavior: smooth;\r\n  }\r\n  .das-page * { box-sizing: border-box; }\r\n  .das-page img { max-width: 100%; display: block; }\r\n  .das-page a { text-decoration: none; color: inherit; }\r\n  .das-page button { font-family: inherit; cursor: pointer; background: none; border: none; }\r\n  .das-page ul { list-style: none; margin: 0; padding: 0; }\r\n  .das-page :focus-visible { outline: 2px solid var(--das-gold); outline-offset: 3px; }\r\n\r\n  .das-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }\r\n  .das-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--das-gold); }\r\n\r\n  .das-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--das-ease), transform 0.8s var(--das-ease); }\r\n  .das-reveal.das-in { opacity: 1; transform: translateY(0); }\r\n  .das-reveal--stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--das-ease), transform 0.7s var(--das-ease); }\r\n  .das-reveal--stagger.das-in > * { opacity: 1; transform: translateY(0); }\r\n  .das-reveal--stagger.das-in > *:nth-child(1) { transition-delay: 0.03s; }\r\n  .das-reveal--stagger.das-in > *:nth-child(2) { transition-delay: 0.10s; }\r\n  .das-reveal--stagger.das-in > *:nth-child(3) { transition-delay: 0.17s; }\r\n  .das-reveal--stagger.das-in > *:nth-child(4) { transition-delay: 0.24s; }\r\n  .das-reveal--stagger.das-in > *:nth-child(5) { transition-delay: 0.31s; }\r\n  .das-reveal--stagger.das-in > *:nth-child(6) { transition-delay: 0.38s; }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .das-page * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }\r\n    .das-reveal, .das-reveal--stagger > * { opacity: 1 !important; transform: none !important; }\r\n    .das-parallax__media img { transform: none !important; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     HERO\r\n     ============================================================ *\/\r\n  .das-hero { position: relative; width: 100%; min-height: 92vh; overflow: hidden; background: var(--das-teal-dark); isolation: isolate; }\r\n  .das-hero__media { position: absolute; inset: 0; z-index: 0; transform: scale(1.08); animation: das-hero-settle 2.4s var(--das-ease) forwards; }\r\n  @keyframes das-hero-settle { to { transform: scale(1); } }\r\n  .das-hero__video, .das-hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }\r\n  .das-hero__fallback { background: linear-gradient(160deg, #0d5c6b 0%, #073f49 60%, #062e35 100%); z-index: -1; }\r\n  .das-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,63,73,0.42) 0%, rgba(7,63,73,0.08) 32%, rgba(7,63,73,0.14) 55%, rgba(7,63,73,0.68) 100%); }\r\n  .das-hero__content { position: relative; z-index: 5; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 32px 72px; padding-bottom: max(72px, env(safe-area-inset-bottom, 0px) + 48px); }\r\n  .das-hero__descriptor { opacity: 0; transform: translateY(14px); animation: das-fade-in 0.9s var(--das-ease) 0.35s forwards; color: var(--das-gold-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }\r\n  .das-hero__descriptor .das-rule { width: 32px; height: 1px; background: var(--das-gold); display: inline-block; }\r\n  .das-hero__headline { opacity: 0; transform: translateY(26px); animation: das-fade-in 1.05s var(--das-ease) 0.52s forwards; font-family: var(--das-serif); font-weight: 500; font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.98; color: var(--das-white); margin: 0; max-width: 24ch; letter-spacing: -0.01em; }\r\n  .das-hero__headline em { font-style: italic; color: var(--das-gold-soft); }\r\n  .das-scroll { position: absolute; right: 32px; bottom: 40px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: das-fade-in 0.9s var(--das-ease) 1s forwards; }\r\n  .das-scroll span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,245,240,0.75); writing-mode: vertical-rl; }\r\n  .das-scroll__line { width: 1px; height: 46px; background: rgba(247,245,240,0.35); position: relative; overflow: hidden; }\r\n  .das-scroll__line::after { content: \"\"; position: absolute; top: -100%; left: 0; right: 0; height: 100%; background: var(--das-gold); animation: das-scroll-drip 1.8s ease-in-out infinite; }\r\n  @keyframes das-scroll-drip { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }\r\n  @keyframes das-fade-in { to { opacity: 1; transform: translateY(0); } }\r\n  @media (max-width: 760px) { .das-hero__content { padding: 0 20px 60px; } }\r\n\r\n  \/* ============================================================\r\n     SIGNATURE SECTION \u2014 tab switcher, content swaps in place\r\n     ============================================================ *\/\r\n  .das-signature { position: relative; background: var(--das-teal-dark); padding: 100px 0 130px; overflow: hidden; }\r\n  .das-signature__ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--das-serif); font-weight: 600; font-size: clamp(9rem, 24vw, 22rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(247,245,240,0.07); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; }\r\n  .das-signature__tabs { position: relative; z-index: 3; display: inline-flex; gap: 6px; background: rgba(247,245,240,0.06); border: 1px solid rgba(247,245,240,0.12); padding: 6px; border-radius: 40px; margin-bottom: 64px; }\r\n  .das-signature__tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247,245,240,0.6); transition: background 0.4s var(--das-ease), color 0.4s var(--das-ease); }\r\n  .das-signature__tab svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n  .das-signature__tab:hover { color: var(--das-white); background: rgba(247,245,240,0.08); }\r\n  .das-signature__tab[aria-selected=\"true\"] { background: var(--das-gold); color: var(--das-teal-dark); }\r\n  .das-signature__tab[aria-selected=\"true\"]:hover { background: var(--das-gold-soft); color: var(--das-teal-dark); }\r\n  .das-signature__stage { position: relative; z-index: 2; }\r\n  .das-signature__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px; transition: opacity 0.32s ease, transform 0.32s ease; }\r\n  .das-signature__stage.das-switching .das-signature__grid { opacity: 0; transform: translateY(10px); }\r\n  .das-signature__headline { font-family: var(--das-serif); font-weight: 500; font-size: clamp(3rem, 6.2vw, 5.4rem); line-height: 0.98; color: var(--das-white); margin: 0; }\r\n  .das-signature__headline .das-line { display: block; }\r\n  .das-signature__headline .das-line--accent { color: var(--das-gold); font-style: italic; font-weight: 600; }\r\n  .das-signature__card { position: relative; background: linear-gradient(160deg, var(--das-gold-pale) 0%, var(--das-gold-soft) 100%); border-radius: 18px; padding: 38px 36px 30px; box-shadow: 0 40px 70px rgba(3,20,24,0.45); justify-self: end; max-width: 420px; width: 100%; transform: rotate(0.4deg); }\r\n  .das-signature__card-title { font-family: var(--das-serif); font-size: 1.55rem; font-weight: 600; color: var(--das-teal-dark); line-height: 1.15; margin: 0 0 14px; }\r\n  .das-signature__card-body { font-size: 14.5px; line-height: 1.65; color: rgba(7,63,73,0.82); margin: 0; }\r\n  .das-signature__card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(7,63,73,0.16); }\r\n  .das-signature__dots { display: flex; }\r\n  .das-signature__dots span { width: 26px; height: 26px; border-radius: 50%; background: rgba(247,245,240,0.9); border: 2px solid var(--das-gold-soft); margin-left: -8px; }\r\n  .das-signature__dots span:first-child { margin-left: 0; }\r\n  .das-signature__card-link {\r\n    font-family: var(--das-serif) !important; font-style: italic; font-size: 14px !important;\r\n    color: var(--das-teal-dark) !important; font-weight: 600; display: inline-flex !important;\r\n    align-items: center; gap: 6px; opacity: 1 !important; visibility: visible !important;\r\n  }\r\n  .das-signature__card-link:visited { color: var(--das-teal-dark) !important; }\r\n  .das-signature__card-link svg { transition: transform 0.35s var(--das-ease); }\r\n  .das-signature__card:hover .das-signature__card-link svg { transform: translateX(4px); }\r\n  @media (max-width: 900px) {\r\n    .das-signature { padding: 80px 0 90px; }\r\n    .das-signature__grid { grid-template-columns: 1fr; gap: 48px; }\r\n    .das-signature__card { justify-self: start; max-width: 100%; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     SHARED: full-bleed parallax photo section\r\n     ============================================================ *\/\r\n  .das-parallax { position: relative; overflow: hidden; background: var(--das-teal-dark); }\r\n  .das-parallax__media { position: absolute; inset: -12% 0; z-index: 0; }\r\n  .das-parallax__media img { width: 100%; height: 124%; object-fit: cover; will-change: transform; }\r\n  .das-parallax__scrim { position: absolute; inset: 0; z-index: 1; }\r\n  .das-parallax__content { position: relative; z-index: 2; }\r\n\r\n  \/* ============================================================\r\n     STORY \u2014 full-bleed photo, oversized quote, no side-by-side card\r\n     ============================================================ *\/\r\n  .das-story { min-height: 640px; display: flex; align-items: center; padding: 120px 0; }\r\n  .das-story .das-parallax__scrim { background: linear-gradient(100deg, rgba(7,63,73,0.92) 0%, rgba(7,63,73,0.72) 42%, rgba(7,63,73,0.30) 100%); }\r\n  .das-story__inner { max-width: 640px; }\r\n  .das-story__quote { font-family: var(--das-serif); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.28; color: var(--das-white); margin: 18px 0 26px; }\r\n  .das-story__quote .das-accent { color: var(--das-gold-soft); font-style: normal; font-weight: 600; }\r\n  .das-story p.das-story__body { font-size: 15.5px; line-height: 1.8; color: rgba(247,245,240,0.78); max-width: 52ch; margin: 0; }\r\n  @media (max-width: 700px) { .das-story { padding: 90px 0; min-height: auto; } }\r\n\r\n  \/* ============================================================\r\n     VISION & MISSION \u2014 manifesto over photo\r\n     ============================================================ *\/\r\n  .das-manifesto { min-height: 720px; display: flex; align-items: center; padding: 130px 0; }\r\n  .das-manifesto .das-parallax__scrim { background: linear-gradient(180deg, rgba(7,63,73,0.55) 0%, rgba(7,63,73,0.80) 60%, rgba(7,63,73,0.94) 100%); }\r\n  .das-manifesto__vision { text-align: center; max-width: 900px; margin: 0 auto 56px; }\r\n  .das-manifesto__vision p.das-eyebrow { color: var(--das-gold-soft); }\r\n  .das-manifesto__vision h2 {\r\n    font-family: var(--das-serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem);\r\n    line-height: 1.18; color: var(--das-white); margin: 18px 0 0;\r\n  }\r\n  .das-manifesto__vision h2 em { font-style: italic; color: var(--das-gold); }\r\n  .das-manifesto__mission {\r\n    max-width: 460px; margin: 0 auto; text-align: left;\r\n    background: rgba(247,245,240,0.08); backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(247,245,240,0.18); border-radius: 4px;\r\n    padding: 30px 32px;\r\n  }\r\n  .das-manifesto__mission .das-eyebrow { color: var(--das-gold); }\r\n  .das-manifesto__mission h3 { font-family: var(--das-serif); font-size: 1.5rem; color: var(--das-white); margin: 10px 0 12px; font-weight: 600; }\r\n  .das-manifesto__mission p { font-size: 14.5px; line-height: 1.7; color: rgba(247,245,240,0.75); margin: 0; }\r\n  @media (max-width: 700px) { .das-manifesto { padding: 90px 0; min-height: auto; } }\r\n\r\n  \/* ============================================================\r\n     SECTION SCAFFOLD\r\n     ============================================================ *\/\r\n  .das-section { position: relative; padding: 110px 0; background: var(--das-white); }\r\n  .das-section--ivory { background: var(--das-ivory); }\r\n  .das-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }\r\n  .das-section-title { font-family: var(--das-serif); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05; margin: 10px 0 0; color: var(--das-teal-dark); }\r\n  .das-section-title .das-italic { font-style: italic; color: var(--das-gold); }\r\n  @media (max-width: 760px) { .das-section { padding: 72px 0; } .das-section-head { flex-direction: column; align-items: flex-start; gap: 18px; } }\r\n\r\n  \/* ============================================================\r\n     VALUES \u2014 accordion, not a static grid\r\n     ============================================================ *\/\r\n  .das-values-acc { border-top: 1px solid var(--das-gray); }\r\n  .das-value-row { border-bottom: 1px solid var(--das-gray); position: relative; overflow: hidden; }\r\n  .das-value-row__head {\r\n    width: 100%; display: flex; align-items: center; gap: 26px; padding: 26px 4px;\r\n    text-align: left; position: relative; z-index: 1;\r\n  }\r\n  .das-value-row__num {\r\n    font-family: var(--das-serif); font-size: 1.1rem; color: var(--das-gold);\r\n    min-width: 30px; transition: transform 0.4s var(--das-ease);\r\n  }\r\n  .das-value-row__ghost {\r\n    position: absolute; right: 0; top: 50%; transform: translateY(-50%);\r\n    font-family: var(--das-serif); font-size: 7rem; line-height: 1; color: var(--das-gray);\r\n    opacity: 0; z-index: 0; transition: opacity 0.5s ease, transform 0.5s ease;\r\n    transform: translateY(-50%) translateX(20px);\r\n  }\r\n  .das-value-row.das-open .das-value-row__ghost,\r\n  .das-value-row__head:hover + .das-value-row__ghost { opacity: 0.5; }\r\n  .das-value-row__title { font-family: var(--das-serif); font-size: 1.35rem; color: var(--das-teal-dark); font-weight: 600; flex: 1; }\r\n  .das-value-row__icon {\r\n    width: 30px; height: 30px; border: 1px solid var(--das-gray); border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n    transition: transform 0.45s var(--das-ease), background 0.4s ease, border-color 0.4s ease;\r\n  }\r\n  .das-value-row.das-open .das-value-row__icon { transform: rotate(135deg); background: var(--das-gold); border-color: var(--das-gold); }\r\n  .das-value-row.das-open .das-value-row__icon svg { stroke: var(--das-white); }\r\n  .das-value-row__panel { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--das-ease); position: relative; z-index: 1; }\r\n  .das-value-row__panel-inner { padding: 0 4px 28px 56px; font-size: 15px; line-height: 1.7; color: var(--das-text-soft); max-width: 60ch; }\r\n  @media (max-width: 700px) {\r\n    .das-value-row__ghost { display: none; }\r\n    .das-value-row__panel-inner { padding-left: 4px; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     QUALITY \u2014 full-bleed photo, glass checklist card\r\n     ============================================================ *\/\r\n  .das-quality-band { min-height: 620px; display: flex; align-items: center; padding: 110px 0; }\r\n  .das-quality-band .das-parallax__scrim { background: linear-gradient(100deg, rgba(7,63,73,0.20) 0%, rgba(7,63,73,0.55) 45%, rgba(7,63,73,0.92) 100%); }\r\n  .das-quality-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }\r\n  .das-quality-band__copy h2 { font-family: var(--das-serif); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--das-white); margin: 16px 0 20px; line-height: 1.1; }\r\n  .das-quality-band__copy p { font-size: 15px; line-height: 1.75; color: rgba(247,245,240,0.75); max-width: 44ch; }\r\n  .das-quality-band__card {\r\n    background: rgba(247,245,240,0.1); backdrop-filter: blur(12px);\r\n    border: 1px solid rgba(247,245,240,0.2); border-radius: 6px; padding: 12px 30px;\r\n  }\r\n  .das-quality-band__item { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(247,245,240,0.16); }\r\n  .das-quality-band__item:last-child { border-bottom: none; }\r\n  .das-quality-band__item svg { color: var(--das-gold); flex-shrink: 0; }\r\n  .das-quality-band__item span { font-size: 14.5px; color: var(--das-white); font-weight: 600; }\r\n  @media (max-width: 850px) {\r\n    .das-quality-band { padding: 90px 0; min-height: auto; }\r\n    .das-quality-band__grid { grid-template-columns: 1fr; gap: 32px; }\r\n  }\r\n\r\n  \/* ============================================================\r\n     PROCESS \u2014 vertical timeline, scroll-driven progress line\r\n     ============================================================ *\/\r\n  .das-timeline { position: relative; padding-left: 64px; max-width: 720px; }\r\n  .das-timeline__rail { position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: var(--das-gray); }\r\n  .das-timeline__progress { position: absolute; left: 14px; top: 6px; width: 2px; height: 0%; background: var(--das-gold); transition: height 0.1s linear; }\r\n  .das-timeline__step { position: relative; padding-bottom: 56px; }\r\n  .das-timeline__step:last-child { padding-bottom: 0; }\r\n  .das-timeline__dot {\r\n    position: absolute; left: -64px; top: 0; width: 30px; height: 30px; border-radius: 50%;\r\n    background: var(--das-white); border: 2px solid var(--das-gray); display: flex; align-items: center; justify-content: center;\r\n    font-family: var(--das-serif); font-size: 13px; color: var(--das-teal-dark); transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;\r\n  }\r\n  .das-timeline__step.das-passed .das-timeline__dot { background: var(--das-gold); border-color: var(--das-gold); color: var(--das-white); }\r\n  .das-timeline__title { font-family: var(--das-serif); font-size: 1.5rem; color: var(--das-teal-dark); margin: 0 0 8px; }\r\n  .das-timeline__desc { font-size: 14.5px; line-height: 1.7; color: var(--das-text-soft); margin: 0; max-width: 48ch; }\r\n\r\n  \/* ============================================================\r\n     CLOSING CTA\r\n     ============================================================ *\/\r\n  .das-cta { position: relative; background: var(--das-ivory); padding: 100px 0; text-align: center; overflow: hidden; }\r\n  .das-cta__title { font-family: var(--das-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--das-teal-dark); margin: 0 auto 30px; max-width: 20ch; }\r\n  .das-cta__title .das-italic { font-style: italic; color: var(--das-gold); }\r\n  .das-btn-solid {\r\n    display: inline-flex !important; align-items: center; gap: 10px;\r\n    padding: 16px 32px; background: var(--das-teal-dark) !important;\r\n    color: var(--das-white) !important; font-family: var(--das-sans) !important;\r\n    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.16em;\r\n    text-transform: uppercase; text-indent: 0 !important; line-height: 1.4 !important;\r\n    white-space: nowrap; opacity: 1 !important; visibility: visible !important;\r\n    border-radius: 2px; transition: background 0.4s ease;\r\n  }\r\n  .das-btn-solid:hover { background: var(--das-teal-deep) !important; color: var(--das-white) !important; }\r\n  .das-btn-solid:visited { color: var(--das-white) !important; }\r\n  .das-btn-solid svg { transition: transform 0.35s var(--das-ease); flex-shrink: 0; }\r\n  .das-btn-solid:hover svg { transform: translateX(4px); }\r\n\r\n  .das-totop {\r\n    position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 46px; height: 46px; border-radius: 50%;\r\n    background: var(--das-teal-dark); color: var(--das-ivory); display: flex; align-items: center; justify-content: center;\r\n    border: 1px solid rgba(247,245,240,0.2); opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.9);\r\n    transition: opacity 0.35s var(--das-ease), transform 0.35s var(--das-ease);\r\n  }\r\n  .das-totop.das-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }\r\n  .das-totop:hover { background: var(--das-gold); color: var(--das-teal-dark); }\r\n<\/style>\r\n\r\n<div class=\"das-page\">\r\n\r\n  <!-- ============================================================\r\n       HERO\r\n       ============================================================ -->\r\n  <header class=\"das-hero\" id=\"das-top\">\r\n    <div class=\"das-hero__media\">\r\n      <!-- EDITABLE: ABOUT PAGE HERO VIDEO URL -->\r\n      <video class=\"das-hero__video\" autoplay muted loop playsinline preload=\"metadata\" aria-hidden=\"true\">\r\n        <source src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/07\/0_Atmosphere_Film_1280x720.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <div class=\"das-hero__fallback\"><\/div>\r\n    <\/div>\r\n    <div class=\"das-hero__overlay\"><\/div>\r\n    <div class=\"das-hero__content\">\r\n      <p class=\"das-hero__descriptor\"><span class=\"das-rule\" aria-hidden=\"true\"><\/span>About Diyar Al Safwa<\/p>\r\n      <!-- EDITABLE: ABOUT PAGE HERO HEADLINE -->\r\n      <h1 class=\"das-hero__headline\">Built with intent.<br>Refined by <em>craft.<\/em><\/h1>\r\n    <\/div>\r\n    <div class=\"das-scroll\" aria-hidden=\"true\"><span>Scroll<\/span><span class=\"das-scroll__line\"><\/span><\/div>\r\n  <\/header>\r\n\r\n  <!-- ============================================================\r\n       SIGNATURE SECTION \u2014 tab switcher\r\n       ============================================================ -->\r\n  <section class=\"das-signature\">\r\n    <p class=\"das-signature__ghost\" aria-hidden=\"true\">SAFWA<\/p>\r\n    <div class=\"das-container\">\r\n      <div class=\"das-signature__tabs\" role=\"tablist\" aria-label=\"About Diyar Al Safwa\" id=\"dasTabs\">\r\n        <button class=\"das-signature__tab\" role=\"tab\" aria-selected=\"true\" data-tab=\"0\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\r\n          Vision\r\n        <\/button>\r\n        <button class=\"das-signature__tab\" role=\"tab\" aria-selected=\"false\" data-tab=\"1\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z\"\/><\/svg>\r\n          Values\r\n        <\/button>\r\n        <button class=\"das-signature__tab\" role=\"tab\" aria-selected=\"false\" data-tab=\"2\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3\"\/><path d=\"M2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1\"\/><circle cx=\"18\" cy=\"8\" r=\"2.6\"\/><\/svg>\r\n          Quality\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"das-signature__stage\" id=\"dasStage\">\r\n        <div class=\"das-signature__grid\">\r\n          <h2 class=\"das-signature__headline\" id=\"dasHeadline\">\r\n            <span class=\"das-line\">Grounded.<\/span>\r\n            <span class=\"das-line das-line--accent\">Purposeful.<\/span>\r\n            <span class=\"das-line\">Visionary.<\/span>\r\n          <\/h2>\r\n          <div class=\"das-signature__card\">\r\n            <h3 class=\"das-signature__card-title\" id=\"dasCardTitle\">A trusted name,<br>in the market.<\/h3>\r\n            <p class=\"das-signature__card-body\" id=\"dasCardBody\">We aim to build a name clients rely on when seeking a partner capable of turning spaces into practical, elegant environments &mdash; execution built on planning, creativity, and commitment.<\/p>\r\n            <div class=\"das-signature__card-foot\">\r\n              <div class=\"das-signature__dots\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><\/div>\r\n              <a href=\"YOUR_CONTACT_URL\" class=\"das-signature__card-link\" id=\"dasCardLink\">\r\n                <span id=\"dasCardLinkText\">Start a project<\/span>\r\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       STORY \u2014 full-bleed photo, oversized quote\r\n       ============================================================ -->\r\n  <section class=\"das-parallax das-story\" id=\"dasStorySection\">\r\n    <div class=\"das-parallax__media\" id=\"dasStoryMedia\">\r\n      <!-- EDITABLE: Story background image -->\r\n      <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/07\/23878.jpg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n    <\/div>\r\n    <div class=\"das-parallax__scrim\"><\/div>\r\n    <div class=\"das-parallax__content das-container\">\r\n      <div class=\"das-story__inner das-reveal\">\r\n        <p class=\"das-eyebrow\" style=\"color:var(--das-gold-soft);\">Our Story<\/p>\r\n        <h2 class=\"das-story__quote\">Every project reflects <span class=\"das-accent\">the client's vision<\/span> &mdash; we simply give it form.<\/h2>\r\n        <p class=\"das-story__body\">Diyar Al Safwa is a specialized company in general contracting and interior decoration, carrying execution quality, design accuracy, and professional project management from the first sketch to the last light fixture &mdash; one team, one point of accountability, start to finish.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       VISION & MISSION \u2014 manifesto over photo\r\n       ============================================================ -->\r\n  <section class=\"das-parallax das-manifesto\" id=\"dasManifestoSection\">\r\n    <div class=\"das-parallax__media\" id=\"dasManifestoMedia\">\r\n      <!-- EDITABLE: Vision & Mission background image -->\r\n      <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/07\/2150695915.jpg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n    <\/div>\r\n    <div class=\"das-parallax__scrim\"><\/div>\r\n    <div class=\"das-parallax__content das-container\">\r\n      <div class=\"das-manifesto__vision das-reveal\">\r\n        <p class=\"das-eyebrow\">Our Vision<\/p>\r\n        <h2>To become a name clients <em>trust<\/em>, in a market built on <em>quality<\/em>, innovation, and precision.<\/h2>\r\n      <\/div>\r\n      <div class=\"das-manifesto__mission das-reveal\">\r\n        <p class=\"das-eyebrow\">Our Mission<\/p>\r\n        <h3>Integration, start to finish.<\/h3>\r\n        <p>High standards of professionalism and commitment &mdash; the right materials, best execution practice, and every stage integrated from concept through to final handover.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       VALUES \u2014 accordion\r\n       ============================================================ -->\r\n  <section class=\"das-section\" id=\"das-values-full\">\r\n    <div class=\"das-container\">\r\n      <div class=\"das-section-head das-reveal\">\r\n        <div><p class=\"das-eyebrow\">What We Stand On<\/p><h2 class=\"das-section-title\">Our values<\/h2><\/div>\r\n        <p style=\"max-width:34ch; color:var(--das-text-soft); font-size:14.5px; line-height:1.6;\">Six commitments we hold on every project. Tap one to read more.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"das-values-acc\" id=\"dasValuesAcc\">\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">01<\/span>\r\n            <span class=\"das-value-row__title\">Clear communication<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">01<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">From the first conversation to final handover, you always know where things stand &mdash; clear steps, clear timing, no surprises.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">02<\/span>\r\n            <span class=\"das-value-row__title\">Precise execution<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">02<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">High standards and trusted materials, applied consistently &mdash; not just on the parts that show.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">03<\/span>\r\n            <span class=\"das-value-row__title\">Modern design solutions<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">03<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">Every space is different. We tailor the approach to fit it, not the other way around.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">04<\/span>\r\n            <span class=\"das-value-row__title\">On-time delivery<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">04<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">Timelines are commitments, not estimates &mdash; and we don't hit them by cutting corners.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">05<\/span>\r\n            <span class=\"das-value-row__title\">Strong relationships<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">05<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">Built on credibility and results &mdash; most of our work comes from clients who came back, or sent someone our way.<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"das-value-row\">\r\n          <button class=\"das-value-row__head\" aria-expanded=\"false\">\r\n            <span class=\"das-value-row__num\">06<\/span>\r\n            <span class=\"das-value-row__title\">Full attention to detail<\/span>\r\n            <span class=\"das-value-row__icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"\/><\/svg><\/span>\r\n          <\/button>\r\n          <span class=\"das-value-row__ghost\" aria-hidden=\"true\">06<\/span>\r\n          <div class=\"das-value-row__panel\"><p class=\"das-value-row__panel-inner\">The small decisions are the ones people notice first &mdash; a clean edge, an even reveal, a light switch in the right place.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       QUALITY & COMMITMENT \u2014 full-bleed photo, glass card\r\n       ============================================================ -->\r\n  <section class=\"das-parallax das-quality-band\" id=\"dasQualitySection\">\r\n    <div class=\"das-parallax__media\" id=\"dasQualityMedia\">\r\n      <!-- EDITABLE: Quality background image -->\r\n      <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/07\/2151037471.jpg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n    <\/div>\r\n    <div class=\"das-parallax__scrim\"><\/div>\r\n    <div class=\"das-parallax__content das-container\">\r\n      <div class=\"das-quality-band__grid\">\r\n        <div class=\"das-quality-band__copy das-reveal\">\r\n          <p class=\"das-eyebrow\">Quality &amp; Commitment<\/p>\r\n          <h2>Not a final step \u2014<br>a way of working.<\/h2>\r\n          <p>Quality starts at planning and continues through to handover. We execute against clear standards and review every detail, while managing resources efficiently to avoid delay or waste.<\/p>\r\n        <\/div>\r\n        <div class=\"das-quality-band__card das-reveal\">\r\n          <div class=\"das-quality-band__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><span>Respect for the client, at every stage<\/span><\/div>\r\n          <div class=\"das-quality-band__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><span>Clear communication, start to finish<\/span><\/div>\r\n          <div class=\"das-quality-band__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><span>Precise execution, reviewed in detail<\/span><\/div>\r\n          <div class=\"das-quality-band__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><span>Timelines honored, without cutting corners<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       PROCESS \u2014 vertical timeline, scroll-filled progress line\r\n       ============================================================ -->\r\n  <section class=\"das-section das-section--ivory\">\r\n    <div class=\"das-container\">\r\n      <div class=\"das-section-head das-reveal\">\r\n        <div><p class=\"das-eyebrow\">How We Work<\/p><h2 class=\"das-section-title\">Our process<\/h2><\/div>\r\n      <\/div>\r\n      <div class=\"das-timeline das-reveal\" id=\"dasTimeline\">\r\n        <div class=\"das-timeline__rail\"><\/div>\r\n        <div class=\"das-timeline__progress\" id=\"dasTimelineProgress\"><\/div>\r\n\r\n        <div class=\"das-timeline__step\" data-step>\r\n          <span class=\"das-timeline__dot\">01<\/span>\r\n          <h3 class=\"das-timeline__title\">Listen<\/h3>\r\n          <p class=\"das-timeline__desc\">Understanding the client's needs and the true nature of the project.<\/p>\r\n        <\/div>\r\n        <div class=\"das-timeline__step\" data-step>\r\n          <span class=\"das-timeline__dot\">02<\/span>\r\n          <h3 class=\"das-timeline__title\">Concept<\/h3>\r\n          <p class=\"das-timeline__desc\">An initial concept sized to the space, budget, and objective.<\/p>\r\n        <\/div>\r\n        <div class=\"das-timeline__step\" data-step>\r\n          <span class=\"das-timeline__dot\">03<\/span>\r\n          <h3 class=\"das-timeline__title\">Plan<\/h3>\r\n          <p class=\"das-timeline__desc\">Design or execution plan prepared, materials chosen, timeline approved.<\/p>\r\n        <\/div>\r\n        <div class=\"das-timeline__step\" data-step>\r\n          <span class=\"das-timeline__dot\">04<\/span>\r\n          <h3 class=\"das-timeline__title\">Execute<\/h3>\r\n          <p class=\"das-timeline__desc\">Precise technical supervision, with continuous quality monitoring.<\/p>\r\n        <\/div>\r\n        <div class=\"das-timeline__step\" data-step>\r\n          <span class=\"das-timeline__dot\">05<\/span>\r\n          <h3 class=\"das-timeline__title\">Deliver<\/h3>\r\n          <p class=\"das-timeline__desc\">Every detail reviewed against specification before handover.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n       CLOSING CTA\r\n       ============================================================ -->\r\n  <section class=\"das-cta\">\r\n    <div class=\"das-container das-reveal\">\r\n      <h2 class=\"das-cta__title\">Have a project<br>in mind? <span class=\"das-italic\">Let's talk.<\/span><\/h2>\r\n      <a href=\"YOUR_CONTACT_URL\" class=\"das-btn-solid\">\r\n        <span style=\"font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#FFFFFF;\">Start a conversation<\/span>\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <button class=\"das-totop\" id=\"dasToTop\" aria-label=\"Back to top\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M5 12l7-7 7 7\"\/><\/svg>\r\n  <\/button>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  var heroVideo = document.querySelector('.das-hero__video');\r\n  if (heroVideo) {\r\n    heroVideo.muted = true;\r\n    var playPromise = heroVideo.play();\r\n    if (playPromise && typeof playPromise.catch === 'function') { playPromise.catch(function () {}); }\r\n  }\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    var revealItems = document.querySelectorAll('.das-reveal, .das-reveal--stagger');\r\n    var io = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) {\r\n        if (entry.isIntersecting) { entry.target.classList.add('das-in'); io.unobserve(entry.target); }\r\n      });\r\n    }, { threshold: 0.16, rootMargin: '0px 0px -60px 0px' });\r\n    revealItems.forEach(function (el) { io.observe(el); });\r\n  } else {\r\n    document.querySelectorAll('.das-reveal, .das-reveal--stagger').forEach(function (el) { el.classList.add('das-in'); });\r\n  }\r\n\r\n  \/* ---------- Parallax backgrounds ---------- *\/\r\n  var parallaxMedia = [\r\n    { el: document.getElementById('dasStoryMedia'), rate: 0.18 },\r\n    { el: document.getElementById('dasManifestoMedia'), rate: 0.15 },\r\n    { el: document.getElementById('dasQualityMedia'), rate: 0.15 }\r\n  ].filter(function (p) { return p.el; });\r\n\r\n  var toTop = document.getElementById('dasToTop');\r\n  var timelineEl = document.getElementById('dasTimeline');\r\n  var timelineProgress = document.getElementById('dasTimelineProgress');\r\n  var ticking = false;\r\n\r\n  function onScroll() {\r\n    var y = window.scrollY || window.pageYOffset;\r\n    var vh = window.innerHeight || document.documentElement.clientHeight;\r\n\r\n    if (toTop) { toTop.classList.toggle('das-visible', y > 700); }\r\n\r\n    if (!reduceMotion) {\r\n      parallaxMedia.forEach(function (p) {\r\n        var rect = p.el.parentElement.getBoundingClientRect();\r\n        if (rect.bottom > 0 && rect.top < vh) {\r\n          var progress = (vh - rect.top) \/ (vh + rect.height);\r\n          var shift = (progress - 0.5) * rect.height * p.rate;\r\n          var img = p.el.querySelector('img');\r\n          if (img) { img.style.transform = 'translateY(' + shift.toFixed(1) + 'px)'; }\r\n        }\r\n      });\r\n    }\r\n\r\n    if (timelineEl && timelineProgress) {\r\n      var trect = timelineEl.getBoundingClientRect();\r\n      var start = vh * 0.75;\r\n      var total = trect.height + start - vh * 0.25;\r\n      var covered = start - trect.top;\r\n      var pct = Math.max(0, Math.min(1, covered \/ total));\r\n      var progressPx = pct * trect.height;\r\n      timelineProgress.style.height = progressPx + 'px';\r\n\r\n      var steps = timelineEl.querySelectorAll('[data-step]');\r\n      steps.forEach(function (step) {\r\n        var dotOffset = step.offsetTop + 15; \/* dot center within timeline *\/\r\n        step.classList.toggle('das-passed', dotOffset <= progressPx);\r\n      });\r\n    }\r\n\r\n    ticking = false;\r\n  }\r\n  window.addEventListener('scroll', function () { if (!ticking) { window.requestAnimationFrame(onScroll); ticking = true; } }, { passive: true });\r\n  window.addEventListener('resize', onScroll, { passive: true });\r\n  onScroll();\r\n\r\n  if (toTop) { toTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: reduceMotion ? 'auto' : 'smooth' }); }); }\r\n\r\n  \/* ---------- Values accordion ---------- *\/\r\n  var rows = document.querySelectorAll('.das-value-row');\r\n  rows.forEach(function (row) {\r\n    var head = row.querySelector('.das-value-row__head');\r\n    var panel = row.querySelector('.das-value-row__panel');\r\n    head.addEventListener('click', function () {\r\n      var isOpen = row.classList.contains('das-open');\r\n      rows.forEach(function (r) {\r\n        r.classList.remove('das-open');\r\n        r.querySelector('.das-value-row__head').setAttribute('aria-expanded', 'false');\r\n        r.querySelector('.das-value-row__panel').style.maxHeight = null;\r\n      });\r\n      if (!isOpen) {\r\n        row.classList.add('das-open');\r\n        head.setAttribute('aria-expanded', 'true');\r\n        panel.style.maxHeight = panel.scrollHeight + 'px';\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* ---------- Signature tabs ---------- *\/\r\n  var tabData = [\r\n    { lines: [{ text: 'Grounded.' }, { text: 'Purposeful.', accent: true }, { text: 'Visionary.' }], cardTitle: 'A trusted name,<br>in the market.', cardBody: 'We aim to build a name clients rely on when seeking a partner capable of turning spaces into practical, elegant environments &mdash; execution built on planning, creativity, and commitment.', linkText: 'Start a project' },\r\n    { lines: [{ text: 'Honest.' }, { text: 'Exacting.', accent: true }, { text: 'Reliable.' }], cardTitle: 'Values you can<br>build on.', cardBody: 'Clear communication, precise execution with trusted materials, and on-time delivery without compromising quality &mdash; the standard we hold on every project, every time.', linkText: 'See what we value' },\r\n    { lines: [{ text: 'Precise.' }, { text: 'Considered.', accent: true }, { text: 'Enduring.' }], cardTitle: 'Every detail,<br>accounted for.', cardBody: 'From first concept to final handover, one team carries the plan &mdash; so nothing gets lost in the handoff, and nothing is left to chance.', linkText: 'Our quality approach' }\r\n  ];\r\n\r\n  var tabs = document.querySelectorAll('.das-signature__tab');\r\n  var stage = document.getElementById('dasStage');\r\n  var headline = document.getElementById('dasHeadline');\r\n  var cardTitle = document.getElementById('dasCardTitle');\r\n  var cardBody = document.getElementById('dasCardBody');\r\n  var cardLinkText = document.getElementById('dasCardLinkText');\r\n  var switching = false;\r\n\r\n  function renderTab(index) {\r\n    var data = tabData[index];\r\n    headline.innerHTML = data.lines.map(function (l) { return '<span class=\"das-line' + (l.accent ? ' das-line--accent' : '') + '\">' + l.text + '<\/span>'; }).join('');\r\n    cardTitle.innerHTML = data.cardTitle;\r\n    cardBody.innerHTML = data.cardBody;\r\n    cardLinkText.textContent = data.linkText;\r\n  }\r\n\r\n  function selectTab(index) {\r\n    if (switching || tabs[index].getAttribute('aria-selected') === 'true') { return; }\r\n    switching = true;\r\n    tabs.forEach(function (t, i) { t.setAttribute('aria-selected', i === index ? 'true' : 'false'); });\r\n    var doSwap = function () {\r\n      renderTab(index);\r\n      if (stage) { stage.classList.remove('das-switching'); }\r\n      window.setTimeout(function () { switching = false; }, reduceMotion ? 0 : 340);\r\n    };\r\n    if (reduceMotion) { doSwap(); } else { stage.classList.add('das-switching'); window.setTimeout(doSwap, 320); }\r\n  }\r\n\r\n  tabs.forEach(function (tab) { tab.addEventListener('click', function () { selectTab(parseInt(tab.getAttribute('data-tab'), 10)); }); });\r\n\r\n  var tabsWrap = document.getElementById('dasTabs');\r\n  if (tabsWrap) {\r\n    tabsWrap.addEventListener('keydown', function (e) {\r\n      var current = Array.prototype.findIndex.call(tabs, function (t) { return t.getAttribute('aria-selected') === 'true'; });\r\n      if (e.key === 'ArrowRight') { selectTab((current + 1) % tabs.length); tabs[(current + 1) % tabs.length].focus(); }\r\n      if (e.key === 'ArrowLeft') { selectTab((current - 1 + tabs.length) % tabs.length); tabs[(current - 1 + tabs.length) % tabs.length].focus(); }\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About Diyar Al Safwa Built with intent.Refined by craft. Scroll SAFWA Vision Values Quality Grounded. Purposeful. Visionary. A trusted name,in the market. We aim to build a name clients rely on when seeking a partner capable of turning spaces into practical, elegant environments &mdash; execution built on planning, creativity, and commitment. Start a project Our [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37"}],"version-history":[{"count":19,"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=\/wp\/v2\/pages\/37\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/chemcastscientific.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}