:root {
  --primary: #173e69;
  --primary-dark: #102f52;
  --accent: #f47721;
  --accent-soft: #fff1e7;
  --surface: #f5f7f9;
  --muted: #e9eef2;
  --ink: #172432;
  --text: #5e6b76;
  --white: #fff;
  --line: #dce3e8;
  --success: #177245;
  --danger: #b43a3a;
  --shadow-sm: 0 8px 24px rgba(17, 41, 66, 0.07);
  --shadow-md: 0 16px 42px rgba(17, 41, 66, 0.12);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
p { margin: 0 0 1rem; color: var(--text); }
h1, h2, h3, h4 { margin: 0 0 1rem; color: var(--ink); line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.7rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 96px 0; }
.section--surface { background: var(--surface); }
.section--muted { background: var(--muted); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: -60px; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: white; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255, 255, 255, .96); border-bottom: 1px solid transparent; backdrop-filter: blur(16px); transition: box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 20px rgba(19, 42, 67, .07); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand__logo { width: 52px; height: 52px; object-fit: contain; }
.brand__copy { display: grid; line-height: 1.15; }
.brand__copy strong { font-size: 1.2rem; letter-spacing: -.02em; }
.brand__copy small { margin-top: 4px; color: var(--text); font-size: .77rem; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; font-size: .94rem; cursor: pointer; transition: color .2s, background .2s; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: #b95511; background: var(--accent-soft); outline: none; }
.nav-chevron { width: 16px; height: 16px; transition: transform .2s; }
.nav-dropdown { position: relative; }
.nav-dropdown.is-open .nav-chevron { transform: rotate(180deg); }
.nav-dropdown__panel { position: absolute; top: calc(100% + 10px); left: 50%; width: 270px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel, .nav-dropdown.is-open .nav-dropdown__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown__panel a { display: grid; padding: 9px 11px; border-radius: 9px; font-size: .9rem; }
.nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible { background: var(--accent-soft); color: #a9490c; outline: none; }
.nav-dropdown__panel small { color: var(--text); font-size: .75rem; }
.header-quote { margin-left: 24px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--surface); cursor: pointer; place-items: center; }
.menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-toggle__close { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 10px; font-weight: 750; line-height: 1.2; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid rgba(244, 119, 33, .28); outline-offset: 3px; }
.button .icon { width: 18px; height: 18px; }
.button--accent { color: white; background: var(--accent); box-shadow: 0 8px 22px rgba(244, 119, 33, .24); }
.button--accent:hover { background: #dc6414; box-shadow: 0 12px 26px rgba(244, 119, 33, .3); }
.button--primary { color: white; background: var(--primary); }
.button--primary:hover { background: var(--primary-dark); }
.button--outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.button--outline:hover { color: white; background: var(--primary); }
.button--outline-light { border-color: rgba(255, 255, 255, .58); color: white; background: rgba(255, 255, 255, .07); }
.button--outline-light:hover { background: white; color: var(--primary); }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.centered-action { margin-top: 46px; text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--accent); font-weight: 750; }
.text-link .icon { width: 17px; height: 17px; transition: transform .2s; }
.text-link:hover .icon, a:hover > .round-arrow .icon { transform: translateX(3px); }
.text-link--large { margin-top: 18px; font-size: 1.05rem; }
.eyebrow { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; margin-bottom: 22px; border-radius: 999px; color: #b55412; background: var(--accent-soft); font-size: .82rem; font-weight: 750; letter-spacing: .02em; }
.eyebrow--dark { color: white; background: rgba(244, 119, 33, .2); border: 1px solid rgba(255, 255, 255, .1); }
.section-heading { max-width: 720px; margin-bottom: 50px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading p { max-width: 650px; margin: 0 auto; font-size: 1.05rem; }

.hero { position: relative; min-height: 670px; display: grid; align-items: center; overflow: hidden; background-color: var(--primary); background-image: var(--hero-image); background-position: center; background-size: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 38, 66, .96) 0%, rgba(18, 54, 91, .88) 47%, rgba(18, 54, 91, .26) 100%); }
.hero__overlay { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(10, 37, 64, .3)); }
.hero__content { position: relative; z-index: 2; max-width: 760px; margin-left: max(calc((100vw - var(--container))/2), 20px); padding: 90px 0; }
.hero h1 { color: white; max-width: 700px; }
.hero h1 span { display: block; color: var(--accent); }
.hero__content > p { max-width: 680px; color: rgba(255, 255, 255, .78); font-size: clamp(1rem, 2vw, 1.22rem); }
.stats { border-bottom: 1px solid var(--line); background: white; }
.stats__grid { min-height: 150px; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; display: grid; place-content: center; text-align: center; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 32%; height: 36%; width: 1px; background: var(--line); }
.stat strong { color: var(--accent); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.stat span { margin-top: 10px; color: var(--text); font-size: .92rem; }

.product-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { min-height: 330px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform .25s, box-shadow .25s, border-color .25s; }
.product-card:hover { transform: translateY(-7px); border-color: #efb58e; box-shadow: var(--shadow-md); }
.product-card h3 { margin-top: 25px; }
.product-card p { font-size: .95rem; }
.icon-box { width: 52px; height: 52px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.icon-box--large { width: 70px; height: 70px; border-radius: 18px; }
.icon-box--large .icon { width: 34px; height: 34px; }

.industry-band { color: white; background: var(--primary); }
.industry-band h2, .industry-band p { color: white; }
.industry-band p { color: rgba(255, 255, 255, .75); }
.industry-band__grid { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 90px; }
.industry-band__copy p { max-width: 560px; margin-bottom: 30px; }
.industry-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.industry-mini { min-height: 76px; display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255, 255, 255, .09); }
.industry-mini .icon { color: var(--accent); }
.industry-mini[href] { transition: transform .2s, background .2s, border-color .2s; }
.industry-mini[href]:hover, .industry-mini[href]:focus-visible { transform: translateY(-2px); border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.15); outline: none; }
.home-industries { background: var(--surface); }
.home-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-industry-card { min-height: 330px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.home-industry-card:hover { transform: translateY(-4px); border-color: #efb58e; box-shadow: var(--shadow-md); }
.home-industry-card h3 { margin-top: 24px; }
.home-industry-card p { font-size: .94rem; }
.home-industry-card .tag-row { margin-top: auto; padding-top: 10px; }
.industry-coverage-banner { display: grid; grid-template-columns: .9fr 1fr .9fr; align-items: center; gap: 38px; margin-top: 34px; padding: 42px; border-radius: var(--radius-lg); color: white; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow: var(--shadow-md); }
.industry-coverage-banner h2, .industry-coverage-banner h3 { color: white; }
.industry-coverage-banner p { color: rgba(255,255,255,.72); }
.industry-coverage-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.industry-coverage-list span { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.08); font-size: .84rem; }
.industry-coverage-list .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }
.industry-coverage-action { padding-left: 34px; border-left: 1px solid rgba(255,255,255,.15); }
.industry-coverage-action h3 { font-size: 1.35rem; }
.industry-coverage-action p { font-size: .9rem; }
.cta-section { background: var(--surface); }
.cta-card { padding: 70px 30px; border-radius: var(--radius-lg); text-align: center; background: linear-gradient(135deg, var(--accent), #ff9a3c); box-shadow: 0 18px 45px rgba(244, 119, 33, .19); }
.cta-card h2, .cta-card p { color: white; }
.cta-card p { max-width: 670px; margin: 0 auto 28px; color: rgba(255,255,255,.84); font-size: 1.06rem; }

.inner-hero { padding: 88px 0 92px; color: white; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.inner-hero__content { max-width: 900px; margin-left: max(calc((100vw - var(--container))/2), 20px); }
.inner-hero h1 { color: white; font-size: clamp(2.7rem, 5vw, 4.3rem); }
.inner-hero p { max-width: 780px; color: rgba(255,255,255,.78); font-size: 1.14rem; }
.story-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 70px; align-items: start; }
.prose p { margin-bottom: 20px; }
.milestones { padding: 30px; border-radius: var(--radius); background: var(--muted); }
.milestones ol { display: grid; gap: 15px; }
.milestones li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; }
.milestones strong { color: var(--accent); }
.milestones span { color: var(--ink); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { min-height: 250px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.value-card h3 { margin-top: 24px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mission-card { min-height: 280px; padding: 42px; border-radius: var(--radius); }
.mission-card h2, .mission-card p { color: white; }
.mission-card p { color: rgba(255,255,255,.8); font-size: 1.03rem; }
.mission-card--primary { background: var(--primary); }
.mission-card--accent { background: linear-gradient(135deg, var(--accent), #ff8b2e); }
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.check-list { display: grid; gap: 13px; }
.check-list li, .feature-list li { display: flex; align-items: flex-start; gap: 10px; }
.check-list .icon, .feature-list .icon { flex: 0 0 auto; color: var(--accent); }
.check-list--two { grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 26px; }
.contact-prompt { padding: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); text-align: center; }
.contact-prompt--wide { max-width: 900px; margin: 0 auto; }
.contact-prompt p { max-width: 640px; margin: 0 auto 24px; }

.product-list { display: grid; gap: 20px; }
.product-row { display: grid; grid-template-columns: 80px 1fr 52px; align-items: center; gap: 30px; min-height: 185px; padding: 28px 36px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform .22s, box-shadow .22s, border-color .22s; }
.product-row:hover { transform: translateY(-4px); border-color: #efb58e; box-shadow: var(--shadow-md); }
.product-row__body { display: grid; gap: 7px; }
.product-row__body > strong { font-size: 1.35rem; }
.product-row__body > span { color: var(--text); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row small { display: inline-flex; padding: 5px 11px; border-radius: 999px; color: #53616c; background: var(--muted); font-size: .78rem; line-height: 1.2; }
.round-arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.round-arrow .icon { width: 19px; height: 19px; transition: transform .2s; }

.product-hero { padding: 90px 0; color: white; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.product-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 90px; }
.product-hero h1 { color: white; }
.product-hero p { color: rgba(255,255,255,.78); font-size: 1.1rem; }
.back-link { display: block; margin-bottom: 22px; color: rgba(255,255,255,.72); font-size: .9rem; }
.back-link::before { content: "←"; margin-right: 8px; }
.product-hero__visual { min-height: 370px; display: grid; place-content: center; gap: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 38%, rgba(244,119,33,.32), transparent 35%), rgba(255,255,255,.07); text-align: center; }
.product-hero__visual > span { width: 150px; height: 150px; display: grid; place-items: center; margin: 0 auto; border-radius: 34px; color: var(--accent); background: rgba(255,255,255,.12); }
.product-hero__visual .icon { width: 80px; height: 80px; }
.product-hero__visual small { color: rgba(255,255,255,.62); }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.detail-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.feature-list { display: grid; gap: 14px; }
.product-note { display: grid; grid-template-columns: 75px 1fr auto; align-items: center; gap: 30px; padding: 42px; border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.product-note h2 { font-size: 1.8rem; }
.product-note p { margin: 0; }

.contact-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; align-items: start; }
.contact-info > h2 { margin-bottom: 32px; }
.contact-item { display: flex; gap: 16px; margin-bottom: 22px; }
.contact-item h3 { margin: 3px 0 2px; font-size: 1rem; }
.contact-item p { margin: 0; }
.contact-item a:hover { color: var(--accent); }
.response-note { margin-top: 35px; padding: 26px; border: 1px solid #bddbce; border-radius: var(--radius); background: #eaf6f1; }
.response-note h3 { margin-bottom: 8px; }
.response-note p { margin: 0; color: #426456; font-size: .92rem; }
.contact-form-card { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.form-heading h2 { margin-bottom: 5px; }
.form-heading p { margin: 0; font-size: .9rem; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label { display: grid; gap: 7px; color: var(--ink); font-size: .87rem; font-weight: 650; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #cfd8df; border-radius: 9px; padding: 12px 14px; color: var(--ink); background: #fbfcfd; font-weight: 400; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.contact-form input { min-height: 48px; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,119,33,.13); background: white; }
.form-span { grid-column: 1 / -1; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.flash-stack { display: grid; gap: 10px; margin-bottom: 22px; }
.flash { padding: 13px 15px; border-radius: 9px; font-size: .9rem; }
.flash--success { color: #125b39; border: 1px solid #b7ddcc; background: #e8f5ef; }
.flash--error { color: #8e2e2e; border: 1px solid #e8bcbc; background: #fbeded; }

.legal-layout { max-width: 850px; padding: 52px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.legal-layout section + section { margin-top: 38px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal-layout h2 { font-size: 1.65rem; }
.legal-updated { display: inline-flex; padding: 7px 12px; border-radius: 999px; color: #99511f; background: var(--accent-soft); font-weight: 650; font-size: .84rem; }
.not-found { min-height: 65vh; display: grid; place-items: center; padding: 100px 0; text-align: center; background: var(--surface); }
.not-found__number { display: block; color: var(--accent); font-size: clamp(5rem, 16vw, 10rem); font-weight: 900; line-height: 1; opacity: .18; }
.not-found h1 { margin-top: -25px; font-size: clamp(2.4rem, 5vw, 4rem); }

.site-footer { padding-top: 78px; color: white; background: var(--primary); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr .78fr .7fr 1.45fr; gap: 38px; padding-bottom: 64px; }
.brand--footer { color: white; }
.brand--footer .brand__copy small { color: rgba(255,255,255,.62); }
.footer-brand > p { max-width: 300px; margin-top: 24px; color: rgba(255,255,255,.66); font-size: .9rem; }
.subsidiary-block { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px; max-width: 330px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.subsidiary-block img { width: 58px; height: 42px; padding: 4px; object-fit: contain; border-radius: 8px; background: white; }
.subsidiary-block small { display: block; color: rgba(255,255,255,.7); font-size: .72rem; line-height: 1.45; }
.subsidiary-block .subsidiary-arabic { margin-top: 6px; color: rgba(255,255,255,.82); font-family: Tahoma, Arial, sans-serif; text-align: left; }
.site-footer h2 { margin-top: 8px; color: white; font-size: 1.1rem; letter-spacing: 0; }
.footer-links { display: grid; gap: 12px; }
.footer-links span { color: rgba(255,255,255,.68); font-size: .9rem; }
.footer-links a, .footer-bottom a { color: rgba(255,255,255,.68); font-size: .9rem; transition: color .2s; }
.footer-links a:hover, .footer-bottom a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.68); font-size: .88rem; }
.footer-contact .icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); }
.footer-bottom { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.13); }
.footer-bottom p { margin: 0; color: rgba(255,255,255,.55); font-size: .84rem; }
.footer-bottom div { display: flex; gap: 26px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1050px) {
  .header-inner { min-height: 72px; }
  .menu-toggle { display: grid; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
  .site-nav { position: fixed; z-index: -1; inset: 72px 0 auto; max-height: calc(100vh - 72px); display: none; align-items: stretch; padding: 20px; overflow-y: auto; border-top: 1px solid var(--line); background: white; box-shadow: var(--shadow-md); }
  .site-nav.is-open { display: grid; }
  .nav-link { justify-content: space-between; width: 100%; min-height: 50px; }
  .nav-dropdown__panel { position: static; width: auto; display: none; margin: 4px 0 12px; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel { display: none; transform: none; }
  .nav-dropdown.is-open .nav-dropdown__panel { display: grid; }
  .header-quote { margin: 12px 0 0; }
  .product-card-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .home-industry-grid { grid-template-columns: 1fr 1fr; }
  .industry-coverage-banner { grid-template-columns: 1fr 1fr; }
  .industry-coverage-action { grid-column: 1 / -1; padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 0; }
  .product-card { min-height: 280px; }
  .industry-band__grid { gap: 45px; }
  .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 50px; }
  .footer-grid > :first-child { grid-column: span 2; }
  .footer-grid > :last-child { grid-column: span 2; }
}

@media (max-width: 780px) {
  .container { width: min(100% - 30px, var(--container)); }
  .section { padding: 70px 0; }
  h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  h2 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .brand__logo { width: 44px; height: 44px; }
  .brand__copy strong { font-size: 1.03rem; }
  .brand__copy small { max-width: 175px; font-size: .68rem; }
  .hero { min-height: 650px; background-position: 65% center; }
  .hero::after { background: linear-gradient(90deg, rgba(12,38,66,.97), rgba(18,54,91,.81)); }
  .hero__content { width: min(100% - 30px, var(--container)); margin: 0 auto; }
  .stats__grid { grid-template-columns: 1fr 1fr; padding: 12px 0; }
  .stat { min-height: 110px; }
  .stat:nth-child(2)::after { display: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-card-grid, .value-grid, .mission-grid, .detail-grid, .home-industry-grid { grid-template-columns: 1fr; }
  .industry-band__grid, .story-grid, .why-grid, .product-hero__grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .industry-mini-grid { grid-template-columns: 1fr; }
  .industry-coverage-banner { grid-template-columns: 1fr; padding: 30px; }
  .industry-coverage-list { grid-template-columns: 1fr 1fr; }
  .industry-coverage-action { grid-column: auto; }
  .inner-hero { padding: 70px 0; }
  .inner-hero__content { width: min(100% - 30px, var(--container)); margin: 0 auto; }
  .inner-hero p { font-size: 1rem; }
  .mission-card { min-height: auto; padding: 34px; }
  .check-list--two { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 65px 1fr; gap: 22px; padding: 26px; }
  .product-row .round-arrow { display: none; }
  .product-row .icon-box--large { width: 62px; height: 62px; }
  .product-hero__visual { min-height: 290px; }
  .product-note { grid-template-columns: 65px 1fr; padding: 30px; }
  .product-note .button { grid-column: 1 / -1; }
  .contact-form-card { padding: 26px; }
  .contact-form { grid-template-columns: 1fr; }
  .form-span { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding: 24px 0; }
}

@media (max-width: 500px) {
  .brand__copy small { display: none; }
  .button-row .button { width: 100%; }
  .product-card-grid { grid-template-columns: 1fr; }
  .industry-coverage-list { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 1fr; }
  .product-row .icon-box--large { width: 58px; height: 58px; }
  .milestones, .contact-prompt, .detail-card { padding: 26px; }
  .milestones li { grid-template-columns: 58px 1fr; }
  .contact-form-card { padding: 22px; }
  .form-heading .icon-box { display: none; }
  .legal-layout { padding: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > * { grid-column: auto !important; }
  .footer-bottom div { gap: 16px; flex-wrap: wrap; }
}

/* =========================================================
   InfyChem brand palette
   Based on the magenta, pink, orange and purple logo
   ========================================================= */

:root {
  --brand-orange: #ff5a2f;
  --brand-coral: #ff334f;
  --brand-pink: #e71378;
  --brand-magenta: #bd228f;
  --brand-purple: #641659;
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-orange) 0%,
    var(--brand-coral) 28%,
    var(--brand-pink) 62%,
    var(--brand-magenta) 100%
  );
  --ink: #302630;
  --text: #6d606b;
  --line: #eadde6;
  --muted: #f5edf3;
  --shadow-sm: 0 8px 24px rgba(91, 22, 79, 0.08);
  --shadow-md: 0 18px 44px rgba(91, 22, 79, 0.14);
}

/* General brand colour overrides */

body {
  background: #fffdfd;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 22px rgba(91, 22, 79, 0.09);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--primary);
  background: var(--accent-soft);
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible {
  color: var(--primary);
  background: var(--accent-soft);
}

.button--accent {
  background: var(--brand-gradient);
  box-shadow: 0 10px 25px rgba(231, 19, 120, 0.24);
}

.button--accent:hover {
  background: linear-gradient(
    135deg,
    #f74f29 0%,
    #ef2948 32%,
    #d51270 67%,
    #a91d83 100%
  );
  box-shadow: 0 14px 30px rgba(231, 19, 120, 0.31);
}

.button:focus-visible {
  outline-color: rgba(231, 19, 120, 0.3);
}

.eyebrow {
  color: var(--primary);
  background: var(--accent-soft);
}

.eyebrow--dark {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
}

.hero::after {
  background: linear-gradient(
    90deg,
    rgba(61, 13, 57, 0.97) 0%,
    rgba(105, 20, 86, 0.91) 47%,
    rgba(165, 35, 121, 0.32) 100%
  );
}

.inner-hero,
.product-hero {
  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(255, 90, 47, 0.25),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      var(--primary-dark) 0%,
      var(--primary) 68%,
      var(--brand-pink) 135%
    );
}

.product-hero__visual {
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 90, 47, 0.36),
      transparent 38%
    ),
    rgba(255, 255, 255, 0.08);
}

.product-card:hover,
.product-row:hover,
.home-industry-card:hover {
  border-color: rgba(231, 19, 120, 0.38);
}

.cta-card,
.mission-card--accent {
  background: var(--brand-gradient);
}

.site-footer {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(231, 19, 120, 0.22),
      transparent 32%
    ),
    linear-gradient(135deg, #3d1039, var(--primary-dark));
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 3px rgba(231, 19, 120, 0.13);
}

/* =========================================================
   Oil and gas product catalogue
   ========================================================= */

.catalog-total {
  display: block;
  color: #fff;
  font-size: clamp(3.5rem, 7vw, 5.75rem);
  font-weight: 850;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.catalog-section {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(231, 19, 120, 0.055),
      transparent 28rem
    ),
    var(--surface);
}

.catalog-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.catalog-heading p {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 1.04rem;
}

.catalog-navigation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 54px;
}

.catalog-navigation a {
  position: relative;
  min-height: 150px;
  display: grid;
  align-content: end;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.catalog-navigation a::before {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  top: -72px;
  right: -45px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0.13;
}

.catalog-navigation a:hover,
.catalog-navigation a:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(231, 19, 120, 0.42);
  box-shadow: var(--shadow-md);
  outline: none;
}

.catalog-navigation a > span {
  position: absolute;
  top: 18px;
  left: 22px;
  color: var(--brand-pink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.catalog-navigation strong {
  font-size: 1.2rem;
}

.catalog-navigation small {
  margin-top: 4px;
  color: var(--text);
}

.catalog-list {
  display: grid;
  gap: 42px;
}

.catalog-category {
  scroll-margin-top: 105px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.catalog-category__header {
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  padding: 38px 42px;
  color: #fff;
  background:
    radial-gradient(
      circle at 91% 12%,
      rgba(255, 90, 47, 0.34),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary) 72%,
      var(--brand-pink)
    );
}

.catalog-category__header h2 {
  margin: 5px 0 10px;
  color: #fff;
}

.catalog-category__header p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.catalog-category__number {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.catalog-category__count {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.catalog-category__content {
  display: grid;
  gap: 32px;
  padding: 36px 42px 42px;
}

.catalog-subsection + .catalog-subsection {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.catalog-subsection__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 16px;
}

.catalog-subsection__heading h3 {
  position: relative;
  margin: 0;
  padding-left: 17px;
}

.catalog-subsection__heading h3::before {
  content: "";
  position: absolute;
  width: 5px;
  inset: 2px auto 2px 0;
  border-radius: 999px;
  background: var(--brand-gradient);
}

.catalog-subsection__heading span {
  color: var(--text);
  font-size: 0.8rem;
}

.product-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.product-description-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background: #fff;
}

.product-description-table th,
.product-description-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
}

.product-description-table thead {
  background: linear-gradient(90deg, #f6edf4, #fff3f5);
}

.product-description-table th {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.product-description-table th:first-child,
.product-description-table td:first-child {
  width: 82px;
  text-align: center;
}

.product-description-table td {
  color: var(--ink);
}

.product-description-table td:first-child {
  color: var(--brand-pink);
  font-size: 0.85rem;
  font-weight: 800;
}

.product-description-table tbody tr {
  border-top: 1px solid var(--line);
  transition: background 0.18s;
}

.product-description-table tbody tr:hover {
  background: #fff8fa;
}

.product-description-table tbody tr:nth-child(even) {
  background: rgba(252, 248, 251, 0.6);
}

.product-description-table tbody tr:nth-child(even):hover {
  background: #fff5f8;
}

@media (max-width: 780px) {
  .hero::after {
    background: linear-gradient(
      90deg,
      rgba(61, 13, 57, 0.97),
      rgba(112, 22, 91, 0.86)
    );
  }

  .catalog-navigation {
    grid-template-columns: 1fr;
  }

  .catalog-navigation a {
    min-height: 125px;
  }

  .catalog-category__header {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 30px;
  }

  .catalog-category__content {
    padding: 28px 24px 32px;
  }

  .catalog-subsection__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .product-description-table th,
  .product-description-table td {
    padding: 13px 14px;
  }

  .product-description-table th:first-child,
  .product-description-table td:first-child {
    width: 62px;
  }
}

@media (max-width: 500px) {
  .catalog-category__header {
    padding: 26px 22px;
  }

  .catalog-category__content {
    padding: 22px 16px 26px;
  }

  .product-description-table {
    font-size: 0.9rem;
  }

  .product-description-table th,
  .product-description-table td {
    padding: 12px 10px;
  }
}

/* Collapsible product categories */

details.catalog-category {
  overflow: hidden;
}

.catalog-category__header {
  display: block;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Remove the browser's default details arrow */
.catalog-category__header::-webkit-details-marker {
  display: none;
}

.catalog-category__header::marker {
  display: none;
  content: "";
}

.catalog-category__summary {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
}

.catalog-category__controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.catalog-category__arrow {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  transition:
    transform 0.25s ease,
    background 0.2s ease;
}

.catalog-category__arrow svg {
  width: 22px;
  height: 22px;
}

.catalog-category__header:hover .catalog-category__arrow,
.catalog-category__header:focus-visible .catalog-category__arrow {
  background: rgba(255, 255, 255, 0.22);
}

.catalog-category__header:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.4);
  outline-offset: -5px;
}

/* Rotate the arrow when expanded */
.catalog-category[open] .catalog-category__arrow {
  transform: rotate(180deg);
}

/* Keep product content hidden until expanded */
.catalog-category:not([open]) .catalog-category__content {
  display: none;
}

@media (max-width: 780px) {
  .catalog-category__summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .catalog-category__controls {
    width: 100%;
    justify-content: space-between;
  }

  .catalog-category__arrow {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* =========================================================
   Automatic system dark mode
   ========================================================= */

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5edf3;
    --text: #cfc2cc;
    --line: #493541;
    --muted: #291b27;
    --surface: #241821;
    --accent-soft: #402038;

    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.32);
  }

  html {
    color-scheme: dark;
  }

  body {
    color: var(--text);
    background: #1c131a;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong {
    color: var(--ink);
  }

  p,
  li,
  small {
    color: var(--text);
  }

  /* Header and navigation */

  .site-header {
    background: rgba(28, 19, 26, 0.96);
    border-bottom-color: var(--line);
  }

  .site-header.is-scrolled {
    background: rgba(28, 19, 26, 0.98);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  }

  .brand__copy strong {
    color: #ffffff;
  }

  .brand__copy small {
    color: #bfaebc;
  }

  .nav-link {
    color: #eadfe7;
  }

  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-link.is-active {
    color: #ffffff;
    background: #422039;
  }

  .nav-dropdown__panel {
    background: #271b24;
    border-color: var(--line);
    box-shadow: var(--shadow-md);
  }

  .nav-dropdown__panel a {
    color: #e9dfe7;
  }

  .nav-dropdown__panel a small {
    color: #ad9ba9;
  }

  .nav-dropdown__panel a:hover,
  .nav-dropdown__panel a:focus-visible {
    color: #ffffff;
    background: #422039;
  }

  .menu-toggle {
    color: #ffffff;
    border-color: var(--line);
    background: #2c1e29;
  }

  /* General sections */

  .section--surface {
    background: #21161f;
  }

  .section--muted {
    background: #291b27;
  }

  .eyebrow {
    color: #eea6d5;
    background: #422039;
    border-color: #63304f;
  }

  /* Cards */

  .product-card,
  .product-row,
  .home-industry-card,
  .detail-card,
  .value-card,
  .contact-card,
  .mission-card {
    color: var(--text);
    background: #291c27;
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }

  .product-card:hover,
  .product-row:hover,
  .home-industry-card:hover {
    border-color: #a84b87;
    background: #30202d;
    box-shadow: var(--shadow-md);
  }

  .icon-box {
    color: #e58fc7;
    background: #422039;
  }

  /* Oil and gas catalogue */

  .catalog-section {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(166, 40, 145, 0.12),
        transparent 28rem
      ),
      #21161f;
  }

  .catalog-navigation a {
    color: var(--ink);
    background: #291c27;
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }

  .catalog-navigation a strong {
    color: #f5edf3;
  }

  .catalog-navigation a small {
    color: #bfaebb;
  }

  .catalog-navigation a:hover,
  .catalog-navigation a:focus-visible {
    border-color: #a84b87;
    background: #30202d;
  }

  .catalog-category {
    background: #291c27;
    border-color: var(--line);
  }

  .catalog-category__content {
    background: #291c27;
  }

  .catalog-subsection + .catalog-subsection {
    border-top-color: var(--line);
  }

  .catalog-subsection__heading h3 {
    color: #f5edf3;
  }

  .catalog-subsection__heading span {
    color: #bfaebb;
  }

  /* Product tables */

  .product-table-wrapper {
    border-color: var(--line);
  }

  .product-description-table {
    background: #241821;
  }

  .product-description-table thead {
    background: #3a2835;
  }

  .product-description-table th {
    color: #f3e8f0;
  }

  .product-description-table td {
    color: #d9cdd6;
  }

  .product-description-table td:first-child {
    color: #ed91cd;
  }

  .product-description-table tbody tr {
    border-top-color: var(--line);
  }

  .product-description-table tbody tr:nth-child(even) {
    background: #2c1e29;
  }

  .product-description-table tbody tr:hover,
  .product-description-table tbody tr:nth-child(even):hover {
    background: #3a2534;
  }

  /* Forms */

  .contact-form,
  .contact-form-container {
    background: #291c27;
    border-color: var(--line);
  }

  .contact-form label {
    color: #f0e5ed;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    color: #f5edf3;
    background: #1f151d;
    border-color: #55404e;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: #94838f;
  }

  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus {
    border-color: #c85aa2;
    background: #241821;
    box-shadow: 0 0 0 3px rgba(200, 90, 162, 0.16);
  }

  /* Back links and ordinary links */

  .back-link {
    color: #efb1da;
  }

  main a:not(.button):not(.nav-link) {
    text-decoration-color: rgba(239, 177, 218, 0.4);
  }

  /* Footer remains dark but is differentiated from the page */

  .site-footer {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(166, 40, 145, 0.2),
        transparent 34%
      ),
      #140d13;
  }
}

/* Complete remaining dark-mode surfaces */

@media (prefers-color-scheme: dark) {
  /* Home page */

  .stats {
    background: #21161f;
    border-bottom-color: var(--line);
  }

  .stat strong {
    color: #f5edf3;
  }

  .stat span {
    color: #bfaebb;
  }

  .home-industries,
  .cta-section,
  .not-found {
    background: #21161f;
  }

  /* About page */

  .milestones {
    background: #291c27;
    border: 1px solid var(--line);
  }

  .contact-prompt {
    background: #291c27;
    border-color: var(--line);
  }

  /* Product pages */

  .product-note {
    background: #291c27;
    border: 1px solid var(--line);
  }

  .tag-row small {
    color: #d5c7d1;
    background: #3a2835;
  }

  .round-arrow {
    color: #efa4d5;
    background: #422039;
  }

  /* Contact page */

  .contact-form-card {
    background: #291c27;
    border-color: var(--line);
  }

  .contact-item a {
    color: #efa4d5;
  }

  .response-note {
    background: #20362f;
    border-color: #3f6658;
  }

  .response-note h3 {
    color: #dff5ec;
  }

  .response-note p {
    color: #bcd9ce;
  }

  /* Legal pages */

  .legal-layout {
    background: #291c27;
    border-color: var(--line);
  }

  .legal-updated {
    color: #efa4d5;
    background: #422039;
  }

  /* Messages */

  .flash--success {
    color: #bde8d5;
    background: #20362f;
    border-color: #3f6658;
  }

  .flash--error {
    color: #f1c3c3;
    background: #402323;
    border-color: #704141;
  }

  /* Outline buttons */

  .button--outline {
    color: #efa4d5;
    border-color: #a84b87;
  }

  .button--outline:hover {
    color: #ffffff;
    background: #92247f;
  }

  /* Mobile navigation */

  @media (max-width: 780px) {
    .site-nav {
      background: #21161f;
      border-top-color: var(--line);
    }
  }
}

/* =========================================================
   New product-detail layouts
   ========================================================= */

/* Oil and Gas: three columns on desktop and rows on mobile */

.catalog-list--columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.catalog-list--columns .catalog-category__header {
  min-height: 270px;
  padding: 30px;
}

.catalog-list--columns .catalog-category__summary {
  min-height: 210px;
  align-items: stretch;
  flex-direction: column;
  gap: 28px;
}

.catalog-list--columns .catalog-category__controls {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
}

.catalog-list--columns .catalog-category__content {
  padding: 24px 20px 28px;
}

.catalog-list--columns .product-description-table th,
.catalog-list--columns .product-description-table td {
  padding: 12px 10px;
}

.catalog-list--columns .product-description-table th:first-child,
.catalog-list--columns .product-description-table td:first-child {
  width: 54px;
}

/* Hydrocarbon and fragrance sections */

.product-showcase {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(166, 40, 145, 0.07),
      transparent 30rem
    ),
    var(--surface);
}

.showcase-heading {
  max-width: 760px;
  margin-bottom: 46px;
}

.showcase-heading p {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 1.04rem;
}

.showcase-heading--center {
  margin-inline: auto;
  text-align: center;
}

.showcase-grid {
  display: grid;
  gap: 22px;
}

.showcase-grid--trading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.showcase-grid--trading .showcase-card:last-child {
  grid-column: 2;
}

.showcase-card {
  position: relative;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.showcase-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  bottom: -58px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0.09;
}

.showcase-card:hover {
  transform: translateY(-5px);
  border-color: rgba(166, 40, 145, 0.38);
  box-shadow: var(--shadow-md);
}

.showcase-card__icon,
.fragrance-card__icon {
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  background: var(--accent-soft);
}

.showcase-card__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 28px;
  border-radius: 17px;
}

.showcase-card__icon .icon {
  width: 31px;
  height: 31px;
}

.showcase-card__number {
  position: absolute;
  top: 29px;
  right: 29px;
  color: var(--brand-pink);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.showcase-card h3 {
  margin-bottom: 10px;
}

.showcase-card p {
  margin: 0;
  font-size: 0.94rem;
}

/* Fragrance introduction */

.fragrance-story {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(231, 19, 120, 0.08),
      transparent 26rem
    ),
    #fffdfd;
}

.fragrance-story__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 80px;
}

.fragrance-story__copy p {
  max-width: 720px;
  margin: 0;
  font-size: 1.08rem;
}

.fragrance-story__accent {
  min-height: 330px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(
      circle at 65% 30%,
      rgba(255, 255, 255, 0.2),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      var(--primary-dark),
      var(--primary),
      var(--brand-pink)
    );
  box-shadow: var(--shadow-md);
}

.fragrance-story__accent .icon {
  width: 125px;
  height: 125px;
  stroke-width: 1.25;
}

/* Fragrance application cards */

.showcase-grid--fragrance {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fragrance-card {
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fragrance-card:hover {
  transform: translateY(-3px);
  border-color: rgba(166, 40, 145, 0.38);
  box-shadow: var(--shadow-md);
}

.fragrance-card__icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 14px;
}

.fragrance-card__icon .icon {
  width: 25px;
  height: 25px;
}

.fragrance-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* Tablet layout */

@media (max-width: 950px) {
  .catalog-list--columns {
    grid-template-columns: 1fr;
  }

  .catalog-list--columns .catalog-category__header {
    min-height: 190px;
  }

  .catalog-list--columns .catalog-category__summary {
    min-height: 130px;
    align-items: flex-end;
    flex-direction: row;
  }

  .catalog-list--columns .catalog-category__controls {
    width: auto;
  }

  .showcase-grid--fragrance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fragrance-story__grid {
    grid-template-columns: 1fr 0.8fr;
    gap: 45px;
  }
}

/* Mobile layout */

@media (max-width: 780px) {
  .catalog-list--columns .catalog-category__header {
    min-height: auto;
  }

  .catalog-list--columns .catalog-category__summary {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-list--columns .catalog-category__controls {
    width: 100%;
  }

  .showcase-grid--trading,
  .showcase-grid--fragrance {
    grid-template-columns: 1fr 1fr;
  }

  .showcase-grid--trading .showcase-card:last-child {
    grid-column: auto;
  }

  .fragrance-story__grid {
    grid-template-columns: 1fr;
  }

  .fragrance-story__accent {
    min-height: 240px;
  }
}

@media (max-width: 560px) {
  .showcase-grid--trading,
  .showcase-grid--fragrance {
    grid-template-columns: 1fr;
  }

  .showcase-card {
    min-height: auto;
  }

  .fragrance-card {
    min-height: 100px;
  }
}

/* Dark-mode support */

@media (prefers-color-scheme: dark) {
  .showcase-card,
  .fragrance-card {
    background: #291c27;
    border-color: var(--line);
  }

  .showcase-card:hover,
  .fragrance-card:hover {
    background: #30202d;
    border-color: #a84b87;
  }

  .showcase-card__icon,
  .fragrance-card__icon {
    color: #e58fc7;
    background: #422039;
  }

  .fragrance-story {
    background:
      radial-gradient(
        circle at 85% 50%,
        rgba(166, 40, 145, 0.12),
        transparent 26rem
      ),
      #1c131a;
  }
}
/* =========================================================
   Refined Hydrocarbon Trading theme
   ========================================================= */

.product-showcase--trading {
  color: var(--ink);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(166, 40, 145, 0.13),
      transparent 34rem
    ),
    var(--surface);
}

.product-showcase--trading .showcase-heading h2 {
  color: var(--ink);
}

.product-showcase--trading .showcase-heading p {
  color: var(--muted);
}

/* Original purple-themed cards */

.product-showcase--trading .showcase-card {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.14),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      var(--primary-dark) 0%,
      #70206b 52%,
      var(--primary) 100%
    );
  box-shadow: 0 18px 38px rgba(75, 22, 75, 0.2);
}

.product-showcase--trading .showcase-card::after {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.product-showcase--trading .showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.2),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #591b58 0%,
      #85277c 52%,
      #b22ca0 100%
    );
  box-shadow: 0 22px 46px rgba(75, 22, 75, 0.3);
}

.product-showcase--trading .showcase-card__icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.product-showcase--trading .showcase-card__number {
  color: rgba(255, 255, 255, 0.72);
}

.product-showcase--trading .showcase-card h3 {
  color: #ffffff;
}

.product-showcase--trading .showcase-card p {
  color: rgba(255, 255, 255, 0.78);
}

/* System dark mode */

@media (prefers-color-scheme: dark) {
  .product-showcase--trading {
    color: #f8edf6;
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(166, 40, 145, 0.2),
        transparent 34rem
      ),
      #180f17;
  }

  .product-showcase--trading .showcase-heading h2 {
    color: #fff7fd;
  }

  .product-showcase--trading .showcase-heading p {
    color: #cdbdca;
  }

  .product-showcase--trading .showcase-card {
    border-color: rgba(229, 143, 199, 0.2);
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 255, 255, 0.11),
        transparent 45%
      ),
      linear-gradient(
        145deg,
        #391438 0%,
        #5d1c58 52%,
        #7e236f 100%
      );
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
  }

  .product-showcase--trading .showcase-card:hover {
    border-color: rgba(229, 143, 199, 0.48);
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 255, 255, 0.17),
        transparent 45%
      ),
      linear-gradient(
        145deg,
        #491947 0%,
        #722269 52%,
        #972987 100%
      );
  }

  .product-showcase--trading .showcase-card__icon {
    color: #f4b7df;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(244, 183, 223, 0.18);
  }
}

/* Refined Hydrocarbon Trading introduction visibility */

.product-showcase--trading .showcase-heading p {
  color: #66525f;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .product-showcase--trading .showcase-heading p {
    color: #d8c8d4;
  }
}
/* =========================================================
   Complete Fragrances page dark mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
  /* Fragrance introduction section */

  .fragrance-story {
    background:
      radial-gradient(
        circle at 85% 50%,
        rgba(166, 40, 145, 0.18),
        transparent 26rem
      ),
      #1c131a;
  }

  .fragrance-story__copy h2 {
    color: #fff7fd;
  }

  .fragrance-story__copy p {
    color: #d2c3ce;
  }

  /* Fragrance applications section */

  .fragrance-applications {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(166, 40, 145, 0.14),
        transparent 30rem
      ),
      #21161f;
  }

  .fragrance-applications .showcase-heading h2 {
    color: #fff7fd;
  }

  /* Application cards */

  .fragrance-applications .fragrance-card {
    color: #f5edf3;
    background: #291c27;
    border-color: #493541;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }

  .fragrance-applications .fragrance-card:hover {
    background: #342330;
    border-color: #a84b87;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
  }

  .fragrance-applications .fragrance-card h3 {
    color: #f5edf3;
  }

  .fragrance-applications .fragrance-card__icon {
    color: #e996ce;
    background: #422039;
    border: 1px solid #63304f;
  }
}

/* =========================================================
   Homepage How We Help image gallery
   ========================================================= */

.how-help-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.how-help-image {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: var(--primary-dark);
  box-shadow: 0 18px 35px rgba(41, 10, 38, 0.2);
}

.how-help-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.how-help-image--lab img {
  object-position: left center;
}

.how-help-image--process img {
  object-position: center center;
}

.how-help-image--supply img {
  object-position: right center;
}

.how-help-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 48%,
    rgba(42, 8, 39, 0.88) 100%
  );
}

