/* PROMISE theme, About-cluster geometric styles (About, Why Saudi Arabia, Our Approach).
   Ported from Mockup_About_Option_E_Geometric.html. Reuses .phero/.phero-in/.crumb/.sec/
   .shead/.card/.grid2/.grid3/.checklist/.ctaband from services-shared.css and
   service-pillar.css (both already enqueued on these three pages) — this file only adds
   the geometric-specific pieces so the cluster reads as distinct from Home and the
   service pages. Enqueued only on about / why-saudi-arabia / our-approach. */

/* ===== geometric hero: circles, rotated square, top-right check watermark ===== */
.geo-hero{min-height:auto;padding:104px 0 112px}
.geo-hero .c1{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(62,142,90,.5),transparent 65%);top:-120px;right:-60px;z-index:0}
.geo-hero .c2{position:absolute;width:240px;height:240px;border:2px solid rgba(255,255,255,.10);border-radius:50%;bottom:-70px;right:22%;z-index:0}
.geo-hero .sq{position:absolute;width:180px;height:180px;background:rgba(255,255,255,.04);transform:rotate(18deg);right:6%;top:40%;z-index:0}
.geo-hero .phero-check{top:16%;right:4%;bottom:auto;width:280px;height:280px;opacity:.10}
.geo-hero .phero-in .accent{width:46px;height:3px;background:var(--acc);border-radius:2px;margin:14px 0 20px}
.geo-hero .phero-in h1{font-size:52px;max-width:16ch}

/* ===== ghost-check statement block: a page's key "moment" on soft paper ===== */
.promise{position:relative;background:var(--paper);text-align:center;overflow:hidden;padding:88px 0}
.promise .pcheck{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;height:340px;opacity:.05;z-index:0}
.promise .in{position:relative;max-width:820px;margin:0 auto;z-index:1}
.promise .eyebrow{display:block}
.promise h2{font-family:'Montserrat';font-weight:800;font-size:36px;color:var(--green);margin:14px 0 20px}
.promise p{color:var(--grey);font-size:17px}
.promise .cta-row{justify-content:center;margin-top:22px}

/* ===== paired mission/vision panels, one green one tint, rounded corner accent ===== */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mv .p{position:relative;border-radius:16px;padding:40px;overflow:hidden}
.mv .p.g{background:var(--green);color:#fff}
.mv .p.t{background:var(--tint)}
.mv .p .corner{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(62,142,90,.18);z-index:0}
.mv .p h4{position:relative;font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;z-index:1}
.mv .p.g h4{color:#8fc9a6}
.mv .p.t h4{color:var(--acc)}
.mv .p p{position:relative;font-family:'Montserrat';font-weight:600;font-size:21px;line-height:1.4;z-index:1}
.mv .p.t p{color:var(--green)}

/* ===== check-tile marked list, for value/point lists ===== */
.vals{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.val{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.val .mk{width:22px;height:22px;background:var(--tint);border:1px solid var(--acc);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:12px;margin-top:4px}
.val h4{font-size:19px;color:var(--green);margin-bottom:5px}
.val p{color:var(--grey);font-size:15px}

/* ===== typographic services directory, checklist restyled 2-up with dividers ===== */
.checklist.dir{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:none}
.checklist.dir li{display:flex;align-items:center;gap:12px;padding:17px 0;border-top:1px solid var(--line);font-family:'Montserrat';font-weight:600;font-size:17px;color:var(--green);margin-bottom:0}
.checklist.dir li .c{position:static;flex-shrink:0;width:20px;height:20px;color:var(--acc)}

/* ===== "why choose" items, small square icon tiles ===== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why .tile{width:46px;height:46px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--acc);margin-bottom:14px}
.why h4{font-size:18px;color:var(--green);margin-bottom:8px}
.why p{color:var(--grey);font-size:15px}

/* ===== generic small icon-tile for any remaining .card grid in the cluster,
   so every card-based section (not just the bespoke .why block) shares the same
   motif, CSS-only so no markup edits are needed on Why Saudi Arabia / Our Approach's
   existing card grids ===== */
.sec .grid2 .card,.sec .grid3 .card{position:relative;padding-top:80px}
.sec .grid2 .card::before,.sec .grid3 .card::before{content:"";position:absolute;top:26px;left:26px;width:40px;height:40px;border-radius:10px;background:var(--tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E8E5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px}

@media(max-width:960px){
	.geo-hero .phero-in h1{font-size:36px}
	.geo-hero{padding:92px 0 60px}
	.mv,.vals,.checklist.dir,.why{grid-template-columns:1fr}
	.promise .line{font-size:27px}
}