/* ===================================================================== ASG — Abdulaziz Al Sania Group · as.group Design system ported from the official ASG website source (app/globals.css) and ASG Logo Master Package, Aug 2026. Extended here with the bilingual AR/RTL layer and the components required by the full multi-page site. ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ --carbon:#070A08; --carbon-soft:#0D120F; --forest:#082018; --forest-deep:#04110C; --signal:#35D07F; --signal-bright:#73E7A7; --signal-pale:#C4F6D9; --ink:#101512; --paper:#F5F7F5; --paper-deep:#E7ECE8; --muted:#69726C; --line:rgba(16,21,18,.14); --line-dark:rgba(125,231,173,.18); --shell:min(1380px, calc(100vw - 96px)); --header-h:112px; --f-latin:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --f-arabic:"IBM Plex Sans Arabic","Inter","Helvetica Neue",Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--carbon); scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-latin); text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5,p,figure,dl,dd{margin:0} ::selection{background:var(--signal);color:#051009} :focus-visible{outline:2px solid var(--signal);outline-offset:3px} .shell{width:var(--shell);margin-inline:auto} /* NOTE: `overflow` set on propagates to the viewport. `overflow:clip` here would disable page scrolling entirely — horizontal overflow is contained by `body{overflow-x:hidden}` in the reset instead. */ .site{min-height:100vh;background:var(--paper)} /* ---------- 3. Bilingual ---------- */ html[data-lang="ar"] [data-l="en"]{display:none !important} html[data-lang="en"] [data-l="ar"]{display:none !important} html[data-lang="ar"] body{font-family:var(--f-arabic)} html[data-lang="ar"] h1,html[data-lang="ar"] h2,html[data-lang="ar"] h3{letter-spacing:-.015em} html[dir="rtl"] .rtl-flip{transform:scaleX(-1)} /* ---------- 4. Type scale ---------- */ .display,.hero h1{margin:0;font-size:clamp(44px,5.1vw,79px);font-weight:400; line-height:1.02;letter-spacing:-.052em} html[data-lang="ar"] .hero h1{letter-spacing:-.02em;line-height:1.18;font-weight:600} .h2,.section-heading h2,.section-intro h2,.thesis h2,.panel h2,.split-card h2, .contact-section h2,.page-hero h1{margin:0;font-size:clamp(34px,4.3vw,60px);font-weight:400; line-height:1.05;letter-spacing:-.045em} html[data-lang="ar"] .h2,html[data-lang="ar"] .section-intro h2, html[data-lang="ar"] .page-hero h1,html[data-lang="ar"] .thesis h2, html[data-lang="ar"] .panel h2,html[data-lang="ar"] .split-card h2, html[data-lang="ar"] .contact-section h2{letter-spacing:-.02em;line-height:1.25;font-weight:600} .h3{font-size:21px;font-weight:600;line-height:1.35;margin:0} .lead{font-size:18.5px;line-height:1.72;color:var(--muted)} .small{font-size:14px;line-height:1.65} .eyebrow{margin:0 0 24px;display:flex;align-items:center;gap:12px;color:#1E9257; font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .eyebrow::before{content:"";display:inline-block;width:34px;height:1px;background:currentColor} html[data-lang="ar"] .eyebrow{letter-spacing:.04em;text-transform:none;font-size:13.5px} .on-dark .eyebrow,.section-dark .eyebrow,.hero .eyebrow,.thesis .eyebrow, .news-card .eyebrow,.panel .eyebrow,.contact-section .eyebrow,.page-hero .eyebrow{color:var(--signal-bright)} /* ---------- 5. Header ---------- */ .site-header{position:fixed;z-index:60;inset:0 0 auto;height:var(--header-h);display:grid; grid-template-columns:minmax(430px,1fr) auto minmax(160px,1fr);align-items:center;gap:30px; padding:0 max(48px,calc((100vw - 1380px)/2));color:#fff; background:linear-gradient(180deg,rgba(4,9,7,.94),rgba(4,9,7,.58)); border-bottom:1px solid rgba(119,231,169,.11);backdrop-filter:blur(18px)} /* brand lockup — mark, brand rule, bilingual name (mirrors the official ASG bilingual lockup artwork) */ .brand{display:inline-flex;align-items:center;gap:16px;min-width:0;justify-self:start; transition:opacity 180ms ease} .brand:hover{opacity:.86} .brand img{width:112px;height:auto;aspect-ratio:540/230; filter:drop-shadow(0 0 18px rgba(53,208,127,.30))} .brand-rule{flex:0 0 auto;width:1px;height:46px; background:linear-gradient(180deg,transparent,rgba(53,208,127,.7) 22%,rgba(53,208,127,.7) 78%,transparent)} .brand span{display:grid;gap:6px;white-space:nowrap;min-width:0} .brand b{font-size:16px;letter-spacing:.07em;line-height:1.1;font-weight:600; text-transform:uppercase;color:#fff} .brand small{font-size:15px;color:rgba(255,255,255,.78);line-height:1.3;letter-spacing:.01em} html[data-lang="ar"] .brand b{font-size:19px;letter-spacing:0;text-transform:none;font-weight:600} html[data-lang="ar"] .brand small{font-size:12px;letter-spacing:.075em;text-transform:uppercase} .main-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,1.9vw,32px)} .main-nav a{position:relative;font-size:14px;line-height:1;color:rgba(255,255,255,.78); white-space:nowrap;transition:color 180ms ease} .main-nav a::after{content:"";position:absolute;inset:auto 0 -13px;height:1px;background:var(--signal); transform:scaleX(0);transform-origin:left;transition:transform 180ms ease} html[dir="rtl"] .main-nav a::after{transform-origin:right} .main-nav a:hover,.main-nav a:focus-visible{color:#fff} .main-nav a:hover::after,.main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after{transform:scaleX(1)} .main-nav a[aria-current="page"]{color:#fff} html[data-lang="ar"] .main-nav a{font-size:15px} .header-actions{justify-self:end;display:flex;align-items:center;gap:14px} .language-toggle{display:inline-flex;gap:9px;align-items:center;padding:8px 0;font-size:12px} .language-toggle span{color:rgba(255,255,255,.52);transition:color 180ms ease} .language-toggle span.active{color:var(--signal-bright)} .language-toggle i{display:block;width:1px;height:14px;background:rgba(255,255,255,.22)} .menu-toggle{display:none;width:38px;height:38px;border:1px solid var(--line-dark); background:rgba(255,255,255,.03);padding:10px} .menu-toggle span{display:block;width:100%;height:1px;margin:5px 0;background:#fff;transition:.18s ease} .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-9px) rotate(-45deg)} /* ---------- 6. Buttons ---------- */ .button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:22px; border:1px solid transparent;padding:0 24px;font-size:14px;font-weight:700;letter-spacing:.02em; transition:background 180ms ease,color 180ms ease,border-color 180ms ease} .button svg,.arrow-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;flex:0 0 auto} html[dir="rtl"] .button svg,html[dir="rtl"] .arrow-link svg{transform:scaleX(-1)} .button.primary{border-color:var(--signal);color:var(--signal-bright);background:rgba(53,208,127,.06)} .button.primary:hover,.button.primary:focus-visible{color:#051009;background:var(--signal)} .button.secondary{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)} .button.secondary:hover,.button.secondary:focus-visible{border-color:rgba(255,255,255,.56);color:#fff} .button.dark{border-color:rgba(16,21,18,.22);color:var(--ink)} .button.dark:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)} .button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .arrow-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:700;color:#148B4D} .on-dark .arrow-link,.section-dark .arrow-link,.news-card .arrow-link, .company-card .arrow-link,.thesis .arrow-link{color:var(--signal-bright)} .arrow-link svg{transition:transform 200ms var(--ease)} .arrow-link:hover svg{transform:translateX(4px)} html[dir="rtl"] .arrow-link:hover svg{transform:scaleX(-1) translateX(4px)} /* ---------- 7. Home hero ---------- */ .hero{position:relative;min-height:740px;color:#fff; background: linear-gradient(90deg,rgba(3,8,6,.97) 0%,rgba(3,8,6,.9) 20%,rgba(3,8,6,.38) 38%,rgba(3,8,6,0) 58%,rgba(3,8,6,.22) 100%), linear-gradient(180deg,rgba(4,10,7,.5) 0%,transparent 24%,transparent 66%,rgba(4,12,8,.9) 100%), url("../img/asg-hero.jpg") center right / cover no-repeat, var(--carbon)} html[dir="rtl"] .hero{ background: linear-gradient(270deg,rgba(3,8,6,.97) 0%,rgba(3,8,6,.9) 20%,rgba(3,8,6,.38) 38%,rgba(3,8,6,0) 58%,rgba(3,8,6,.22) 100%), linear-gradient(180deg,rgba(4,10,7,.5) 0%,transparent 24%,transparent 66%,rgba(4,12,8,.9) 100%), url("../img/asg-hero-rtl.jpg") center left / cover no-repeat, var(--carbon)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 74% 50%,rgba(65,240,142,.13),transparent 34%), linear-gradient(120deg,transparent 65%,rgba(81,230,146,.05));mix-blend-mode:screen} .hero-grid{position:absolute;inset:0;opacity:.24; background-image:linear-gradient(rgba(72,205,132,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(72,205,132,.07) 1px,transparent 1px); background-size:70px 70px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 58%); mask-image:linear-gradient(90deg,#000,transparent 58%)} html[dir="rtl"] .hero-grid{-webkit-mask-image:linear-gradient(270deg,#000,transparent 58%); mask-image:linear-gradient(270deg,#000,transparent 58%)} .hero-content{position:relative;z-index:2;min-height:740px;display:flex;align-items:center; padding-top:96px;padding-bottom:196px} .hero-copy{width:100%;max-width:520px;min-width:0} .hero h1{font-size:clamp(32px,2.95vw,48px);line-height:1.06;letter-spacing:-.04em; text-wrap:wrap;white-space:normal} html[data-lang="ar"] .hero h1{font-size:clamp(30px,2.85vw,46px);line-height:1.28} .hero h1 span{color:var(--signal)} .hero-body{max-width:430px;margin:26px 0 0;color:rgba(255,255,255,.66);font-size:16.5px;line-height:1.7} /* --- full-bleed highlights strip --- */ .hero-highlights{position:absolute;z-index:3;inset:auto 0 0;width:100%; display:grid;grid-template-columns:repeat(4,1fr); padding-inline:max(48px,calc((100vw - 1380px)/2)); border-top:1px solid var(--line-dark);background:rgba(5,13,9,.82);backdrop-filter:blur(18px)} .hero-highlights article{min-height:140px;display:flex;align-items:center;gap:16px; padding:28px 26px;border-inline-end:1px solid var(--line-dark)} .hero-highlights article:first-child{padding-inline-start:0} .hero-highlights article:last-child{border-inline-end:0;padding-inline-end:0} .hero-highlights h2{margin:0 0 8px;font-size:14px;font-weight:600} .hero-highlights p{margin:0;color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.55} .glyph,.capability-icon{flex:0 0 auto;color:var(--signal)} .glyph svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3} /* ---------- 8. Inner-page hero ---------- */ .page-hero{position:relative;color:#fff;background:var(--carbon); padding-top:calc(var(--header-h) + 96px);padding-bottom:96px;overflow:hidden; border-bottom:1px solid var(--line-dark)} .page-hero::before{content:"";position:absolute;inset:0;opacity:.2; background-image:linear-gradient(rgba(82,220,145,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(82,220,145,.08) 1px,transparent 1px);background-size:72px 72px; -webkit-mask-image:linear-gradient(130deg,#000,transparent 72%); mask-image:linear-gradient(130deg,#000,transparent 72%)} .page-hero::after{content:"";position:absolute;inset-block:0;inset-inline-end:-6%;width:46%; background:radial-gradient(circle at 60% 50%,rgba(53,208,127,.16),transparent 62%);pointer-events:none} .page-hero .shell{position:relative;z-index:1} .page-hero__in{max-width:860px} .page-hero p.lead{margin-top:26px;color:rgba(255,255,255,.62);max-width:640px} .crumb{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)} html[data-lang="ar"] .crumb{letter-spacing:.02em;text-transform:none;font-size:12px} .crumb a:hover{color:var(--signal-bright)} .crumb i{width:16px;height:1px;background:rgba(255,255,255,.28);display:block} /* ---------- 9. Sections ---------- */ .section{padding-top:clamp(72px,9vw,130px);padding-bottom:clamp(72px,9vw,130px)} .section-light{background:var(--paper);color:var(--ink)} .section-paper{background:var(--paper-deep);color:var(--ink)} .section-dark{position:relative;color:#fff; background:linear-gradient(145deg,rgba(29,144,81,.08),transparent 38%),var(--carbon)} .section-forest{position:relative;color:#fff;background:var(--forest-deep)} .section-dark::before,.section-forest::before{content:"";position:absolute;inset:0;opacity:.18; background-image:linear-gradient(rgba(82,220,145,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(82,220,145,.08) 1px,transparent 1px);background-size:72px 72px; -webkit-mask-image:linear-gradient(130deg,#000,transparent 72%); mask-image:linear-gradient(130deg,#000,transparent 72%);pointer-events:none} .section-dark > .shell,.section-forest > .shell{position:relative;z-index:1} .section-intro{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(32px,6vw,90px); margin-bottom:56px} .section-intro > p:not(.eyebrow){max-width:560px;margin:0 0 6px;font-size:17px;line-height:1.7;color:var(--muted)} .section-dark .section-intro > p:not(.eyebrow),.section-forest .section-intro > p:not(.eyebrow), .on-dark .section-intro > p:not(.eyebrow){color:rgba(255,255,255,.54)} .section-heading{max-width:820px;margin-bottom:52px} .section-heading > p:not(.eyebrow){margin-top:22px;font-size:17px;line-height:1.7;color:var(--muted)} .section-dark .section-heading > p:not(.eyebrow){color:rgba(255,255,255,.54)} /* ---------- 10. Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats article{min-height:150px;display:flex;align-items:baseline;gap:18px;padding:38px 30px; border-inline-end:1px solid var(--line)} .stats article:last-child{border-inline-end:0} .stats strong{color:#168D50;font-size:clamp(34px,3.4vw,54px);font-weight:400;letter-spacing:-.05em; white-space:nowrap} .stats span{max-width:180px;color:var(--muted);font-size:14px;line-height:1.45} .section-dark .stats,.section-forest .stats{border-color:var(--line-dark)} .section-dark .stats article,.section-forest .stats article{border-inline-end-color:var(--line-dark)} .section-dark .stats strong,.section-forest .stats strong{color:var(--signal)} .section-dark .stats span,.section-forest .stats span{color:rgba(255,255,255,.5)} /* ---------- 11. Company cards ---------- */ .company-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line-dark);border:1px solid var(--line-dark)} .company-card{min-height:520px;display:flex;flex-direction:column;padding:38px; background:radial-gradient(circle at 84% 20%,rgba(55,217,128,.08),transparent 24%),#0A100C; transition:background 220ms ease,transform 220ms ease;color:#fff} .company-card:hover{background:radial-gradient(circle at 84% 20%,rgba(55,217,128,.17),transparent 33%),#0D1711; transform:translateY(-5px)} .company-card-top{display:flex;justify-content:space-between;align-items:center; color:rgba(255,255,255,.5);font-size:11px;text-transform:uppercase;letter-spacing:.12em} html[data-lang="ar"] .company-card-top{text-transform:none;letter-spacing:.02em;font-size:11px} .company-index{color:var(--signal)} .company-code{margin-top:76px;color:#fff;font-size:clamp(58px,6vw,92px);font-weight:700; line-height:.9;letter-spacing:-.07em} .company-card h3{margin:26px 0 15px;font-size:20px;font-weight:600} .company-card p{margin:0;color:rgba(255,255,255,.6);font-size:15.5px;line-height:1.65} .company-card .arrow-link{margin-top:auto;padding-top:28px;font-size:13px} .company-card .chips{margin-top:20px} /* ---------- 12. Capability grid ---------- */ .capability-grid{display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);border-inline-start:1px solid var(--line)} .capability-grid article{position:relative;min-height:280px;padding:38px; border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);transition:background 180ms ease} .capability-grid article:hover{background:#EDF2EE} .capability-grid article > span{position:absolute;inset:24px 24px auto auto;color:#A7B0AA; font-size:11px;letter-spacing:.12em} html[dir="rtl"] .capability-grid article > span{inset:24px auto auto 24px} .capability-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.2} .capability-grid h3{margin:48px 0 14px;font-size:20px;font-weight:600} .capability-grid p{max-width:360px;margin:0;color:var(--muted);font-size:15.5px;line-height:1.65} .section-dark .capability-grid,.section-forest .capability-grid{border-color:var(--line-dark)} .section-dark .capability-grid article,.section-forest .capability-grid article{ border-inline-end-color:var(--line-dark);border-bottom-color:var(--line-dark)} .section-dark .capability-grid article:hover{background:rgba(53,208,127,.045)} .section-dark .capability-grid p{color:rgba(255,255,255,.53)} .section-dark .capability-grid article > span{color:rgba(255,255,255,.3)} /* ---------- 13. Thesis / feature split ---------- */ .thesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center} .thesis-visual{position:relative;min-height:520px;border:1px solid var(--line-dark); background:radial-gradient(circle at 50% 50%,rgba(46,217,124,.11),transparent 48%),rgba(255,255,255,.015); overflow:hidden} .thesis-mark{position:absolute;width:62%;left:19%;top:38%;padding:44px 34px; border:1px solid rgba(67,226,139,.16);background:rgba(3,13,8,.68); box-shadow:0 0 90px rgba(41,204,116,.08)} .thesis-mark img{width:100%;filter:drop-shadow(0 0 18px rgba(53,208,127,.28))} .trace{position:absolute;width:48%;height:1px; background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.42} .trace::after{content:"";position:absolute;right:8%;top:-3px;width:7px;height:7px; border:1px solid var(--signal);border-radius:50%} .t1{top:22%;left:8%;transform:rotate(18deg)} .t2{top:66%;left:48%;transform:rotate(-22deg)} .t3{top:79%;left:3%;transform:rotate(7deg)} .thesis-copy > p:not(.eyebrow){margin:28px 0 0;color:rgba(255,255,255,.62);font-size:17px;line-height:1.75} .tick-list{display:grid;gap:16px;margin:34px 0 0} .tick-list li{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.86);font-size:15.5px} .tick-list li i{flex:0 0 auto;width:7px;height:7px;border:1px solid var(--signal);transform:rotate(45deg)} .section-light .tick-list li{color:#3B443E} /* ---------- 14. Panel (CTA band) ---------- */ .panel{position:relative;min-height:340px;display:grid;grid-template-columns:.85fr 1fr auto; align-items:end;gap:clamp(28px,5vw,70px);padding:clamp(34px,4vw,58px);color:#fff; background:linear-gradient(100deg,rgba(5,18,12,.99),rgba(5,35,23,.88)),var(--forest);overflow:hidden} .panel::after{content:"ASG";position:absolute;inset-inline-end:-1.5%;top:-21%; color:rgba(89,227,149,.055);font-size:320px;font-weight:700;letter-spacing:-.09em; pointer-events:none;line-height:1} .panel > *{position:relative;z-index:1} .panel > p:not(.eyebrow){margin:0;color:rgba(255,255,255,.64);font-size:16.5px;line-height:1.75} .panel .button{white-space:nowrap} /* ---------- 15. Split cards ---------- */ .split-section{display:grid;grid-template-columns:1fr 1fr;gap:1px} .split-card{min-height:460px;display:flex;flex-direction:column;align-items:flex-start; padding:clamp(32px,4vw,58px);border:1px solid var(--line)} .careers-card{background:#EDF2EE} .news-card{color:#fff;border-color:var(--line-dark); background:linear-gradient(145deg,rgba(33,163,92,.12),transparent 48%),#0B100D} .split-card h2{max-width:580px;font-size:clamp(30px,3.5vw,50px)} .split-card > p:not(.eyebrow){max-width:600px;margin:26px 0 0;color:var(--muted);font-size:16.5px;line-height:1.7} .news-card > p:not(.eyebrow){color:rgba(255,255,255,.52)} .split-card > .arrow-link{margin-top:auto;padding-top:30px} /* ---------- 16. Contact ---------- */ .contact-section{padding-block:clamp(72px,9vw,130px);color:#fff;background:#050806} .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,8vw,110px)} .contact-details{display:grid;grid-template-columns:1fr 1fr;gap:32px 52px;padding-top:15px} .contact-details article{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--line-dark)} .contact-details article.wide{grid-column:1 / -1} .contact-details span{color:var(--signal);font-size:11px;font-weight:700;letter-spacing:.15em; text-transform:uppercase} html[data-lang="ar"] .contact-details span{letter-spacing:.02em;text-transform:none;font-size:11px} .contact-details a,.contact-details p{margin:0;color:rgba(255,255,255,.82);font-size:17px;line-height:1.6} .contact-details a:hover{color:var(--signal-bright)} /* ---------- 17. Forms ---------- */ .form{display:grid;gap:20px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .field{display:grid;gap:9px} .field label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--signal)} html[data-lang="ar"] .field label{letter-spacing:.02em;text-transform:none;font-size:12px} .field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.03); border:1px solid var(--line-dark);padding:15px 17px;color:#fff;font-family:inherit;font-size:16px; transition:border-color .2s ease,background .2s ease} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal); background:rgba(53,208,127,.05)} .field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--signal) 50%), linear-gradient(135deg,var(--signal) 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px); background-size:6px 6px;background-repeat:no-repeat} html[dir="rtl"] .field select{background-position:20px calc(50% + 1px),26px calc(50% + 1px)} .field select option{background:#0B100D;color:#fff} .form-note{font-size:13px;color:rgba(255,255,255,.42)} .formmsg{display:none;padding:15px 19px;font-size:14px;border:1px solid var(--signal); background:rgba(53,208,127,.08);color:var(--signal-bright)} .formmsg.show{display:block} /* ---------- 18. Partner / institution grids ---------- */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px; background:var(--line-dark);border:1px solid var(--line-dark)} .pgrid--tight{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .ptile{background:#0A100C;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;padding:28px 18px;min-height:112px;text-align:center;transition:background 220ms ease} .ptile:hover{background:#0E1712} .ptile__n{font-size:16px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.3} .ptile__c{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)} html[data-lang="ar"] .ptile__c{letter-spacing:.02em;text-transform:none;font-size:11px} .ptile--img img{max-height:38px;max-width:132px;width:auto;height:auto;object-fit:contain; filter:grayscale(1) brightness(1.8);opacity:.78;transition:.25s ease} .ptile--img:hover img{filter:none;opacity:1} .section-light .pgrid{background:var(--line);border-color:var(--line)} .section-light .ptile{background:var(--paper)} .section-light .ptile:hover{background:#EDF2EE} .section-light .ptile__n{color:var(--ink)} .section-light .ptile__c{color:#A7B0AA} .section-light .ptile--img img{filter:grayscale(1) contrast(.9);opacity:.66} .section-light .ptile--img:hover img{filter:none;opacity:1} .instgrp{margin-bottom:clamp(28px,3vw,40px)} .instgrp h3{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--signal);margin-bottom:16px} html[data-lang="ar"] .instgrp h3{letter-spacing:.02em;text-transform:none;font-size:15px} .section-light .instgrp h3{color:#168D50} .instl{columns:3;column-gap:clamp(24px,3vw,44px)} .instl li{break-inside:avoid;font-size:15px;color:rgba(255,255,255,.62);padding-block:8px; border-bottom:1px solid var(--line-dark)} .section-light .instl li{color:#4A544F;border-color:var(--line)} /* ---------- 19. Company logo plates ---------- */ .colog{--h:56px;--f:1;display:inline-flex;align-items:center;justify-content:center; background:#fff;padding:18px 24px;min-width:170px;border:1px solid rgba(255,255,255,.08); transition:transform 220ms var(--ease),box-shadow 220ms var(--ease)} .colog img{height:calc(var(--h) * var(--f));width:auto;max-width:100%;object-fit:contain} .colog--bme{--f:.74} .colog--isb{--f:1} .colog--smz{--f:1.28} .colog--s{--h:36px;padding:12px 16px;min-width:140px} .colog--l{--h:76px;padding:26px 34px;min-width:206px} .cologs{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px)} .cologs a{display:inline-flex} .cologs a:hover .colog{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.4)} @media(max-width:620px){.colog--l{--h:56px;padding:20px 24px;min-width:0}} /* ---------- 20. Spec list ---------- */ .spec{display:grid;border-top:1px solid var(--line-dark)} .spec > div{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:22px 0; border-bottom:1px solid var(--line-dark)} .spec dt{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--signal);padding-top:3px} html[data-lang="ar"] .spec dt{letter-spacing:.02em;text-transform:none;font-size:12px} .spec dd{margin:0;color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.6} .spec dd a:hover{color:var(--signal-bright)} .section-light .spec,.section-light .spec > div{border-color:var(--line)} .section-light .spec dt{color:#168D50} .section-light .spec dd{color:#3B443E} @media(max-width:620px){.spec > div{grid-template-columns:1fr;gap:8px}} /* ---------- 21. Steps ---------- */ .steps{counter-reset:s;display:grid} .step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px); padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--line-dark);align-items:start} .step:last-child{border-bottom:1px solid var(--line-dark)} .step::before{content:counter(s,decimal-leading-zero);font-size:12px;font-weight:700; letter-spacing:.12em;color:var(--signal);padding-top:6px} .step h3{font-size:clamp(18px,2vw,22px);font-weight:600;margin-bottom:12px} .step p{color:rgba(255,255,255,.6);font-size:16.5px;line-height:1.7;max-width:72ch} .section-light .steps .step,.section-light .steps .step:last-child{border-color:var(--line)} .section-light .step p{color:var(--muted)} .section-light .step::before{color:#168D50} /* ---------- 22. Chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{border:1px solid var(--line-dark);padding:7px 14px;font-size:12.5px;color:rgba(255,255,255,.68); letter-spacing:.02em} .section-light .chip{border-color:var(--line);color:var(--muted)} /* ---------- 23. Accordion ---------- */ .acc{border-top:1px solid var(--line-dark)} .acc:last-of-type{border-bottom:1px solid var(--line-dark)} .acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:20px;padding-block:26px;font-size:17.5px;font-weight:600;color:#fff} .acc summary::-webkit-details-marker{display:none} .acc summary:hover{color:var(--signal-bright)} .acc__i{position:relative;flex:0 0 auto;width:16px;height:16px} .acc__i::before,.acc__i::after{content:"";position:absolute;background:var(--signal);transition:.25s ease} .acc__i::before{top:7px;inset-inline:0;height:1.5px} .acc__i::after{inset-inline-start:7px;inset-block:0;width:1.5px} .acc[open] .acc__i::after{transform:rotate(90deg);opacity:0} .acc__b{padding-bottom:28px;color:rgba(255,255,255,.65);font-size:16.5px;line-height:1.75;max-width:82ch} .acc__b a{color:var(--signal-bright)} /* ---------- 24. Footer ---------- */ .site-footer{color:rgba(255,255,255,.48);background:#030504;border-top:1px solid rgba(255,255,255,.07)} .footer-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(28px,4vw,56px); padding-block:clamp(52px,6vw,76px)} .footer-brand-block img{width:78px;aspect-ratio:540/230;margin-bottom:20px} .footer-brand-block p{color:rgba(255,255,255,.5);font-size:14.5px;line-height:1.7;max-width:34ch} .footer-rule{width:46px;height:2px;background:var(--signal);margin:18px 0} .footer-tag{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.32);text-transform:uppercase} .site-footer h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#fff;margin-bottom:18px} html[data-lang="ar"] .site-footer h4{letter-spacing:.02em;text-transform:none;font-size:13px} .site-footer li{margin-bottom:11px} .site-footer li a{color:rgba(255,255,255,.58);font-size:14.5px;transition:color .2s ease} .site-footer li a:hover{color:var(--signal-bright)} .footer-cos{padding-block:30px;border-top:1px solid rgba(255,255,255,.07)} .footer-cos h4{margin-bottom:16px} .footer-bottom{min-height:78px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px;padding-block:22px;border-top:1px solid rgba(255,255,255,.07)} .footer-bottom p,.footer-bottom a{font-size:12.5px;color:rgba(255,255,255,.48)} .footer-legal{display:flex;flex-wrap:wrap;gap:22px} .footer-bottom a:hover{color:var(--signal-bright)} .back-top{color:var(--signal-bright);font-size:12.5px} /* ---------- 25. Utilities ---------- */ .balance{text-wrap:balance} .pgrid--auto{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .company-card-ar{color:rgba(255,255,255,.4);font-size:13px;margin:-8px 0 14px;line-height:1.4} .narrow{max-width:74ch} .mt-s{margin-top:16px}.mt-m{margin-top:30px}.mt-l{margin-top:clamp(34px,5vw,56px)} .center{text-align:center} .media{border:1px solid var(--line-dark);overflow:hidden} .media img{width:100%;object-fit:cover} .reveal{opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .skip{position:absolute;inset-block-start:-70px;inset-inline-start:16px;background:var(--signal); color:#051009;padding:12px 20px;z-index:200;font-size:13px;font-weight:700;transition:.2s} .skip:focus{inset-block-start:14px} .quote{max-width:900px;margin-inline:auto;text-align:center} .quote q{display:block;quotes:none;font-size:clamp(22px,3vw,38px);line-height:1.28;font-weight:400; letter-spacing:-.035em} .quote q::before{content:"“";color:var(--signal)} .quote q::after{content:"”";color:var(--signal)} html[dir="rtl"] .quote q::before{content:"«"} html[dir="rtl"] .quote q::after{content:"»"} .quote figcaption{margin-top:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.42)} html[data-lang="ar"] .quote figcaption{letter-spacing:.02em;text-transform:none;font-size:14px} .quote figcaption b{display:block;color:#fff;font-size:15px;letter-spacing:0;margin-bottom:6px; text-transform:none} /* ---------- 26. Responsive ---------- */ @media(max-width:1240px){ :root{--shell:min(1380px,calc(100vw - 56px))} .hero-content{padding-bottom:250px} .hero-copy{max-width:600px} .hero-body{max-width:520px} .thesis-grid,.contact-grid,.about-grid{grid-template-columns:1fr} .panel{grid-template-columns:1fr;align-items:start} } @media(max-width:1180px){ .site-header{grid-template-columns:auto 1fr;gap:16px} .menu-toggle{display:block} .main-nav{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch; gap:0;padding:8px 32px 34px;background:rgba(5,10,8,.98);backdrop-filter:blur(20px); border-bottom:1px solid var(--line-dark);max-height:calc(100dvh - var(--header-h)); overflow-y:auto;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.28s var(--ease)} .main-nav.is-open{transform:none;opacity:1;pointer-events:auto} .main-nav a{padding-block:17px;border-bottom:1px solid var(--line-dark);font-size:15px} .main-nav a::after{display:none} .header-actions{justify-self:end} .company-grid,.capability-grid{grid-template-columns:repeat(2,1fr)} .hero-highlights{grid-template-columns:repeat(2,1fr)} .split-section{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr 1fr} } @media(max-width:1180px){ /* below the two-column hero: let the headline reflow naturally */ .hero h1 br{display:none} } @media(max-width:980px){ /* lighter hero image on small screens (81 KB instead of 248 KB) */ .hero{background-image: linear-gradient(180deg,rgba(3,8,6,.92) 0%,rgba(3,8,6,.72) 40%,rgba(4,12,8,.96) 100%), url("../img/asg-hero-sm.jpg")} html[dir="rtl"] .hero{background-image: linear-gradient(180deg,rgba(3,8,6,.92) 0%,rgba(3,8,6,.72) 40%,rgba(4,12,8,.96) 100%), url("../img/asg-hero-rtl-sm.jpg")} .section-intro{grid-template-columns:1fr;align-items:start;gap:26px} .contact-details{grid-template-columns:1fr} .instl{columns:2} .hero{min-height:0} .hero-content{min-height:0;padding-top:calc(var(--header-h) + 56px);padding-bottom:300px} } @media(max-width:680px){ :root{--shell:calc(100vw - 40px);--header-h:76px} .company-grid,.capability-grid,.hero-highlights,.footer-top{grid-template-columns:1fr} .hero-highlights{padding-inline:20px} .hero-highlights article{min-height:0;padding:20px 0;border-inline-end:0; border-bottom:1px solid var(--line-dark)} .hero-highlights article:last-child{border-bottom:0} .company-card{min-height:0} .capability-grid article{min-height:0} .form-row{grid-template-columns:1fr} .instl{columns:1} .panel::after{font-size:180px} .thesis-visual{min-height:340px} .brand-rule{display:none} .brand small{display:none} .brand b{font-size:12px} .brand{gap:11px} .brand img{width:82px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} }