.how-help-image:hover img {
  transform: scale(1.045);
}

.how-help-image figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 17px;
  left: 18px;
  color: #ffffff;
  font-size: 0.91rem;
  font-weight: 750;
  line-height: 1.25;
}

/* Centred Fragrance introduction */

.fragrance-story__grid {
  display: block;
}

.fragrance-story__copy {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.fragrance-story__copy p {
  max-width: 820px;
  margin: 0 auto;
}

/* Responsive layout */

@media (max-width: 950px) {
  .industry-band__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .how-help-image {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  .how-help-gallery {
    grid-template-columns: 1fr;
  }

  .how-help-image {
    min-height: 220px;
  }
}

/* =========================================================
   Fine Fragrance application cards — InfyChem theme
   ========================================================= */

.fragrance-applications {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(146, 36, 127, 0.14),
      transparent 32rem
    ),
    var(--surface);
}

.fragrance-applications .showcase-heading h2 {
  color: var(--primary-dark);
}

.fragrance-applications .fragrance-card {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.16),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      var(--primary-dark) 0%,
      #70206b 52%,
      var(--primary) 100%
    );
  box-shadow: 0 14px 30px rgba(75, 22, 75, 0.18);
}

.fragrance-applications .fragrance-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.22),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #591b58 0%,
      #85277c 52%,
      #a92a97 100%
    );
  box-shadow: 0 20px 40px rgba(75, 22, 75, 0.28);
}

