:root{ --bg:#fbfbf8; --bg-alt:#f0f0ee; --bg-cream:#f7f7f3; --border:#e2e4de; --ink:#101217; --ink-soft:#4a4d53; --ink-mute:#686b72; /* darkened from #83868c to meet WCAG AA (4.5:1) on the light backgrounds */ --white:#ffffff; --footer-bg:#101217; --grid-line:rgba(16,18,23,0.06); --btn-hover:#000000; --panel:#101217; --radius:2px; --maxw:1320px; } /* Dark theme — inverted neutrals, tinted slightly cool to match the brand ink. Applied when data-theme="dark" is set on (by the no-flash head script or the toggle). Every colour above is themeable, so components follow along. */ :root[data-theme="dark"]{ --bg:#0e1013; --bg-alt:#15181d; --bg-cream:#14171b; --border:#282c31; --ink:#f3f4f1; --ink-soft:#b9bcc1; --ink-mute:#9aa0a7; --white:#0e1013; --footer-bg:#080a0c; --grid-line:rgba(255,255,255,0.05); --btn-hover:#ffffff; --panel:#1b1f26; } :root{color-scheme:light;} :root[data-theme="dark"]{color-scheme:dark;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:'Montserrat',Arial,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.01em;} p{margin:0;color:var(--ink-soft);line-height:1.6;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} /* Skip link — visible only on keyboard focus, jumps past the header to main. */ .skip-link{position:absolute;left:12px;top:-56px;z-index:100;background:var(--ink);color:var(--white);padding:11px 18px;border-radius:var(--radius);font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;transition:top 0.15s ease;} .skip-link:focus{top:12px;} /* Header */ .site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);} .header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:24px;} .brand{display:flex;align-items:center;gap:10px;} .brand-mark{width:36px;height:36px;object-fit:contain;} .brand-word{display:flex;flex-direction:column;line-height:1.1;} .brand-word strong{font-size:15px;letter-spacing:0.03em;} .brand-word small{font-size:10px;letter-spacing:0.18em;color:var(--ink-mute);} .site-nav ul{display:flex;gap:32px;} .site-nav a{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:4px;border-bottom:1px solid transparent;} .site-nav a:hover,.site-nav a.active{color:var(--ink);border-color:var(--ink);} .header-actions{display:flex;align-items:center;gap:12px;} .lang-toggle{font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);background:var(--white);border:1px solid var(--border);border-radius:999px;padding:8px 14px;cursor:pointer;min-width:74px;text-align:center;} .lang-toggle:hover{border-color:var(--ink);} /* Theme toggle — sun/moon swaps by data-theme. */ .theme-toggle{font-family:inherit;font-size:15px;line-height:1;color:var(--ink);background:var(--white);border:1px solid var(--border);border-radius:999px;width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;} .theme-toggle:hover{border-color:var(--ink);} .theme-toggle .theme-icon::before{content:"\263E";} /* ☾ moon in light mode */ :root[data-theme="dark"] .theme-toggle .theme-icon::before{content:"\2600";} /* ☀ sun in dark mode */ .menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:14px 22px;border-radius:var(--radius);white-space:nowrap;cursor:pointer;border:1px solid transparent;} .btn-primary{background:var(--ink);color:var(--white);} .btn-primary:hover{background:var(--btn-hover);} .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);} .btn-outline:hover{background:var(--ink);color:var(--white);} .btn-sm{padding:10px 16px;} .arrow{font-size:12px;} .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;} /* Hero */ .hero{background:var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:44px 44px; border-bottom:1px solid var(--border); } .hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px;} .hero-copy{padding:80px 60px 80px 40px;display:flex;flex-direction:column;justify-content:center;max-width:640px;} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;} .eyebrow i{width:22px;height:1px;background:var(--ink-soft);display:inline-block;} .counter{display:block;font-size:12px;font-weight:700;letter-spacing:0.1em;color:var(--ink-mute);margin-bottom:18px;} .hero h1{font-size:clamp(38px,5vw,66px);line-height:1.05;margin-bottom:24px;} .lede{font-size:17px;max-width:520px;} .hero-media{position:relative;overflow:hidden;background:var(--bg-alt);min-height:400px;} .hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;} .hero-tag--top{position:absolute;top:20px;left:20px;font-size:10px;font-weight:700;letter-spacing:0.12em;color:rgba(255,255,255,0.85);text-transform:uppercase;z-index:2;} .hero-badge{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.92);color:#101217;display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;border-radius:2px;z-index:2;} .hero-badge img{width:20px;height:20px;} .hero-caption{position:absolute;bottom:20px;left:20px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(255,255,255,0.85);text-transform:uppercase;z-index:2;} .hero-mark{position:absolute;bottom:20px;right:20px;font-size:13px;font-weight:800;color:rgba(255,255,255,0.9);letter-spacing:0.06em;z-index:2;} /* Overview */ .overview{padding:90px 0;border-bottom:1px solid var(--border);} .overview-grid{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start;} .tiny-label{display:block;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;} .tiny-label.muted{color:var(--ink-mute);} /* themeable; was #a7a9ad which failed AA */ .section-label{display:block;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;} .overview-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.25;margin-top:8px;} .overview-list{display:flex;flex-direction:column;} .overview-list li{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);padding:14px 0;border-top:1px solid var(--border);} /* Layers */ .layers{padding:90px 0;background:var(--bg-cream);border-bottom:1px solid var(--border);} .layers h2{font-size:clamp(26px,3vw,40px);margin:14px 0 44px;max-width:640px;} .layer-grid{display:grid;gap:0;border-top:1px solid var(--border);} .layer-grid--4{grid-template-columns:repeat(4,1fr);} .layer-grid--3{grid-template-columns:repeat(3,1fr);} .layer-card{padding:32px 28px;border-right:1px solid var(--border);min-height:180px;} .layer-grid--4 .layer-card:last-child,.layer-grid--3 .layer-card:last-child{border-right:none;} .layer-num{display:block;font-size:12px;font-weight:700;color:var(--ink-mute);margin-bottom:60px;} .layer-card h3{font-size:18px;line-height:1.35;} /* Capability map (capabilities page) */ .capmap{padding:90px 0;border-bottom:1px solid var(--border);} .capmap h2{font-size:clamp(24px,3vw,34px);max-width:760px;margin:14px 0 10px;} .capmap-sub{max-width:600px;margin-bottom:44px;} .capmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .capmap-grid article{border:1px solid var(--border);padding:26px;border-radius:var(--radius);background:var(--bg-cream);} .capmap-grid h3{font-size:16px;margin-bottom:10px;} .capmap-grid span{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);} /* Industry directory */ .directory{padding:90px 0;border-bottom:1px solid var(--border);} .directory h2{font-size:clamp(24px,3vw,34px);margin:14px 0 40px;} .directory-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);} .dir-item{background:var(--bg);padding:26px 22px;font-size:14px;font-weight:600;color:var(--ink-soft);} /* Verification / scenarios (projects) */ .verification{padding:90px 0;border-bottom:1px solid var(--border);} .verification h2{font-size:clamp(24px,3vw,34px);margin:14px 0 10px;} .scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:36px;} .scenario-item{background:var(--bg);padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;} .scenario-item span{font-weight:600;font-size:14px;} .scenario-item small{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;} /* Outcomes */ .outcomes{padding:90px 0;border-bottom:1px solid var(--border);} .outcomes h2{font-size:clamp(24px,3vw,34px);margin:14px 0 40px;max-width:640px;} .outcomes-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .outcomes-list li{border:1px solid var(--border);border-radius:var(--radius);padding:26px;font-weight:600;font-size:15px;background:var(--bg-cream);} /* FAQ */ .faq{padding:90px 0;border-bottom:1px solid var(--border);} .faq h2{font-size:clamp(24px,3vw,34px);margin:14px 0 36px;max-width:640px;} .faq-list{max-width:820px;} .faq-item{border-top:1px solid var(--border);} .faq-item:last-child{border-bottom:1px solid var(--border);} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;font-family:inherit;font-size:16px;font-weight:600;text-align:left;padding:22px 0;cursor:pointer;color:var(--ink);} .faq-icon{font-size:20px;font-weight:400;color:var(--ink-mute);transition:transform 0.2s ease;} .faq-item.open .faq-icon{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height 0.25s ease;} .faq-item.open .faq-a{max-height:200px;} .faq-a p{padding-bottom:22px;max-width:640px;} /* Next step */ .next-step{padding:90px 0;background:var(--bg-alt);} .next-step-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;} .next-step h2{font-size:clamp(28px,3.4vw,44px);margin-top:14px;} .next-step-side p{margin-bottom:22px;max-width:360px;} /* Contact routing / form */ .routing{padding:90px 0;border-bottom:1px solid var(--border);} .routing h2{font-size:clamp(24px,3vw,34px);margin:14px 0 10px;max-width:640px;} .routing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;} .routing-grid .layer-num{margin-bottom:18px;} .routing-grid h3{margin-bottom:10px;font-size:17px;} .contact-form-section{padding:90px 0;} .contact-form-section h2{font-size:clamp(24px,3vw,34px);margin:14px 0 10px;max-width:640px;} .contact-form-section a{border-bottom:1px solid var(--ink);} .contact-form{margin-top:44px;display:flex;flex-direction:column;gap:20px;max-width:760px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .contact-form label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);} .contact-form label.full{width:100%;} .contact-form input,.contact-form select,.contact-form textarea{ font-family:inherit;font-size:14px;font-weight:400;text-transform:none;letter-spacing:normal; padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);color:var(--ink); } .contact-form button{align-self:flex-start;border:none;} .contact-form button[disabled]{opacity:0.6;cursor:progress;} .form-status{margin:4px 0 0;font-size:14px;font-weight:600;min-height:1.2em;} .form-status--pending{color:var(--ink-mute);} .form-status--ok{color:#1f7a44;} .form-status--error{color:#b3341f;} :root[data-theme="dark"] .form-status--ok{color:#5fd08a;} :root[data-theme="dark"] .form-status--error{color:#f08a72;} /* Scroll-reveal (added to below-fold blocks by main.js; visible by default without JS) */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1;transform:none;} /* Gentle hover lift on the bordered content cards */ .capmap-grid article,.case-item,.team-member,.outcomes-list li{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease;} .capmap-grid article:hover,.case-item:hover,.team-member:hover,.outcomes-list li:hover{transform:translateY(-3px);border-color:var(--ink-soft);} /* Delivery timeline */ .timeline{padding:90px 0;border-bottom:1px solid var(--border);} .timeline h2{font-size:clamp(24px,3vw,34px);max-width:640px;margin:14px 0 8px;} .timeline-track{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;} .timeline-step{position:relative;padding:34px 26px 0 0;} .timeline-step::before{content:"";position:absolute;top:6px;left:0;width:100%;height:1px;background:var(--border);} .timeline-step::after{content:"";position:absolute;top:1px;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--bg);} .timeline-step .t-num{display:block;font-size:12px;font-weight:700;color:var(--ink-mute);margin-bottom:8px;} .timeline-step h3{font-size:17px;line-height:1.3;margin-bottom:10px;} .timeline-step p{font-size:14px;} /* Testimonials */ .testimonials{padding:90px 0;border-bottom:1px solid var(--border);} .testimonials h2{font-size:clamp(24px,3vw,34px);max-width:640px;margin:14px 0 40px;} .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .quote-card{border:1px solid var(--border);border-radius:var(--radius);padding:30px;background:var(--bg-cream);display:flex;flex-direction:column;gap:22px;margin:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease;} .quote-card:hover{transform:translateY(-3px);border-color:var(--ink-soft);} .quote-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;} .quote-card figcaption{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--border);padding-top:18px;} .quote-card figcaption b{font-size:14px;} .quote-card figcaption span{font-size:12px;color:var(--ink-mute);} /* Why / differentiators (home) */ .why{padding:90px 0;border-bottom:1px solid var(--border);} .why h2{font-size:clamp(26px,3vw,38px);max-width:660px;margin:14px 0 44px;} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);} .why-card{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:transform .3s cubic-bezier(.2,.7,.2,1);} .why-card:hover{transform:translateY(-3px);} .why-icon{width:46px;height:46px;border:1px solid var(--border);border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);} .why-icon svg{width:22px;height:22px;display:block;} .why-card h3{font-size:17px;line-height:1.35;} .why-card p{font-size:14px;} /* Home-specific sections */ .approach{padding:100px 0 80px;} .approach h2{font-size:clamp(28px,4vw,48px);max-width:760px;margin:14px 0 26px;} .approach p{max-width:640px;font-size:16px;} .approach-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;} .approach-media{border-radius:22px;overflow:hidden;min-height:360px;position:relative;z-index:1;} .approach-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:360px;transition:transform .7s cubic-bezier(.2,.7,.2,1);} .approach-media:hover img{transform:scale(1.05);} /* Floating WhatsApp contact button */ .wa-fab{position:fixed;bottom:22px;right:22px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25d366;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,0.18);transition:transform .25s ease,box-shadow .25s ease;} .wa-fab:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.26);} .wa-fab svg{width:30px;height:30px;fill:#fff;} [dir="rtl"] .wa-fab{right:auto;left:22px;} .capgrid{padding:0 0 90px;} .capgrid > .wrap{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;} .capgrid h2{font-size:clamp(24px,3vw,34px);margin-top:14px;} .link-arrow{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid var(--ink);} .capgrid-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .capcard{position:relative;min-height:320px;background:var(--bg);background-size:cover;background-position:center;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;} .capcard--plain{background-color:var(--bg-cream);} .capcard-num{position:absolute;top:24px;left:24px;font-size:12px;font-weight:700;color:var(--ink-mute);} .capcard[style*="background-image"] .capcard-num{color:rgba(255,255,255,0.85);} .capcard-title{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:700;} .capcard[style*="background-image"]{color:var(--white);} .capcard[style*="background-image"]::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,23,0.05),rgba(16,18,23,0.55));} .capcard[style*="background-image"] .capcard-num{z-index:1;} .capcard[style*="background-image"] .capcard-title{position:relative;z-index:1;} .discipline{padding:90px 0;border-top:1px solid var(--border);} .discipline-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;} .discipline-visual{border:1px solid var(--border);border-radius:var(--radius);min-height:340px;overflow:hidden;background:var(--bg-cream);} .discipline-visual img{width:100%;height:100%;object-fit:cover;display:block;min-height:340px;} .discipline-copy h2{font-size:clamp(26px,3.4vw,40px);margin:14px 0 18px;} .discipline-copy p{margin-bottom:28px;max-width:440px;} /* Footer */ .site-footer{background:var(--footer-bg);color:rgba(255,255,255,0.75);padding-top:70px;} .footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:50px;} .footer-brand .brand-word strong{color:#f3f4f1;} /* footer is dark in both themes, so keep this light */ .footer-brand p{margin-top:16px;max-width:280px;color:rgba(255,255,255,0.55);} /* The logo is an opaque cream tile with a dark mark (no transparency), so an invert filter would turn the whole square white. Show it as-is: a light logo chip reads cleanly on the dark footer. */ .brand-mark--light{border-radius:var(--radius);} .footer-col h4{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.9);margin-bottom:18px;} .footer-col ul{display:flex;flex-direction:column;gap:12px;} .footer-col a{color:rgba(255,255,255,0.6);font-size:14px;} .footer-col a:hover{color:var(--white);} .footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding:22px 0;font-size:12px;color:rgba(255,255,255,0.5);} /* ---- Sample / placeholder content marker ------------------------------------ Intentionally off the monochrome palette (amber) so fabricated placeholder sections are obvious and never mistaken for verified information. */ .sample-note{display:inline-flex;align-items:center;gap:9px;margin:0 0 24px;padding:9px 15px;border:1px dashed #c19a3e;border-radius:var(--radius);background:#faf5e8;color:#735c1c;font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;} .sample-note::before{content:"";width:7px;height:7px;border-radius:50%;background:#c19a3e;flex:none;} /* ---- Case studies (projects) ------------------------------------------------ */ .cases{padding:90px 0;border-bottom:1px solid var(--border);} .cases h2{font-size:clamp(24px,3vw,34px);margin:14px 0 40px;max-width:680px;} .case-list{display:flex;flex-direction:column;gap:20px;} .case-item{border:1px solid var(--border);border-radius:var(--radius);padding:34px;background:var(--bg-cream);} .case-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;} .case-index{font-size:12px;font-weight:700;color:var(--ink-mute);} .case-sector{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);} .case-item h3{font-size:clamp(19px,2.2vw,24px);line-height:1.3;margin-bottom:24px;max-width:720px;} .case-body{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 0 26px;} .case-body dt{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;} .case-body dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);} .case-metrics{display:flex;flex-wrap:wrap;gap:36px;border-top:1px solid var(--border);padding-top:24px;} .case-metrics li{display:flex;flex-direction:column;gap:5px;} .case-metrics b{font-size:22px;font-weight:700;letter-spacing:-0.01em;} .case-metrics span{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-mute);} /* ---- Credibility stats (home) ----------------------------------------------- */ .stats{padding:0 0 90px;} .stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);} .stats-band li{background:var(--bg);padding:34px 26px;display:flex;flex-direction:column;gap:8px;} .stat-value{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1;} .stat-label{font-size:12px;font-weight:600;line-height:1.4;color:var(--ink-soft);} /* ---- Partners + certifications (home) --------------------------------------- */ .partners{padding:90px 0;border-top:1px solid var(--border);} .partners h2{font-size:clamp(24px,3vw,34px);margin:12px 0 24px;max-width:640px;} .partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:28px;} .partner-slot{background:var(--bg);min-height:100px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:12px;font-weight:600;letter-spacing:0.03em;color:var(--ink-mute);} .cert-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;} .cert-row li{border:1px solid var(--border);border-radius:999px;padding:9px 17px;font-size:12px;font-weight:700;letter-spacing:0.03em;} .vision{max-width:660px;font-size:15px;} .vision b{color:var(--ink);font-weight:700;} /* ---- Leadership / team (about) ---------------------------------------------- */ .leadership{padding:90px 0;border-bottom:1px solid var(--border);} .leadership h2{font-size:clamp(24px,3vw,34px);margin:14px 0 40px;max-width:640px;} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);} .team-member{background:var(--bg);padding:26px;} .team-photo{aspect-ratio:1;background:var(--bg-cream);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;} .team-member h3{font-size:16px;margin-bottom:5px;} .team-member span{font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--ink-mute);} @media (max-width: 980px){ /* Collapse the top bar to logo + toggles + hamburger. The long proposal CTA collided with the brand, so it is hidden on mobile (reachable via the menu's Contact link); the small theme toggle stays visible. */ .site-nav{display:none;} .header-actions .btn{display:none;} .menu-toggle{display:block;} /* Mobile menu opens as a full-width dropdown panel below the sticky header, not a squeezed inline row. */ .site-nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(16,18,23,0.08);padding:6px 20px 14px;} .site-nav.open ul{flex-direction:column;gap:0;} .site-nav.open li{border-top:1px solid var(--border);} .site-nav.open li:first-child{border-top:none;} .site-nav.open a{display:block;padding:16px 0;border-bottom:none;} .hero-grid{grid-template-columns:1fr;} .hero-media{min-height:320px;order:-1;} .hero-copy{padding:48px 24px;} .overview-grid,.discipline-grid,.next-step-grid{grid-template-columns:1fr;} /* minmax(0,1fr) lets the two columns shrink below their min-content; without it a long word + card padding pushes the grid wider than the phone and overflows. */ .layer-grid--4,.layer-grid--3,.capmap-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .layer-card{padding:24px 18px;} .layer-card h3{overflow-wrap:break-word;} /* Home capability teasers go full-width on mobile so long single words (e.g. "Telecommunications") sit on one line instead of breaking mid-word. */ .capgrid-row{grid-template-columns:1fr;} .capcard{min-height:220px;} .case-item{padding:24px 20px;} .case-body{grid-template-columns:1fr;gap:18px;} .case-metrics{gap:24px;} .stats-band,.partner-grid,.team-grid{grid-template-columns:repeat(2,1fr);} .why-grid,.quote-grid,.approach-grid{grid-template-columns:1fr;} .timeline-track{grid-template-columns:1fr;} .timeline-step{padding:0 0 30px 26px;} .timeline-step::before{top:0;left:5px;width:1px;height:100%;} .timeline-step:last-child::before{height:0;} .timeline-step::after{left:0;top:2px;} .directory-grid{grid-template-columns:repeat(2,1fr);} .outcomes-list{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .wrap{padding:0 20px;} .scenario-grid{grid-template-columns:1fr;} .footer-inner{grid-template-columns:1fr;} } /* ---- Softer, less-boxy shape language -------------------------------------- */ .btn{border-radius:999px;} .discipline-visual{border-radius:22px;} .stats-band,.partner-grid,.directory-grid,.team-grid,.scenario-grid,.capgrid-row,.why-grid{border-radius:22px;overflow:hidden;} .case-item,.capmap-grid article,.outcomes-list li{border-radius:18px;} .why-icon{border-radius:50%;} .team-photo{border-radius:50%;width:66%;margin:0 auto 18px;} .team-member{text-align:center;} /* Signature circle motif, echoing the circular PBG mark */ .next-step,.approach{position:relative;overflow:hidden;} .next-step::after{content:"";position:absolute;top:-130px;right:-130px;width:440px;height:440px;border:1px solid var(--border);border-radius:50%;pointer-events:none;} .approach::after{content:"";position:absolute;bottom:-170px;left:-150px;width:420px;height:420px;border:1px solid var(--border);border-radius:50%;pointer-events:none;} /* ---- Motion & professional touches ----------------------------------------- */ @keyframes pbg-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} .hero-copy > *{animation:pbg-rise .7s cubic-bezier(.2,.7,.2,1) both;} .hero-copy > *:nth-child(1){animation-delay:.04s;} .hero-copy > *:nth-child(2){animation-delay:.11s;} .hero-copy > *:nth-child(3){animation-delay:.18s;} .hero-copy > *:nth-child(4){animation-delay:.25s;} .hero-copy > *:nth-child(5){animation-delay:.32s;} .hero-media{animation:pbg-rise .9s cubic-bezier(.2,.7,.2,1) both .18s;} .arrow{transition:transform .25s cubic-bezier(.2,.7,.2,1);} .btn:hover .arrow,.link-arrow:hover .arrow,.capcard:hover .arrow{transform:translate(3px,-3px);} .capcard{transition:transform .5s cubic-bezier(.2,.7,.2,1);} .capcard:hover{transform:translateY(-5px);} .site-header{transition:box-shadow .3s ease,border-color .3s ease;} .site-header.scrolled{box-shadow:0 8px 30px rgba(16,18,23,0.07);} :root[data-theme="dark"] .site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,0.35);} .site-nav a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;border-bottom:none;transition:background-size .3s cubic-bezier(.2,.7,.2,1),color .2s ease;} .site-nav a:hover,.site-nav a.active{background-size:100% 1px;color:var(--ink);} body{transition:background-color .4s ease,color .4s ease;} /* Scroll progress bar */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:60;will-change:transform;} [dir="rtl"] .scroll-progress{transform-origin:right;} /* Image zoom on hover */ .hero-media img,.discipline-visual img{transition:transform .7s cubic-bezier(.2,.7,.2,1);} .hero-media:hover img,.discipline-visual:hover img{transform:scale(1.05);} /* Button press + smoother hover */ .btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .15s ease;} .btn:active{transform:scale(.97);} /* Deepen the photo-card overlay on hover */ .capcard[style*="background-image"]::before{transition:background .4s ease;} .capcard[style*="background-image"]:hover::before{background:linear-gradient(180deg,rgba(16,18,23,0.12),rgba(16,18,23,0.66));} /* Polished keyboard focus ring */ :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px;} /* ---- RTL / Arabic --------------------------------------------------------- */ [dir="rtl"] body{font-family:'Tajawal','Montserrat',Arial,sans-serif;} /* Arabic is cursive; letter-spacing breaks the joins, so remove it everywhere in RTL. */ [dir="rtl"] *{letter-spacing:normal !important;} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:normal;} /* Mirror the absolutely-positioned corner labels. */ [dir="rtl"] .skip-link{left:auto;right:12px;} [dir="rtl"] .hero-tag--top{left:auto;right:20px;} [dir="rtl"] .hero-badge{right:auto;left:20px;} [dir="rtl"] .hero-caption{left:auto;right:20px;} [dir="rtl"] .hero-mark{right:auto;left:20px;} [dir="rtl"] .capcard-num{left:auto;right:24px;} [dir="rtl"] .hero-copy{padding:80px 40px 80px 60px;} [dir="rtl"] .eyebrow i{transform:scaleX(-1);} /* Respect users who ask for less motion: kill the FAQ height animation, icon spin and smooth scroll. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;} }