.fragrance-applications .fragrance-card h3 {
  color: #ffffff;
}

.fragrance-applications .fragrance-card__icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* System dark mode */

@media (prefers-color-scheme: dark) {
  .fragrance-applications {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(146, 36, 127, 0.2),
        transparent 32rem
      ),
      #21161f;
  }

  .fragrance-applications .showcase-heading h2 {
    color: #fff7fd;
  }

  .fragrance-applications .fragrance-card {
    border-color: rgba(229, 143, 199, 0.2);
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 255, 255, 0.11),
        transparent 48%
      ),
      linear-gradient(
        145deg,
        #391438 0%,
        #5d1c58 52%,
        #7e236f 100%
      );
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  }

  .fragrance-applications .fragrance-card:hover {
    border-color: rgba(229, 143, 199, 0.48);
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 255, 255, 0.17),
        transparent 48%
      ),
      linear-gradient(
        145deg,
        #491947 0%,
        #722269 52%,
        #972987 100%
      );
  }

  .fragrance-applications .fragrance-card__icon {
    color: #f4b7df;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(244, 183, 223, 0.2);
  }
}

/* =========================================================
   About page: centred story and continuous values band
   ========================================================= */

.about-story__content {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.about-story__content h2 {
  margin-bottom: 28px;
}

.about-story__content p {
  max-width: 820px;
  margin: 0 auto 20px;
  font-size: 1.05rem;
}

.about-story__content p:last-child {
  margin-bottom: 0;
}

/* Core Values band */

.core-values {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(255, 255, 255, 0.15),
      transparent 24rem
    ),
    radial-gradient(
      circle at 92% 100%,
      rgba(231, 19, 120, 0.22),
      transparent 28rem
    ),
    linear-gradient(
      135deg,
      var(--primary-dark) 0%,
      #70206b 55%,
      var(--primary) 100%
    );
}

.core-values::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  top: -210px;
  right: 8%;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
}

.core-values .container {
  position: relative;
  z-index: 1;
}

.core-values__heading h2,
.core-value h3 {
  color: #ffffff;
}

.core-values__heading p {
  color: rgba(255, 255, 255, 0.76);
}

.core-values__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.core-value {
  min-width: 0;
  padding: 36px 28px;
  text-align: center;
}

.core-value + .core-value {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.core-value__icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.core-value__icon .icon {
  width: 28px;
  height: 28px;
}

.core-value h3 {
  margin-bottom: 10px;
}

.core-value p {
  max-width: 240px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.94rem;
}

/* Tablet */

@media (max-width: 950px) {
  .core-values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .core-value:nth-child(odd) {
    border-left: 0;
  }

  .core-value:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
}

/* Mobile */

@media (max-width: 560px) {
  .core-values__list {
    grid-template-columns: 1fr;
  }

  .core-value {
    padding: 30px 20px;
  }

  .core-value + .core-value {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }

  .core-value:nth-child(-n + 2) {
    border-bottom: 0;
  }
}

/* System dark mode */

@media (prefers-color-scheme: dark) {
  .core-values {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(255, 255, 255, 0.08),
        transparent 24rem
      ),
      radial-gradient(
        circle at 92% 100%,
        rgba(166, 40, 145, 0.2),
        transparent 28rem
      ),
      linear-gradient(
        135deg,
        #241022 0%,
        #43173f 55%,
        #5d1c58 100%
      );
  }
}

/* =========================================================
   About page — Our Story banner
   ========================================================= */

.about-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 120px;
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(166, 40, 145, 0.13),
      transparent 24rem
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(75, 22, 75, 0.1),
      transparent 27rem
    ),
    linear-gradient(
      135deg,
      #fffafd 0%,
      var(--surface) 52%,
      #f8ecf5 100%
    );
}

/* Decorative chemistry-inspired rings */

.about-story::before,
.about-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(166, 40, 145, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.about-story::before {
  width: 360px;
  height: 360px;
  top: -235px;
  left: -95px;
  box-shadow:
    70px 70px 0 -1px transparent,
    70px 70px 0 0 rgba(166, 40, 145, 0.07);
}

.about-story::after {
  width: 290px;
  height: 290px;
  right: -115px;
  bottom: -175px;
  box-shadow:
    -60px -60px 0 -1px transparent,
    -60px -60px 0 0 rgba(75, 22, 75, 0.07);
}

.about-story__content {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.about-story__accent {
  display: block;
  width: 54px;
  height: 4px;
  margin: 0 auto 26px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--primary-dark),
    var(--primary)
  );
}

.about-story__content h2 {
  margin-bottom: 32px;
  color: var(--primary-dark);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}

.about-story__text {
  max-width: 830px;
  margin-inline: auto;
}

.about-story__text p {
  max-width: 800px;
  margin: 0 auto 20px;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.85;
}

.about-story__text p:first-child {
  max-width: 830px;
  color: var(--ink);
  font-size: clamp(1.12rem, 2vw, 1.28rem);
  font-weight: 550;
  line-height: 1.75;
}

.about-story__text p:last-child {
  margin-bottom: 0;
}

/* Mobile layout */

@media (max-width: 680px) {
  .about-story {
    padding-block: 82px;
  }

  .about-story__content h2 {
    margin-bottom: 25px;
  }

  .about-story__text p {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .about-story__text p:first-child {
    font-size: 1.08rem;
  }

  .about-story::before {
    width: 240px;
    height: 240px;
    top: -165px;
    left: -100px;
  }

  .about-story::after {
    width: 210px;
    height: 210px;
    right: -110px;
    bottom: -135px;
  }
}

/* System dark mode */

@media (prefers-color-scheme: dark) {
  .about-story {
    background:
      radial-gradient(
        circle at 8% 18%,
        rgba(166, 40, 145, 0.22),
        transparent 24rem
      ),
      radial-gradient(
        circle at 92% 82%,
        rgba(126, 35, 111, 0.18),
        transparent 27rem
      ),
      linear-gradient(
        135deg,
        #1c131a 0%,
        #241821 52%,
        #2b1928 100%
      );
  }

  .about-story::before,
  .about-story::after {
    border-color: rgba(229, 143, 199, 0.14);
  }

  .about-story__content h2 {
    color: #fff7fd;
  }

  .about-story__text p {
    color: #cfc2cc;
  }

  .about-story__text p:first-child {
    color: #f5edf3;
  }

  .about-story__accent {
    background: linear-gradient(
      90deg,
      #a62891,
      #e58fc7
    );
  }
}

/* =========================================================
   Responsive footer alignment
   ========================================================= */

/* Tablet and smaller laptop screens */

@media (max-width: 1050px) {
  .site-footer {
    padding-top: 64px;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 46px;
    padding-bottom: 54px;
  }

  .site-footer .footer-grid > * {
    min-width: 0;
    grid-column: auto;
  }

  /* Brand introduction occupies the complete first row */

  .site-footer .footer-grid > .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand > p {
    max-width: 620px;
  }

  .subsidiary-block {
    max-width: 440px;
  }

  .site-footer h2 {
    margin: 0 0 18px;
  }

  .footer-links,
  .footer-contact {
    margin: 0;
    padding: 0;
  }

  .footer-contact a,
  .footer-contact span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .site-footer {
    padding-top: 50px;
  }

  .site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 40px;
  }

  .site-footer .footer-grid > *,
  .site-footer .footer-grid > .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand {
    padding-bottom: 36px;
  }

  .brand--footer {
    justify-content: flex-start;
  }

  .footer-brand > p {
    max-width: 100%;
    margin-top: 20px;
  }

  .subsidiary-block {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .subsidiary-block img {
    width: 52px;
    height: 40px;
  }

  /* Clear separation between each footer group */

  .site-footer .footer-grid > div:not(.footer-brand) {
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .site-footer .footer-grid > div:last-child {
    padding-bottom: 0;
  }

  .site-footer h2 {
    margin: 0 0 16px;
  }

  .footer-links {
    gap: 10px;
  }

  .footer-contact {
    gap: 16px;
  }

  .footer-contact li {
    width: 100%;
    line-height: 1.6;
  }

  .footer-contact .icon {
    margin-top: 2px;
  }

  .footer-bottom {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 0 28px;
  }

  .footer-bottom div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
  }
}

/* Very small phones */

@media (max-width: 380px) {
  .subsidiary-block {
    grid-template-columns: 1fr;
  }

  .subsidiary-block .subsidiary-arabic {
    text-align: left;
  }

  .footer-bottom div {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* WhatsApp Button */
.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  background-color: #1ebe57;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.whatsapp-btn svg {
  width: 35px;
  height: 35px;
}

@media (max-width: 780px) {
  .whatsapp-btn {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-btn svg {
    width: 30px;
    height: 30px;
  }
}