/*
Theme Name: TGO
Theme URI: https://www.groupoverseas.com
Author: Studio Mariam
Description: Custom theme for The Group Overseas LLC. Bilingual English and Arabic
with full right-to-left support.
Version: 5.1.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary, delivered to The Group Overseas LLC
Text Domain: tgo
*/


*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0B2A31; --deep:#12414B; --teal:#1E6C78; --green:#3C9672; --mint:#7FCFAE;
  --muted:#5B7178; --line:#DCE6E6; --line2:#EDF3F3; --paper:#F4F8F8; --green-ink:#327C5E; --muted-ink:#546C74; --white:#fff;
  --grad:linear-gradient(150deg,#1E6C78 0%,#2F8478 55%,#3C9672 100%);
  --f:'Inter','Carlito',system-ui,sans-serif;
  --fa:'IBM Plex Sans Arabic','FreeSans','DejaVu Sans',sans-serif;
  --wrap:1240px;
}
html[dir="rtl"] body{font-family:var(--fa)}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] .mono{letter-spacing:0;font-size:.8rem}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:#9FB6BC;font-size:.78rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
.util .certs{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.util .certs b{color:#CFE2E2;font-weight:600}
.util .certs i{font-style:normal;color:var(--mint)}
.lang{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--deep);font-family:var(--f);font-size:.9rem;font-weight:700;padding:11px 18px;
  border-radius:6px;cursor:pointer;transition:.2s;white-space:nowrap}
.lang:hover{border-color:var(--teal);color:var(--teal);background:#F7FBFA}
.lang svg{flex:none;opacity:.75}



/* ---------- track record ---------- */
.sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sectors span{font-size:.86rem;font-weight:600;color:var(--deep);background:#fff;
  border:1px solid var(--line);padding:8px 15px;border-radius:99px}
.recline{margin-top:26px;display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-weight:700;font-size:.95rem}
.recline svg{transition:transform .22s}
.recline:hover svg{transform:translateX(4px)}
html[dir="rtl"] .recline svg{transform:scaleX(-1)}
html[dir="rtl"] .recline:hover svg{transform:scaleX(-1) translateX(4px)}

/* ---------- coverage map ----------
   Deliberately schematic. A survey graticule with points plotted on it, not a
   drawn coastline: a wrong outline of Oman would be worse than no map, and a
   plotted grid is what this company's own drawings look like. */
.cov{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
@media(max-width:940px){.cov{grid-template-columns:1fr;gap:34px}}
.covmap{background:#08222A;border-radius:16px;overflow:hidden;direction:ltr;
  box-shadow:0 30px 70px -50px rgba(8,34,42,.9)}

.covkey{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:.85rem;color:var(--muted)}
.covkey span{display:inline-flex;align-items:center}
.covkey i{display:inline-block;width:11px;height:11px;margin-inline-end:9px;flex:0 0 auto}
.covkey .k1 i{background:#fff;border:2px solid var(--mint);border-radius:50%}
.covkey .k2 i{background:var(--mint)}
.covkey .k3 i{border:2px solid #CBDEDB;border-radius:50%}

/* ---------- coverage sheet ----------
   Boundaries from Natural Earth, public domain. Drawn as a survey sheet:
   exact graticule, corner ticks, tracked labels, crosshair over the head office. */
.covmap svg{width:100%;height:auto;display:block}
/* on a phone the map is about a third the size; the secondary city names collide,
   so they drop out and the office markers carry the map. The dots stay, so the
   "Project site" key in the legend still points at something visible. */
@media(max-width:640px){.covmap .lab-site,.covmap .lab-sea{display:none}}
.covmap .sea{fill:#08222A}
.covmap .ctx path{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
.covmap .off path{fill:#17444F;stroke:#2F6E7B;stroke-width:12}
.covmap .home path{fill:#23705E;stroke:var(--mint);stroke-width:20}
.covmap text{font-family:var(--f)}
html[dir="rtl"] .covmap .lab-hq,html[dir="rtl"] .covmap .lab-off,
html[dir="rtl"] .covmap .lab-site,html[dir="rtl"] .covmap .lab-sub{
  font-family:var(--fa);letter-spacing:0;text-transform:none}
.covmap .lab-hq{font-size:250px;font-weight:800;fill:#fff;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.8;stroke-width:34px;stroke-linejoin:round}
.covmap .lab-off{font-size:180px;font-weight:600;fill:#D3E6E4;letter-spacing:20px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.7;stroke-width:26px;stroke-linejoin:round}
.covmap .lab-site{font-size:158px;font-weight:600;fill:#A9C6C4;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.75;stroke-width:26px;stroke-linejoin:round}
.covmap .lab-sub{font-size:150px;font-weight:500;fill:var(--mint);fill-opacity:.72;letter-spacing:16px;
  text-transform:uppercase}
.covmap .insea{fill:#061A20}
.covmap .inland{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
.covmap .inhome{fill:#23705E;stroke:var(--mint);stroke-width:16}
.covmap .insframe{fill:none;stroke:var(--mint);stroke-opacity:.30;stroke-width:12}
.covmap .lab-sea{font-size:132px;font-weight:500;fill:var(--mint);fill-opacity:.5;
  letter-spacing:12px;text-transform:uppercase}
html[dir="rtl"] .covmap .lab-sea{font-family:var(--fa);letter-spacing:0;text-transform:none}
@media(max-width:820px){.covmap .lab-sea{font-size:190px}}
.covmap .dot-off{fill:var(--mint)}
.covmap .dot-site{fill:none;stroke:#A9C6C4;stroke-width:26}
.covmap .leader{fill:none;stroke:var(--mint);stroke-opacity:.4;stroke-width:10;stroke-dasharray:34 34}
.covmap .hq .halo{fill:var(--mint);fill-opacity:.12}
.covmap .hq .ring{fill:none;stroke:var(--mint);stroke-opacity:.8;stroke-width:16}
.covmap .hq .core{fill:#fff}
@media(max-width:820px){
  .covmap .lab-hq{font-size:330px}
  .covmap .lab-off{font-size:250px;letter-spacing:12px}
  .covmap .lab-site{font-size:230px;letter-spacing:8px}
  .covmap .lab-sub{font-size:210px}
}

/* ---------- what we need to quote ---------- */
.askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px}
@media(max-width:760px){.askrow{grid-template-columns:1fr}}
.ask{background:#fff;border:1px solid var(--line);padding:26px 26px 28px}
.ask b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:10px}
html[dir="rtl"] .ask b{letter-spacing:0}
.ask h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
html[dir="rtl"] .ask h3{letter-spacing:0}
.ask p{font-size:.93rem;color:var(--muted);line-height:1.55}
.askfoot{margin-top:22px;font-size:.95rem;color:var(--muted)}

/* ---------- client logo wall ----------
   default state: flat and quiet, so the wall reads as one object.
   hover: the strip stops and the logo under the cursor comes back to life. */
.marq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.marq-track{display:flex;align-items:center;width:max-content;animation:mscroll 40s linear infinite}
.lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 32px;position:relative}
.lg img,.lg svg{max-height:74px;width:auto;max-width:200px;object-fit:contain;
  /* v4.4 (13 Oct 2026): in full colour, as TGO asked, so every client is
     recognisable at a glance (they were grey until hovered) */
  filter:none;opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.lg:hover img,.lg:hover svg{filter:none;opacity:1;transform:scale(1.06)}
.lg::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.28}
/* Pause on hover is a mouse affordance, so it must be fenced behind a real
   pointer. A touchscreen synthesises :hover on tap and keeps it applied
   until the reader taps elsewhere, so an unfenced rule froze the strip
   wherever a scrolling finger happened to cross it. */
@media(hover:hover){.marq:hover .marq-track{animation-play-state:paused}}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .marq-track{animation-name:mscrollR}
@keyframes mscrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* no hover on a touch screen, so show them properly there */
@media(hover:none){.lg img,.lg svg{filter:none;opacity:1}
  .lg:hover img,.lg:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){.marq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
@media(max-width:700px){.marq-track span{font-size:.92rem;padding:0 20px}}

/* ---------- motion ---------- */
.hero .art{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,10px,0) scale(1.035)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{r:7;opacity:.9}70%{r:26;opacity:0}100%{r:7;opacity:0}}
.ring{animation:ringfade 8s ease-in-out infinite alternate}
@keyframes ringfade{from{opacity:.28}to{opacity:.62}}
.fig b{transition:none}
@media(prefers-reduced-motion:reduce){.marq-track,.hero .art,.pulse,.ring{animation:none!important}}


/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:34px;height:96px}
.logo img{width:205px;height:auto}
.nav-links{display:flex;gap:26px;margin-inline-start:auto}
/* ---- the Services menu ---------------------------------------------------
   Services used to be a link to an index you then had to scroll. It is now a
   button that opens the six divisions where you already are, with the index
   itself kept as the last entry for anyone who wants the whole page.

   Closed, the panel is visibility:hidden rather than just transparent, so a
   screen reader and the Tab key skip it. The visibility transition is delayed
   on the way out and instant on the way in; the other way round, the panel
   would be unclickable for the length of the fade. */
.navitem{position:relative;display:inline-flex;align-items:center}
.nav-svc{font:inherit;font-size:.92rem;font-weight:500;color:var(--deep);background:none;
  border:0;margin:0;padding:4px 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px}
.nav-svc .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:transform .2s ease}
.navitem.open .nav-svc .chev{transform:rotate(180deg)}
.nav-svc::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
.nav-svc:hover::after,.navitem.open .nav-svc::after{transform:scaleX(1)}
.navsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;z-index:70;
  min-width:254px;margin:0;padding:8px;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(11,42,49,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.navitem.open>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
.navsub li{margin:0}
.navsub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;
  color:var(--deep);white-space:nowrap}
.navsub a::after{display:none}
.navsub a:hover{background:#EDF3F1}
.navall{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.navall a{font-size:.84rem;color:var(--muted);font-weight:500}
@media(hover:hover) and (min-width:961px){
  /* a transparent bridge across the gap, or the panel closes on the way to it */
  .navitem::after{content:"";position:absolute;inset-inline:-16px;top:100%;height:16px}
  .navitem:hover>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  /* Escape, or a second click on Services, has to win against the pointer that
     is still sitting on the button - otherwise the panel refuses to shut until
     the mouse wanders off. .shut lasts until the pointer leaves. */
  .navitem.shut:hover>.navsub{opacity:0;visibility:hidden;transform:translateY(-6px);
    pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
}
@media(max-width:960px){
  .navitem{display:block;position:static;width:100%}
  .nav-svc{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  .nav-svc::after{display:none}
  .navitem::after{display:none}
  .navsub{position:static;min-width:0;display:none;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;transition:none;background:#F1F6F4;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 8px}
  .navitem.open>.navsub{display:block}
  .navsub a{border-radius:0;font-size:.95rem;padding-block:12px;
    padding-inline-start:40px;padding-inline-end:24px}
  .navall{margin-top:0;border-top-color:#DCE6E6}
}
@media(prefers-reduced-motion:reduce){
  .navsub,.nav-svc .chev{transition:none}
}

.nav-links a{font-size:.92rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
.nav-links a:hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;transition:.22s;cursor:pointer;
  font-family:inherit}
.btn.p{background:var(--grad);color:#fff}
.btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.g{border-color:var(--line);color:var(--deep);background:#fff}
.btn.g:hover{border-color:var(--teal);color:var(--teal)}
.btn.w{background:#fff;color:var(--deep)}
.btn.o{border-color:rgba(255,255,255,.35);color:#fff}
.btn.o:hover{background:rgba(255,255,255,.1)}
@media(max-width:960px){nav .btn{margin-inline-start:0}}
@media(max-width:640px){.logo{flex:0 0 auto}.logo img{width:150px}nav{height:76px;gap:12px}nav .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:92px 0 0}
.hero .art{position:absolute;inset:0;opacity:.5}
.hero .wrap{position:relative}
.eyebrow{color:var(--mint);margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;margin-bottom:24px}
html[dir="rtl"] .hero h1{letter-spacing:0;line-height:1.3}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{font-size:1.12rem;color:#B7CCD1;max-width:56ch;margin-bottom:34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14)}
.fig{background:var(--ink);padding:30px 26px 34px}
.fig b{direction:ltr;unicode-bidi:isolate;display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:8px}
.fig span{font-size:.82rem;color:#8FA9B0;display:block;line-height:1.4}
/* In Arabic the caption flows right-to-left while the figure itself is forced LTR,
   so the two used to sit on opposite edges of the cell. Centring the pair keeps the
   number over its own caption. */
html[dir="rtl"] .fig{text-align:center}
html[dir="rtl"] .fig b{text-align:center}
@media(max-width:900px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hero{padding-top:56px}.hero-cta{margin-bottom:46px}.fig{padding:22px 18px 24px}
  .fig b{font-size:1.9rem}}

/* ---------- clients ---------- */
.clients{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
.clients .lbl{color:var(--muted);margin-bottom:20px;text-align:center}
    .clients .lbl{text-transform:uppercase}
    html[dir="ltr"] .clients .lbl{letter-spacing:.07em}
.cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
.cl-row span{font-weight:700;font-size:1.02rem;color:#5E787E;letter-spacing:-.01em;
  white-space:nowrap}
@media(max-width:700px){.cl-row span{font-size:.9rem}.cl-row{gap:12px 22px}}

/* ---------- sections ---------- */
section.pad{padding:96px 0}
@media(max-width:760px){section.pad{padding:64px 0}}
.sec-head{margin-bottom:52px;max-width:62ch}
.sec-head .n{color:var(--green);margin-bottom:14px}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:16px}
html[dir="rtl"] .sec-head h2{letter-spacing:0;line-height:1.35}
.sec-head p{color:var(--muted);font-size:1.05rem}

/* divisions */
.divs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.divs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.divs{grid-template-columns:1fr}}
.div-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px 32px;
  transition:.25s;position:relative;overflow:hidden;background:#fff}
.div-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.div-card:hover{border-color:#BFD6D6;transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
.div-card:hover::before{transform:scaleY(1)}
.div-card .ic{width:44px;height:44px;border-radius:9px;background:#EAF4F1;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--teal)}
.div-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.div-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
.div-card .more{font-size:.84rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:6px}
.div-card .more svg{transition:transform .25s}
.div-card:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] .div-card:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] .div-card .more svg{transform:scaleX(-1)}

/* EMF band */
.band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band .art2{position:absolute;inset:0;opacity:.28}
.band .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
  align-items:center;padding:88px 32px}
@media(max-width:940px){.band .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px}}
.band .n{color:var(--mint);margin-bottom:14px}
.band h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:18px}
html[dir="rtl"] .band h2{letter-spacing:0;line-height:1.35}
.band p{color:#B7CCD1;margin-bottom:14px}
.bignum{direction:ltr;unicode-bidi:isolate;font-size:clamp(4rem,9vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bignum + .cap{color:#9FB6BC;font-size:.95rem;margin-top:10px;max-width:34ch}
.emf-list{list-style:none;margin-top:26px;display:grid;gap:12px}
.emf-list li{display:flex;gap:12px;font-size:.96rem;color:#CFE2E2;align-items:flex-start}
.emf-list svg{flex:none;margin-top:5px;color:var(--mint)}

/* project record */
.rec{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.rec .rhead,.rec .rrow{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .55fr;gap:20px;
  padding:16px 26px;align-items:center}
.rec .rhead{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted)}
.rec .rrow{border-bottom:1px solid var(--line2);font-size:.95rem}
.rec .rrow:last-child{border-bottom:none}
.rec .rrow b{font-weight:600}
.rec .rrow .yr{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.tag{display:inline-block;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);white-space:nowrap}
@media(max-width:860px){.rec .rhead{display:none}
  .rec .rrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}}

/* certifications */
.certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
@media(max-width:820px){.certgrid{grid-template-columns:1fr}}
.cert{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;
  display:flex;gap:18px;align-items:flex-start}
.cert .badge{width:52px;height:52px;flex:none;border-radius:10px;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  text-align:center;line-height:1.1}
.cert b{display:block;font-size:1.02rem;margin-bottom:5px}
.cert span{font-size:.88rem;color:var(--muted);display:block}
.prequal{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 30px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.prequal p{font-size:.98rem;color:var(--deep);max-width:60ch}

/* offices */
.offices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.offices{grid-template-columns:repeat(2,1fr)}}
.off{border-top:2px solid var(--line);padding-top:18px}
.off b{display:block;font-size:1.05rem;margin-bottom:4px}
.off span{font-size:.88rem;color:var(--muted)}
.off.hq{border-top-color:var(--green)}

/* CTA */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta .art3{position:absolute;inset:0;opacity:.4}
.cta .wrap{position:relative;padding:88px 32px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center}
@media(max-width:940px){.cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 24px}}
.cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:16px}
html[dir="rtl"] .cta h2{letter-spacing:0;line-height:1.35}
.cta p{color:#B7CCD1;margin-bottom:26px;max-width:48ch}
.formcard{background:#fff;border-radius:14px;padding:28px}
.formcard .fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.formcard input,.formcard textarea,.formcard select{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;font-size:.95rem;margin-bottom:16px;
  background:#fff;color:var(--ink);font-family:inherit}
.formcard textarea{min-height:82px;resize:vertical}
.formcard input:focus,.formcard textarea:focus,.formcard select:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,108,120,.12)}
.formcard .btn{width:100%;justify-content:center}

/* footer */
footer{background:var(--ink);color:#8FA9B0;padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
.ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.ftop{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.ftop{grid-template-columns:1fr}}
.ftop img{width:190px;height:auto;margin-bottom:20px}
.ftop h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[dir="rtl"] .ftop h4{letter-spacing:0}
.ftop a,.ftop p{display:block;font-size:.9rem;margin-bottom:9px;color:#8FA9B0}
.ftop a:hover{color:var(--mint)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:.82rem}
.dirltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}}

/* division cards carry the same photograph as their service page */
.div-card{padding:0;overflow:hidden}
.dphoto{aspect-ratio:16/6;overflow:hidden;background:var(--ink)}
.dphoto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.div-card:hover .dphoto img{transform:scale(1.05)}
.div-card h3,.div-card p,.div-card .more{margin-inline:30px}
.div-card .ic{display:none}
.div-card h3{margin-top:26px}
.div-card .more{margin-bottom:28px}

/* mobile menu, matching the rest of the site */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:960px){
  .nav-links{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 20px 40px -30px rgba(11,42,49,.6)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;font-size:1rem}
  .nav-links a::after{display:none}
  .burger{display:inline-flex;margin-inline-start:auto}
  nav{position:static}
  header .wrap{position:relative}
}

/* phones: links in lists need a finger-sized target */
@media(max-width:700px){
  .ftop a,.ftop p{padding:7px 0;margin-bottom:2px}
  .fbot a{display:inline-block;padding:9px 0}
  .recline{padding:9px 0}
  .sectors span{padding:10px 16px}
  .covkey span{padding:5px 0}
}
.util .certs .certs-sm{display:none}
@media(max-width:820px){
  .util .certs > span{display:none}
  .util .certs .certs-sm{display:inline-flex;gap:6px}
}

@media(max-width:760px){
  footer a,.fbot a,.nav-links a,.crumb a,.fcols a,.util a,a.lang{
    display:inline-flex;align-items:center;min-height:40px}
  .divs a,.grid a.card{min-height:44px}
}

.pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:26px}
.pt>div{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;
  flex-direction:column;gap:13px;align-items:flex-start}
.pt img{height:40px;width:auto;max-width:200px;object-fit:contain}
.pt b{font-size:1rem;font-weight:700;color:var(--ink)}
.pt span{font-size:.93rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] .pt>div{align-items:flex-start}

/* a phone-sized finger needs a 40px target; these links are often bare text runs */
@media(max-width:640px){a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}}

/* ---------- hero video ---------- */
.hero{min-height:min(88vh,780px);display:flex;flex-direction:column;padding-top:92px;background:var(--ink)}
.hero>.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:44px}
.hero-cta{margin-bottom:0}
/* The headline sits between 35% and 65% across. The interchange photograph is
   bright pale concrete right there, so the wash has to reach further than it
   did over the old picture before the white type has ground to stand on. */
.hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  /* A pool of shade under the words rather than a wash across the whole frame.
     The coast picture carries its own light - warm rock against the sea - and a
     full-width gradient turned all of it the same dull teal. This darkens only
     where the type actually sits and lets the photograph be itself. */
  background:
    radial-gradient(64% 80% at 46% 40%,rgba(11,42,49,.90) 0%,rgba(11,42,49,.72) 38%,
      rgba(11,42,49,.34) 68%,rgba(11,42,49,0) 100%),
    linear-gradient(to right,rgba(11,42,49,.44) 0%,rgba(11,42,49,.12) 34%,
      rgba(11,42,49,0) 58%),
    linear-gradient(to bottom,rgba(11,42,49,.42) 0%,rgba(11,42,49,0) 22%,
      rgba(11,42,49,0) 60%,rgba(11,42,49,.86) 100%)}
html[dir="rtl"] .hero .scrim{background:
    radial-gradient(64% 80% at 54% 40%,rgba(11,42,49,.90) 0%,rgba(11,42,49,.72) 38%,
      rgba(11,42,49,.34) 68%,rgba(11,42,49,0) 100%),
    linear-gradient(to left,rgba(11,42,49,.44) 0%,rgba(11,42,49,.12) 34%,
      rgba(11,42,49,0) 58%),
    linear-gradient(to bottom,rgba(11,42,49,.42) 0%,rgba(11,42,49,0) 22%,
      rgba(11,42,49,0) 60%,rgba(11,42,49,.86) 100%)}

.hero .art{z-index:3;opacity:.22}
.hero .wrap{z-index:4}
.hero h1 em{background:linear-gradient(118deg,#EAFFF6 0%,var(--mint) 62%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{max-width:13ch;text-shadow:0 2px 26px rgba(11,42,49,.5)}
.hero p.lede{color:#DCEAEC;max-width:46ch;text-shadow:0 1px 14px rgba(11,42,49,.6)}
.eyebrow{text-shadow:0 1px 10px rgba(11,42,49,.65)}
.figs{border-top:1px solid rgba(255,255,255,.18)}
.fig{background:rgba(11,42,49,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* ---------- division bands ---------- */
.bands-head{padding-block:58px 26px}
#record{padding-block:54px}
#record .sec-head{margin-bottom:22px}
.dband{position:relative;min-height:min(72vh,580px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
.dband:nth-of-type(even){background:#0E333B}
/* Full bleed, but only across its own side. The photographs are square, so a
   strip spanning the whole width would slice the subject - which is exactly
   what took the top off the tower. Instead the image runs edge to edge on the
   side away from the copy and dissolves into the panel, so there is no card,
   no border, and nothing cropped. */
.bmedia{position:absolute;top:-40px;bottom:-40px;width:58%;z-index:0;
  -webkit-mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
.side-left .bmedia{right:0}
.side-right .bmedia{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
.bimg,.bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The drawn layer must ride exactly the same drift as the photograph under it.
   Animating only the image pulled the traced roads off the real roads by a
   couple of hundred pixels at the far end of the cycle. */
.bimg,.bovl{animation:bdrift 34s ease-in-out infinite alternate;
  transform-origin:50% 50%;will-change:transform}
@keyframes bdrift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
.bovl{position:absolute;inset:0;width:100%;height:100%}
.dband .wrap{position:relative;z-index:3;width:100%}
.bcopy{max-width:31rem}
.side-right .bcopy{margin-inline-start:auto}
.bcopy .n{color:var(--mint);margin-bottom:14px;letter-spacing:.14em;font-size:.72rem}
.bcopy h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff;text-shadow:0 2px 18px rgba(7,28,34,.55)}
.bcopy p{color:#C9DDE0;font-size:1.02rem;margin-bottom:18px;text-shadow:0 1px 12px rgba(7,28,34,.55)}
.bstat{color:var(--mint);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:26px;padding-inline-start:14px;border-inline-start:2px solid var(--green)}
.dband .btn.o{border-color:rgba(255,255,255,.5);color:#fff}
.dband .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- drawn overlays ---------- */
.trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 6s ease-in-out infinite}
.t2{animation-delay:.45s}.t3{animation-delay:.9s}.t4{animation-delay:1.35s}.t5{animation-delay:1.8s}
@keyframes draw{0%{stroke-dashoffset:2400}45%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
.nodes circle,.verts circle{opacity:0;animation:pop 6s ease-out infinite}
.nodes circle:nth-child(2),.verts circle:nth-child(2){animation-delay:.5s}
.nodes circle:nth-child(3),.verts circle:nth-child(3){animation-delay:1s}
.nodes circle:nth-child(4){animation-delay:1.5s}
.verts circle:nth-child(4){animation-delay:1.5s}
.verts circle:nth-child(5){animation-delay:2s}
.verts circle:nth-child(6){animation-delay:2.5s}
.verts circle:nth-child(7){animation-delay:3s}.verts circle:nth-child(8){animation-delay:3.5s}
@keyframes pop{0%,18%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}
  86%{opacity:1}100%{opacity:0}}
.rings circle{opacity:0;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke;animation:ring 4.6s ease-out infinite}
.rings circle:nth-child(2){animation-delay:1.15s}
.rings circle:nth-child(3){animation-delay:2.3s}
.rings circle:nth-child(4){animation-delay:3.45s}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5.4)}}
.parcels path{opacity:0;fill-opacity:.3;animation:fill 7s ease-in-out infinite}
.parcels path:nth-child(2){animation-delay:.6s}.parcels path:nth-child(3){animation-delay:1.2s}
.parcels path:nth-child(4){animation-delay:1.8s}.parcels path:nth-child(5){animation-delay:2.4s}
@keyframes fill{0%,8%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
.scan{fill:url(#scanG);opacity:.55;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1960px)}}
.uts{fill:url(#uts);animation:sweep 5.5s linear infinite}
.stock{fill:url(#stockg);animation:sweep 6.5s linear infinite}
.brk g{opacity:0;animation:fill 6.5s ease-in-out infinite}
.brk g:nth-child(2){animation-delay:1.1s}
.glab text{opacity:0;animation:fill 7s ease-in-out infinite}
.glab text:nth-child(2){animation-delay:.9s}.glab text:nth-child(3){animation-delay:1.8s}
.contours path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 7s ease-in-out infinite}
.contours path:nth-child(2){animation-delay:.4s}.contours path:nth-child(3){animation-delay:.8s}
.pts g{stroke:#7FCFAE;stroke-width:2.4;fill:#7FCFAE;opacity:0;animation:pop 7s ease-out infinite}
.pts g:nth-child(2){animation-delay:.7s}.pts g:nth-child(3){animation-delay:1.4s}

@media(max-width:900px){
  .dband{min-height:auto;padding-block:300px 46px}
  .bmedia{width:100%;bottom:auto;height:280px;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  .side-right .bmedia{left:0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  .bcopy,.side-right .bcopy{max-width:none;margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  .hero .hv,.bvid{display:none}
  .bimg,.bovl{animation:none}
  .trace,.nodes circle,.verts circle,.rings circle,.parcels path,.scan,.uts,.stock,.brk g,
  .glab text,.contours path,.pts g{animation:none;opacity:1;stroke-dashoffset:0}
}
.vbadge{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:99;
  font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,42,49,.86);color:#9FBCBB;border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;pointer-events:none}

/* ---------- traced routes ---------- */
.route,.route-under{fill:none;stroke-linecap:round;stroke-dasharray:2800;stroke-dashoffset:2800}
.route-under{stroke:rgba(7,28,34,.5);stroke-width:8;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
.route{stroke:var(--mint);stroke-width:3.2;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes routedraw{
  0%{stroke-dashoffset:2800;opacity:0} 5%{opacity:.95}
  44%{stroke-dashoffset:0;opacity:.95} 80%{stroke-dashoffset:0;opacity:.95}
  93%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:2800;opacity:0}}
.runner{fill:#EAFFF6;opacity:0;animation:run 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0} 5%{opacity:1}
  44%{offset-distance:100%;opacity:1} 52%{opacity:0} 100%{offset-distance:100%;opacity:0}}
@supports not (offset-path: path("M0 0 L1 1")){ .runner{display:none} }
.hovl .runA{offset-path:path("M467 768 C470.8 760, 482.3 733.5, 490 720 C497.7 706.5, 504.7 697.5, 513 687 C521.3 676.5, 531 668.2, 540 657 C549 645.8, 558.2 631.2, 567 620 C575.8 608.8, 580.5 600.5, 593 590 C605.5 579.5, 625.5 568.7, 642 557 C658.5 545.3, 676.5 530.8, 692 520 C707.5 509.2, 721.7 501.7, 735 492 C748.3 482.3, 763 469, 772 462 C781 455, 785 453.7, 789 450 C793 446.3, 794.5 443.3, 796 440 C797.5 436.7, 797.7 433.8, 798 430 C798.3 426.2, 798.5 421.2, 798 417 C797.5 412.8, 796.3 409.2, 795 405 C793.7 400.8, 792.5 396.2, 790 392 C787.5 387.8, 783.8 384.2, 780 380 C776.2 375.8, 770.5 371.2, 767 367 C763.5 362.8, 760.8 359.2, 759 355 C757.2 350.8, 755.8 346.2, 756 342 C756.2 337.8, 757.3 334.2, 760 330 C762.7 325.8, 767 321.2, 772 317 C777 312.8, 785.8 308.7, 790 305 C794.2 301.3, 796.7 299.2, 797 295 C797.3 290.8, 794.5 285.2, 792 280 C789.5 274.8, 784.8 269, 782 264 C779.2 259, 776.5 254, 775 250 C773.5 246, 773.5 243.7, 773 240 C772.5 236.3, 773.2 231.7, 772 228 C770.8 224.3, 768.7 220.7, 766 218 C763.3 215.3, 757.7 213, 756 212")}.hovl .runB{offset-path:path("M960 768 C959.2 756.7, 957 719.7, 955 700 C953 680.3, 951.7 666.7, 948 650 C944.3 633.3, 939.3 616.7, 933 600 C926.7 583.3, 915.5 566.7, 910 550 C904.5 533.3, 900.3 514.2, 900 500 C899.7 485.8, 907.2 476.7, 908 465 C908.8 453.3, 907.5 439.2, 905 430 C902.5 420.8, 897.2 415.8, 893 410 C888.8 404.2, 885.2 400, 880 395 C874.8 390, 866 384.5, 862 380 C858 375.5, 856 372.7, 856 368 C856 363.3, 858.7 357.5, 862 352 C865.3 346.5, 871 340, 876 335 C881 330, 888 326.2, 892 322 C896 317.8, 898.8 313.7, 900 310 C901.2 306.3, 900.7 303, 899 300 C897.3 297, 893.8 294.3, 890 292 C886.2 289.7, 881 287.8, 876 286 C871 284.2, 866 282.8, 860 281 C854 279.2, 846.7 277, 840 275 C833.3 273, 826 271, 820 269 C814 267, 808.3 265, 804 263 C799.7 261, 796.2 259.2, 794 257 C791.8 254.8, 791 252.2, 791 250 C791 247.8, 791.8 246, 794 244 C796.2 242, 800.3 239.7, 804 238 C807.7 236.3, 813.2 235.2, 816 234 C818.8 232.8, 820.7 232.2, 821 231 C821.3 229.8, 820.5 228.2, 818 227 C815.5 225.8, 810.7 225, 806 224 C801.3 223, 796 222.2, 790 221 C784 219.8, 773.3 217.7, 770 217")}.hovl .rB,.hovl .rBu,.hovl .runB{animation-delay:1.9s}

/* nodes fire as the light reaches them */
.nd .ring{fill:none;stroke:var(--mint);stroke-width:2.2;opacity:0;transform-origin:center}
.nd .dot{fill:#EAFFF6;opacity:0;transform-origin:center}
.nd .ring{animation:ndring 11s cubic-bezier(.2,0,.2,1) infinite}
.nd .dot{animation:nddot 11s ease-out infinite}
@keyframes ndring{0%,10%{opacity:0;transform:scale(.2)} 16%{opacity:.85;transform:scale(1)}
  30%{opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)}}
@keyframes nddot{0%,10%{opacity:0;transform:scale(.3)} 16%{opacity:1;transform:scale(1)}
  80%{opacity:1} 93%{opacity:0} 100%{opacity:0}}
.n1 .ring,.n1 .dot{animation-delay:1.1s}
.n2 .ring,.n2 .dot{animation-delay:2.4s}
.n3 .ring,.n3 .dot{animation-delay:3.6s}
.n4 .ring,.n4 .dot{animation-delay:2.9s}
.n5 .ring,.n5 .dot{animation-delay:4.4s}

/* the original sheet declares .reveal without a duration, so the class swap
   popped instead of fading */
.reveal{transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero, now a still ---------- */
.hero .hlayer{position:absolute;inset:-6% -4%;z-index:0;will-change:transform}
.hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hovl{position:absolute;inset:0;width:100%;height:100%}
.hero .art{z-index:3;opacity:.16}
@media(prefers-reduced-motion:reduce){
  .route,.route-under,.runner,.nd .ring,.nd .dot{animation:none;stroke-dashoffset:0;opacity:1}
  .nd .ring{opacity:.5}
}


/* ---------- full-height hero ---------- */
.hero{min-height:calc(100vh - 176px);min-height:calc(100svh - 176px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0}
.hero>.hero-copy{flex:0 0 auto;display:block;padding-top:clamp(48px,9vh,110px);padding-bottom:0}
.hero .hlayer{inset:-2% -2%}
/* the headline carries the weight change the reference site uses: a light
   first line, a heavy second. Our sentence happens to break exactly there. */
.hero h1{max-width:none;margin-bottom:26px;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.6vw,4.6rem);text-shadow:0 2px 30px rgba(7,28,34,.55)}
.hero h1 .l1{display:block;font-weight:300;color:#fff}
.hero h1 .l2{display:block;font-weight:800;
  background:linear-gradient(112deg,#fff 6%,var(--mint) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{max-width:42ch}
/* the scrim now has to work under text sitting high and left */
.hero .scrim{background:
  radial-gradient(120% 62% at 50% 30%,rgba(7,28,34,.86) 0%,rgba(7,28,34,.60) 46%,
    rgba(7,28,34,.20) 78%,rgba(7,28,34,0) 100%),
  linear-gradient(to bottom,rgba(7,28,34,.58) 0%,rgba(7,28,34,.10) 40%,
    rgba(7,28,34,.10) 66%,rgba(7,28,34,.62) 100%)}

:root{--cue-x:26px}
/* physical offsets here on purpose: writing-mode:vertical-rl rotates the inline
   axis, so inset-inline-end resolves to the bottom and the cue lands in the
   wrong corner. The RTL case is handled explicitly below. */
.scrollcue{position:absolute;right:var(--cue-x);bottom:30px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);writing-mode:vertical-rl}
html[dir="rtl"] .scrollcue{right:auto;left:var(--cue-x)}
.scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(to bottom,
  rgba(255,255,255,.1),rgba(255,255,255,.75));position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-54px;height:54px;
  background:linear-gradient(to bottom,transparent,var(--mint));
  animation:cue 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}
/* the figures leave the hero and become their own quiet strip */
.figstrip{background:var(--ink);border-block:1px solid rgba(255,255,255,.12)}
.figstrip .figs{border-top:0}
.figstrip .fig{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:820px){
  .hero{min-height:auto;padding-top:0}
  .hero>.hero-copy{padding-top:56px;padding-bottom:64px}
  .scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){.scrollcue i::after{animation:none}}



/* ---------- new logo: sized by height, with clearance in the bar ---------- */
/* The old rule set a width and let the height fall where it fell, which put a
   103px image inside a 96px bar. Height-first cannot overflow. */
/* The mark is 2:1, so height drives width: 88px tall reads at 176px wide,
   close to the presence the old lockup had at 205px - but sized by height it
   cannot outgrow its bar the way the old rule did. */
.logo img{width:auto;height:88px;display:block}
nav{height:124px}
@media(max-width:900px){.logo img{height:64px}nav{height:96px}}
@media(max-width:640px){.logo img{height:52px}nav{height:82px}}
.ftop img{width:auto;height:88px;display:block;margin-bottom:20px}
@media(max-width:640px){.ftop img{height:68px}}

/* ---------- marquee: keep it on the GPU and inside the texture cap -------- */
.marq-track{will-change:transform;backface-visibility:hidden}
@keyframes mscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(max-width:820px){
  .marq-track{animation-duration:26s}
  .lg{height:74px;padding:0 20px}
  .lg img,.lg svg{max-height:46px;max-width:120px}
}

/* ---------- coverage map: centred, same width as the bands above ---------- */
/* The wrap is left at its default 1240px so this section lines up exactly with
   every other band on the page. One column, centred, map at full wrap width. */
#offices{padding-block:clamp(56px,7vw,92px)}
#offices .cov{display:block;text-align:center}
#offices .cov>*{width:100%}
#offices .cov h2{margin-inline:auto;max-width:24ch}
#offices .cov p{margin-inline:auto;max-width:70ch}
#offices .covkey{justify-content:center;margin-bottom:30px}
#offices .covmap{margin-inline:auto}
#offices .covmap svg{width:100%;height:auto;display:block}
@media(min-width:1100px){#offices .cov{grid-template-columns:none}}

/* ---------- technology partners ---------- */
.tp{background:#fff;border-top:1px solid var(--line);padding-block:clamp(50px,7vw,88px)}
.tp .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
.tp h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
.tp .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:34px}
.tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.tpgrid article{background:#fff;padding:26px 24px 30px}
.tpgrid b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
.tpgrid .role{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;display:block}
.tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.6}


/* ---- language switch ------------------------------------------------------
   The site carries Arabic on every string but had no way to reach it except a
   hand-typed ?lang=ar. This is that switch. */
.langbtn{font:inherit;font-size:.76rem;font-weight:600;line-height:1;color:#CFE0E3;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
.langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.langbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:640px){.langbtn{padding:5px 11px;font-size:.72rem}}


/* ---- division bands: the whole panel is the link ------------------------- */
.bcopy-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:transform .35s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){.bcopy-link:hover{transform:translateY(-3px)}}
.bcopy-link:focus-visible{outline:2px solid var(--mint);outline-offset:8px;border-radius:8px}
.bgo{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:.95rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.4);padding-bottom:4px}
.bgo svg{transition:transform .25s ease}
@media(hover:hover){.bcopy-link:hover .bgo{border-color:var(--mint);color:var(--mint)}
  .bcopy-link:hover .bgo svg{transform:translateX(5px)}}
html[dir="rtl"] .bcopy-link:hover .bgo svg{transform:translateX(-5px)}

/* ---- technology partners: a card grid with room for the mark ------------- */
.tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;background:none;border:0}
.tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 30px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){.tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
.tplogo{height:56px;display:flex;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
.tplogo img{max-height:40px;width:auto;object-fit:contain}
.tplogo .mark{display:inline-flex;align-items:center;gap:10px}
.tplogo .mark i{width:34px;height:34px;border-radius:9px;background:#EAF3F0;color:var(--teal);
  display:grid;place-items:center;font:800 .82rem/1 var(--f);font-style:normal;letter-spacing:.02em}
.tplogo .mark b{font:700 1.06rem/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
.tpgrid .role{font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
.tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.65}
.tpnote{margin-top:26px;font-size:.9rem;color:var(--muted)}


.tplink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.86rem;
  font-weight:600;color:var(--teal);text-decoration:none;align-self:flex-start}
.tplink svg{transition:transform .22s ease}
.tplink:hover{color:var(--deep)}
.tplink:hover svg{transform:translateX(4px)}
html[dir="rtl"] .tplink:hover svg{transform:translateX(-4px)}
.tpgrid article .d{flex:1}


.bands-head{padding-block:clamp(52px,7vw,92px) clamp(26px,3vw,40px)}
.bands-head .sec-head p{max-width:56ch}


/* ---- technology partners: the marks, the names, and not much else -------- */
.tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
.tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){.tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
.tplogo{height:62px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
.tplogo img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
html[dir="rtl"] .tplogo img{object-position:right center}
.tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
.tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}


/* ---- section eyebrows: readable, not decorative ------------------------- */
.mono{font-size:.84rem;letter-spacing:.13em}
html[dir="rtl"] .mono{letter-spacing:0;font-size:.92rem}
.n.mono,.sec-head .n,.band .n,.bcopy .n,.tp .n,.lsec .n,.pj-head .n,.sv-head .n,.dp-hero .n{
  font-size:.84rem;letter-spacing:.13em}
.util .certs{font-size:.8rem}
.bstat.mono{font-size:.82rem;letter-spacing:.1em}
.svnum{font-size:.82rem;letter-spacing:.2em}
@media(max-width:640px){.mono,.n.mono{font-size:.78rem}}


/* ---- technology partners: the marks, the names, and not much else -------- */
.tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
.tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){.tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
.tplogo{height:74px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
.tplogo img{height:auto;max-width:100%;max-height:56px;object-fit:contain;object-position:left center}
html[dir="rtl"] .tplogo img{object-position:right center}
.tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
.tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}

/* ---- technology partners: dark band, white chips ---- */
.tp{background:var(--ink);border-block-start:0;position:relative;overflow:hidden}
.tp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 100% at 88% 0%,rgba(127,207,174,.12),transparent 60%)}
.tp .wrap{position:relative;z-index:2}
.tp .n{color:var(--mint)}
.tp h2{color:#fff}
.tp .lede{display:none}
.tpchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:18px;margin-top:clamp(26px,3vw,44px)}
/* --- partners: a balanced row --- */
/* 7 partners. auto-fit would leave the last row short and it reads as a
   gap rather than a grid, so the count is pinned above phone width. */
@media(min-width:700px){.tpchips{grid-template-columns:repeat(4,minmax(0,1fr))}}

.tpchips .tpcell{display:flex;flex-direction:column;align-items:center;gap:14px}
.tpchips .chip{background:#fff;border-radius:14px;width:100%;height:96px;
  display:flex;align-items:center;justify-content:center;padding:18px 22px;
  transition:transform .28s ease,box-shadow .28s ease}
@media(hover:hover){.tpchips .tpcell:hover .chip{transform:translateY(-3px);
  box-shadow:0 20px 38px -26px rgba(0,0,0,.6)}}
.tpchips .tplogo{display:flex;align-items:center;justify-content:center;width:100%;border:0;padding:0;margin:0}
.tpchips .tplogo img{height:auto;max-height:56px;max-width:100%;object-fit:contain}
.tpchips .tpname{font-size:.86rem;font-weight:600;color:#A8C2C7}


/* The honeypot. A person never sees it; a bot fills it and the enquiry is
   dropped. Kept out of the layout and out of the tab order rather than
   display:none, which some bots check for. */
.formcard .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
html[dir="rtl"] .formcard .hp{left:auto;right:-9999px}
.formcard{position:relative}


/* ---- the scan sweep, as on the services index ---------------------------
   A soft diagonal band travelling across each division photograph. The band
   inherits the photograph's own mask, so it fades out at the same edge the
   picture does rather than stopping on a hard line. */
.dband .bmedia::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(127,207,174,.16) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:bandsweep 9s cubic-bezier(.5,0,.5,1) infinite}
.dband:nth-of-type(even) .bmedia::after{animation-delay:1.6s}
.dband:nth-of-type(3n) .bmedia::after{animation-delay:3.2s}
@keyframes bandsweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.dband .bmedia::after{animation:none;opacity:0}}
/* ---- coverage map, option C: full width, capped height ---- */
#offices .covmap{max-height:min(74vh,720px);display:flex;justify-content:center;
  background:#08222A;border-radius:16px;overflow:hidden}
#offices .covmap svg{width:auto;height:min(74vh,720px);max-width:100%}



.gisovl.v-extract .gcur,.gisovl.v-extract .g-tip,.gisovl.v-extract .ps{display:none!important}
.gisovl.v-extract .bl{fill-opacity:.4}
.gisovl.v-extract .pf.done{fill-opacity:.2}
.gisovl.v-extract.js .pg,.gisovl.v-extract.js .pf,.gisovl.v-extract.js .vx{opacity:0}
.gisovl.v-extract.on .pg,.gisovl.v-extract.on .pf{animation:gisBin .6s ease var(--dx) both}
.gisovl.v-extract.on .vx{animation:gisFade .4s ease var(--dx) both}
@keyframes gisFade{from{opacity:0}to{opacity:1}}
.gisovl.v-extract.on .bl{animation:gisPingX 12s linear var(--d) infinite}
.gisovl.v-extract .gscan{width:260px}
@keyframes gisPingX{0%{fill-opacity:.75;stroke:#fff}9%{fill-opacity:.4;stroke:var(--pale)}100%{fill-opacity:.4}}



/* gis-overlay:start ---------------------------------------------------------
   The GIS band's drawn layer: plots traced along their walls, houses along
   their silhouettes, the three streets along their centre lines. Generated by
   build/gis_overlay.py - edit the geometry there, not here.

   With no script (or reduced motion) the finished drawing is simply shown.
   The script adds .js before the band is reached, which hides it, and .on
   when the band comes into view, which builds it: streets draw, each plot is
   digitised corner by corner, a scan line passes and the houses are picked out
   as it crosses them. Then a cursor goes from plot to plot selecting each in
   turn, and the scan comes round again every twelve seconds. */
#d-gis .bmedia::after{display:none}
.gisovl{--ink:#0B2A31;--mint:#7FCFAE;--pale:#EAFFF6;
  --sw:2.2;--swb:1.6;--swr:2.4;--cas:2.6;--vxs:1}
@media(max-width:900px){.gisovl{--sw:5;--swb:3.6;--swr:5;--cas:5;--vxs:2.1}}
/* plots */
.gisovl .pf{fill:var(--mint);fill-opacity:.13;transition:fill-opacity .5s ease}
.gisovl .pc{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:calc(var(--sw) + var(--cas));stroke-linejoin:round}
.gisovl .pl{fill:none;stroke:var(--mint);stroke-width:var(--sw);stroke-linejoin:round}
.gisovl .ps{fill:none;stroke:#fff;stroke-width:calc(var(--sw) * 1.15);stroke-dasharray:14 10;opacity:0;
  transition:opacity .35s ease}
.gisovl .vx{fill:var(--pale);stroke:var(--ink);stroke-width:1.4;transform-box:fill-box;transform-origin:center;
  transform:scale(var(--vxs));transition:transform .3s ease}
/* houses */
.gisovl .bc{fill:none;stroke:var(--ink);stroke-opacity:.45;stroke-width:calc(var(--swb) + var(--cas));stroke-linejoin:round}
.gisovl .bl{fill:var(--mint);fill-opacity:.22;stroke:var(--pale);stroke-width:var(--swb);stroke-linejoin:round;
  transition:fill-opacity .35s ease,stroke-width .35s ease}
.gisovl .bg.sel .bl{fill-opacity:.46;stroke:#fff;stroke-width:calc(var(--swb) * 1.7)}
/* streets */
.gisovl .rc{fill:none;stroke:url(#gisRoadC);stroke-width:calc(var(--swr) + 4);stroke-linecap:round}
.gisovl .rd{fill:none;stroke:url(#gisRoad);stroke-opacity:.35;stroke-width:var(--swr);stroke-linecap:round}
.gisovl .rf{fill:none;stroke:url(#gisRoad);stroke-width:var(--swr);stroke-linecap:round;stroke-dasharray:16 13}
/* cursor and scan are motion-only */
.gisovl .gcur,.gisovl .gscan{display:none}
.gisovl .gscan{fill:url(#gisScanG)}
.gisovl .cx{fill:none;stroke:#fff;stroke-width:calc(var(--swr) * .9);stroke-linecap:round}
.gisovl .cx-c{fill:none;stroke:var(--ink);stroke-opacity:.6;stroke-width:calc(var(--swr) * .9 + 3);stroke-linecap:round}
.gisovl .cbox{fill:none;stroke:#fff;stroke-width:1.6}
.gisovl .cring{fill:none;stroke:var(--pale);stroke-width:2;opacity:0}
.gisovl .tip{fill:#fff;stroke:var(--mint);stroke-width:2}

/* ---- motion ---- */
.gisovl.js .pf{fill-opacity:0}
.gisovl.js .pl,.gisovl.js .pc{stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
.gisovl.js .vx{opacity:0;transform:scale(calc(var(--vxs) * .2))}
.gisovl.js .vx.in{opacity:1;transform:scale(var(--vxs));
  transition:opacity .18s ease,transform .45s cubic-bezier(.3,1.8,.5,1)}
.gisovl.js .pf.done{fill-opacity:.13}
.gisovl.js .bg{opacity:0}
.gisovl.js .rd,.gisovl.js .rc{stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
.gisovl.js .rf{opacity:0}
.gisovl.on .bg{animation:gisBin .7s cubic-bezier(.2,.8,.2,1) var(--d) both}
.gisovl.on .bl{animation:gisPing 12s linear var(--d) infinite}
.gisovl.on .rd,.gisovl.on .rc{animation:gisDraw 1.6s cubic-bezier(.6,0,.3,1) var(--d) forwards}
.gisovl.on .rf{animation:gisIn .8s ease var(--d2) forwards,gisFlow 1.8s linear var(--d2) infinite}
.gisovl.on .gscan{display:block;animation:gisScan 12s linear 1s infinite;opacity:0}
.gisovl.on .gcur{display:block}
.gisovl .pg.sel .ps{opacity:1;animation:gisAnts .9s linear infinite}
.gisovl .pg.sel .pl{stroke:var(--pale)}
.gisovl .pf.sel{fill-opacity:.3}
.gisovl .vx.sel{transform:scale(calc(var(--vxs) * 1.45))}
.gisovl .cring.go{animation:gisRing .7s ease-out}
.gisovl.paused *{animation-play-state:paused!important}
@keyframes gisBin{0%{opacity:0;transform:scale(.97)}35%{opacity:1}100%{opacity:1;transform:none}}
.gisovl .bg,.gisovl .pg,.gisovl .pf{transform-box:fill-box;transform-origin:center}
@keyframes gisPing{0%{fill-opacity:.58;stroke:#fff}9%{fill-opacity:.22;stroke:var(--pale)}100%{fill-opacity:.22}}
@keyframes gisDraw{to{stroke-dashoffset:0}}
@keyframes gisIn{to{opacity:1}}
@keyframes gisFlow{to{stroke-dashoffset:-58}}
@keyframes gisAnts{to{stroke-dashoffset:-24}}
@keyframes gisRing{0%{opacity:.95;r:5}100%{opacity:0;r:34}}
@keyframes gisScan{0%{opacity:0;transform:translateX(120px)}1.5%{opacity:1}35.0%{opacity:1;transform:translateX(1420px)}36.5%,100%{opacity:0;transform:translateX(1420px)}}
@media(prefers-reduced-motion:reduce){
  .gisovl .gcur,.gisovl .gscan,.gisovl .g-tip{display:none!important}
  .gisovl *{animation:none!important;transition:none!important}
}
/* gis-overlay:end */

.gisovl.v-extract .gcur,.gisovl.v-extract .g-tip,.gisovl.v-extract .ps{display:none!important}
.gisovl.v-extract .bl{fill-opacity:.4}
.gisovl.v-extract .pf.done{fill-opacity:.2}
.gisovl.v-extract.js .pg,.gisovl.v-extract.js .pf,.gisovl.v-extract.js .vx{opacity:0}
.gisovl.v-extract.on .pg,.gisovl.v-extract.on .pf{animation:gisBin .6s ease var(--dx) both}
.gisovl.v-extract.on .vx{animation:gisFade .4s ease var(--dx) both}
@keyframes gisFade{from{opacity:0}to{opacity:1}}
.gisovl.v-extract.on .bl{animation:gisPingX 12s linear var(--d) infinite}
.gisovl.v-extract .gscan{width:260px}
@keyframes gisPingX{0%{fill-opacity:.75;stroke:#fff}9%{fill-opacity:.4;stroke:var(--pale)}100%{fill-opacity:.4}}



/* home-overlays:start */
/* The street-mapping band. The 360-degree camera head
   captures: a bright arc runs round its orbit and a pulse rings out, and the
   street assets in the frame are picked out with corner brackets in order of
   their distance from the camera. Generated by build/home_overlays.py. */
.cadovl{--sw:2.6}
@media(max-width:900px){.cadovl{--sw:5}}
.cadovl .chead{fill:none;stroke:#EAFFF6;stroke-width:var(--sw);opacity:.9}
.cadovl .corbit{fill:none;stroke:#EAFFF6;stroke-opacity:.45;stroke-width:calc(var(--sw) * .8);stroke-dasharray:3 9}
.cadovl .csweep{fill:none;stroke:#7FCFAE;stroke-width:calc(var(--sw) * 1.6);stroke-linecap:round;
  stroke-dasharray:110 1000;animation:cadSweep 2.6s linear infinite}
.cadovl .cpulse ellipse{fill:none;stroke:#7FCFAE;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:cadPulse 5.2s cubic-bezier(.2,.6,.3,1) infinite}
.cadovl .cpulse ellipse:nth-child(2){animation-delay:2.6s}
.cadovl .cdet path{fill:none;stroke:#7FCFAE;stroke-width:var(--sw);stroke-linecap:square;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:cadLock .7s cubic-bezier(.2,.8,.2,1) var(--d) forwards,cadPing 5.2s linear calc(var(--d) + 5.2s) infinite}
@keyframes cadSweep{to{stroke-dashoffset:-1110}}
@keyframes cadPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
@keyframes cadLock{0%{opacity:0;transform:scale(1.14)}60%{opacity:1;stroke:#fff}100%{opacity:1;transform:none;stroke:#7FCFAE}}
@keyframes cadPing{0%{stroke:#fff}12%,100%{stroke:#7FCFAE}}
@media(prefers-reduced-motion:reduce){
  .cadovl .csweep,.cadovl .cpulse{display:none}
  .cadovl .cdet path{animation:none;opacity:1}
}

/* home-overlays:mech - each hose bore ringed along its lined mouth. */
.mechovl{--sw:2.4}
@media(max-width:900px){.mechovl{--sw:4.6}}
.mechovl .bores g{opacity:0;animation:mechIn .8s cubic-bezier(.2,.8,.2,1) var(--d) forwards}
.mechovl .bin{fill:none;stroke:#EAFFF6;stroke-width:var(--sw)}
.mechovl .bout{fill:none;stroke:#7FCFAE;stroke-width:calc(var(--sw) * .8);stroke-dasharray:5 6;
  transform-box:fill-box;transform-origin:center;animation:mechTurn 9s linear infinite}
.mechovl .bx{fill:none;stroke:#7FCFAE;stroke-width:calc(var(--sw) * .8);stroke-linecap:round}
@keyframes mechIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.mechovl .bores g{transform-box:fill-box;transform-origin:center}
@keyframes mechTurn{to{stroke-dashoffset:-110}}
@media(prefers-reduced-motion:reduce){.mechovl .bores g{animation:none;opacity:1}.mechovl .bout{animation:none}}
/* Hero nodes: their rings and dots scaled about the drawing's centre rather
   than their own, so every ring flew off across the cliff as it faded. */
.nd .ring,.nd .dot,.pts g{transform-box:fill-box;transform-origin:center}
/* Arabic: the bands keep their photographs where they are (the overlays are
   traced to them, and each photograph fades towards the copy), so the copy
   moves instead. Without this the Arabic copy of every band sat on top of its
   photograph and the other half of the band was empty. */
@media(min-width:901px){
  html[dir="rtl"] .side-left .bcopy{margin-inline-start:auto}
  html[dir="rtl"] .side-right .bcopy{margin-inline-start:0}
}
/* home-overlays:end */


/* ===== tgo-doc ===== 404 +854, about +46 ===== */
body.tgo-doc *{margin:0;padding:0;box-sizing:border-box}
body.tgo-doc{
  --ink:#0B2A31; --deep:#12414B; --teal:#1E6C78; --green:#3C9672; --mint:#7FCFAE;
  --muted:#5B7178; --line:#DCE6E6; --line2:#EDF3F3; --paper:#F4F8F8; --white:#fff;
  --grad:linear-gradient(150deg,#1E6C78 0%,#2F8478 55%,#3C9672 100%);
  --f:'Inter','Carlito',system-ui,sans-serif;
  --fa:'IBM Plex Sans Arabic','FreeSans','DejaVu Sans',sans-serif;
  --wrap:1240px;
}
html[dir="rtl"] body.tgo-doc{font-family:var(--fa)}
body.tgo-doc{scroll-behavior:smooth}
body.tgo-doc{font-family:var(--f);color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased}
body.tgo-doc .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:700px){body.tgo-doc .wrap{padding:0 20px}}
body.tgo-doc a{color:inherit;text-decoration:none}
body.tgo-doc img{max-width:100%;display:block}
body.tgo-doc .mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] body.tgo-doc .mono{letter-spacing:0;font-size:.8rem}
/* ---------- utility bar ---------- */
body.tgo-doc .util{background:var(--ink);color:#9FB6BC;font-size:.78rem}
body.tgo-doc .util .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
body.tgo-doc .util .certs{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
body.tgo-doc .util .certs b{color:#CFE2E2;font-weight:600}
body.tgo-doc .util .certs i{font-style:normal;color:var(--mint)}
body.tgo-doc .lang{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--deep);font-family:var(--f);font-size:.9rem;font-weight:700;padding:11px 18px;
  border-radius:6px;cursor:pointer;transition:.2s;white-space:nowrap}
body.tgo-doc .lang:hover{border-color:var(--teal);color:var(--teal);background:#F7FBFA}
body.tgo-doc .lang svg{flex:none;opacity:.75}
/* ---------- track record ---------- */
body.tgo-doc .sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.tgo-doc .sectors span{font-size:.86rem;font-weight:600;color:var(--deep);background:#fff;
  border:1px solid var(--line);padding:8px 15px;border-radius:99px}
body.tgo-doc .recline{margin-top:26px;display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-weight:700;font-size:.95rem}
body.tgo-doc .recline svg{transition:transform .22s}
body.tgo-doc .recline:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-doc .recline svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-doc .recline:hover svg{transform:scaleX(-1) translateX(4px)}
/* ---------- coverage map ----------
   Deliberately schematic. A survey graticule with points plotted on it, not a
   drawn coastline: a wrong outline of Oman would be worse than no map, and a
   plotted grid is what this company's own drawings look like. */
body.tgo-doc .cov{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
@media(max-width:940px){body.tgo-doc .cov{grid-template-columns:1fr;gap:34px}}
body.tgo-doc .covmap{background:#08222A;border-radius:16px;overflow:hidden;direction:ltr;
  box-shadow:0 30px 70px -50px rgba(8,34,42,.9)}
body.tgo-doc .covkey{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:.85rem;color:var(--muted)}
body.tgo-doc .covkey span{display:inline-flex;align-items:center}
body.tgo-doc .covkey i{display:inline-block;width:11px;height:11px;margin-inline-end:9px;flex:0 0 auto}
body.tgo-doc .covkey .k1 i{background:#fff;border:2px solid var(--mint);border-radius:50%}
body.tgo-doc .covkey .k2 i{background:var(--mint)}
body.tgo-doc .covkey .k3 i{border:2px solid #CBDEDB;border-radius:50%}
/* ---------- coverage sheet ----------
   Boundaries from Natural Earth, public domain. Drawn as a survey sheet:
   exact graticule, corner ticks, tracked labels, crosshair over the head office. */
body.tgo-doc .covmap svg{width:100%;height:auto;display:block}
/* on a phone the map is about a third the size; the secondary city names collide,
   so they drop out and the office markers carry the map. The dots stay, so the
   "Project site" key in the legend still points at something visible. */
@media(max-width:640px){body.tgo-doc .covmap .lab-site, body.tgo-doc .covmap .lab-sea{display:none}}
body.tgo-doc .covmap .sea{fill:#08222A}
body.tgo-doc .covmap .ctx path{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-doc .covmap .off path{fill:#17444F;stroke:#2F6E7B;stroke-width:12}
body.tgo-doc .covmap .home path{fill:#23705E;stroke:var(--mint);stroke-width:20}
body.tgo-doc .covmap text{font-family:var(--f)}
html[dir="rtl"] body.tgo-doc .covmap .lab-hq, html[dir="rtl"] body.tgo-doc .covmap .lab-off, html[dir="rtl"] body.tgo-doc .covmap .lab-site, html[dir="rtl"] body.tgo-doc .covmap .lab-sub{
  font-family:var(--fa);letter-spacing:0;text-transform:none}
body.tgo-doc .covmap .lab-hq{font-size:250px;font-weight:800;fill:#fff;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.8;stroke-width:34px;stroke-linejoin:round}
body.tgo-doc .covmap .lab-off{font-size:180px;font-weight:600;fill:#D3E6E4;letter-spacing:20px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.7;stroke-width:26px;stroke-linejoin:round}
body.tgo-doc .covmap .lab-site{font-size:158px;font-weight:600;fill:#A9C6C4;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.75;stroke-width:26px;stroke-linejoin:round}
body.tgo-doc .covmap .lab-sub{font-size:150px;font-weight:500;fill:var(--mint);fill-opacity:.72;letter-spacing:16px;
  text-transform:uppercase}
body.tgo-doc .covmap .insea{fill:#061A20}
body.tgo-doc .covmap .inland{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-doc .covmap .inhome{fill:#23705E;stroke:var(--mint);stroke-width:16}
body.tgo-doc .covmap .insframe{fill:none;stroke:var(--mint);stroke-opacity:.30;stroke-width:12}
body.tgo-doc .covmap .lab-sea{font-size:132px;font-weight:500;fill:var(--mint);fill-opacity:.5;
  letter-spacing:12px;text-transform:uppercase}
html[dir="rtl"] body.tgo-doc .covmap .lab-sea{font-family:var(--fa);letter-spacing:0;text-transform:none}
@media(max-width:820px){body.tgo-doc .covmap .lab-sea{font-size:190px}}
body.tgo-doc .covmap .dot-off{fill:var(--mint)}
body.tgo-doc .covmap .dot-site{fill:none;stroke:#A9C6C4;stroke-width:26}
body.tgo-doc .covmap .leader{fill:none;stroke:var(--mint);stroke-opacity:.4;stroke-width:10;stroke-dasharray:34 34}
body.tgo-doc .covmap .hq .halo{fill:var(--mint);fill-opacity:.12}
body.tgo-doc .covmap .hq .ring{fill:none;stroke:var(--mint);stroke-opacity:.8;stroke-width:16}
body.tgo-doc .covmap .hq .core{fill:#fff}
@media(max-width:820px){
  body.tgo-doc .covmap .lab-hq{font-size:330px}
  body.tgo-doc .covmap .lab-off{font-size:250px;letter-spacing:12px}
  body.tgo-doc .covmap .lab-site{font-size:230px;letter-spacing:8px}
  body.tgo-doc .covmap .lab-sub{font-size:210px}
}
/* ---------- what we need to quote ---------- */
body.tgo-doc .askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px}
@media(max-width:760px){body.tgo-doc .askrow{grid-template-columns:1fr}}
body.tgo-doc .ask{background:#fff;border:1px solid var(--line);padding:26px 26px 28px}
body.tgo-doc .ask b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:10px}
html[dir="rtl"] body.tgo-doc .ask b{letter-spacing:0}
body.tgo-doc .ask h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
html[dir="rtl"] body.tgo-doc .ask h3{letter-spacing:0}
body.tgo-doc .ask p{font-size:.93rem;color:var(--muted);line-height:1.55}
body.tgo-doc .askfoot{margin-top:22px;font-size:.95rem;color:var(--muted)}
/* ---------- client logo wall ----------
   default state: flat and quiet, so the wall reads as one object.
   hover: the strip stops and the logo under the cursor comes back to life. */
body.tgo-doc .marq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
body.tgo-doc .marq-track{display:flex;align-items:center;width:max-content;animation:mscroll 40s linear infinite}
body.tgo-doc .lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 32px;position:relative}
body.tgo-doc .lg img, body.tgo-doc .lg svg{max-height:74px;width:auto;max-width:200px;object-fit:contain;
  /* v4.4 (13 Oct 2026): in full colour, as TGO asked, so every client is
     recognisable at a glance (they were grey until hovered) */
  filter:none;opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
body.tgo-doc .lg:hover img, body.tgo-doc .lg:hover svg{filter:none;opacity:1;transform:scale(1.06)}
body.tgo-doc .lg::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.28}
/* Pause on hover is a mouse affordance, so it must be fenced behind a real
   pointer. A touchscreen synthesises :hover on tap and keeps it applied
   until the reader taps elsewhere, so an unfenced rule froze the strip
   wherever a scrolling finger happened to cross it. */
@media(hover:hover){body.tgo-doc .marq:hover .marq-track{animation-play-state:paused}}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] body.tgo-doc .marq-track{animation-name:mscrollR}
@keyframes mscrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* no hover on a touch screen, so show them properly there */
@media(hover:none){body.tgo-doc .lg img, body.tgo-doc .lg svg{filter:none;opacity:1}
  body.tgo-doc .lg:hover img, body.tgo-doc .lg:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){body.tgo-doc .marq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
@media(max-width:700px){body.tgo-doc .marq-track span{font-size:.92rem;padding:0 20px}}
/* ---------- motion ---------- */
body.tgo-doc .hero .art{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,10px,0) scale(1.035)}}
body.tgo-doc .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{r:7;opacity:.9}70%{r:26;opacity:0}100%{r:7;opacity:0}}
body.tgo-doc .ring{animation:ringfade 8s ease-in-out infinite alternate}
@keyframes ringfade{from{opacity:.28}to{opacity:.62}}
body.tgo-doc .fig b{transition:none}
@media(prefers-reduced-motion:reduce){body.tgo-doc .marq-track, body.tgo-doc .hero .art, body.tgo-doc .pulse, body.tgo-doc .ring{animation:none!important}}
/* ---------- header ---------- */
body.tgo-doc header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.tgo-doc nav{display:flex;align-items:center;gap:34px;height:96px}
body.tgo-doc .logo img{width:205px;height:auto}
body.tgo-doc .nav-links{display:flex;gap:26px;margin-inline-start:auto}
/* ---- the Services menu ---------------------------------------------------
   Services used to be a link to an index you then had to scroll. It is now a
   button that opens the six divisions where you already are, with the index
   itself kept as the last entry for anyone who wants the whole page.

   Closed, the panel is visibility:hidden rather than just transparent, so a
   screen reader and the Tab key skip it. The visibility transition is delayed
   on the way out and instant on the way in; the other way round, the panel
   would be unclickable for the length of the fade. */
body.tgo-doc .navitem{position:relative;display:inline-flex;align-items:center}
body.tgo-doc .nav-svc{font:inherit;font-size:.92rem;font-weight:500;color:var(--deep);background:none;
  border:0;margin:0;padding:4px 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px}
body.tgo-doc .nav-svc .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:transform .2s ease}
body.tgo-doc .navitem.open .nav-svc .chev{transform:rotate(180deg)}
body.tgo-doc .nav-svc::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-doc .nav-svc:hover::after, body.tgo-doc .navitem.open .nav-svc::after{transform:scaleX(1)}
body.tgo-doc .navsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;z-index:70;
  min-width:254px;margin:0;padding:8px;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(11,42,49,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
body.tgo-doc .navitem.open>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
body.tgo-doc .navsub li{margin:0}
body.tgo-doc .navsub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;
  color:var(--deep);white-space:nowrap}
body.tgo-doc .navsub a::after{display:none}
body.tgo-doc .navsub a:hover{background:#EDF3F1}
body.tgo-doc .navall{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
body.tgo-doc .navall a{font-size:.84rem;color:var(--muted);font-weight:500}
@media(hover:hover) and (min-width:961px){
  /* a transparent bridge across the gap, or the panel closes on the way to it */
  body.tgo-doc .navitem::after{content:"";position:absolute;inset-inline:-16px;top:100%;height:16px}
  body.tgo-doc .navitem:hover>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  /* Escape, or a second click on Services, has to win against the pointer that
     is still sitting on the button - otherwise the panel refuses to shut until
     the mouse wanders off. .shut lasts until the pointer leaves. */
  body.tgo-doc .navitem.shut:hover>.navsub{opacity:0;visibility:hidden;transform:translateY(-6px);
    pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
}
@media(max-width:960px){
  body.tgo-doc .navitem{display:block;position:static;width:100%}
  body.tgo-doc .nav-svc{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  body.tgo-doc .nav-svc::after{display:none}
  body.tgo-doc .navitem::after{display:none}
  body.tgo-doc .navsub{position:static;min-width:0;display:none;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;transition:none;background:#F1F6F4;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 8px}
  body.tgo-doc .navitem.open>.navsub{display:block}
  body.tgo-doc .navsub a{border-radius:0;font-size:.95rem;padding-block:12px;
    padding-inline-start:40px;padding-inline-end:24px}
  body.tgo-doc .navall{margin-top:0;border-top-color:#DCE6E6}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-doc .navsub, body.tgo-doc .nav-svc .chev{transition:none}
}
body.tgo-doc .nav-links a{font-size:.92rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0}
body.tgo-doc .nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-doc .nav-links a:hover::after{transform:scaleX(1)}
body.tgo-doc .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;transition:.22s;cursor:pointer;
  font-family:inherit}
body.tgo-doc .btn.p{background:var(--grad);color:#fff}
body.tgo-doc .btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.tgo-doc .btn.g{border-color:var(--line);color:var(--deep);background:#fff}
body.tgo-doc .btn.g:hover{border-color:var(--teal);color:var(--teal)}
body.tgo-doc .btn.w{background:#fff;color:var(--deep)}
body.tgo-doc .btn.o{border-color:rgba(255,255,255,.35);color:#fff}
body.tgo-doc .btn.o:hover{background:rgba(255,255,255,.1)}
@media(max-width:960px){body.tgo-doc nav .btn{margin-inline-start:0}}
@media(max-width:640px){body.tgo-doc .logo{flex:0 0 auto}body.tgo-doc .logo img{width:150px}body.tgo-doc nav{height:76px;gap:12px}body.tgo-doc nav .btn{display:none}}
/* ---------- hero ---------- */
body.tgo-doc .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:92px 0 0}
body.tgo-doc .hero .art{position:absolute;inset:0;opacity:.5}
body.tgo-doc .hero .wrap{position:relative}
body.tgo-doc .eyebrow{color:var(--mint);margin-bottom:22px}
body.tgo-doc .hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;margin-bottom:24px}
html[dir="rtl"] body.tgo-doc .hero h1{letter-spacing:0;line-height:1.3}
body.tgo-doc .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-doc .hero p.lede{font-size:1.12rem;color:#B7CCD1;max-width:56ch;margin-bottom:34px}
body.tgo-doc .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
body.tgo-doc .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14)}
body.tgo-doc .fig{background:var(--ink);padding:30px 26px 34px}
body.tgo-doc .fig b{direction:ltr;unicode-bidi:isolate;display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:8px}
body.tgo-doc .fig span{font-size:.82rem;color:#8FA9B0;display:block;line-height:1.4}
/* In Arabic the caption flows right-to-left while the figure itself is forced LTR,
   so the two used to sit on opposite edges of the cell. Centring the pair keeps the
   number over its own caption. */
html[dir="rtl"] body.tgo-doc .fig{text-align:center}
html[dir="rtl"] body.tgo-doc .fig b{text-align:center}
@media(max-width:900px){body.tgo-doc .figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body.tgo-doc .hero{padding-top:56px}body.tgo-doc .hero-cta{margin-bottom:46px}body.tgo-doc .fig{padding:22px 18px 24px}
  body.tgo-doc .fig b{font-size:1.9rem}}
/* ---------- clients ---------- */
body.tgo-doc .clients{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
body.tgo-doc .clients .lbl{color:var(--muted);margin-bottom:20px;text-align:center}
body.tgo-doc .cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
body.tgo-doc .cl-row span{font-weight:700;font-size:1.02rem;color:#5E787E;letter-spacing:-.01em;
  white-space:nowrap}
@media(max-width:700px){body.tgo-doc .cl-row span{font-size:.9rem}body.tgo-doc .cl-row{gap:12px 22px}}
/* ---------- sections ---------- */
body.tgo-doc section.pad{padding:96px 0}
@media(max-width:760px){body.tgo-doc section.pad{padding:64px 0}}
body.tgo-doc .sec-head{margin-bottom:52px;max-width:62ch}
body.tgo-doc .sec-head .n{color:var(--green);margin-bottom:14px}
body.tgo-doc .sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:16px}
html[dir="rtl"] body.tgo-doc .sec-head h2{letter-spacing:0;line-height:1.35}
body.tgo-doc .sec-head p{color:var(--muted);font-size:1.05rem}
/* divisions */
body.tgo-doc .divs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){body.tgo-doc .divs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.tgo-doc .divs{grid-template-columns:1fr}}
body.tgo-doc .div-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px 32px;
  transition:.25s;position:relative;overflow:hidden;background:#fff}
body.tgo-doc .div-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
body.tgo-doc .div-card:hover{border-color:#BFD6D6;transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
body.tgo-doc .div-card:hover::before{transform:scaleY(1)}
body.tgo-doc .div-card .ic{width:44px;height:44px;border-radius:9px;background:#EAF4F1;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--teal)}
body.tgo-doc .div-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
body.tgo-doc .div-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
body.tgo-doc .div-card .more{font-size:.84rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:6px}
body.tgo-doc .div-card .more svg{transition:transform .25s}
body.tgo-doc .div-card:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] body.tgo-doc .div-card:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] body.tgo-doc .div-card .more svg{transform:scaleX(-1)}
/* EMF band */
body.tgo-doc .band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-doc .band .art2{position:absolute;inset:0;opacity:.28}
body.tgo-doc .band .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
  align-items:center;padding:88px 32px}
@media(max-width:940px){body.tgo-doc .band .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px}}
body.tgo-doc .band .n{color:var(--mint);margin-bottom:14px}
body.tgo-doc .band h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:18px}
html[dir="rtl"] body.tgo-doc .band h2{letter-spacing:0;line-height:1.35}
body.tgo-doc .band p{color:#B7CCD1;margin-bottom:14px}
body.tgo-doc .bignum{direction:ltr;unicode-bidi:isolate;font-size:clamp(4rem,9vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.tgo-doc .bignum + .cap{color:#9FB6BC;font-size:.95rem;margin-top:10px;max-width:34ch}
body.tgo-doc .emf-list{list-style:none;margin-top:26px;display:grid;gap:12px}
body.tgo-doc .emf-list li{display:flex;gap:12px;font-size:.96rem;color:#CFE2E2;align-items:flex-start}
body.tgo-doc .emf-list svg{flex:none;margin-top:5px;color:var(--mint)}
/* project record */
body.tgo-doc .rec{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
body.tgo-doc .rec .rhead, body.tgo-doc .rec .rrow{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .55fr;gap:20px;
  padding:16px 26px;align-items:center}
body.tgo-doc .rec .rhead{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted)}
body.tgo-doc .rec .rrow{border-bottom:1px solid var(--line2);font-size:.95rem}
body.tgo-doc .rec .rrow:last-child{border-bottom:none}
body.tgo-doc .rec .rrow b{font-weight:600}
body.tgo-doc .rec .rrow .yr{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
body.tgo-doc .tag{display:inline-block;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);white-space:nowrap}
@media(max-width:860px){body.tgo-doc .rec .rhead{display:none}
  body.tgo-doc .rec .rrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}}
/* certifications */
body.tgo-doc .certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
@media(max-width:820px){body.tgo-doc .certgrid{grid-template-columns:1fr}}
body.tgo-doc .cert{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;
  display:flex;gap:18px;align-items:flex-start}
body.tgo-doc .cert .badge{width:52px;height:52px;flex:none;border-radius:10px;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  text-align:center;line-height:1.1}
body.tgo-doc .cert b{display:block;font-size:1.02rem;margin-bottom:5px}
body.tgo-doc .cert span{font-size:.88rem;color:var(--muted);display:block}
body.tgo-doc .prequal{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 30px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.tgo-doc .prequal p{font-size:.98rem;color:var(--deep);max-width:60ch}
/* offices */
body.tgo-doc .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){body.tgo-doc .offices{grid-template-columns:repeat(2,1fr)}}
body.tgo-doc .off{border-top:2px solid var(--line);padding-top:18px}
body.tgo-doc .off b{display:block;font-size:1.05rem;margin-bottom:4px}
body.tgo-doc .off span{font-size:.88rem;color:var(--muted)}
body.tgo-doc .off.hq{border-top-color:var(--green)}
/* CTA */
body.tgo-doc .cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-doc .cta .art3{position:absolute;inset:0;opacity:.4}
body.tgo-doc .cta .wrap{position:relative;padding:88px 32px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center}
@media(max-width:940px){body.tgo-doc .cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 24px}}
body.tgo-doc .cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:16px}
html[dir="rtl"] body.tgo-doc .cta h2{letter-spacing:0;line-height:1.35}
body.tgo-doc .cta p{color:#B7CCD1;margin-bottom:26px;max-width:48ch}
body.tgo-doc .formcard{background:#fff;border-radius:14px;padding:28px}
body.tgo-doc .formcard .fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
body.tgo-doc .formcard input, body.tgo-doc .formcard textarea, body.tgo-doc .formcard select{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;font-size:.95rem;margin-bottom:16px;
  background:#fff;color:var(--ink);font-family:inherit}
body.tgo-doc .formcard textarea{min-height:82px;resize:vertical}
body.tgo-doc .formcard input:focus, body.tgo-doc .formcard textarea:focus, body.tgo-doc .formcard select:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,108,120,.12)}
body.tgo-doc .formcard .btn{width:100%;justify-content:center}
/* footer */
body.tgo-doc footer{background:var(--ink);color:#8FA9B0;padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
body.tgo-doc .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){body.tgo-doc .ftop{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){body.tgo-doc .ftop{grid-template-columns:1fr}}
body.tgo-doc .ftop img{width:190px;height:auto;margin-bottom:20px}
body.tgo-doc .ftop h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[dir="rtl"] body.tgo-doc .ftop h4{letter-spacing:0}
body.tgo-doc .ftop a, body.tgo-doc .ftop p{display:block;font-size:.9rem;margin-bottom:9px;color:#8FA9B0}
body.tgo-doc .ftop a:hover{color:var(--mint)}
body.tgo-doc .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:.82rem}
body.tgo-doc .dirltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
body.tgo-doc .reveal{opacity:0;transform:translateY(18px)}
body.tgo-doc .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-doc *{animation:none!important;transition:none!important}
  body.tgo-doc .reveal{opacity:1;transform:none}}
/* division cards carry the same photograph as their service page */
body.tgo-doc .div-card{padding:0;overflow:hidden}
body.tgo-doc .dphoto{aspect-ratio:16/6;overflow:hidden;background:var(--ink)}
body.tgo-doc .dphoto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
body.tgo-doc .div-card:hover .dphoto img{transform:scale(1.05)}
body.tgo-doc .div-card h3, body.tgo-doc .div-card p, body.tgo-doc .div-card .more{margin-inline:30px}
body.tgo-doc .div-card .ic{display:none}
body.tgo-doc .div-card h3{margin-top:26px}
body.tgo-doc .div-card .more{margin-bottom:28px}
/* mobile menu, matching the rest of the site */
body.tgo-doc .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
body.tgo-doc .burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
body.tgo-doc .burger span::before, body.tgo-doc .burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
body.tgo-doc .burger span::before{top:-6px}
body.tgo-doc .burger span::after{top:6px}
@media(max-width:960px){
  body.tgo-doc .nav-links{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 20px 40px -30px rgba(11,42,49,.6)}
  body.tgo-doc .nav-links.open{display:flex}
  body.tgo-doc .nav-links a{padding:14px 24px;font-size:1rem}
  body.tgo-doc .nav-links a::after{display:none}
  body.tgo-doc .burger{display:inline-flex;margin-inline-start:auto}
  body.tgo-doc nav{position:static}
  body.tgo-doc header .wrap{position:relative}
}
/* phones: links in lists need a finger-sized target */
@media(max-width:700px){
  body.tgo-doc .ftop a, body.tgo-doc .ftop p{padding:7px 0;margin-bottom:2px}
  body.tgo-doc .fbot a{display:inline-block;padding:9px 0}
  body.tgo-doc .recline{padding:9px 0}
  body.tgo-doc .sectors span{padding:10px 16px}
  body.tgo-doc .covkey span{padding:5px 0}
}
body.tgo-doc .util .certs .certs-sm{display:none}
@media(max-width:820px){
  body.tgo-doc .util .certs > span{display:none}
  body.tgo-doc .util .certs .certs-sm{display:inline-flex;gap:6px}
}
@media(max-width:760px){
  body.tgo-doc footer a, body.tgo-doc .fbot a, body.tgo-doc .nav-links a, body.tgo-doc .crumb a, body.tgo-doc .fcols a, body.tgo-doc .util a, body.tgo-doc a.lang{
    display:inline-flex;align-items:center;min-height:40px}
  body.tgo-doc .divs a, body.tgo-doc .grid a.card{min-height:44px}
}
body.tgo-doc .pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:26px}
body.tgo-doc .pt>div{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;
  flex-direction:column;gap:13px;align-items:flex-start}
body.tgo-doc .pt img{height:40px;width:auto;max-width:200px;object-fit:contain}
body.tgo-doc .pt b{font-size:1rem;font-weight:700;color:var(--ink)}
body.tgo-doc .pt span{font-size:.93rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] body.tgo-doc .pt>div{align-items:flex-start}
/* a phone-sized finger needs a 40px target; these links are often bare text runs */
@media(max-width:640px){body.tgo-doc a[href^="mailto:"], body.tgo-doc a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}}
/* ---------- hero video ---------- */
body.tgo-doc .hero{min-height:min(88vh,780px);display:flex;flex-direction:column;padding-top:92px;background:var(--ink)}
body.tgo-doc .hero>.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:44px}
body.tgo-doc .hero-cta{margin-bottom:0}
body.tgo-doc .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(11,42,49,.93) 0%,rgba(11,42,49,.74) 28%,
    rgba(11,42,49,.30) 58%,rgba(11,42,49,0) 84%),
    linear-gradient(to bottom,rgba(11,42,49,.46) 0%,rgba(11,42,49,0) 24%,
    rgba(11,42,49,0) 66%,rgba(11,42,49,.92) 100%)}
body.tgo-doc .hero .art{z-index:3;opacity:.22}
body.tgo-doc .hero .wrap{z-index:4}
body.tgo-doc .hero h1 em{background:linear-gradient(118deg,#EAFFF6 0%,var(--mint) 62%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-doc .hero h1{max-width:13ch;text-shadow:0 2px 26px rgba(11,42,49,.5)}
body.tgo-doc .hero p.lede{color:#DCEAEC;max-width:46ch;text-shadow:0 1px 14px rgba(11,42,49,.6)}
body.tgo-doc .eyebrow{text-shadow:0 1px 10px rgba(11,42,49,.65)}
body.tgo-doc .figs{border-top:1px solid rgba(255,255,255,.18)}
body.tgo-doc .fig{background:rgba(11,42,49,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ---------- division bands ---------- */
body.tgo-doc .bands-head{padding-block:58px 26px}
body.tgo-doc #record{padding-block:54px}
body.tgo-doc #record .sec-head{margin-bottom:22px}
body.tgo-doc .dband{position:relative;min-height:min(72vh,580px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
body.tgo-doc .dband:nth-of-type(even){background:#0E333B}
/* Full bleed, but only across its own side. The photographs are square, so a
   strip spanning the whole width would slice the subject - which is exactly
   what took the top off the tower. Instead the image runs edge to edge on the
   side away from the copy and dissolves into the panel, so there is no card,
   no border, and nothing cropped. */
body.tgo-doc .bmedia{position:absolute;top:-40px;bottom:-40px;width:58%;z-index:0;
  -webkit-mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-doc .side-left .bmedia{right:0}
body.tgo-doc .side-right .bmedia{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-doc .bimg, body.tgo-doc .bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The drawn layer must ride exactly the same drift as the photograph under it.
   Animating only the image pulled the traced roads off the real roads by a
   couple of hundred pixels at the far end of the cycle. */
body.tgo-doc .bimg, body.tgo-doc .bovl{animation:bdrift 34s ease-in-out infinite alternate;
  transform-origin:50% 50%;will-change:transform}
@keyframes bdrift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
body.tgo-doc .bovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-doc .dband .wrap{position:relative;z-index:3;width:100%}
body.tgo-doc .bcopy{max-width:31rem}
body.tgo-doc .side-right .bcopy{margin-inline-start:auto}
body.tgo-doc .bcopy .n{color:var(--mint);margin-bottom:14px;letter-spacing:.14em;font-size:.72rem}
body.tgo-doc .bcopy h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff;text-shadow:0 2px 18px rgba(7,28,34,.55)}
body.tgo-doc .bcopy p{color:#C9DDE0;font-size:1.02rem;margin-bottom:18px;text-shadow:0 1px 12px rgba(7,28,34,.55)}
body.tgo-doc .bstat{color:var(--mint);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:26px;padding-inline-start:14px;border-inline-start:2px solid var(--green)}
body.tgo-doc .dband .btn.o{border-color:rgba(255,255,255,.5);color:#fff}
body.tgo-doc .dband .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- drawn overlays ---------- */
body.tgo-doc .trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 6s ease-in-out infinite}
body.tgo-doc .t2{animation-delay:.45s}
body.tgo-doc .t3{animation-delay:.9s}
body.tgo-doc .t4{animation-delay:1.35s}
body.tgo-doc .t5{animation-delay:1.8s}
@keyframes draw{0%{stroke-dashoffset:2400}45%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
body.tgo-doc .nodes circle, body.tgo-doc .verts circle{opacity:0;animation:pop 6s ease-out infinite}
body.tgo-doc .nodes circle:nth-child(2), body.tgo-doc .verts circle:nth-child(2){animation-delay:.5s}
body.tgo-doc .nodes circle:nth-child(3), body.tgo-doc .verts circle:nth-child(3){animation-delay:1s}
body.tgo-doc .nodes circle:nth-child(4){animation-delay:1.5s}
body.tgo-doc .verts circle:nth-child(4){animation-delay:1.5s}
body.tgo-doc .verts circle:nth-child(5){animation-delay:2s}
body.tgo-doc .verts circle:nth-child(6){animation-delay:2.5s}
body.tgo-doc .verts circle:nth-child(7){animation-delay:3s}
body.tgo-doc .verts circle:nth-child(8){animation-delay:3.5s}
@keyframes pop{0%,18%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}
  86%{opacity:1}100%{opacity:0}}
body.tgo-doc .rings circle{opacity:0;transform-origin:305px 230px;animation:ring 4.6s ease-out infinite}
body.tgo-doc .rings circle:nth-child(2){animation-delay:1.15s}
body.tgo-doc .rings circle:nth-child(3){animation-delay:2.3s}
body.tgo-doc .rings circle:nth-child(4){animation-delay:3.45s}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
body.tgo-doc .parcels path{opacity:0;fill-opacity:.3;animation:fill 7s ease-in-out infinite}
body.tgo-doc .parcels path:nth-child(2){animation-delay:.6s}
body.tgo-doc .parcels path:nth-child(3){animation-delay:1.2s}
body.tgo-doc .parcels path:nth-child(4){animation-delay:1.8s}
body.tgo-doc .parcels path:nth-child(5){animation-delay:2.4s}
@keyframes fill{0%,8%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
body.tgo-doc .scan{fill:url(#scanG);opacity:.55;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-doc .uts{fill:url(#uts);animation:sweep 5.5s linear infinite}
body.tgo-doc .stock{fill:url(#stockg);animation:sweep 6.5s linear infinite}
body.tgo-doc .brk g{opacity:0;animation:fill 6.5s ease-in-out infinite}
body.tgo-doc .brk g:nth-child(2){animation-delay:1.1s}
body.tgo-doc .glab text{opacity:0;animation:fill 7s ease-in-out infinite}
body.tgo-doc .glab text:nth-child(2){animation-delay:.9s}
body.tgo-doc .glab text:nth-child(3){animation-delay:1.8s}
body.tgo-doc .contours path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 7s ease-in-out infinite}
body.tgo-doc .contours path:nth-child(2){animation-delay:.4s}
body.tgo-doc .contours path:nth-child(3){animation-delay:.8s}
body.tgo-doc .pts g{stroke:#7FCFAE;stroke-width:2.4;fill:#7FCFAE;opacity:0;animation:pop 7s ease-out infinite}
body.tgo-doc .pts g:nth-child(2){animation-delay:.7s}
body.tgo-doc .pts g:nth-child(3){animation-delay:1.4s}
@media(max-width:900px){
  body.tgo-doc .dband{min-height:auto;padding-block:300px 46px}
  body.tgo-doc .bmedia{width:100%;bottom:auto;height:280px;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-doc .side-right .bmedia{left:0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-doc .bcopy, body.tgo-doc .side-right .bcopy{max-width:none;margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-doc .hero .hv, body.tgo-doc .bvid{display:none}
  body.tgo-doc .bimg, body.tgo-doc .bovl{animation:none}
  body.tgo-doc .trace, body.tgo-doc .nodes circle, body.tgo-doc .verts circle, body.tgo-doc .rings circle, body.tgo-doc .parcels path, body.tgo-doc .scan, body.tgo-doc .uts, body.tgo-doc .stock, body.tgo-doc .brk g, body.tgo-doc .glab text, body.tgo-doc .contours path, body.tgo-doc .pts g{animation:none;opacity:1;stroke-dashoffset:0}
}
body.tgo-doc .vbadge{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:99;
  font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,42,49,.86);color:#9FBCBB;border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;pointer-events:none}
/* ---------- traced routes ---------- */
body.tgo-doc .route, body.tgo-doc .route-under{fill:none;stroke-linecap:round;stroke-dasharray:2800;stroke-dashoffset:2800}
body.tgo-doc .route-under{stroke:rgba(7,28,34,.5);stroke-width:8;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-doc .route{stroke:var(--mint);stroke-width:3.2;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes routedraw{
  0%{stroke-dashoffset:2800;opacity:0} 5%{opacity:.95}
  44%{stroke-dashoffset:0;opacity:.95} 80%{stroke-dashoffset:0;opacity:.95}
  93%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:2800;opacity:0}}
body.tgo-doc .runner{fill:#EAFFF6;opacity:0;animation:run 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0} 5%{opacity:1}
  44%{offset-distance:100%;opacity:1} 52%{opacity:0} 100%{offset-distance:100%;opacity:0}}
@supports not (offset-path: path("M0 0 L1 1")){ body.tgo-doc .runner{display:none} }
body.tgo-doc .hovl .runA{offset-path:path("M -30 655 C 300 625, 620 594, 900 558 C 1080 536, 1300 470, 1640 396")}
body.tgo-doc .hovl .runB{offset-path:path("M 940 -30 C 980 140, 1032 300, 1100 470 C 1162 618, 1232 762, 1310 930")}
body.tgo-doc .hovl .rB, body.tgo-doc .hovl .rBu, body.tgo-doc .hovl .runB{animation-delay:1.9s}
body.tgo-doc .cadovl .runA{offset-path:path("M -20 690 C 280 648, 540 600, 800 556 C 1060 512, 1250 482, 1460 452")}
body.tgo-doc .cadovl .runB{offset-path:path("M 360 -20 C 500 190, 650 390, 800 556 C 950 720, 1110 880, 1250 1030")}
body.tgo-doc .cadovl .rB, body.tgo-doc .cadovl .runB{animation-delay:1.6s}
/* nodes fire as the light reaches them */
body.tgo-doc .nd .ring{fill:none;stroke:var(--mint);stroke-width:2.2;opacity:0;transform-origin:center}
body.tgo-doc .nd .dot{fill:#EAFFF6;opacity:0;transform-origin:center}
body.tgo-doc .nd .ring{animation:ndring 11s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-doc .nd .dot{animation:nddot 11s ease-out infinite}
@keyframes ndring{0%,10%{opacity:0;transform:scale(.2)} 16%{opacity:.85;transform:scale(1)}
  30%{opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)}}
@keyframes nddot{0%,10%{opacity:0;transform:scale(.3)} 16%{opacity:1;transform:scale(1)}
  80%{opacity:1} 93%{opacity:0} 100%{opacity:0}}
body.tgo-doc .n1 .ring, body.tgo-doc .n1 .dot{animation-delay:1.1s}
body.tgo-doc .n2 .ring, body.tgo-doc .n2 .dot{animation-delay:2.4s}
body.tgo-doc .n3 .ring, body.tgo-doc .n3 .dot{animation-delay:3.6s}
body.tgo-doc .n4 .ring, body.tgo-doc .n4 .dot{animation-delay:2.9s}
body.tgo-doc .n5 .ring, body.tgo-doc .n5 .dot{animation-delay:4.4s}
/* the original sheet declares .reveal without a duration, so the class swap
   popped instead of fading */
body.tgo-doc .reveal{transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
body.tgo-doc .reveal.in{opacity:1;transform:none}
/* ---------- hero, now a still ---------- */
body.tgo-doc .hero .hlayer{position:absolute;inset:-6% -4%;z-index:0;will-change:transform}
body.tgo-doc .hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-doc .hovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-doc .hero .art{z-index:3;opacity:.16}
@media(prefers-reduced-motion:reduce){
  body.tgo-doc .route, body.tgo-doc .route-under, body.tgo-doc .runner, body.tgo-doc .nd .ring, body.tgo-doc .nd .dot{animation:none;stroke-dashoffset:0;opacity:1}
  body.tgo-doc .nd .ring{opacity:.5}
}
/* ---------- full-height hero ---------- */
body.tgo-doc .hero{min-height:calc(100vh - 176px);min-height:calc(100svh - 176px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0}
body.tgo-doc .hero>.hero-copy{flex:0 0 auto;display:block;padding-top:clamp(48px,9vh,110px);padding-bottom:0}
body.tgo-doc .hero .hlayer{inset:-2% -2%}
/* the headline carries the weight change the reference site uses: a light
   first line, a heavy second. Our sentence happens to break exactly there. */
body.tgo-doc .hero h1{max-width:none;margin-bottom:26px;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.6vw,4.6rem);text-shadow:0 2px 30px rgba(7,28,34,.55)}
body.tgo-doc .hero h1 .l1{display:block;font-weight:300;color:#fff}
body.tgo-doc .hero h1 .l2{display:block;font-weight:800;
  background:linear-gradient(112deg,#fff 6%,var(--mint) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-doc .hero p.lede{max-width:42ch}
/* the scrim now has to work under text sitting high and left */
body.tgo-doc .hero .scrim{background:
  linear-gradient(to right,rgba(7,28,34,.72) 0%,rgba(7,28,34,.50) 36%,
    rgba(7,28,34,.16) 64%,rgba(7,28,34,.02) 100%),
  linear-gradient(to bottom,rgba(7,28,34,.60) 0%,rgba(7,28,34,.22) 36%,
    rgba(7,28,34,.14) 70%,rgba(7,28,34,.52) 100%)}
body.tgo-doc{--cue-x:26px}
/* physical offsets here on purpose: writing-mode:vertical-rl rotates the inline
   axis, so inset-inline-end resolves to the bottom and the cue lands in the
   wrong corner. The RTL case is handled explicitly below. */
body.tgo-doc .scrollcue{position:absolute;right:var(--cue-x);bottom:30px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);writing-mode:vertical-rl}
html[dir="rtl"] body.tgo-doc .scrollcue{right:auto;left:var(--cue-x)}
body.tgo-doc .scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(to bottom,
  rgba(255,255,255,.1),rgba(255,255,255,.75));position:relative;overflow:hidden}
body.tgo-doc .scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-54px;height:54px;
  background:linear-gradient(to bottom,transparent,var(--mint));
  animation:cue 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}
/* the figures leave the hero and become their own quiet strip */
body.tgo-doc .figstrip{background:var(--ink);border-block:1px solid rgba(255,255,255,.12)}
body.tgo-doc .figstrip .figs{border-top:0}
body.tgo-doc .figstrip .fig{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:820px){
  body.tgo-doc .hero{min-height:auto;padding-top:0}
  body.tgo-doc .hero>.hero-copy{padding-top:56px;padding-bottom:64px}
  body.tgo-doc .scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){body.tgo-doc .scrollcue i::after{animation:none}}
/* ---------- new logo: sized by height, with clearance in the bar ---------- */
/* The old rule set a width and let the height fall where it fell, which put a
   103px image inside a 96px bar. Height-first cannot overflow. */
/* The mark is 2:1, so height drives width: 88px tall reads at 176px wide,
   close to the presence the old lockup had at 205px - but sized by height it
   cannot outgrow its bar the way the old rule did. */
body.tgo-doc .logo img{width:auto;height:88px;display:block}
body.tgo-doc nav{height:124px}
@media(max-width:900px){body.tgo-doc .logo img{height:64px}body.tgo-doc nav{height:96px}}
@media(max-width:640px){body.tgo-doc .logo img{height:52px}body.tgo-doc nav{height:82px}}
body.tgo-doc .ftop img{width:auto;height:88px;display:block;margin-bottom:20px}
@media(max-width:640px){body.tgo-doc .ftop img{height:68px}}
/* ---------- marquee: keep it on the GPU and inside the texture cap -------- */
body.tgo-doc .marq-track{will-change:transform;backface-visibility:hidden}
@keyframes mscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(max-width:820px){
  body.tgo-doc .marq-track{animation-duration:26s}
  body.tgo-doc .lg{height:74px;padding:0 20px}
  body.tgo-doc .lg img, body.tgo-doc .lg svg{max-height:46px;max-width:120px}
}
/* ---------- coverage map: centred, same width as the bands above ---------- */
/* The wrap is left at its default 1240px so this section lines up exactly with
   every other band on the page. One column, centred, map at full wrap width. */
body.tgo-doc #offices{padding-block:clamp(56px,7vw,92px)}
body.tgo-doc #offices .cov{display:block;text-align:center}
body.tgo-doc #offices .cov>*{width:100%}
body.tgo-doc #offices .cov h2{margin-inline:auto;max-width:24ch}
body.tgo-doc #offices .cov p{margin-inline:auto;max-width:70ch}
body.tgo-doc #offices .covkey{justify-content:center;margin-bottom:30px}
body.tgo-doc #offices .covmap{margin-inline:auto}
body.tgo-doc #offices .covmap svg{width:100%;height:auto;display:block}
@media(min-width:1100px){body.tgo-doc #offices .cov{grid-template-columns:none}}
/* ---------- technology partners ---------- */
body.tgo-doc .tp{background:#fff;border-top:1px solid var(--line);padding-block:clamp(50px,7vw,88px)}
body.tgo-doc .tp .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-doc .tp h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-doc .tp .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:34px}
body.tgo-doc .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
body.tgo-doc .tpgrid article{background:#fff;padding:26px 24px 30px}
body.tgo-doc .tpgrid b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
body.tgo-doc .tpgrid .role{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;display:block}
body.tgo-doc .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.6}
/* ---- language switch ------------------------------------------------------
   The site carries Arabic on every string but had no way to reach it except a
   hand-typed ?lang=ar. This is that switch. */
body.tgo-doc .langbtn{font:inherit;font-size:.76rem;font-weight:600;line-height:1;color:#CFE0E3;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
body.tgo-doc .langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
body.tgo-doc .langbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:640px){body.tgo-doc .langbtn{padding:5px 11px;font-size:.72rem}}
/* ---- division bands: the whole panel is the link ------------------------- */
body.tgo-doc .bcopy-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:transform .35s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){body.tgo-doc .bcopy-link:hover{transform:translateY(-3px)}}
body.tgo-doc .bcopy-link:focus-visible{outline:2px solid var(--mint);outline-offset:8px;border-radius:8px}
body.tgo-doc .bgo{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:.95rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.4);padding-bottom:4px}
body.tgo-doc .bgo svg{transition:transform .25s ease}
@media(hover:hover){body.tgo-doc .bcopy-link:hover .bgo{border-color:var(--mint);color:var(--mint)}
  body.tgo-doc .bcopy-link:hover .bgo svg{transform:translateX(5px)}}
html[dir="rtl"] body.tgo-doc .bcopy-link:hover .bgo svg{transform:translateX(-5px)}
/* ---- technology partners: a card grid with room for the mark ------------- */
body.tgo-doc .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;background:none;border:0}
body.tgo-doc .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 30px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){body.tgo-doc .tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
body.tgo-doc .tplogo{height:56px;display:flex;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-doc .tplogo img{max-height:40px;width:auto;object-fit:contain}
body.tgo-doc .tplogo .mark{display:inline-flex;align-items:center;gap:10px}
body.tgo-doc .tplogo .mark i{width:34px;height:34px;border-radius:9px;background:#EAF3F0;color:var(--teal);
  display:grid;place-items:center;font:800 .82rem/1 var(--f);font-style:normal;letter-spacing:.02em}
body.tgo-doc .tplogo .mark b{font:700 1.06rem/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
body.tgo-doc .tpgrid .role{font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
body.tgo-doc .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.65}
body.tgo-doc .tpnote{margin-top:26px;font-size:.9rem;color:var(--muted)}
body.tgo-doc .tplink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.86rem;
  font-weight:600;color:var(--teal);text-decoration:none;align-self:flex-start}
body.tgo-doc .tplink svg{transition:transform .22s ease}
body.tgo-doc .tplink:hover{color:var(--deep)}
body.tgo-doc .tplink:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-doc .tplink:hover svg{transform:translateX(-4px)}
body.tgo-doc .tpgrid article .d{flex:1}
body.tgo-doc .bands-head{padding-block:clamp(52px,7vw,92px) clamp(26px,3vw,40px)}
body.tgo-doc .bands-head .sec-head p{max-width:56ch}
/* ---- technology partners: the marks, the names, and not much else -------- */
body.tgo-doc .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
body.tgo-doc .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
body.tgo-doc .tplogo{height:62px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-doc .tplogo img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
html[dir="rtl"] body.tgo-doc .tplogo img{object-position:right center}
body.tgo-doc .tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
body.tgo-doc .tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}
/* ---- section eyebrows: readable, not decorative ------------------------- */
body.tgo-doc .mono{font-size:.84rem;letter-spacing:.13em}
html[dir="rtl"] body.tgo-doc .mono{letter-spacing:0;font-size:.92rem}
body.tgo-doc .n.mono, body.tgo-doc .sec-head .n, body.tgo-doc .band .n, body.tgo-doc .bcopy .n, body.tgo-doc .tp .n, body.tgo-doc .lsec .n, body.tgo-doc .pj-head .n, body.tgo-doc .sv-head .n, body.tgo-doc .dp-hero .n{
  font-size:.84rem;letter-spacing:.13em}
body.tgo-doc .util .certs{font-size:.8rem}
body.tgo-doc .bstat.mono{font-size:.82rem;letter-spacing:.1em}
body.tgo-doc .svnum{font-size:.82rem;letter-spacing:.2em}
@media(max-width:640px){body.tgo-doc .mono, body.tgo-doc .n.mono{font-size:.78rem}}
body.tgo-doc .tplogo{height:74px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-doc .tplogo img{height:auto;max-width:100%;max-height:56px;object-fit:contain;object-position:left center}
/* ---- technology partners: dark band, white chips ---- */
body.tgo-doc .tp{background:var(--ink);border-block-start:0;position:relative;overflow:hidden}
body.tgo-doc .tp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 100% at 88% 0%,rgba(127,207,174,.12),transparent 60%)}
body.tgo-doc .tp .wrap{position:relative;z-index:2}
body.tgo-doc .tp .n{color:var(--mint)}
body.tgo-doc .tp h2{color:#fff}
body.tgo-doc .tp .lede{display:none}
body.tgo-doc .tpchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:18px;margin-top:clamp(26px,3vw,44px)}
body.tgo-doc .tpchips .tpcell{display:flex;flex-direction:column;align-items:center;gap:14px}
body.tgo-doc .tpchips .chip{background:#fff;border-radius:14px;width:100%;height:96px;
  display:flex;align-items:center;justify-content:center;padding:18px 22px;
  transition:transform .28s ease,box-shadow .28s ease}
@media(hover:hover){body.tgo-doc .tpchips .tpcell:hover .chip{transform:translateY(-3px);
  box-shadow:0 20px 38px -26px rgba(0,0,0,.6)}}
body.tgo-doc .tpchips .tplogo{display:flex;align-items:center;justify-content:center;width:100%;border:0;padding:0;margin:0}
body.tgo-doc .tpchips .tplogo img{height:auto;max-height:56px;max-width:100%;object-fit:contain}
body.tgo-doc .tpchips .tpname{font-size:.86rem;font-weight:600;color:#A8C2C7}
/* The honeypot. A person never sees it; a bot fills it and the enquiry is
   dropped. Kept out of the layout and out of the tab order rather than
   display:none, which some bots check for. */
body.tgo-doc .formcard .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
html[dir="rtl"] body.tgo-doc .formcard .hp{left:auto;right:-9999px}
body.tgo-doc .formcard{position:relative}
/* ---- reveal: threshold by pixel, not by percentage -----------------------
   A percentage threshold never fires for an element taller than the viewport,
   which is exactly what a full division panel is. The observer below uses a
   zero threshold with a bottom margin instead, and unobserves on first hit so
   a revealed section can never fade back out. */
body.tgo-doc .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-doc .reveal{opacity:1;transform:none;transition:none}}
/* the story of the company, as a run of dated milestones */
body.tgo-doc .tl{margin:26px 0 6px;position:relative}
body.tgo-doc .tl::before{content:"";position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--green),var(--mint) 60%,transparent)}
body.tgo-doc .tl .ms{position:relative;padding-inline-start:40px;padding-bottom:24px}
body.tgo-doc .tl .ms:last-child{padding-bottom:0}
body.tgo-doc .tl .dot{position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:3px solid var(--green)}
body.tgo-doc .tl .ms.big .dot{background:var(--green);box-shadow:0 0 0 4px rgba(60,150,114,.16)}
body.tgo-doc .tl .yr2{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--green);
  font-variant-numeric:tabular-nums;margin-bottom:3px}
body.tgo-doc .tl b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.35}
body.tgo-doc .tl span{display:block;font-size:.94rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] body.tgo-doc .tl .yr2{letter-spacing:0}
/* the two statements */
body.tgo-doc .vm2{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:22px 0 8px}
@media(max-width:760px){body.tgo-doc .vm2{grid-template-columns:1fr}}
body.tgo-doc .vm2 > div{background:var(--paper);border:1px solid var(--line);padding:22px 24px}
body.tgo-doc .vm2 b{display:block;font-family:inherit;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:9px}
body.tgo-doc .vm2 p{font-size:1rem;line-height:1.62;color:var(--ink);margin:0}
html[dir="rtl"] body.tgo-doc .vm2 b{letter-spacing:0}
/* proof points pulled from the record */
body.tgo-doc .pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;margin:24px 0 8px}
body.tgo-doc .pf > div{background:var(--white);border:1px solid var(--line);padding:20px 22px}
body.tgo-doc .pf b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--teal);
  line-height:1;margin-bottom:7px;font-variant-numeric:tabular-nums}
body.tgo-doc .pf span{display:block;font-size:.9rem;color:var(--muted);line-height:1.5}
/* the origin story: the sail mark beside the text that explains it */
body.tgo-doc .orig{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px 32px;margin:6px 0 34px}
body.tgo-doc .orig img{width:100%;height:auto;display:block}
body.tgo-doc .orig p{margin:0 0 13px;line-height:1.75}
body.tgo-doc .orig p:last-child{margin-bottom:0}
body.tgo-doc .orig .kick{font-size:1.06rem;color:var(--ink);font-weight:600}
@media(max-width:720px){body.tgo-doc .orig{grid-template-columns:1fr;gap:22px;padding:24px 22px}
  body.tgo-doc .orig img{width:150px}}
/* same as the home page figures: centre the pair in Arabic so the number sits
   over its own caption instead of on the opposite edge of the cell */
html[dir="rtl"] body.tgo-doc .pf > div{text-align:center}
/* the two active technology partners */
body.tgo-doc .pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:22px}
body.tgo-doc .pt > div{background:var(--white);border:1px solid var(--line);padding:24px 26px;
  display:flex;flex-direction:column;gap:12px}
body.tgo-doc .pt img{height:38px;width:auto;object-fit:contain;object-position:left center;filter:none}
html[dir="rtl"] body.tgo-doc .pt img{object-position:right center}
body.tgo-doc .pt b{font-size:.98rem;font-weight:700;color:var(--ink)}
body.tgo-doc .pt span{font-size:.92rem;color:var(--muted);line-height:1.55}
/* page head band : shared by every inner page */
body.tgo-doc .phead{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:64px 0 72px}
body.tgo-doc .phead .art{position:absolute;inset:0;opacity:.45}
body.tgo-doc .phead .wrap{position:relative}
body.tgo-doc .crumb{font-size:.82rem;color:#8FA9B0;margin-bottom:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.tgo-doc .crumb a:hover{color:var(--mint)}
body.tgo-doc .crumb i{font-style:normal;opacity:.5}
body.tgo-doc .phead h1{font-size:clamp(2rem,3.8vw,3.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.08;max-width:20ch}
html[dir="rtl"] body.tgo-doc .phead h1{letter-spacing:0;line-height:1.3}
body.tgo-doc .phead p{color:#B7CCD1;max-width:58ch;margin-top:18px;font-size:1.05rem}
body.tgo-doc section.pad{padding:88px 0}
@media(max-width:760px){body.tgo-doc section.pad{padding:60px 0}}
/* ---------- job register : the full record, grouped by year ----------
   Every entry is a <details>, so the text is real HTML on the page. Search
   engines read it, it prints, and it works with the keyboard. Opening one
   writes its reference into the address bar so a record with no page of its
   own can still be linked to. */
body.tgo-doc .reg{border-top:1px solid var(--line)}
body.tgo-doc .regyear{display:grid;grid-template-columns:120px 1fr;gap:0;border-bottom:1px solid var(--line)}
@media(max-width:760px){body.tgo-doc .regyear{grid-template-columns:1fr}}
body.tgo-doc .regyear > .y{
  padding:26px 0 26px 4px;font-family:var(--f);font-size:2.1rem;font-weight:800;
  letter-spacing:-.03em;color:#9FBCBB;line-height:1;
  direction:ltr;unicode-bidi:isolate;position:sticky;top:112px;align-self:start;
}
html[dir="rtl"] body.tgo-doc .regyear > .y{text-align:right;padding-inline-start:0;padding-inline-end:4px}
@media(max-width:760px){
  body.tgo-doc .regyear > .y{position:static;padding:20px 0 6px;font-size:1.5rem;color:var(--teal)}
}
body.tgo-doc .regyear > .rows{display:flex;flex-direction:column}
body.tgo-doc details.jr{border-bottom:1px solid var(--line2)}
body.tgo-doc details.jr:last-child{border-bottom:none}
body.tgo-doc details.jr > summary{
  list-style:none;cursor:pointer;padding:22px 4px;display:grid;
  grid-template-columns:minmax(0,1fr) 150px 30px;gap:20px;align-items:baseline;
  transition:background .18s;
}
body.tgo-doc details.jr > summary::-webkit-details-marker{display:none}
body.tgo-doc details.jr > summary:hover{background:var(--paper)}
body.tgo-doc details.jr > summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
@media(max-width:760px){body.tgo-doc details.jr > summary{grid-template-columns:minmax(0,1fr) 26px;gap:8px}}
body.tgo-doc .jr .who{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
html[dir="rtl"] body.tgo-doc .jr .who{letter-spacing:0}
body.tgo-doc .jr .what{display:block;margin-top:5px;font-size:.94rem;color:var(--muted);line-height:1.45}
body.tgo-doc .jr .divi{
  font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:99px;
  background:#EAF4F1;color:var(--teal);justify-self:start;white-space:nowrap;align-self:center;
}
html[dir="rtl"] body.tgo-doc .jr .divi{letter-spacing:0}
@media(max-width:760px){body.tgo-doc .jr .divi{grid-column:1;margin-top:10px}}
body.tgo-doc .jr .caret{
  align-self:center;justify-self:end;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--teal);
  transition:transform .22s,border-color .22s;flex:0 0 auto;
}
body.tgo-doc details.jr[open] .caret{transform:rotate(180deg);border-color:var(--green)}
body.tgo-doc .jr .body{padding:0 4px 26px}
body.tgo-doc .jr .facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px;
  padding:20px 22px;background:var(--paper);border-radius:10px;
  border-inline-start:3px solid var(--green);
}
body.tgo-doc .jr .facts div b{
  display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:5px;
}
html[dir="rtl"] body.tgo-doc .jr .facts div b{letter-spacing:0}
body.tgo-doc .jr .facts div span{font-size:.95rem;font-weight:600;color:var(--ink)}
body.tgo-doc .jr .facts div span.n{direction:ltr;unicode-bidi:isolate;display:inline-block}
body.tgo-doc .jr .note{margin-top:14px;font-size:.92rem;color:var(--muted);max-width:70ch}
body.tgo-doc .reghead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
body.tgo-doc .regcount{font-size:.85rem;color:var(--muted)}
/* project cards */
body.tgo-doc .feat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-bottom:44px}
@media(max-width:900px){body.tgo-doc .feat{grid-template-columns:1fr}}
body.tgo-doc .feat .vis{background:var(--ink);position:relative;min-height:320px;overflow:hidden}
body.tgo-doc .feat .vis svg, body.tgo-doc .feat .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-doc .feat .bd{padding:44px}
body.tgo-doc .feat .tag{align-self:start}
@media(max-width:700px){body.tgo-doc .feat .bd{padding:28px}}
body.tgo-doc .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:5px 12px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);margin-bottom:18px}
body.tgo-doc .feat h2{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.16;margin-bottom:14px}
html[dir="rtl"] body.tgo-doc .feat h2{letter-spacing:0;line-height:1.35}
body.tgo-doc .feat p{color:var(--muted);margin-bottom:24px}
body.tgo-doc .meta{display:flex;gap:28px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line2);margin-bottom:26px}
body.tgo-doc .meta div b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:4px}
html[dir="rtl"] body.tgo-doc .meta div b{letter-spacing:0}
body.tgo-doc .meta div span{font-size:.95rem;font-weight:600;color:var(--ink)}
body.tgo-doc .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){body.tgo-doc .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.tgo-doc .grid{grid-template-columns:1fr}}
body.tgo-doc .card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:.25s;
  display:flex;flex-direction:column}
body.tgo-doc .card:hover{border-color:#BFD6D6;transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
body.tgo-doc .card .vis{background:var(--ink);height:172px;position:relative;overflow:hidden}
body.tgo-doc .card .vis svg, body.tgo-doc .card .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
body.tgo-doc .card:hover .vis img{transform:scale(1.05)}
body.tgo-doc .card .bd{padding:24px;display:flex;flex-direction:column;flex:1}
body.tgo-doc .card .tag{margin-bottom:12px;font-size:.68rem;padding:4px 10px;align-self:start}
body.tgo-doc .card h3{font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:8px;letter-spacing:-.01em}
body.tgo-doc .card .cl{font-size:.86rem;color:var(--muted);margin-bottom:16px}
/* the year used to sit on the left of this row; with it gone the count keeps
   its place on the right rather than sliding across */
body.tgo-doc .card .ft{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2);display:flex;
  justify-content:flex-end;align-items:center;font-size:.82rem;color:var(--muted)}
body.tgo-doc .card .ft b{color:var(--teal);font-weight:700;display:inline-flex;align-items:center;gap:6px}
html[dir="rtl"] body.tgo-doc .card .ft b svg{transform:scaleX(-1)}
body.tgo-doc .yr{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* detail page */
body.tgo-doc .dwrap{display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start}
@media(max-width:980px){body.tgo-doc .dwrap{grid-template-columns:1fr;gap:36px}}
body.tgo-doc .prose h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:36px 0 14px;line-height:1.2}
html[dir="rtl"] body.tgo-doc .prose h2{letter-spacing:0}
body.tgo-doc .prose h2:first-child{margin-top:0}
body.tgo-doc .prose p{color:var(--muted);margin-bottom:16px;font-size:1.02rem}
body.tgo-doc .prose ul{list-style:none;margin-bottom:20px}
body.tgo-doc .prose li{font-size:1rem;color:var(--muted);padding-left:26px;position:relative;margin-bottom:10px;line-height:1.6}
html[dir="rtl"] body.tgo-doc .prose li{padding-left:0;padding-right:26px}
body.tgo-doc .prose li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
body.tgo-doc .side{border:1px solid var(--line);border-radius:12px;padding:28px;position:sticky;top:120px;background:var(--paper)}
body.tgo-doc .side h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-weight:700}
html[dir="rtl"] body.tgo-doc .side h4{letter-spacing:0}
body.tgo-doc .side dl{display:grid;gap:16px}
body.tgo-doc .side dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
html[dir="rtl"] body.tgo-doc .side dt{letter-spacing:0}
body.tgo-doc .side dd{font-size:.96rem;font-weight:600;color:var(--ink)}
body.tgo-doc .side .btn{width:100%;justify-content:center;margin-top:24px}
body.tgo-doc .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:36px 0}
@media(max-width:640px){body.tgo-doc .stats{grid-template-columns:1fr}}
body.tgo-doc .stat{background:#fff;padding:26px 24px}
/* Same as the home page figures and the About proof figures: the number is
   forced LTR so it reads correctly, which in an RTL page leaves it on the
   opposite edge from its own caption. Centring the pair keeps them together. */
html[dir="rtl"] body.tgo-doc .stat{text-align:center}
body.tgo-doc .stat b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--teal);line-height:1;
  margin-bottom:6px;direction:ltr;unicode-bidi:isolate}
body.tgo-doc .stat span{font-size:.84rem;color:var(--muted);display:block;line-height:1.4}
body.tgo-doc .pull{background:var(--paper);border-inline-start:3px solid var(--green);border-radius:0 10px 10px 0;
  padding:24px 28px;margin:32px 0}
html[dir="rtl"] body.tgo-doc .pull{border-radius:10px 0 0 10px}
body.tgo-doc .pull p{margin:0;color:var(--deep);font-size:1.05rem;font-weight:500}
/* The old centred call to action is gone: the front page carries the enquiry
   form in its place, and every other page ends with .dp-cta from the footer.
   Leaving these rules in would centre the front page's two-column band. */
body.tgo-doc .sec-head{margin-bottom:36px}
body.tgo-doc .sec-head .n{color:var(--green);margin-bottom:12px}
body.tgo-doc .sec-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.16}
@media(max-width:700px){
  body.tgo-doc .ftop a, body.tgo-doc .ftop p{padding:7px 0;margin-bottom:2px}
  body.tgo-doc .fbot a{display:inline-block;padding:8px 0}
  body.tgo-doc .cinfo .lnk{padding:8px 0}
  body.tgo-doc .crumb a, body.tgo-doc .crumb span{padding:8px 0;display:inline-block}
  body.tgo-doc .person a{padding:7px 0}
  body.tgo-doc .card .ft b, body.tgo-doc .jr .caret{min-height:36px}
  body.tgo-doc .bc .go, body.tgo-doc .srv .go, body.tgo-doc .recline{padding:8px 0}
  body.tgo-doc .side dl div{padding:2px 0}
}
/* service page : photograph band */
body.tgo-doc .phead.photo{padding:78px 0 84px}
body.tgo-doc .phead.photo .bg{position:absolute;inset:0;overflow:hidden}
body.tgo-doc .phead.photo .bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
body.tgo-doc .phead.photo .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,42,49,.94) 0%,rgba(11,42,49,.78) 45%,rgba(11,42,49,.35) 100%)}
html[dir="rtl"] body.tgo-doc .phead.photo .bg::after{
  background:linear-gradient(260deg,rgba(11,42,49,.94) 0%,rgba(11,42,49,.78) 45%,rgba(11,42,49,.35) 100%)}
/* services index : photograph cards */
body.tgo-doc .bigcards{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:34px}
@media(max-width:820px){body.tgo-doc .bigcards{grid-template-columns:1fr}}
body.tgo-doc .bc{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:.25s;
  color:inherit;text-decoration:none;overflow:hidden}
body.tgo-doc .bc:hover{border-color:#BFD6D6;box-shadow:0 24px 52px -34px rgba(11,42,49,.55)}
body.tgo-doc .bc .top{aspect-ratio:16/7;background:var(--ink);position:relative;overflow:hidden}
body.tgo-doc .bc .top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
body.tgo-doc .bc:hover .top img{transform:scale(1.04)}
body.tgo-doc .bc .top .no{position:absolute;inset-inline-start:22px;top:16px;font-size:.72rem;letter-spacing:.2em;
  font-weight:700;color:var(--mint);z-index:2;text-shadow:0 1px 12px rgba(0,0,0,.6)}
html[dir="rtl"] body.tgo-doc .bc .top .no{letter-spacing:0}
body.tgo-doc .bc .bd{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
body.tgo-doc .bc h2{font-size:1.3rem;font-weight:800;letter-spacing:-.024em;line-height:1.2;margin-bottom:9px}
html[dir="rtl"] body.tgo-doc .bc h2{letter-spacing:0;line-height:1.4}
body.tgo-doc .bc p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
body.tgo-doc .bc .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
body.tgo-doc .bc .tags span{font-size:.77rem;font-weight:600;background:var(--paper);border:1px solid var(--line);
  color:var(--deep);padding:6px 11px;border-radius:99px}
body.tgo-doc .bc .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--teal);
  font-weight:700;font-size:.92rem}
body.tgo-doc .bc .go svg{transition:transform .22s}
body.tgo-doc .bc:hover .go svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-doc .bc .go svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-doc .bc:hover .go svg{transform:scaleX(-1) translateX(4px)}
/* services index */
body.tgo-doc .srv{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:34px;
  padding:36px 0;border-top:1px solid var(--line)}
@media(max-width:860px){body.tgo-doc .srv{grid-template-columns:1fr;gap:18px;padding:28px 0}}
body.tgo-doc .srv .no{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--green);
  text-transform:uppercase;display:block;margin-bottom:10px}
html[dir="rtl"] body.tgo-doc .srv .no{letter-spacing:0}
body.tgo-doc .srv h3{font-size:1.42rem;font-weight:800;letter-spacing:-.022em;line-height:1.2;margin-bottom:10px}
html[dir="rtl"] body.tgo-doc .srv h3{letter-spacing:0;line-height:1.4}
body.tgo-doc .srv .sub{color:var(--muted);font-size:.97rem}
body.tgo-doc .srv .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--teal);
  font-weight:700;font-size:.93rem}
body.tgo-doc .srv .go svg{transition:transform .22s}
body.tgo-doc .srv:hover .go svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-doc .srv .go svg{transform:scaleX(-1)}
body.tgo-doc .slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 26px;
  align-content:start}
body.tgo-doc .slist span{position:relative;padding-inline-start:16px;font-size:.94rem;color:var(--ink);line-height:1.5}
body.tgo-doc .slist span::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--mint)}
/* service page */
body.tgo-doc .swrap{display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start}
@media(max-width:1000px){body.tgo-doc .swrap{grid-template-columns:1fr;gap:34px}}
body.tgo-doc .sbody h2{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin:44px 0 14px}
body.tgo-doc .sbody h2:first-child{margin-top:0}
html[dir="rtl"] body.tgo-doc .sbody h2{letter-spacing:0}
body.tgo-doc .sbody p{color:var(--muted);margin-bottom:14px;max-width:66ch}
body.tgo-doc .sbody h3{font-size:1.06rem;font-weight:700;margin:26px 0 8px;letter-spacing:-.01em}
html[dir="rtl"] body.tgo-doc .sbody h3{letter-spacing:0}
body.tgo-doc .cap{display:grid;gap:2px;margin-top:16px}
body.tgo-doc .cap article{border:1px solid var(--line);padding:20px 22px;background:#fff}
body.tgo-doc .cap article b{display:block;font-size:1.02rem;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
html[dir="rtl"] body.tgo-doc .cap article b{letter-spacing:0}
body.tgo-doc .cap article span{font-size:.94rem;color:var(--muted);line-height:1.55}
body.tgo-doc .fam{margin-top:30px}
body.tgo-doc .fam > b{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:12px}
html[dir="rtl"] body.tgo-doc .fam > b{letter-spacing:0}
body.tgo-doc .stds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
body.tgo-doc .stds span{font-size:.82rem;font-weight:700;color:var(--teal);background:#EAF4F1;
  padding:7px 14px;border-radius:99px}
body.tgo-doc .prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;margin-top:18px}
body.tgo-doc .prod article{border:1px solid var(--line);padding:20px 22px;background:#fff}
body.tgo-doc .prod article b{display:block;font-weight:700;margin-bottom:5px}
body.tgo-doc .prod article span{font-size:.92rem;color:var(--muted);line-height:1.5}
body.tgo-doc .askbox{border:1px solid var(--line);background:var(--paper);padding:24px 26px;margin-top:34px;border-radius:10px}
body.tgo-doc .askbox b{display:block;font-weight:700;margin-bottom:10px}
body.tgo-doc .askbox ol{margin:0;padding-inline-start:20px;color:var(--muted)}
body.tgo-doc .askbox li{margin-bottom:6px}
/* about */
body.tgo-doc .people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;margin-top:22px}
body.tgo-doc .person{border:1px solid var(--line);padding:22px;background:#fff}
body.tgo-doc .person .av{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;margin-bottom:14px;
  direction:ltr;unicode-bidi:isolate}
body.tgo-doc .person b{display:block;font-weight:700;font-size:1rem;margin-bottom:3px}
body.tgo-doc .person span{display:block;font-size:.88rem;color:var(--muted);margin-bottom:8px}
body.tgo-doc .person a{font-size:.86rem;color:var(--teal);display:block;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] body.tgo-doc .person a{text-align:right}
body.tgo-doc .vm{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:20px}
@media(max-width:760px){body.tgo-doc .vm{grid-template-columns:1fr}}
body.tgo-doc .vm div{background:var(--ink);color:#fff;padding:34px 30px}
body.tgo-doc .vm div b{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mint);margin-bottom:14px}
html[dir="rtl"] body.tgo-doc .vm div b{letter-spacing:0}
body.tgo-doc .vm div p{font-size:1.08rem;line-height:1.6;color:#DDEAEA;margin:0}
body.tgo-doc .cert{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:2px;margin-top:22px}
body.tgo-doc .certcard{border:1px solid var(--line);background:#fff;padding:26px;display:flex;flex-direction:column}
body.tgo-doc .certcard .badge{width:44px;height:44px;border-radius:10px;background:var(--grad);color:#fff;
  display:grid;place-items:center;margin-bottom:16px}
body.tgo-doc .certcard b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.015em;margin-bottom:4px;
  direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] body.tgo-doc .certcard b{text-align:right}
body.tgo-doc .certcard .ttl{font-size:.94rem;color:var(--muted);margin-bottom:16px;display:block}
body.tgo-doc .certcard dl{margin:auto 0 0;border-top:1px solid var(--line2);padding-top:14px}
body.tgo-doc .certcard dl div{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;margin-bottom:7px}
body.tgo-doc .certcard dt{color:var(--muted)}
body.tgo-doc .certcard dd{margin:0;font-weight:600;direction:ltr;unicode-bidi:isolate}
body.tgo-doc .scope{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
body.tgo-doc .scope span{font-size:.78rem;font-weight:600;background:var(--paper);border:1px solid var(--line);
  color:var(--deep);padding:6px 11px;border-radius:99px}
/* contact */
body.tgo-doc .cwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:940px){body.tgo-doc .cwrap{grid-template-columns:1fr;gap:36px}}
body.tgo-doc .form{display:grid;gap:14px}
body.tgo-doc .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){body.tgo-doc .form .row2{grid-template-columns:1fr}}
body.tgo-doc .field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
html[dir="rtl"] body.tgo-doc .field label{letter-spacing:0}
body.tgo-doc .field input, body.tgo-doc .field select, body.tgo-doc .field textarea{width:100%;font-family:inherit;font-size:.97rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:7px;padding:13px 15px}
body.tgo-doc .field textarea{min-height:130px;resize:vertical}
body.tgo-doc .field input:focus, body.tgo-doc .field select:focus, body.tgo-doc .field textarea:focus{outline:2px solid var(--green);
  outline-offset:-1px;border-color:var(--green)}
body.tgo-doc .cinfo{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px}
body.tgo-doc .flogo{display:inline-block;line-height:0;border-radius:4px}
/* ---- register: client logo, division filter, case-study link ---- */
body.tgo-doc .regfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
body.tgo-doc .chip{font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;
  min-height:40px;transition:background .15s,color .15s,border-color .15s}
body.tgo-doc .chip:hover{border-color:var(--teal);color:var(--teal)}
body.tgo-doc .chip.on{background:var(--deep);border-color:var(--deep);color:#fff}
body.tgo-doc .chip:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
body.tgo-doc .regnone{font-size:.86rem;color:var(--muted);margin-inline-start:6px}
body.tgo-doc .rtext{min-width:0}
body.tgo-doc .jr .who, body.tgo-doc .jr .what{overflow-wrap:anywhere}
body.tgo-doc .casel{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
body.tgo-doc .casel a{font-size:.88rem;font-weight:600;color:var(--teal);text-decoration:none;
  display:inline-block;padding:9px 0;min-height:40px}
body.tgo-doc .casel a:hover{text-decoration:underline}
body.tgo-doc .casel a::after{content:" \2192"}
html[dir="rtl"] body.tgo-doc .casel a::after{content:" \2190"}
body.tgo-doc .backlink{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
body.tgo-doc .backlink a{font-size:.9rem;font-weight:600;color:var(--teal);text-decoration:none;
  display:inline-block;padding:9px 0;min-height:40px}
body.tgo-doc .backlink a:hover{text-decoration:underline}
body.tgo-doc .flogo:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
body.tgo-doc .cinfo .fh{font-size:1.17rem;font-weight:700;line-height:1.6;color:var(--ink);margin:0}
body.tgo-doc .cinfo h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:12px}
html[dir="rtl"] body.tgo-doc .cinfo h4{letter-spacing:0}
body.tgo-doc .cinfo address{font-style:normal;line-height:1.7;margin-bottom:22px}
body.tgo-doc .cinfo .lnk{display:block;color:var(--teal);font-weight:600;margin-bottom:6px;
  direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] body.tgo-doc .cinfo .lnk{text-align:right}
body.tgo-doc .offgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;margin-top:26px}
body.tgo-doc .offgrid div{border:1px solid var(--line);background:#fff;padding:16px 18px}
body.tgo-doc .offgrid b{display:block;font-weight:700;font-size:.95rem}
body.tgo-doc .offgrid span{font-size:.82rem;color:var(--muted)}
/* careers + small pages */
body.tgo-doc .role{border:1px solid var(--line);background:#fff;padding:26px 28px;margin-bottom:2px}
body.tgo-doc .role .rt{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;margin-bottom:8px}
body.tgo-doc .role h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
html[dir="rtl"] body.tgo-doc .role h3{letter-spacing:0}
body.tgo-doc .role .meta2{font-size:.84rem;color:var(--muted)}
body.tgo-doc .empty{border:1px dashed var(--line);background:var(--paper);border-radius:12px;
  padding:44px 34px;text-align:center}
body.tgo-doc .empty b{display:block;font-size:1.15rem;font-weight:700;margin-bottom:8px}
body.tgo-doc .empty p{color:var(--muted);max-width:52ch;margin:0 auto 20px}
body.tgo-doc .mid{min-height:52vh;display:grid;place-items:center;text-align:center;padding:80px 0}
body.tgo-doc .mid .big{font-size:clamp(3.4rem,10vw,6rem);font-weight:800;letter-spacing:-.04em;color:var(--line);
  line-height:1;margin-bottom:18px;direction:ltr;unicode-bidi:isolate}
body.tgo-doc .mid h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.025em;margin-bottom:12px}
html[dir="rtl"] body.tgo-doc .mid h1{letter-spacing:0}
body.tgo-doc .mid p{color:var(--muted);max-width:52ch;margin:0 auto 26px}
body.tgo-doc .midlinks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
body.tgo-doc .legal{max-width:70ch}
body.tgo-doc .legal h2{font-size:1.2rem;font-weight:700;margin:32px 0 10px}
body.tgo-doc .legal p{color:var(--muted);margin-bottom:12px}
body.tgo-doc .tick{display:inline-grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:var(--grad);color:#fff;margin-bottom:24px}
/* The theme sheet styles descendant spans (.pf span, .stat span, .tl span).
   Those selectors also reach the <span class="dirltr"> that wraps a number
   inside its own <b>, which shrank every figure on the page. */
body.tgo-doc b > span, body.tgo-doc b > .dirltr{font-size:inherit;font-weight:inherit;color:inherit;
  line-height:inherit;letter-spacing:inherit;display:inline-block}
/* ---- the new shell wins over the theme sheet where they disagree --------- */
body.tgo-doc nav{height:124px;display:flex;align-items:center;gap:34px}
body.tgo-doc .pad{padding-block:clamp(48px,6.5vw,88px)}
body.tgo-doc .fh{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink);margin-bottom:16px}
body.tgo-doc .sbody .fh{color:var(--muted)}
body.tgo-doc .backlink{margin-top:34px;padding-top:22px;border-block-start:1px solid var(--line)}
body.tgo-doc .backlink a{color:var(--teal);font-weight:600}
body.tgo-doc .side h2.fh{color:var(--muted);font-size:.72rem;letter-spacing:.16em;margin-bottom:18px}
body.tgo-doc .tick{width:58px;height:58px;border-radius:50%;background:#EAF5F0;color:var(--green);
  display:grid;place-items:center;margin:0 auto 22px}
body.tgo-doc .midlinks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
body.tgo-doc .mid{padding-block:clamp(60px,9vw,120px);text-align:center}
body.tgo-doc .mid .big{font:800 clamp(4rem,12vw,8rem)/1 var(--f);color:var(--line);letter-spacing:-.04em;
  margin-bottom:10px}
body.tgo-doc .mid h1{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-doc .mid p{color:var(--muted);max-width:56ch;margin:0 auto 30px;line-height:1.7}
/* ---- about, option C: sticky year ---- */
body.tgo-doc .sticky-tl{display:grid;grid-template-columns:minmax(200px,15rem) 1fr;gap:clamp(24px,4vw,64px);
  margin-top:10px;align-items:start}
body.tgo-doc .syrs{position:sticky;top:150px;height:clamp(96px,11vw,132px);overflow:hidden}
body.tgo-doc .syrbox{position:relative;height:100%}
body.tgo-doc .syr{position:absolute;inset-inline-start:0;inset-block-start:0;
  font:800 clamp(2.6rem,5.4vw,4rem)/1 var(--f);letter-spacing:-.04em;color:var(--green);
  opacity:0;transform:translateY(24px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
body.tgo-doc .syr.on{opacity:1;transform:none}
body.tgo-doc .syr.was{opacity:0;transform:translateY(-24px)}
body.tgo-doc .sitems article{padding:clamp(26px,4vw,56px) 0;border-block-end:1px solid var(--line2)}
body.tgo-doc .sitems article:last-child{border-block-end:0}
body.tgo-doc .sitems b{display:block;font-size:1.22rem;font-weight:700;color:var(--ink);margin-bottom:8px;
  letter-spacing:-.015em;line-height:1.3}
body.tgo-doc .sitems p{color:var(--muted);line-height:1.72;max-width:58ch;margin:0}
@media(max-width:860px){
  /* Same reason as the projects photograph: a sticky item cannot leave its own
     grid row, so on a phone the timeline becomes a plain block and the year
     pins above the list and changes as you read down it. The year used to be
     dropped here and reprinted as a static heading on every entry, which is
     not the idea at all. */
  body.tgo-doc .sticky-tl{display:block}
  /* A fade let a ghost line of the entry above show through under the year.
     A solid bar with a hairline under it reads as a heading and hides nothing
     by accident. */
  body.tgo-doc .syrs{position:sticky;top:99px;height:52px;z-index:4;overflow:hidden;
    background:var(--white);border-block-end:1px solid var(--line2);
    box-shadow:0 -18px 0 0 var(--white)}
  body.tgo-doc .syrbox{height:100%}
  body.tgo-doc .syr{display:block;font-size:1.9rem;inset-block-start:4px}
  body.tgo-doc .sitems article{padding-block:20px}
  body.tgo-doc .sitems article::before{content:none}}
@media(max-width:640px){body.tgo-doc .syrs{top:85px}}
/* ---- about sections, set final ---- */
body.tgo-doc .vproof article{display:grid;grid-template-columns:1fr minmax(180px,15rem);
  gap:clamp(24px,4vw,64px);padding:30px 0;border-block-start:1px solid var(--line);align-items:start}
body.tgo-doc .vlbl{display:block;font-size:.78rem;letter-spacing:.18em;color:var(--green);margin-bottom:12px}
body.tgo-doc .vproof p{color:var(--muted);line-height:1.78;margin:0;max-width:58ch}
body.tgo-doc .vfig b{display:block;font:800 clamp(2.4rem,5vw,3.6rem)/1 var(--f);letter-spacing:-.04em;
  color:var(--teal);margin-bottom:8px;direction:ltr;unicode-bidi:isolate}
body.tgo-doc .vnote{display:block;font-size:.96rem;color:var(--ink);font-weight:600;margin-bottom:4px}
body.tgo-doc .vsub{display:block;font-size:.86rem;color:var(--muted);line-height:1.5}
@media(max-width:820px){body.tgo-doc .vproof article{grid-template-columns:1fr;gap:18px}}
body.tgo-doc .wdraw{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,3.4vw,52px);margin-top:8px}
body.tgo-doc .wmark{width:72px;height:72px;color:var(--green);margin-bottom:20px;display:block}
body.tgo-doc .wmark .d{stroke-dasharray:var(--len,260);stroke-dashoffset:var(--len,260);
  transition:stroke-dashoffset 1.2s cubic-bezier(.3,0,.2,1)}
body.tgo-doc .wmark .dot{fill:none}
body.tgo-doc .reveal.in .wmark .d{stroke-dashoffset:0}
body.tgo-doc .wdraw b{display:block;font-size:1.06rem;color:var(--ink);margin-bottom:8px;line-height:1.35}
body.tgo-doc .wdraw p{color:var(--muted);font-size:.97rem;line-height:1.68;margin:0}
@media(prefers-reduced-motion:reduce){body.tgo-doc .wmark .d{stroke-dashoffset:0;transition:none}}
body.tgo-doc .lled{color:var(--muted);max-width:60ch;line-height:1.7;margin:0 0 30px}
body.tgo-doc .lhub{position:relative;display:grid;gap:22px;justify-items:center}
body.tgo-doc .lhubmid{background:var(--ink);color:#fff;border-radius:16px;padding:22px 34px;text-align:center;
  position:relative;z-index:3}
body.tgo-doc .lhubmid b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
body.tgo-doc .lhubmid span{display:block;font-size:.84rem;color:#A8C2C7;margin-top:4px}
body.tgo-doc .lring{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%}
@media(max-width:1000px){body.tgo-doc .lring{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){body.tgo-doc .lring{grid-template-columns:repeat(2,1fr)}}
body.tgo-doc .lcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;
  text-align:center;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i) * .14s + .3s)}
body.tgo-doc .reveal.in .lcard{opacity:1;transform:none}
body.tgo-doc .lcard::before{content:"";position:absolute;inset-block-start:-22px;inset-inline-start:50%;
  width:1px;height:22px;background:var(--line);transform:scaleY(0);transform-origin:top center;
  transition:transform .45s ease;transition-delay:calc(var(--i) * .14s + .2s)}
body.tgo-doc .reveal.in .lcard::before{transform:scaleY(1)}
body.tgo-doc .lcard b{display:block;font-size:1.02rem;color:var(--ink)}
body.tgo-doc .lcard .lc{display:block;font-size:.86rem;color:var(--muted);margin:3px 0 8px}
body.tgo-doc .lcard .lrole{display:block;font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
/* Arabic sets no ligatures across a tracked-out monospace label, so the
   letters simply drift apart. The Latin styling is dropped in RTL. */
html[dir="rtl"] body.tgo-doc .lcard .lrole{letter-spacing:0;text-transform:none;font-family:inherit;
  font-size:.82rem;font-weight:700}


/* ===== tgo-projects ===== projects +582 ===== */
body.tgo-projects *{margin:0;padding:0;box-sizing:border-box}
body.tgo-projects{
  --ink:#0B2A31; --deep:#12414B; --teal:#1E6C78; --green:#3C9672; --mint:#7FCFAE;
  --muted:#5B7178; --line:#DCE6E6; --line2:#EDF3F3; --paper:#F4F8F8; --white:#fff;
  --grad:linear-gradient(150deg,#1E6C78 0%,#2F8478 55%,#3C9672 100%);
  --f:'Inter','Carlito',system-ui,sans-serif;
  --fa:'IBM Plex Sans Arabic','FreeSans','DejaVu Sans',sans-serif;
  --wrap:1240px;
}
html[dir="rtl"] body.tgo-projects{font-family:var(--fa)}
body.tgo-projects{scroll-behavior:smooth}
body.tgo-projects{font-family:var(--f);color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased}
body.tgo-projects .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:700px){body.tgo-projects .wrap{padding:0 20px}}
body.tgo-projects a{color:inherit;text-decoration:none}
body.tgo-projects img{max-width:100%;display:block}
body.tgo-projects .mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] body.tgo-projects .mono{letter-spacing:0;font-size:.8rem}
/* ---------- utility bar ---------- */
body.tgo-projects .util{background:var(--ink);color:#9FB6BC;font-size:.78rem}
body.tgo-projects .util .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
body.tgo-projects .util .certs{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
body.tgo-projects .util .certs b{color:#CFE2E2;font-weight:600}
body.tgo-projects .util .certs i{font-style:normal;color:var(--mint)}
body.tgo-projects .lang{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--deep);font-family:var(--f);font-size:.9rem;font-weight:700;padding:11px 18px;
  border-radius:6px;cursor:pointer;transition:.2s;white-space:nowrap}
body.tgo-projects .lang:hover{border-color:var(--teal);color:var(--teal);background:#F7FBFA}
body.tgo-projects .lang svg{flex:none;opacity:.75}
/* ---------- track record ---------- */
body.tgo-projects .sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.tgo-projects .sectors span{font-size:.86rem;font-weight:600;color:var(--deep);background:#fff;
  border:1px solid var(--line);padding:8px 15px;border-radius:99px}
body.tgo-projects .recline{margin-top:26px;display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-weight:700;font-size:.95rem}
body.tgo-projects .recline svg{transition:transform .22s}
body.tgo-projects .recline:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-projects .recline svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-projects .recline:hover svg{transform:scaleX(-1) translateX(4px)}
/* ---------- coverage map ----------
   Deliberately schematic. A survey graticule with points plotted on it, not a
   drawn coastline: a wrong outline of Oman would be worse than no map, and a
   plotted grid is what this company's own drawings look like. */
body.tgo-projects .cov{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
@media(max-width:940px){body.tgo-projects .cov{grid-template-columns:1fr;gap:34px}}
body.tgo-projects .covmap{background:#08222A;border-radius:16px;overflow:hidden;direction:ltr;
  box-shadow:0 30px 70px -50px rgba(8,34,42,.9)}
body.tgo-projects .covkey{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:.85rem;color:var(--muted)}
body.tgo-projects .covkey span{display:inline-flex;align-items:center}
body.tgo-projects .covkey i{display:inline-block;width:11px;height:11px;margin-inline-end:9px;flex:0 0 auto}
body.tgo-projects .covkey .k1 i{background:#fff;border:2px solid var(--mint);border-radius:50%}
body.tgo-projects .covkey .k2 i{background:var(--mint)}
body.tgo-projects .covkey .k3 i{border:2px solid #CBDEDB;border-radius:50%}
/* ---------- coverage sheet ----------
   Boundaries from Natural Earth, public domain. Drawn as a survey sheet:
   exact graticule, corner ticks, tracked labels, crosshair over the head office. */
body.tgo-projects .covmap svg{width:100%;height:auto;display:block}
/* on a phone the map is about a third the size; the secondary city names collide,
   so they drop out and the office markers carry the map. The dots stay, so the
   "Project site" key in the legend still points at something visible. */
@media(max-width:640px){body.tgo-projects .covmap .lab-site, body.tgo-projects .covmap .lab-sea{display:none}}
body.tgo-projects .covmap .sea{fill:#08222A}
body.tgo-projects .covmap .ctx path{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-projects .covmap .off path{fill:#17444F;stroke:#2F6E7B;stroke-width:12}
body.tgo-projects .covmap .home path{fill:#23705E;stroke:var(--mint);stroke-width:20}
body.tgo-projects .covmap text{font-family:var(--f)}
html[dir="rtl"] body.tgo-projects .covmap .lab-hq, html[dir="rtl"] body.tgo-projects .covmap .lab-off, html[dir="rtl"] body.tgo-projects .covmap .lab-site, html[dir="rtl"] body.tgo-projects .covmap .lab-sub{
  font-family:var(--fa);letter-spacing:0;text-transform:none}
body.tgo-projects .covmap .lab-hq{font-size:250px;font-weight:800;fill:#fff;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.8;stroke-width:34px;stroke-linejoin:round}
body.tgo-projects .covmap .lab-off{font-size:180px;font-weight:600;fill:#D3E6E4;letter-spacing:20px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.7;stroke-width:26px;stroke-linejoin:round}
body.tgo-projects .covmap .lab-site{font-size:158px;font-weight:600;fill:#A9C6C4;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.75;stroke-width:26px;stroke-linejoin:round}
body.tgo-projects .covmap .lab-sub{font-size:150px;font-weight:500;fill:var(--mint);fill-opacity:.72;letter-spacing:16px;
  text-transform:uppercase}
body.tgo-projects .covmap .insea{fill:#061A20}
body.tgo-projects .covmap .inland{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-projects .covmap .inhome{fill:#23705E;stroke:var(--mint);stroke-width:16}
body.tgo-projects .covmap .insframe{fill:none;stroke:var(--mint);stroke-opacity:.30;stroke-width:12}
body.tgo-projects .covmap .lab-sea{font-size:132px;font-weight:500;fill:var(--mint);fill-opacity:.5;
  letter-spacing:12px;text-transform:uppercase}
html[dir="rtl"] body.tgo-projects .covmap .lab-sea{font-family:var(--fa);letter-spacing:0;text-transform:none}
@media(max-width:820px){body.tgo-projects .covmap .lab-sea{font-size:190px}}
body.tgo-projects .covmap .dot-off{fill:var(--mint)}
body.tgo-projects .covmap .dot-site{fill:none;stroke:#A9C6C4;stroke-width:26}
body.tgo-projects .covmap .leader{fill:none;stroke:var(--mint);stroke-opacity:.4;stroke-width:10;stroke-dasharray:34 34}
body.tgo-projects .covmap .hq .halo{fill:var(--mint);fill-opacity:.12}
body.tgo-projects .covmap .hq .ring{fill:none;stroke:var(--mint);stroke-opacity:.8;stroke-width:16}
body.tgo-projects .covmap .hq .core{fill:#fff}
@media(max-width:820px){
  body.tgo-projects .covmap .lab-hq{font-size:330px}
  body.tgo-projects .covmap .lab-off{font-size:250px;letter-spacing:12px}
  body.tgo-projects .covmap .lab-site{font-size:230px;letter-spacing:8px}
  body.tgo-projects .covmap .lab-sub{font-size:210px}
}
/* ---------- what we need to quote ---------- */
body.tgo-projects .askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px}
@media(max-width:760px){body.tgo-projects .askrow{grid-template-columns:1fr}}
body.tgo-projects .ask{background:#fff;border:1px solid var(--line);padding:26px 26px 28px}
body.tgo-projects .ask b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:10px}
html[dir="rtl"] body.tgo-projects .ask b{letter-spacing:0}
body.tgo-projects .ask h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
html[dir="rtl"] body.tgo-projects .ask h3{letter-spacing:0}
body.tgo-projects .ask p{font-size:.93rem;color:var(--muted);line-height:1.55}
body.tgo-projects .askfoot{margin-top:22px;font-size:.95rem;color:var(--muted)}
/* ---------- client logo wall ----------
   default state: flat and quiet, so the wall reads as one object.
   hover: the strip stops and the logo under the cursor comes back to life. */
body.tgo-projects .marq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
body.tgo-projects .marq-track{display:flex;align-items:center;width:max-content;animation:mscroll 40s linear infinite}
body.tgo-projects .lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 32px;position:relative}
body.tgo-projects .lg img, body.tgo-projects .lg svg{max-height:74px;width:auto;max-width:200px;object-fit:contain;
  /* v4.4 (13 Oct 2026): in full colour, as TGO asked, so every client is
     recognisable at a glance (they were grey until hovered) */
  filter:none;opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
body.tgo-projects .lg:hover img, body.tgo-projects .lg:hover svg{filter:none;opacity:1;transform:scale(1.06)}
body.tgo-projects .lg::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.28}
/* Pause on hover is a mouse affordance, so it must be fenced behind a real
   pointer. A touchscreen synthesises :hover on tap and keeps it applied
   until the reader taps elsewhere, so an unfenced rule froze the strip
   wherever a scrolling finger happened to cross it. */
@media(hover:hover){body.tgo-projects .marq:hover .marq-track{animation-play-state:paused}}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] body.tgo-projects .marq-track{animation-name:mscrollR}
@keyframes mscrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* no hover on a touch screen, so show them properly there */
@media(hover:none){body.tgo-projects .lg img, body.tgo-projects .lg svg{filter:none;opacity:1}
  body.tgo-projects .lg:hover img, body.tgo-projects .lg:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){body.tgo-projects .marq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
@media(max-width:700px){body.tgo-projects .marq-track span{font-size:.92rem;padding:0 20px}}
/* ---------- motion ---------- */
body.tgo-projects .hero .art{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,10px,0) scale(1.035)}}
body.tgo-projects .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{r:7;opacity:.9}70%{r:26;opacity:0}100%{r:7;opacity:0}}
body.tgo-projects .ring{animation:ringfade 8s ease-in-out infinite alternate}
@keyframes ringfade{from{opacity:.28}to{opacity:.62}}
body.tgo-projects .fig b{transition:none}
@media(prefers-reduced-motion:reduce){body.tgo-projects .marq-track, body.tgo-projects .hero .art, body.tgo-projects .pulse, body.tgo-projects .ring{animation:none!important}}
/* ---------- header ---------- */
body.tgo-projects header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.tgo-projects nav{display:flex;align-items:center;gap:34px;height:96px}
body.tgo-projects .logo img{width:205px;height:auto}
body.tgo-projects .nav-links{display:flex;gap:26px;margin-inline-start:auto}
/* ---- the Services menu ---------------------------------------------------
   Services used to be a link to an index you then had to scroll. It is now a
   button that opens the six divisions where you already are, with the index
   itself kept as the last entry for anyone who wants the whole page.

   Closed, the panel is visibility:hidden rather than just transparent, so a
   screen reader and the Tab key skip it. The visibility transition is delayed
   on the way out and instant on the way in; the other way round, the panel
   would be unclickable for the length of the fade. */
body.tgo-projects .navitem{position:relative;display:inline-flex;align-items:center}
body.tgo-projects .nav-svc{font:inherit;font-size:.92rem;font-weight:500;color:var(--deep);background:none;
  border:0;margin:0;padding:4px 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px}
body.tgo-projects .nav-svc .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:transform .2s ease}
body.tgo-projects .navitem.open .nav-svc .chev{transform:rotate(180deg)}
body.tgo-projects .nav-svc::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-projects .nav-svc:hover::after, body.tgo-projects .navitem.open .nav-svc::after{transform:scaleX(1)}
body.tgo-projects .navsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;z-index:70;
  min-width:254px;margin:0;padding:8px;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(11,42,49,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
body.tgo-projects .navitem.open>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
body.tgo-projects .navsub li{margin:0}
body.tgo-projects .navsub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;
  color:var(--deep);white-space:nowrap}
body.tgo-projects .navsub a::after{display:none}
body.tgo-projects .navsub a:hover{background:#EDF3F1}
body.tgo-projects .navall{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
body.tgo-projects .navall a{font-size:.84rem;color:var(--muted);font-weight:500}
@media(hover:hover) and (min-width:961px){
  /* a transparent bridge across the gap, or the panel closes on the way to it */
  body.tgo-projects .navitem::after{content:"";position:absolute;inset-inline:-16px;top:100%;height:16px}
  body.tgo-projects .navitem:hover>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  /* Escape, or a second click on Services, has to win against the pointer that
     is still sitting on the button - otherwise the panel refuses to shut until
     the mouse wanders off. .shut lasts until the pointer leaves. */
  body.tgo-projects .navitem.shut:hover>.navsub{opacity:0;visibility:hidden;transform:translateY(-6px);
    pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
}
@media(max-width:960px){
  body.tgo-projects .navitem{display:block;position:static;width:100%}
  body.tgo-projects .nav-svc{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  body.tgo-projects .nav-svc::after{display:none}
  body.tgo-projects .navitem::after{display:none}
  body.tgo-projects .navsub{position:static;min-width:0;display:none;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;transition:none;background:#F1F6F4;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 8px}
  body.tgo-projects .navitem.open>.navsub{display:block}
  body.tgo-projects .navsub a{border-radius:0;font-size:.95rem;padding-block:12px;
    padding-inline-start:40px;padding-inline-end:24px}
  body.tgo-projects .navall{margin-top:0;border-top-color:#DCE6E6}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-projects .navsub, body.tgo-projects .nav-svc .chev{transition:none}
}
body.tgo-projects .nav-links a{font-size:.92rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0}
body.tgo-projects .nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-projects .nav-links a:hover::after{transform:scaleX(1)}
body.tgo-projects .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;transition:.22s;cursor:pointer;
  font-family:inherit}
body.tgo-projects .btn.p{background:var(--grad);color:#fff}
body.tgo-projects .btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.tgo-projects .btn.g{border-color:var(--line);color:var(--deep);background:#fff}
body.tgo-projects .btn.g:hover{border-color:var(--teal);color:var(--teal)}
body.tgo-projects .btn.w{background:#fff;color:var(--deep)}
body.tgo-projects .btn.o{border-color:rgba(255,255,255,.35);color:#fff}
body.tgo-projects .btn.o:hover{background:rgba(255,255,255,.1)}
@media(max-width:960px){body.tgo-projects nav .btn{margin-inline-start:0}}
@media(max-width:640px){body.tgo-projects .logo{flex:0 0 auto}body.tgo-projects .logo img{width:150px}body.tgo-projects nav{height:76px;gap:12px}body.tgo-projects nav .btn{display:none}}
/* ---------- hero ---------- */
body.tgo-projects .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:92px 0 0}
body.tgo-projects .hero .art{position:absolute;inset:0;opacity:.5}
body.tgo-projects .hero .wrap{position:relative}
body.tgo-projects .eyebrow{color:var(--mint);margin-bottom:22px}
body.tgo-projects .hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;margin-bottom:24px}
html[dir="rtl"] body.tgo-projects .hero h1{letter-spacing:0;line-height:1.3}
body.tgo-projects .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-projects .hero p.lede{font-size:1.12rem;color:#B7CCD1;max-width:56ch;margin-bottom:34px}
body.tgo-projects .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
body.tgo-projects .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14)}
body.tgo-projects .fig{background:var(--ink);padding:30px 26px 34px}
body.tgo-projects .fig b{direction:ltr;unicode-bidi:isolate;display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:8px}
body.tgo-projects .fig span{font-size:.82rem;color:#8FA9B0;display:block;line-height:1.4}
/* In Arabic the caption flows right-to-left while the figure itself is forced LTR,
   so the two used to sit on opposite edges of the cell. Centring the pair keeps the
   number over its own caption. */
html[dir="rtl"] body.tgo-projects .fig{text-align:center}
html[dir="rtl"] body.tgo-projects .fig b{text-align:center}
@media(max-width:900px){body.tgo-projects .figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body.tgo-projects .hero{padding-top:56px}body.tgo-projects .hero-cta{margin-bottom:46px}body.tgo-projects .fig{padding:22px 18px 24px}
  body.tgo-projects .fig b{font-size:1.9rem}}
/* ---------- clients ---------- */
body.tgo-projects .clients{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
body.tgo-projects .clients .lbl{color:var(--muted);margin-bottom:20px;text-align:center}
body.tgo-projects .cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
body.tgo-projects .cl-row span{font-weight:700;font-size:1.02rem;color:#5E787E;letter-spacing:-.01em;
  white-space:nowrap}
@media(max-width:700px){body.tgo-projects .cl-row span{font-size:.9rem}body.tgo-projects .cl-row{gap:12px 22px}}
/* ---------- sections ---------- */
body.tgo-projects section.pad{padding:96px 0}
@media(max-width:760px){body.tgo-projects section.pad{padding:64px 0}}
body.tgo-projects .sec-head{margin-bottom:52px;max-width:62ch}
body.tgo-projects .sec-head .n{color:var(--green);margin-bottom:14px}
body.tgo-projects .sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:16px}
html[dir="rtl"] body.tgo-projects .sec-head h2{letter-spacing:0;line-height:1.35}
body.tgo-projects .sec-head p{color:var(--muted);font-size:1.05rem}
/* divisions */
body.tgo-projects .divs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){body.tgo-projects .divs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.tgo-projects .divs{grid-template-columns:1fr}}
body.tgo-projects .div-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px 32px;
  transition:.25s;position:relative;overflow:hidden;background:#fff}
body.tgo-projects .div-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
body.tgo-projects .div-card:hover{border-color:#BFD6D6;transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
body.tgo-projects .div-card:hover::before{transform:scaleY(1)}
body.tgo-projects .div-card .ic{width:44px;height:44px;border-radius:9px;background:#EAF4F1;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--teal)}
body.tgo-projects .div-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
body.tgo-projects .div-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
body.tgo-projects .div-card .more{font-size:.84rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:6px}
body.tgo-projects .div-card .more svg{transition:transform .25s}
body.tgo-projects .div-card:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] body.tgo-projects .div-card:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] body.tgo-projects .div-card .more svg{transform:scaleX(-1)}
/* EMF band */
body.tgo-projects .band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-projects .band .art2{position:absolute;inset:0;opacity:.28}
body.tgo-projects .band .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
  align-items:center;padding:88px 32px}
@media(max-width:940px){body.tgo-projects .band .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px}}
body.tgo-projects .band .n{color:var(--mint);margin-bottom:14px}
body.tgo-projects .band h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:18px}
html[dir="rtl"] body.tgo-projects .band h2{letter-spacing:0;line-height:1.35}
body.tgo-projects .band p{color:#B7CCD1;margin-bottom:14px}
body.tgo-projects .bignum{direction:ltr;unicode-bidi:isolate;font-size:clamp(4rem,9vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.tgo-projects .bignum + .cap{color:#9FB6BC;font-size:.95rem;margin-top:10px;max-width:34ch}
body.tgo-projects .emf-list{list-style:none;margin-top:26px;display:grid;gap:12px}
body.tgo-projects .emf-list li{display:flex;gap:12px;font-size:.96rem;color:#CFE2E2;align-items:flex-start}
body.tgo-projects .emf-list svg{flex:none;margin-top:5px;color:var(--mint)}
/* project record */
body.tgo-projects .rec{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
body.tgo-projects .rec .rhead, body.tgo-projects .rec .rrow{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .55fr;gap:20px;
  padding:16px 26px;align-items:center}
body.tgo-projects .rec .rhead{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted)}
body.tgo-projects .rec .rrow{border-bottom:1px solid var(--line2);font-size:.95rem}
body.tgo-projects .rec .rrow:last-child{border-bottom:none}
body.tgo-projects .rec .rrow b{font-weight:600}
body.tgo-projects .rec .rrow .yr{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
body.tgo-projects .tag{display:inline-block;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);white-space:nowrap}
@media(max-width:860px){body.tgo-projects .rec .rhead{display:none}
  body.tgo-projects .rec .rrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}}
/* certifications */
body.tgo-projects .certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
@media(max-width:820px){body.tgo-projects .certgrid{grid-template-columns:1fr}}
body.tgo-projects .cert{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;
  display:flex;gap:18px;align-items:flex-start}
body.tgo-projects .cert .badge{width:52px;height:52px;flex:none;border-radius:10px;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  text-align:center;line-height:1.1}
body.tgo-projects .cert b{display:block;font-size:1.02rem;margin-bottom:5px}
body.tgo-projects .cert span{font-size:.88rem;color:var(--muted);display:block}
body.tgo-projects .prequal{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 30px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.tgo-projects .prequal p{font-size:.98rem;color:var(--deep);max-width:60ch}
/* offices */
body.tgo-projects .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){body.tgo-projects .offices{grid-template-columns:repeat(2,1fr)}}
body.tgo-projects .off{border-top:2px solid var(--line);padding-top:18px}
body.tgo-projects .off b{display:block;font-size:1.05rem;margin-bottom:4px}
body.tgo-projects .off span{font-size:.88rem;color:var(--muted)}
body.tgo-projects .off.hq{border-top-color:var(--green)}
/* CTA */
body.tgo-projects .cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-projects .cta .art3{position:absolute;inset:0;opacity:.4}
body.tgo-projects .cta .wrap{position:relative;padding:88px 32px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center}
@media(max-width:940px){body.tgo-projects .cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 24px}}
body.tgo-projects .cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:16px}
html[dir="rtl"] body.tgo-projects .cta h2{letter-spacing:0;line-height:1.35}
body.tgo-projects .cta p{color:#B7CCD1;margin-bottom:26px;max-width:48ch}
body.tgo-projects .formcard{background:#fff;border-radius:14px;padding:28px}
body.tgo-projects .formcard .fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
body.tgo-projects .formcard input, body.tgo-projects .formcard textarea, body.tgo-projects .formcard select{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;font-size:.95rem;margin-bottom:16px;
  background:#fff;color:var(--ink);font-family:inherit}
body.tgo-projects .formcard textarea{min-height:82px;resize:vertical}
body.tgo-projects .formcard input:focus, body.tgo-projects .formcard textarea:focus, body.tgo-projects .formcard select:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,108,120,.12)}
body.tgo-projects .formcard .btn{width:100%;justify-content:center}
/* footer */
body.tgo-projects footer{background:var(--ink);color:#8FA9B0;padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
body.tgo-projects .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){body.tgo-projects .ftop{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){body.tgo-projects .ftop{grid-template-columns:1fr}}
body.tgo-projects .ftop img{width:190px;height:auto;margin-bottom:20px}
body.tgo-projects .ftop h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[dir="rtl"] body.tgo-projects .ftop h4{letter-spacing:0}
body.tgo-projects .ftop a, body.tgo-projects .ftop p{display:block;font-size:.9rem;margin-bottom:9px;color:#8FA9B0}
body.tgo-projects .ftop a:hover{color:var(--mint)}
body.tgo-projects .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:.82rem}
body.tgo-projects .dirltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
body.tgo-projects .reveal{opacity:0;transform:translateY(18px)}
body.tgo-projects .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-projects *{animation:none!important;transition:none!important}
  body.tgo-projects .reveal{opacity:1;transform:none}}
/* division cards carry the same photograph as their service page */
body.tgo-projects .div-card{padding:0;overflow:hidden}
body.tgo-projects .dphoto{aspect-ratio:16/6;overflow:hidden;background:var(--ink)}
body.tgo-projects .dphoto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
body.tgo-projects .div-card:hover .dphoto img{transform:scale(1.05)}
body.tgo-projects .div-card h3, body.tgo-projects .div-card p, body.tgo-projects .div-card .more{margin-inline:30px}
body.tgo-projects .div-card .ic{display:none}
body.tgo-projects .div-card h3{margin-top:26px}
body.tgo-projects .div-card .more{margin-bottom:28px}
/* mobile menu, matching the rest of the site */
body.tgo-projects .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
body.tgo-projects .burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
body.tgo-projects .burger span::before, body.tgo-projects .burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
body.tgo-projects .burger span::before{top:-6px}
body.tgo-projects .burger span::after{top:6px}
@media(max-width:960px){
  body.tgo-projects .nav-links{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 20px 40px -30px rgba(11,42,49,.6)}
  body.tgo-projects .nav-links.open{display:flex}
  body.tgo-projects .nav-links a{padding:14px 24px;font-size:1rem}
  body.tgo-projects .nav-links a::after{display:none}
  body.tgo-projects .burger{display:inline-flex;margin-inline-start:auto}
  body.tgo-projects nav{position:static}
  body.tgo-projects header .wrap{position:relative}
}
/* phones: links in lists need a finger-sized target */
@media(max-width:700px){
  body.tgo-projects .ftop a, body.tgo-projects .ftop p{padding:7px 0;margin-bottom:2px}
  body.tgo-projects .fbot a{display:inline-block;padding:9px 0}
  body.tgo-projects .recline{padding:9px 0}
  body.tgo-projects .sectors span{padding:10px 16px}
  body.tgo-projects .covkey span{padding:5px 0}
}
body.tgo-projects .util .certs .certs-sm{display:none}
@media(max-width:820px){
  body.tgo-projects .util .certs > span{display:none}
  body.tgo-projects .util .certs .certs-sm{display:inline-flex;gap:6px}
}
@media(max-width:760px){
  body.tgo-projects footer a, body.tgo-projects .fbot a, body.tgo-projects .nav-links a, body.tgo-projects .crumb a, body.tgo-projects .fcols a, body.tgo-projects .util a, body.tgo-projects a.lang{
    display:inline-flex;align-items:center;min-height:40px}
  body.tgo-projects .divs a, body.tgo-projects .grid a.card{min-height:44px}
}
body.tgo-projects .pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:26px}
body.tgo-projects .pt>div{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;
  flex-direction:column;gap:13px;align-items:flex-start}
body.tgo-projects .pt img{height:40px;width:auto;max-width:200px;object-fit:contain}
body.tgo-projects .pt b{font-size:1rem;font-weight:700;color:var(--ink)}
body.tgo-projects .pt span{font-size:.93rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] body.tgo-projects .pt>div{align-items:flex-start}
/* a phone-sized finger needs a 40px target; these links are often bare text runs */
@media(max-width:640px){body.tgo-projects a[href^="mailto:"], body.tgo-projects a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}}
/* ---------- hero video ---------- */
body.tgo-projects .hero{min-height:min(88vh,780px);display:flex;flex-direction:column;padding-top:92px;background:var(--ink)}
body.tgo-projects .hero>.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:44px}
body.tgo-projects .hero-cta{margin-bottom:0}
body.tgo-projects .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(11,42,49,.93) 0%,rgba(11,42,49,.74) 28%,
    rgba(11,42,49,.30) 58%,rgba(11,42,49,0) 84%),
    linear-gradient(to bottom,rgba(11,42,49,.46) 0%,rgba(11,42,49,0) 24%,
    rgba(11,42,49,0) 66%,rgba(11,42,49,.92) 100%)}
body.tgo-projects .hero .art{z-index:3;opacity:.22}
body.tgo-projects .hero .wrap{z-index:4}
body.tgo-projects .hero h1 em{background:linear-gradient(118deg,#EAFFF6 0%,var(--mint) 62%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-projects .hero h1{max-width:13ch;text-shadow:0 2px 26px rgba(11,42,49,.5)}
body.tgo-projects .hero p.lede{color:#DCEAEC;max-width:46ch;text-shadow:0 1px 14px rgba(11,42,49,.6)}
body.tgo-projects .eyebrow{text-shadow:0 1px 10px rgba(11,42,49,.65)}
body.tgo-projects .figs{border-top:1px solid rgba(255,255,255,.18)}
body.tgo-projects .fig{background:rgba(11,42,49,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ---------- division bands ---------- */
body.tgo-projects .bands-head{padding-block:58px 26px}
body.tgo-projects #record{padding-block:54px}
body.tgo-projects #record .sec-head{margin-bottom:22px}
body.tgo-projects .dband{position:relative;min-height:min(72vh,580px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
body.tgo-projects .dband:nth-of-type(even){background:#0E333B}
/* Full bleed, but only across its own side. The photographs are square, so a
   strip spanning the whole width would slice the subject - which is exactly
   what took the top off the tower. Instead the image runs edge to edge on the
   side away from the copy and dissolves into the panel, so there is no card,
   no border, and nothing cropped. */
body.tgo-projects .bmedia{position:absolute;top:-40px;bottom:-40px;width:58%;z-index:0;
  -webkit-mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-projects .side-left .bmedia{right:0}
body.tgo-projects .side-right .bmedia{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-projects .bimg, body.tgo-projects .bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The drawn layer must ride exactly the same drift as the photograph under it.
   Animating only the image pulled the traced roads off the real roads by a
   couple of hundred pixels at the far end of the cycle. */
body.tgo-projects .bimg, body.tgo-projects .bovl{animation:bdrift 34s ease-in-out infinite alternate;
  transform-origin:50% 50%;will-change:transform}
@keyframes bdrift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
body.tgo-projects .bovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-projects .dband .wrap{position:relative;z-index:3;width:100%}
body.tgo-projects .bcopy{max-width:31rem}
body.tgo-projects .side-right .bcopy{margin-inline-start:auto}
body.tgo-projects .bcopy .n{color:var(--mint);margin-bottom:14px;letter-spacing:.14em;font-size:.72rem}
body.tgo-projects .bcopy h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff;text-shadow:0 2px 18px rgba(7,28,34,.55)}
body.tgo-projects .bcopy p{color:#C9DDE0;font-size:1.02rem;margin-bottom:18px;text-shadow:0 1px 12px rgba(7,28,34,.55)}
body.tgo-projects .bstat{color:var(--mint);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:26px;padding-inline-start:14px;border-inline-start:2px solid var(--green)}
body.tgo-projects .dband .btn.o{border-color:rgba(255,255,255,.5);color:#fff}
body.tgo-projects .dband .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- drawn overlays ---------- */
body.tgo-projects .trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 6s ease-in-out infinite}
body.tgo-projects .t2{animation-delay:.45s}
body.tgo-projects .t3{animation-delay:.9s}
body.tgo-projects .t4{animation-delay:1.35s}
body.tgo-projects .t5{animation-delay:1.8s}
@keyframes draw{0%{stroke-dashoffset:2400}45%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
body.tgo-projects .nodes circle, body.tgo-projects .verts circle{opacity:0;animation:pop 6s ease-out infinite}
body.tgo-projects .nodes circle:nth-child(2), body.tgo-projects .verts circle:nth-child(2){animation-delay:.5s}
body.tgo-projects .nodes circle:nth-child(3), body.tgo-projects .verts circle:nth-child(3){animation-delay:1s}
body.tgo-projects .nodes circle:nth-child(4){animation-delay:1.5s}
body.tgo-projects .verts circle:nth-child(4){animation-delay:1.5s}
body.tgo-projects .verts circle:nth-child(5){animation-delay:2s}
body.tgo-projects .verts circle:nth-child(6){animation-delay:2.5s}
body.tgo-projects .verts circle:nth-child(7){animation-delay:3s}
body.tgo-projects .verts circle:nth-child(8){animation-delay:3.5s}
@keyframes pop{0%,18%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}
  86%{opacity:1}100%{opacity:0}}
body.tgo-projects .rings circle{opacity:0;transform-origin:305px 230px;animation:ring 4.6s ease-out infinite}
body.tgo-projects .rings circle:nth-child(2){animation-delay:1.15s}
body.tgo-projects .rings circle:nth-child(3){animation-delay:2.3s}
body.tgo-projects .rings circle:nth-child(4){animation-delay:3.45s}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
body.tgo-projects .parcels path{opacity:0;fill-opacity:.3;animation:fill 7s ease-in-out infinite}
body.tgo-projects .parcels path:nth-child(2){animation-delay:.6s}
body.tgo-projects .parcels path:nth-child(3){animation-delay:1.2s}
body.tgo-projects .parcels path:nth-child(4){animation-delay:1.8s}
body.tgo-projects .parcels path:nth-child(5){animation-delay:2.4s}
@keyframes fill{0%,8%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
body.tgo-projects .scan{fill:url(#scanG);opacity:.55;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-projects .uts{fill:url(#uts);animation:sweep 5.5s linear infinite}
body.tgo-projects .stock{fill:url(#stockg);animation:sweep 6.5s linear infinite}
body.tgo-projects .brk g{opacity:0;animation:fill 6.5s ease-in-out infinite}
body.tgo-projects .brk g:nth-child(2){animation-delay:1.1s}
body.tgo-projects .glab text{opacity:0;animation:fill 7s ease-in-out infinite}
body.tgo-projects .glab text:nth-child(2){animation-delay:.9s}
body.tgo-projects .glab text:nth-child(3){animation-delay:1.8s}
body.tgo-projects .contours path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 7s ease-in-out infinite}
body.tgo-projects .contours path:nth-child(2){animation-delay:.4s}
body.tgo-projects .contours path:nth-child(3){animation-delay:.8s}
body.tgo-projects .pts g{stroke:#7FCFAE;stroke-width:2.4;fill:#7FCFAE;opacity:0;animation:pop 7s ease-out infinite}
body.tgo-projects .pts g:nth-child(2){animation-delay:.7s}
body.tgo-projects .pts g:nth-child(3){animation-delay:1.4s}
@media(max-width:900px){
  body.tgo-projects .dband{min-height:auto;padding-block:300px 46px}
  body.tgo-projects .bmedia{width:100%;bottom:auto;height:280px;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-projects .side-right .bmedia{left:0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-projects .bcopy, body.tgo-projects .side-right .bcopy{max-width:none;margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-projects .hero .hv, body.tgo-projects .bvid{display:none}
  body.tgo-projects .bimg, body.tgo-projects .bovl{animation:none}
  body.tgo-projects .trace, body.tgo-projects .nodes circle, body.tgo-projects .verts circle, body.tgo-projects .rings circle, body.tgo-projects .parcels path, body.tgo-projects .scan, body.tgo-projects .uts, body.tgo-projects .stock, body.tgo-projects .brk g, body.tgo-projects .glab text, body.tgo-projects .contours path, body.tgo-projects .pts g{animation:none;opacity:1;stroke-dashoffset:0}
}
body.tgo-projects .vbadge{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:99;
  font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,42,49,.86);color:#9FBCBB;border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;pointer-events:none}
/* ---------- traced routes ---------- */
body.tgo-projects .route, body.tgo-projects .route-under{fill:none;stroke-linecap:round;stroke-dasharray:2800;stroke-dashoffset:2800}
body.tgo-projects .route-under{stroke:rgba(7,28,34,.5);stroke-width:8;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-projects .route{stroke:var(--mint);stroke-width:3.2;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes routedraw{
  0%{stroke-dashoffset:2800;opacity:0} 5%{opacity:.95}
  44%{stroke-dashoffset:0;opacity:.95} 80%{stroke-dashoffset:0;opacity:.95}
  93%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:2800;opacity:0}}
body.tgo-projects .runner{fill:#EAFFF6;opacity:0;animation:run 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0} 5%{opacity:1}
  44%{offset-distance:100%;opacity:1} 52%{opacity:0} 100%{offset-distance:100%;opacity:0}}
@supports not (offset-path: path("M0 0 L1 1")){ body.tgo-projects .runner{display:none} }
body.tgo-projects .hovl .runA{offset-path:path("M -30 655 C 300 625, 620 594, 900 558 C 1080 536, 1300 470, 1640 396")}
body.tgo-projects .hovl .runB{offset-path:path("M 940 -30 C 980 140, 1032 300, 1100 470 C 1162 618, 1232 762, 1310 930")}
body.tgo-projects .hovl .rB, body.tgo-projects .hovl .rBu, body.tgo-projects .hovl .runB{animation-delay:1.9s}
body.tgo-projects .cadovl .runA{offset-path:path("M -20 690 C 280 648, 540 600, 800 556 C 1060 512, 1250 482, 1460 452")}
body.tgo-projects .cadovl .runB{offset-path:path("M 360 -20 C 500 190, 650 390, 800 556 C 950 720, 1110 880, 1250 1030")}
body.tgo-projects .cadovl .rB, body.tgo-projects .cadovl .runB{animation-delay:1.6s}
/* nodes fire as the light reaches them */
body.tgo-projects .nd .ring{fill:none;stroke:var(--mint);stroke-width:2.2;opacity:0;transform-origin:center}
body.tgo-projects .nd .dot{fill:#EAFFF6;opacity:0;transform-origin:center}
body.tgo-projects .nd .ring{animation:ndring 11s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-projects .nd .dot{animation:nddot 11s ease-out infinite}
@keyframes ndring{0%,10%{opacity:0;transform:scale(.2)} 16%{opacity:.85;transform:scale(1)}
  30%{opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)}}
@keyframes nddot{0%,10%{opacity:0;transform:scale(.3)} 16%{opacity:1;transform:scale(1)}
  80%{opacity:1} 93%{opacity:0} 100%{opacity:0}}
body.tgo-projects .n1 .ring, body.tgo-projects .n1 .dot{animation-delay:1.1s}
body.tgo-projects .n2 .ring, body.tgo-projects .n2 .dot{animation-delay:2.4s}
body.tgo-projects .n3 .ring, body.tgo-projects .n3 .dot{animation-delay:3.6s}
body.tgo-projects .n4 .ring, body.tgo-projects .n4 .dot{animation-delay:2.9s}
body.tgo-projects .n5 .ring, body.tgo-projects .n5 .dot{animation-delay:4.4s}
/* the original sheet declares .reveal without a duration, so the class swap
   popped instead of fading */
body.tgo-projects .reveal{transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
body.tgo-projects .reveal.in{opacity:1;transform:none}
/* ---------- hero, now a still ---------- */
body.tgo-projects .hero .hlayer{position:absolute;inset:-6% -4%;z-index:0;will-change:transform}
body.tgo-projects .hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-projects .hovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-projects .hero .art{z-index:3;opacity:.16}
@media(prefers-reduced-motion:reduce){
  body.tgo-projects .route, body.tgo-projects .route-under, body.tgo-projects .runner, body.tgo-projects .nd .ring, body.tgo-projects .nd .dot{animation:none;stroke-dashoffset:0;opacity:1}
  body.tgo-projects .nd .ring{opacity:.5}
}
/* ---------- full-height hero ---------- */
body.tgo-projects .hero{min-height:calc(100vh - 176px);min-height:calc(100svh - 176px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0}
body.tgo-projects .hero>.hero-copy{flex:0 0 auto;display:block;padding-top:clamp(48px,9vh,110px);padding-bottom:0}
body.tgo-projects .hero .hlayer{inset:-2% -2%}
/* the headline carries the weight change the reference site uses: a light
   first line, a heavy second. Our sentence happens to break exactly there. */
body.tgo-projects .hero h1{max-width:none;margin-bottom:26px;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.6vw,4.6rem);text-shadow:0 2px 30px rgba(7,28,34,.55)}
body.tgo-projects .hero h1 .l1{display:block;font-weight:300;color:#fff}
body.tgo-projects .hero h1 .l2{display:block;font-weight:800;
  background:linear-gradient(112deg,#fff 6%,var(--mint) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-projects .hero p.lede{max-width:42ch}
/* the scrim now has to work under text sitting high and left */
body.tgo-projects .hero .scrim{background:
  linear-gradient(to right,rgba(7,28,34,.72) 0%,rgba(7,28,34,.50) 36%,
    rgba(7,28,34,.16) 64%,rgba(7,28,34,.02) 100%),
  linear-gradient(to bottom,rgba(7,28,34,.60) 0%,rgba(7,28,34,.22) 36%,
    rgba(7,28,34,.14) 70%,rgba(7,28,34,.52) 100%)}
body.tgo-projects{--cue-x:26px}
/* physical offsets here on purpose: writing-mode:vertical-rl rotates the inline
   axis, so inset-inline-end resolves to the bottom and the cue lands in the
   wrong corner. The RTL case is handled explicitly below. */
body.tgo-projects .scrollcue{position:absolute;right:var(--cue-x);bottom:30px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);writing-mode:vertical-rl}
html[dir="rtl"] body.tgo-projects .scrollcue{right:auto;left:var(--cue-x)}
body.tgo-projects .scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(to bottom,
  rgba(255,255,255,.1),rgba(255,255,255,.75));position:relative;overflow:hidden}
body.tgo-projects .scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-54px;height:54px;
  background:linear-gradient(to bottom,transparent,var(--mint));
  animation:cue 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}
/* the figures leave the hero and become their own quiet strip */
body.tgo-projects .figstrip{background:var(--ink);border-block:1px solid rgba(255,255,255,.12)}
body.tgo-projects .figstrip .figs{border-top:0}
body.tgo-projects .figstrip .fig{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:820px){
  body.tgo-projects .hero{min-height:auto;padding-top:0}
  body.tgo-projects .hero>.hero-copy{padding-top:56px;padding-bottom:64px}
  body.tgo-projects .scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){body.tgo-projects .scrollcue i::after{animation:none}}
/* ---------- new logo: sized by height, with clearance in the bar ---------- */
/* The old rule set a width and let the height fall where it fell, which put a
   103px image inside a 96px bar. Height-first cannot overflow. */
/* The mark is 2:1, so height drives width: 88px tall reads at 176px wide,
   close to the presence the old lockup had at 205px - but sized by height it
   cannot outgrow its bar the way the old rule did. */
body.tgo-projects .logo img{width:auto;height:88px;display:block}
body.tgo-projects nav{height:124px}
@media(max-width:900px){body.tgo-projects .logo img{height:64px}body.tgo-projects nav{height:96px}}
@media(max-width:640px){body.tgo-projects .logo img{height:52px}body.tgo-projects nav{height:82px}}
body.tgo-projects .ftop img{width:auto;height:88px;display:block;margin-bottom:20px}
@media(max-width:640px){body.tgo-projects .ftop img{height:68px}}
/* ---------- marquee: keep it on the GPU and inside the texture cap -------- */
body.tgo-projects .marq-track{will-change:transform;backface-visibility:hidden}
@keyframes mscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(max-width:820px){
  body.tgo-projects .marq-track{animation-duration:26s}
  body.tgo-projects .lg{height:74px;padding:0 20px}
  body.tgo-projects .lg img, body.tgo-projects .lg svg{max-height:46px;max-width:120px}
}
/* ---------- coverage map: centred, same width as the bands above ---------- */
/* The wrap is left at its default 1240px so this section lines up exactly with
   every other band on the page. One column, centred, map at full wrap width. */
body.tgo-projects #offices{padding-block:clamp(56px,7vw,92px)}
body.tgo-projects #offices .cov{display:block;text-align:center}
body.tgo-projects #offices .cov>*{width:100%}
body.tgo-projects #offices .cov h2{margin-inline:auto;max-width:24ch}
body.tgo-projects #offices .cov p{margin-inline:auto;max-width:70ch}
body.tgo-projects #offices .covkey{justify-content:center;margin-bottom:30px}
body.tgo-projects #offices .covmap{margin-inline:auto}
body.tgo-projects #offices .covmap svg{width:100%;height:auto;display:block}
@media(min-width:1100px){body.tgo-projects #offices .cov{grid-template-columns:none}}
/* ---------- technology partners ---------- */
body.tgo-projects .tp{background:#fff;border-top:1px solid var(--line);padding-block:clamp(50px,7vw,88px)}
body.tgo-projects .tp .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-projects .tp h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-projects .tp .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:34px}
body.tgo-projects .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
body.tgo-projects .tpgrid article{background:#fff;padding:26px 24px 30px}
body.tgo-projects .tpgrid b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
body.tgo-projects .tpgrid .role{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;display:block}
body.tgo-projects .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.6}
/* ---- language switch ------------------------------------------------------
   The site carries Arabic on every string but had no way to reach it except a
   hand-typed ?lang=ar. This is that switch. */
body.tgo-projects .langbtn{font:inherit;font-size:.76rem;font-weight:600;line-height:1;color:#CFE0E3;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
body.tgo-projects .langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
body.tgo-projects .langbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:640px){body.tgo-projects .langbtn{padding:5px 11px;font-size:.72rem}}
/* ---- division bands: the whole panel is the link ------------------------- */
body.tgo-projects .bcopy-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:transform .35s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){body.tgo-projects .bcopy-link:hover{transform:translateY(-3px)}}
body.tgo-projects .bcopy-link:focus-visible{outline:2px solid var(--mint);outline-offset:8px;border-radius:8px}
body.tgo-projects .bgo{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:.95rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.4);padding-bottom:4px}
body.tgo-projects .bgo svg{transition:transform .25s ease}
@media(hover:hover){body.tgo-projects .bcopy-link:hover .bgo{border-color:var(--mint);color:var(--mint)}
  body.tgo-projects .bcopy-link:hover .bgo svg{transform:translateX(5px)}}
html[dir="rtl"] body.tgo-projects .bcopy-link:hover .bgo svg{transform:translateX(-5px)}
/* ---- technology partners: a card grid with room for the mark ------------- */
body.tgo-projects .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;background:none;border:0}
body.tgo-projects .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 30px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){body.tgo-projects .tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
body.tgo-projects .tplogo{height:56px;display:flex;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-projects .tplogo img{max-height:40px;width:auto;object-fit:contain}
body.tgo-projects .tplogo .mark{display:inline-flex;align-items:center;gap:10px}
body.tgo-projects .tplogo .mark i{width:34px;height:34px;border-radius:9px;background:#EAF3F0;color:var(--teal);
  display:grid;place-items:center;font:800 .82rem/1 var(--f);font-style:normal;letter-spacing:.02em}
body.tgo-projects .tplogo .mark b{font:700 1.06rem/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
body.tgo-projects .tpgrid .role{font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
body.tgo-projects .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.65}
body.tgo-projects .tpnote{margin-top:26px;font-size:.9rem;color:var(--muted)}
body.tgo-projects .tplink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.86rem;
  font-weight:600;color:var(--teal);text-decoration:none;align-self:flex-start}
body.tgo-projects .tplink svg{transition:transform .22s ease}
body.tgo-projects .tplink:hover{color:var(--deep)}
body.tgo-projects .tplink:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-projects .tplink:hover svg{transform:translateX(-4px)}
body.tgo-projects .tpgrid article .d{flex:1}
body.tgo-projects .bands-head{padding-block:clamp(52px,7vw,92px) clamp(26px,3vw,40px)}
body.tgo-projects .bands-head .sec-head p{max-width:56ch}
/* ---- technology partners: the marks, the names, and not much else -------- */
body.tgo-projects .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
body.tgo-projects .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
body.tgo-projects .tplogo{height:62px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-projects .tplogo img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
html[dir="rtl"] body.tgo-projects .tplogo img{object-position:right center}
body.tgo-projects .tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
body.tgo-projects .tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}
/* ---- section eyebrows: readable, not decorative ------------------------- */
body.tgo-projects .mono{font-size:.84rem;letter-spacing:.13em}
html[dir="rtl"] body.tgo-projects .mono{letter-spacing:0;font-size:.92rem}
body.tgo-projects .n.mono, body.tgo-projects .sec-head .n, body.tgo-projects .band .n, body.tgo-projects .bcopy .n, body.tgo-projects .tp .n, body.tgo-projects .lsec .n, body.tgo-projects .pj-head .n, body.tgo-projects .sv-head .n, body.tgo-projects .dp-hero .n{
  font-size:.84rem;letter-spacing:.13em}
body.tgo-projects .util .certs{font-size:.8rem}
body.tgo-projects .bstat.mono{font-size:.82rem;letter-spacing:.1em}
body.tgo-projects .svnum{font-size:.82rem;letter-spacing:.2em}
@media(max-width:640px){body.tgo-projects .mono, body.tgo-projects .n.mono{font-size:.78rem}}
/* ---------- projects, light ---------- */
body.tgo-projects{background:#FBFBF9}
body.tgo-projects .pj-head{background:#FBFBF9;padding-block:clamp(56px,8vw,104px) clamp(26px,3vw,44px)}
body.tgo-projects .pj-head .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:18px}
body.tgo-projects .pj-head h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.06;margin-bottom:18px;max-width:20ch;color:var(--ink)}
body.tgo-projects .pj-head h1 em{font-style:normal;font-weight:700}
body.tgo-projects .pj-head p{color:#5C7078;font-size:1.08rem;max-width:56ch;line-height:1.7}
body.tgo-projects .stk{background:#FBFBF9;padding-block:clamp(20px,3vw,44px) clamp(40px,6vw,80px)}
body.tgo-projects .stk .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start}
body.tgo-projects .stkimg{position:sticky;top:130px;aspect-ratio:3/2;border-radius:18px;overflow:hidden;
  background:#EDF1EF}
body.tgo-projects .stkimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s cubic-bezier(.3,0,.3,1),transform 1.3s cubic-bezier(.3,0,.3,1);
  transform:scale(1.05)}
body.tgo-projects .stkimg img.on{opacity:1;transform:scale(1)}
body.tgo-projects .stklist article{padding-block:clamp(34px,5.6vw,72px);border-bottom:1px solid #E4E9E7}
body.tgo-projects .stklist article:last-child{border-bottom:0}
body.tgo-projects .stklist .num{font:600 .74rem/1 ui-monospace,Menlo,monospace;color:var(--green);
  letter-spacing:.18em;margin-bottom:14px;display:block;text-transform:uppercase}
body.tgo-projects .stklist h2{font-size:clamp(1.35rem,2.3vw,1.95rem);font-weight:700;letter-spacing:-.022em;
  margin-bottom:12px;line-height:1.24}
/* the title is the way in - underline grows from the start on hover */
body.tgo-projects .stklist h2 a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--green),var(--green));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s cubic-bezier(.2,.6,.2,1),color .3s ease;padding-bottom:3px}
body.tgo-projects .stklist h2 a:hover{background-size:100% 2px;color:var(--deep)}
body.tgo-projects .stklist p{color:#5C7078;font-size:1.02rem;line-height:1.75;margin-bottom:18px;max-width:46ch}
/* The three facts are the proof the page is built on, so they are set in the
   page's own typeface at reading size, with the label kept small and quiet
   above each one rather than run inline in a monospace grey. */
body.tgo-projects .stklist .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  font-family:inherit;font-size:1rem;color:var(--ink);margin:0 0 22px;
  border-block-start:1px solid #E4E9E7;border-block-end:1px solid #E4E9E7}
body.tgo-projects .stklist .facts span{display:block;padding:14px 18px 15px 0;min-width:0}
body.tgo-projects .stklist .facts span + span{padding-inline-start:18px;border-inline-start:1px solid #EDF1EF}
body.tgo-projects .stklist .facts b{display:block;font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#6C8188;margin-bottom:7px}
@media(max-width:600px){
  body.tgo-projects .stklist .facts{grid-template-columns:1fr}
  body.tgo-projects .stklist .facts span + span{padding-inline-start:0;border-inline-start:0;
    border-block-start:1px solid #EDF1EF}
}
body.tgo-projects .openlink{display:inline-flex;align-items:center;gap:8px;color:var(--deep);font-weight:600;
  text-decoration:none;font-size:.95rem}
body.tgo-projects .openlink svg{transition:transform .25s ease}
body.tgo-projects .openlink:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-projects .openlink:hover svg{transform:translateX(-4px)}
/* ---------- register ---------- */
body.tgo-projects .reg{background:#fff;border-top:1px solid #E4E9E7;padding-block:clamp(50px,7vw,96px)}
body.tgo-projects .reg .sec-head{margin-bottom:26px}
body.tgo-projects .reg .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-projects .reg h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-projects .reg .sec-head p{color:#5C7078;max-width:60ch;line-height:1.7}
body.tgo-projects .regfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
body.tgo-projects .chip{font:inherit;font-size:.8rem;font-weight:600;color:#5C7078;background:#fff;
  border:1px solid #DDE4E2;border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:all .2s ease}
body.tgo-projects .chip:hover{border-color:var(--green);color:var(--deep)}
body.tgo-projects .chip.on{background:var(--deep);border-color:var(--deep);color:#fff}
body.tgo-projects .regnone{align-self:center;color:#7C9098;font-size:.92rem}
body.tgo-projects [hidden]{display:none !important}
body.tgo-projects .regyear{display:grid;grid-template-columns:110px 1fr;gap:clamp(14px,2.4vw,40px);
  align-items:start;padding-block:10px}
body.tgo-projects .regyear .y{position:sticky;top:130px;font-size:1.5rem;font-weight:800;color:var(--green);
  letter-spacing:-.02em;padding:18px 0 6px}
body.tgo-projects .jr{border-top:1px solid #E9EDEB}
body.tgo-projects .jr summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr auto auto 22px;gap:14px;align-items:center;padding:17px 0}
body.tgo-projects .jr summary::-webkit-details-marker{display:none}
body.tgo-projects .jr .who{font-weight:600;color:var(--ink);font-size:1.02rem}
body.tgo-projects .jr .dv{font-size:.82rem;color:#7C9098}
body.tgo-projects .jr .stat{font-size:.74rem;color:var(--deep);background:#E8F1ED;border-radius:999px;padding:5px 11px}
body.tgo-projects .jr .chev{width:10px;height:10px;border-inline-end:2px solid #9BAAAE;border-block-end:2px solid #9BAAAE;
  transform:rotate(45deg);transition:transform .3s ease;justify-self:end;margin-block-end:4px}
body.tgo-projects .jr[open] .chev{transform:rotate(-135deg);margin-block:4px 0}
body.tgo-projects .jr summary:hover .who{color:var(--deep)}
body.tgo-projects .jb{padding:0 0 20px}
body.tgo-projects .jb p{color:#5C7078;line-height:1.7;margin-bottom:14px;max-width:70ch}
body.tgo-projects .facts{display:flex;flex-wrap:wrap;gap:26px}
body.tgo-projects .jb .facts div b{display:block;font-size:1.1rem;color:var(--deep);font-weight:700}
body.tgo-projects .jb .facts div span{font-size:.78rem;color:#7C9098;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){
  body.tgo-projects .stk .grid{grid-template-columns:1fr}
  /* position:relative, not static: the images inside are absolutely positioned
     and a static parent is not their containing block, so on a phone they
     escaped the frame and pushed the page 10px wider than the screen. */
  body.tgo-projects .stkimg{position:relative;margin-bottom:20px}
  body.tgo-projects .regyear{grid-template-columns:1fr;gap:2px}
  body.tgo-projects .regyear .y{position:static;padding-block:14px 2px}
  body.tgo-projects .jr summary{grid-template-columns:1fr 20px;row-gap:5px}
  body.tgo-projects .jr .dv, body.tgo-projects .jr .stat{grid-column:1}
}
@media(prefers-reduced-motion:reduce){body.tgo-projects .stkimg img{transition:none}}
/* ---- photo option C: taller, client named on the picture ---- */
body.tgo-projects .stk{padding-block:clamp(20px,3vw,44px) clamp(40px,6vw,80px)}
body.tgo-projects .stk .grid{grid-template-columns:1.2fr 1fr;gap:clamp(28px,3.6vw,64px)}
body.tgo-projects .stkimg{width:100%;aspect-ratio:4/5;max-height:calc(100vh - 176px);top:150px}
body.tgo-projects .stkcap{position:absolute;inset-inline:0;inset-block-end:0;z-index:3;pointer-events:none;
  padding:64px 26px 24px;color:#fff;
  background:linear-gradient(to top,rgba(11,37,44,.86),rgba(11,37,44,.5) 46%,transparent)}
body.tgo-projects .stkcap .cc{display:block;font-size:1.04rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.3;transition:opacity .45s ease,transform .45s cubic-bezier(.3,0,.3,1)}
body.tgo-projects .stkcap .cp{display:block;margin-top:6px;font:600 .76rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#9FD9C2;
  transition:opacity .45s ease .06s,transform .45s cubic-bezier(.3,0,.3,1) .06s}
body.tgo-projects .stkcap.swap .cc, body.tgo-projects .stkcap.swap .cp{opacity:0;transform:translateY(8px)}
body.tgo-projects .stklist article:first-child{padding-block-start:6px}
@media(max-width:900px){
  /* A sticky element can only travel inside its own containing block, and in a
     one-column grid that block is just its own row - so the photograph scrolled
     away after the first case study and the page looked stuck on the Ministry
     of Housing picture. Making the row a plain block lets it pin over the whole
     list, which is the behaviour the design is for. */
  body.tgo-projects .stk .grid{display:block}
  /* The header is sticky and 97px tall here, 83px on a small phone, so the
     picture parks directly under it. The upward box-shadow paints the page
     colour into the sliver above the picture - without it you see a line of
     the previous case study sliding through the gap. */
  body.tgo-projects .stkimg{position:sticky;top:99px;z-index:3;width:100%;height:36vh;min-height:210px;
    aspect-ratio:auto;max-height:none;margin-bottom:22px;border-radius:14px;
    box-shadow:0 -18px 0 0 #FBFBF9}
  body.tgo-projects .stkcap{padding:40px 16px 13px}
  body.tgo-projects .stkcap .cc{font-size:.95rem}
  body.tgo-projects .stkcap .cp{font-size:.68rem}
  body.tgo-projects .stklist article{padding-block:30px}
}
@media(max-width:640px){body.tgo-projects .stkimg{top:85px;height:34vh}}
@media(prefers-reduced-motion:reduce){body.tgo-projects .stkcap .cc, body.tgo-projects .stkcap .cp{transition:none}}


/* ===== tgo-division ===== service-chemical +640, service-emf +28, service-mechanical +86, service-street +33 ===== */
body.tgo-division *{margin:0;padding:0;box-sizing:border-box}
body.tgo-division{
  --ink:#0B2A31; --deep:#12414B; --teal:#1E6C78; --green:#3C9672; --mint:#7FCFAE;
  --muted:#5B7178; --line:#DCE6E6; --line2:#EDF3F3; --paper:#F4F8F8; --white:#fff;
  --grad:linear-gradient(150deg,#1E6C78 0%,#2F8478 55%,#3C9672 100%);
  --f:'Inter','Carlito',system-ui,sans-serif;
  --fa:'IBM Plex Sans Arabic','FreeSans','DejaVu Sans',sans-serif;
  --wrap:1240px;
}
html[dir="rtl"] body.tgo-division{font-family:var(--fa)}
body.tgo-division{scroll-behavior:smooth}
body.tgo-division{font-family:var(--f);color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased}
body.tgo-division .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:700px){body.tgo-division .wrap{padding:0 20px}}
body.tgo-division a{color:inherit;text-decoration:none}
body.tgo-division img{max-width:100%;display:block}
body.tgo-division .mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] body.tgo-division .mono{letter-spacing:0;font-size:.8rem}
/* ---------- utility bar ---------- */
body.tgo-division .util{background:var(--ink);color:#9FB6BC;font-size:.78rem}
body.tgo-division .util .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
body.tgo-division .util .certs{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
body.tgo-division .util .certs b{color:#CFE2E2;font-weight:600}
body.tgo-division .util .certs i{font-style:normal;color:var(--mint)}
body.tgo-division .lang{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--deep);font-family:var(--f);font-size:.9rem;font-weight:700;padding:11px 18px;
  border-radius:6px;cursor:pointer;transition:.2s;white-space:nowrap}
body.tgo-division .lang:hover{border-color:var(--teal);color:var(--teal);background:#F7FBFA}
body.tgo-division .lang svg{flex:none;opacity:.75}
/* ---------- track record ---------- */
body.tgo-division .sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.tgo-division .sectors span{font-size:.86rem;font-weight:600;color:var(--deep);background:#fff;
  border:1px solid var(--line);padding:8px 15px;border-radius:99px}
body.tgo-division .recline{margin-top:26px;display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-weight:700;font-size:.95rem}
body.tgo-division .recline svg{transition:transform .22s}
body.tgo-division .recline:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-division .recline svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-division .recline:hover svg{transform:scaleX(-1) translateX(4px)}
/* ---------- coverage map ----------
   Deliberately schematic. A survey graticule with points plotted on it, not a
   drawn coastline: a wrong outline of Oman would be worse than no map, and a
   plotted grid is what this company's own drawings look like. */
body.tgo-division .cov{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
@media(max-width:940px){body.tgo-division .cov{grid-template-columns:1fr;gap:34px}}
body.tgo-division .covmap{background:#08222A;border-radius:16px;overflow:hidden;direction:ltr;
  box-shadow:0 30px 70px -50px rgba(8,34,42,.9)}
body.tgo-division .covkey{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:.85rem;color:var(--muted)}
body.tgo-division .covkey span{display:inline-flex;align-items:center}
body.tgo-division .covkey i{display:inline-block;width:11px;height:11px;margin-inline-end:9px;flex:0 0 auto}
body.tgo-division .covkey .k1 i{background:#fff;border:2px solid var(--mint);border-radius:50%}
body.tgo-division .covkey .k2 i{background:var(--mint)}
body.tgo-division .covkey .k3 i{border:2px solid #CBDEDB;border-radius:50%}
/* ---------- coverage sheet ----------
   Boundaries from Natural Earth, public domain. Drawn as a survey sheet:
   exact graticule, corner ticks, tracked labels, crosshair over the head office. */
body.tgo-division .covmap svg{width:100%;height:auto;display:block}
/* on a phone the map is about a third the size; the secondary city names collide,
   so they drop out and the office markers carry the map. The dots stay, so the
   "Project site" key in the legend still points at something visible. */
@media(max-width:640px){body.tgo-division .covmap .lab-site, body.tgo-division .covmap .lab-sea{display:none}}
body.tgo-division .covmap .sea{fill:#08222A}
body.tgo-division .covmap .ctx path{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-division .covmap .off path{fill:#17444F;stroke:#2F6E7B;stroke-width:12}
body.tgo-division .covmap .home path{fill:#23705E;stroke:var(--mint);stroke-width:20}
body.tgo-division .covmap text{font-family:var(--f)}
html[dir="rtl"] body.tgo-division .covmap .lab-hq, html[dir="rtl"] body.tgo-division .covmap .lab-off, html[dir="rtl"] body.tgo-division .covmap .lab-site, html[dir="rtl"] body.tgo-division .covmap .lab-sub{
  font-family:var(--fa);letter-spacing:0;text-transform:none}
body.tgo-division .covmap .lab-hq{font-size:250px;font-weight:800;fill:#fff;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.8;stroke-width:34px;stroke-linejoin:round}
body.tgo-division .covmap .lab-off{font-size:180px;font-weight:600;fill:#D3E6E4;letter-spacing:20px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.7;stroke-width:26px;stroke-linejoin:round}
body.tgo-division .covmap .lab-site{font-size:158px;font-weight:600;fill:#A9C6C4;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.75;stroke-width:26px;stroke-linejoin:round}
body.tgo-division .covmap .lab-sub{font-size:150px;font-weight:500;fill:var(--mint);fill-opacity:.72;letter-spacing:16px;
  text-transform:uppercase}
body.tgo-division .covmap .insea{fill:#061A20}
body.tgo-division .covmap .inland{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-division .covmap .inhome{fill:#23705E;stroke:var(--mint);stroke-width:16}
body.tgo-division .covmap .insframe{fill:none;stroke:var(--mint);stroke-opacity:.30;stroke-width:12}
body.tgo-division .covmap .lab-sea{font-size:132px;font-weight:500;fill:var(--mint);fill-opacity:.5;
  letter-spacing:12px;text-transform:uppercase}
html[dir="rtl"] body.tgo-division .covmap .lab-sea{font-family:var(--fa);letter-spacing:0;text-transform:none}
@media(max-width:820px){body.tgo-division .covmap .lab-sea{font-size:190px}}
body.tgo-division .covmap .dot-off{fill:var(--mint)}
body.tgo-division .covmap .dot-site{fill:none;stroke:#A9C6C4;stroke-width:26}
body.tgo-division .covmap .leader{fill:none;stroke:var(--mint);stroke-opacity:.4;stroke-width:10;stroke-dasharray:34 34}
body.tgo-division .covmap .hq .halo{fill:var(--mint);fill-opacity:.12}
body.tgo-division .covmap .hq .ring{fill:none;stroke:var(--mint);stroke-opacity:.8;stroke-width:16}
body.tgo-division .covmap .hq .core{fill:#fff}
@media(max-width:820px){
  body.tgo-division .covmap .lab-hq{font-size:330px}
  body.tgo-division .covmap .lab-off{font-size:250px;letter-spacing:12px}
  body.tgo-division .covmap .lab-site{font-size:230px;letter-spacing:8px}
  body.tgo-division .covmap .lab-sub{font-size:210px}
}
/* ---------- what we need to quote ---------- */
body.tgo-division .askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px}
@media(max-width:760px){body.tgo-division .askrow{grid-template-columns:1fr}}
body.tgo-division .ask{background:#fff;border:1px solid var(--line);padding:26px 26px 28px}
body.tgo-division .ask b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:10px}
html[dir="rtl"] body.tgo-division .ask b{letter-spacing:0}
body.tgo-division .ask h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
html[dir="rtl"] body.tgo-division .ask h3{letter-spacing:0}
body.tgo-division .ask p{font-size:.93rem;color:var(--muted);line-height:1.55}
body.tgo-division .askfoot{margin-top:22px;font-size:.95rem;color:var(--muted)}
/* ---------- client logo wall ----------
   default state: flat and quiet, so the wall reads as one object.
   hover: the strip stops and the logo under the cursor comes back to life. */
body.tgo-division .marq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
body.tgo-division .marq-track{display:flex;align-items:center;width:max-content;animation:mscroll 40s linear infinite}
body.tgo-division .lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 32px;position:relative}
body.tgo-division .lg img, body.tgo-division .lg svg{max-height:74px;width:auto;max-width:200px;object-fit:contain;
  /* v4.4 (13 Oct 2026): in full colour, as TGO asked, so every client is
     recognisable at a glance (they were grey until hovered) */
  filter:none;opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
body.tgo-division .lg:hover img, body.tgo-division .lg:hover svg{filter:none;opacity:1;transform:scale(1.06)}
body.tgo-division .lg::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.28}
/* Pause on hover is a mouse affordance, so it must be fenced behind a real
   pointer. A touchscreen synthesises :hover on tap and keeps it applied
   until the reader taps elsewhere, so an unfenced rule froze the strip
   wherever a scrolling finger happened to cross it. */
@media(hover:hover){body.tgo-division .marq:hover .marq-track{animation-play-state:paused}}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] body.tgo-division .marq-track{animation-name:mscrollR}
@keyframes mscrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* no hover on a touch screen, so show them properly there */
@media(hover:none){body.tgo-division .lg img, body.tgo-division .lg svg{filter:none;opacity:1}
  body.tgo-division .lg:hover img, body.tgo-division .lg:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){body.tgo-division .marq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
@media(max-width:700px){body.tgo-division .marq-track span{font-size:.92rem;padding:0 20px}}
/* ---------- motion ---------- */
body.tgo-division .hero .art{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,10px,0) scale(1.035)}}
body.tgo-division .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{r:7;opacity:.9}70%{r:26;opacity:0}100%{r:7;opacity:0}}
body.tgo-division .ring{animation:ringfade 8s ease-in-out infinite alternate}
@keyframes ringfade{from{opacity:.28}to{opacity:.62}}
body.tgo-division .fig b{transition:none}
@media(prefers-reduced-motion:reduce){body.tgo-division .marq-track, body.tgo-division .hero .art, body.tgo-division .pulse, body.tgo-division .ring{animation:none!important}}
/* ---------- header ---------- */
body.tgo-division header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.tgo-division nav{display:flex;align-items:center;gap:34px;height:96px}
body.tgo-division .logo img{width:205px;height:auto}
body.tgo-division .nav-links{display:flex;gap:26px;margin-inline-start:auto}
/* ---- the Services menu ---------------------------------------------------
   Services used to be a link to an index you then had to scroll. It is now a
   button that opens the six divisions where you already are, with the index
   itself kept as the last entry for anyone who wants the whole page.

   Closed, the panel is visibility:hidden rather than just transparent, so a
   screen reader and the Tab key skip it. The visibility transition is delayed
   on the way out and instant on the way in; the other way round, the panel
   would be unclickable for the length of the fade. */
body.tgo-division .navitem{position:relative;display:inline-flex;align-items:center}
body.tgo-division .nav-svc{font:inherit;font-size:.92rem;font-weight:500;color:var(--deep);background:none;
  border:0;margin:0;padding:4px 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px}
body.tgo-division .nav-svc .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:transform .2s ease}
body.tgo-division .navitem.open .nav-svc .chev{transform:rotate(180deg)}
body.tgo-division .nav-svc::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-division .nav-svc:hover::after, body.tgo-division .navitem.open .nav-svc::after{transform:scaleX(1)}
body.tgo-division .navsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;z-index:70;
  min-width:254px;margin:0;padding:8px;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(11,42,49,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
body.tgo-division .navitem.open>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
body.tgo-division .navsub li{margin:0}
body.tgo-division .navsub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;
  color:var(--deep);white-space:nowrap}
body.tgo-division .navsub a::after{display:none}
body.tgo-division .navsub a:hover{background:#EDF3F1}
body.tgo-division .navall{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
body.tgo-division .navall a{font-size:.84rem;color:var(--muted);font-weight:500}
@media(hover:hover) and (min-width:961px){
  /* a transparent bridge across the gap, or the panel closes on the way to it */
  body.tgo-division .navitem::after{content:"";position:absolute;inset-inline:-16px;top:100%;height:16px}
  body.tgo-division .navitem:hover>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  /* Escape, or a second click on Services, has to win against the pointer that
     is still sitting on the button - otherwise the panel refuses to shut until
     the mouse wanders off. .shut lasts until the pointer leaves. */
  body.tgo-division .navitem.shut:hover>.navsub{opacity:0;visibility:hidden;transform:translateY(-6px);
    pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
}
@media(max-width:960px){
  body.tgo-division .navitem{display:block;position:static;width:100%}
  body.tgo-division .nav-svc{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  body.tgo-division .nav-svc::after{display:none}
  body.tgo-division .navitem::after{display:none}
  body.tgo-division .navsub{position:static;min-width:0;display:none;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;transition:none;background:#F1F6F4;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 8px}
  body.tgo-division .navitem.open>.navsub{display:block}
  body.tgo-division .navsub a{border-radius:0;font-size:.95rem;padding-block:12px;
    padding-inline-start:40px;padding-inline-end:24px}
  body.tgo-division .navall{margin-top:0;border-top-color:#DCE6E6}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .navsub, body.tgo-division .nav-svc .chev{transition:none}
}
body.tgo-division .nav-links a{font-size:.92rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0}
body.tgo-division .nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-division .nav-links a:hover::after{transform:scaleX(1)}
body.tgo-division .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;transition:.22s;cursor:pointer;
  font-family:inherit}
body.tgo-division .btn.p{background:var(--grad);color:#fff}
body.tgo-division .btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.tgo-division .btn.g{border-color:var(--line);color:var(--deep);background:#fff}
body.tgo-division .btn.g:hover{border-color:var(--teal);color:var(--teal)}
body.tgo-division .btn.w{background:#fff;color:var(--deep)}
body.tgo-division .btn.o{border-color:rgba(255,255,255,.35);color:#fff}
body.tgo-division .btn.o:hover{background:rgba(255,255,255,.1)}
@media(max-width:960px){body.tgo-division nav .btn{margin-inline-start:0}}
@media(max-width:640px){body.tgo-division .logo{flex:0 0 auto}body.tgo-division .logo img{width:150px}body.tgo-division nav{height:76px;gap:12px}body.tgo-division nav .btn{display:none}}
/* ---------- hero ---------- */
body.tgo-division .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:92px 0 0}
body.tgo-division .hero .art{position:absolute;inset:0;opacity:.5}
body.tgo-division .hero .wrap{position:relative}
body.tgo-division .eyebrow{color:var(--mint);margin-bottom:22px}
body.tgo-division .hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;margin-bottom:24px}
html[dir="rtl"] body.tgo-division .hero h1{letter-spacing:0;line-height:1.3}
body.tgo-division .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-division .hero p.lede{font-size:1.12rem;color:#B7CCD1;max-width:56ch;margin-bottom:34px}
body.tgo-division .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
body.tgo-division .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14)}
body.tgo-division .fig{background:var(--ink);padding:30px 26px 34px}
body.tgo-division .fig b{direction:ltr;unicode-bidi:isolate;display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:8px}
body.tgo-division .fig span{font-size:.82rem;color:#8FA9B0;display:block;line-height:1.4}
/* In Arabic the caption flows right-to-left while the figure itself is forced LTR,
   so the two used to sit on opposite edges of the cell. Centring the pair keeps the
   number over its own caption. */
html[dir="rtl"] body.tgo-division .fig{text-align:center}
html[dir="rtl"] body.tgo-division .fig b{text-align:center}
@media(max-width:900px){body.tgo-division .figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body.tgo-division .hero{padding-top:56px}body.tgo-division .hero-cta{margin-bottom:46px}body.tgo-division .fig{padding:22px 18px 24px}
  body.tgo-division .fig b{font-size:1.9rem}}
/* ---------- clients ---------- */
body.tgo-division .clients{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
body.tgo-division .clients .lbl{color:var(--muted);margin-bottom:20px;text-align:center}
body.tgo-division .cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
body.tgo-division .cl-row span{font-weight:700;font-size:1.02rem;color:#5E787E;letter-spacing:-.01em;
  white-space:nowrap}
@media(max-width:700px){body.tgo-division .cl-row span{font-size:.9rem}body.tgo-division .cl-row{gap:12px 22px}}
/* ---------- sections ---------- */
body.tgo-division section.pad{padding:96px 0}
@media(max-width:760px){body.tgo-division section.pad{padding:64px 0}}
body.tgo-division .sec-head{margin-bottom:52px;max-width:62ch}
body.tgo-division .sec-head .n{color:var(--green);margin-bottom:14px}
body.tgo-division .sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:16px}
html[dir="rtl"] body.tgo-division .sec-head h2{letter-spacing:0;line-height:1.35}
body.tgo-division .sec-head p{color:var(--muted);font-size:1.05rem}
/* divisions */
body.tgo-division .divs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){body.tgo-division .divs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.tgo-division .divs{grid-template-columns:1fr}}
body.tgo-division .div-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px 32px;
  transition:.25s;position:relative;overflow:hidden;background:#fff}
body.tgo-division .div-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
body.tgo-division .div-card:hover{border-color:#BFD6D6;transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
body.tgo-division .div-card:hover::before{transform:scaleY(1)}
body.tgo-division .div-card .ic{width:44px;height:44px;border-radius:9px;background:#EAF4F1;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--teal)}
body.tgo-division .div-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
body.tgo-division .div-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
body.tgo-division .div-card .more{font-size:.84rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:6px}
body.tgo-division .div-card .more svg{transition:transform .25s}
body.tgo-division .div-card:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] body.tgo-division .div-card:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] body.tgo-division .div-card .more svg{transform:scaleX(-1)}
/* EMF band */
body.tgo-division .band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-division .band .art2{position:absolute;inset:0;opacity:.28}
body.tgo-division .band .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
  align-items:center;padding:88px 32px}
@media(max-width:940px){body.tgo-division .band .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px}}
body.tgo-division .band .n{color:var(--mint);margin-bottom:14px}
body.tgo-division .band h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:18px}
html[dir="rtl"] body.tgo-division .band h2{letter-spacing:0;line-height:1.35}
body.tgo-division .band p{color:#B7CCD1;margin-bottom:14px}
body.tgo-division .bignum{direction:ltr;unicode-bidi:isolate;font-size:clamp(4rem,9vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.tgo-division .bignum + .cap{color:#9FB6BC;font-size:.95rem;margin-top:10px;max-width:34ch}
body.tgo-division .emf-list{list-style:none;margin-top:26px;display:grid;gap:12px}
body.tgo-division .emf-list li{display:flex;gap:12px;font-size:.96rem;color:#CFE2E2;align-items:flex-start}
body.tgo-division .emf-list svg{flex:none;margin-top:5px;color:var(--mint)}
/* project record */
body.tgo-division .rec{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
body.tgo-division .rec .rhead, body.tgo-division .rec .rrow{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .55fr;gap:20px;
  padding:16px 26px;align-items:center}
body.tgo-division .rec .rhead{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted)}
body.tgo-division .rec .rrow{border-bottom:1px solid var(--line2);font-size:.95rem}
body.tgo-division .rec .rrow:last-child{border-bottom:none}
body.tgo-division .rec .rrow b{font-weight:600}
body.tgo-division .rec .rrow .yr{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
body.tgo-division .tag{display:inline-block;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);white-space:nowrap}
@media(max-width:860px){body.tgo-division .rec .rhead{display:none}
  body.tgo-division .rec .rrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}}
/* certifications */
body.tgo-division .certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
@media(max-width:820px){body.tgo-division .certgrid{grid-template-columns:1fr}}
body.tgo-division .cert{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;
  display:flex;gap:18px;align-items:flex-start}
body.tgo-division .cert .badge{width:52px;height:52px;flex:none;border-radius:10px;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  text-align:center;line-height:1.1}
body.tgo-division .cert b{display:block;font-size:1.02rem;margin-bottom:5px}
body.tgo-division .cert span{font-size:.88rem;color:var(--muted);display:block}
body.tgo-division .prequal{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 30px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.tgo-division .prequal p{font-size:.98rem;color:var(--deep);max-width:60ch}
/* offices */
body.tgo-division .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){body.tgo-division .offices{grid-template-columns:repeat(2,1fr)}}
body.tgo-division .off{border-top:2px solid var(--line);padding-top:18px}
body.tgo-division .off b{display:block;font-size:1.05rem;margin-bottom:4px}
body.tgo-division .off span{font-size:.88rem;color:var(--muted)}
body.tgo-division .off.hq{border-top-color:var(--green)}
/* CTA */
body.tgo-division .cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-division .cta .art3{position:absolute;inset:0;opacity:.4}
body.tgo-division .cta .wrap{position:relative;padding:88px 32px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center}
@media(max-width:940px){body.tgo-division .cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 24px}}
body.tgo-division .cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:16px}
html[dir="rtl"] body.tgo-division .cta h2{letter-spacing:0;line-height:1.35}
body.tgo-division .cta p{color:#B7CCD1;margin-bottom:26px;max-width:48ch}
body.tgo-division .formcard{background:#fff;border-radius:14px;padding:28px}
body.tgo-division .formcard .fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
body.tgo-division .formcard input, body.tgo-division .formcard textarea, body.tgo-division .formcard select{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;font-size:.95rem;margin-bottom:16px;
  background:#fff;color:var(--ink);font-family:inherit}
body.tgo-division .formcard textarea{min-height:82px;resize:vertical}
body.tgo-division .formcard input:focus, body.tgo-division .formcard textarea:focus, body.tgo-division .formcard select:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,108,120,.12)}
body.tgo-division .formcard .btn{width:100%;justify-content:center}
/* footer */
body.tgo-division footer{background:var(--ink);color:#8FA9B0;padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
body.tgo-division .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){body.tgo-division .ftop{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){body.tgo-division .ftop{grid-template-columns:1fr}}
body.tgo-division .ftop img{width:190px;height:auto;margin-bottom:20px}
body.tgo-division .ftop h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[dir="rtl"] body.tgo-division .ftop h4{letter-spacing:0}
body.tgo-division .ftop a, body.tgo-division .ftop p{display:block;font-size:.9rem;margin-bottom:9px;color:#8FA9B0}
body.tgo-division .ftop a:hover{color:var(--mint)}
body.tgo-division .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:.82rem}
body.tgo-division .dirltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
body.tgo-division .reveal{opacity:0;transform:translateY(18px)}
body.tgo-division .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-division *{animation:none!important;transition:none!important}
  body.tgo-division .reveal{opacity:1;transform:none}}
/* division cards carry the same photograph as their service page */
body.tgo-division .div-card{padding:0;overflow:hidden}
body.tgo-division .dphoto{aspect-ratio:16/6;overflow:hidden;background:var(--ink)}
body.tgo-division .dphoto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
body.tgo-division .div-card:hover .dphoto img{transform:scale(1.05)}
body.tgo-division .div-card h3, body.tgo-division .div-card p, body.tgo-division .div-card .more{margin-inline:30px}
body.tgo-division .div-card .ic{display:none}
body.tgo-division .div-card h3{margin-top:26px}
body.tgo-division .div-card .more{margin-bottom:28px}
/* mobile menu, matching the rest of the site */
body.tgo-division .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
body.tgo-division .burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
body.tgo-division .burger span::before, body.tgo-division .burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
body.tgo-division .burger span::before{top:-6px}
body.tgo-division .burger span::after{top:6px}
@media(max-width:960px){
  body.tgo-division .nav-links{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 20px 40px -30px rgba(11,42,49,.6)}
  body.tgo-division .nav-links.open{display:flex}
  body.tgo-division .nav-links a{padding:14px 24px;font-size:1rem}
  body.tgo-division .nav-links a::after{display:none}
  body.tgo-division .burger{display:inline-flex;margin-inline-start:auto}
  body.tgo-division nav{position:static}
  body.tgo-division header .wrap{position:relative}
}
/* phones: links in lists need a finger-sized target */
@media(max-width:700px){
  body.tgo-division .ftop a, body.tgo-division .ftop p{padding:7px 0;margin-bottom:2px}
  body.tgo-division .fbot a{display:inline-block;padding:9px 0}
  body.tgo-division .recline{padding:9px 0}
  body.tgo-division .sectors span{padding:10px 16px}
  body.tgo-division .covkey span{padding:5px 0}
}
body.tgo-division .util .certs .certs-sm{display:none}
@media(max-width:820px){
  body.tgo-division .util .certs > span{display:none}
  body.tgo-division .util .certs .certs-sm{display:inline-flex;gap:6px}
}
@media(max-width:760px){
  body.tgo-division footer a, body.tgo-division .fbot a, body.tgo-division .nav-links a, body.tgo-division .crumb a, body.tgo-division .fcols a, body.tgo-division .util a, body.tgo-division a.lang{
    display:inline-flex;align-items:center;min-height:40px}
  body.tgo-division .divs a, body.tgo-division .grid a.card{min-height:44px}
}
body.tgo-division .pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:26px}
body.tgo-division .pt>div{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;
  flex-direction:column;gap:13px;align-items:flex-start}
body.tgo-division .pt img{height:40px;width:auto;max-width:200px;object-fit:contain}
body.tgo-division .pt b{font-size:1rem;font-weight:700;color:var(--ink)}
body.tgo-division .pt span{font-size:.93rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] body.tgo-division .pt>div{align-items:flex-start}
/* a phone-sized finger needs a 40px target; these links are often bare text runs */
@media(max-width:640px){body.tgo-division a[href^="mailto:"], body.tgo-division a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}}
/* ---------- hero video ---------- */
body.tgo-division .hero{min-height:min(88vh,780px);display:flex;flex-direction:column;padding-top:92px;background:var(--ink)}
body.tgo-division .hero>.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:44px}
body.tgo-division .hero-cta{margin-bottom:0}
body.tgo-division .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(11,42,49,.93) 0%,rgba(11,42,49,.74) 28%,
    rgba(11,42,49,.30) 58%,rgba(11,42,49,0) 84%),
    linear-gradient(to bottom,rgba(11,42,49,.46) 0%,rgba(11,42,49,0) 24%,
    rgba(11,42,49,0) 66%,rgba(11,42,49,.92) 100%)}
body.tgo-division .hero .art{z-index:3;opacity:.22}
body.tgo-division .hero .wrap{z-index:4}
body.tgo-division .hero h1 em{background:linear-gradient(118deg,#EAFFF6 0%,var(--mint) 62%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-division .hero h1{max-width:13ch;text-shadow:0 2px 26px rgba(11,42,49,.5)}
body.tgo-division .hero p.lede{color:#DCEAEC;max-width:46ch;text-shadow:0 1px 14px rgba(11,42,49,.6)}
body.tgo-division .eyebrow{text-shadow:0 1px 10px rgba(11,42,49,.65)}
body.tgo-division .figs{border-top:1px solid rgba(255,255,255,.18)}
body.tgo-division .fig{background:rgba(11,42,49,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ---------- division bands ---------- */
body.tgo-division .bands-head{padding-block:58px 26px}
body.tgo-division #record{padding-block:54px}
body.tgo-division #record .sec-head{margin-bottom:22px}
body.tgo-division .dband{position:relative;min-height:min(72vh,580px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
body.tgo-division .dband:nth-of-type(even){background:#0E333B}
/* Full bleed, but only across its own side. The photographs are square, so a
   strip spanning the whole width would slice the subject - which is exactly
   what took the top off the tower. Instead the image runs edge to edge on the
   side away from the copy and dissolves into the panel, so there is no card,
   no border, and nothing cropped. */
body.tgo-division .bmedia{position:absolute;top:-40px;bottom:-40px;width:58%;z-index:0;
  -webkit-mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-division .side-left .bmedia{right:0}
body.tgo-division .side-right .bmedia{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-division .bimg, body.tgo-division .bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The drawn layer must ride exactly the same drift as the photograph under it.
   Animating only the image pulled the traced roads off the real roads by a
   couple of hundred pixels at the far end of the cycle. */
body.tgo-division .bimg, body.tgo-division .bovl{animation:bdrift 34s ease-in-out infinite alternate;
  transform-origin:50% 50%;will-change:transform}
@keyframes bdrift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
body.tgo-division .bovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-division .dband .wrap{position:relative;z-index:3;width:100%}
body.tgo-division .bcopy{max-width:31rem}
body.tgo-division .side-right .bcopy{margin-inline-start:auto}
body.tgo-division .bcopy .n{color:var(--mint);margin-bottom:14px;letter-spacing:.14em;font-size:.72rem}
body.tgo-division .bcopy h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff;text-shadow:0 2px 18px rgba(7,28,34,.55)}
body.tgo-division .bcopy p{color:#C9DDE0;font-size:1.02rem;margin-bottom:18px;text-shadow:0 1px 12px rgba(7,28,34,.55)}
body.tgo-division .bstat{color:var(--mint);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:26px;padding-inline-start:14px;border-inline-start:2px solid var(--green)}
body.tgo-division .dband .btn.o{border-color:rgba(255,255,255,.5);color:#fff}
body.tgo-division .dband .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- drawn overlays ---------- */
body.tgo-division .trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 6s ease-in-out infinite}
body.tgo-division .t2{animation-delay:.45s}
body.tgo-division .t3{animation-delay:.9s}
body.tgo-division .t4{animation-delay:1.35s}
body.tgo-division .t5{animation-delay:1.8s}
@keyframes draw{0%{stroke-dashoffset:2400}45%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
body.tgo-division .nodes circle, body.tgo-division .verts circle{opacity:0;animation:pop 6s ease-out infinite}
body.tgo-division .nodes circle:nth-child(2), body.tgo-division .verts circle:nth-child(2){animation-delay:.5s}
body.tgo-division .nodes circle:nth-child(3), body.tgo-division .verts circle:nth-child(3){animation-delay:1s}
body.tgo-division .nodes circle:nth-child(4){animation-delay:1.5s}
body.tgo-division .verts circle:nth-child(4){animation-delay:1.5s}
body.tgo-division .verts circle:nth-child(5){animation-delay:2s}
body.tgo-division .verts circle:nth-child(6){animation-delay:2.5s}
body.tgo-division .verts circle:nth-child(7){animation-delay:3s}
body.tgo-division .verts circle:nth-child(8){animation-delay:3.5s}
@keyframes pop{0%,18%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}
  86%{opacity:1}100%{opacity:0}}
body.tgo-division .rings circle{opacity:0;transform-origin:305px 230px;animation:ring 4.6s ease-out infinite}
body.tgo-division .rings circle:nth-child(2){animation-delay:1.15s}
body.tgo-division .rings circle:nth-child(3){animation-delay:2.3s}
body.tgo-division .rings circle:nth-child(4){animation-delay:3.45s}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
body.tgo-division .parcels path{opacity:0;fill-opacity:.3;animation:fill 7s ease-in-out infinite}
body.tgo-division .parcels path:nth-child(2){animation-delay:.6s}
body.tgo-division .parcels path:nth-child(3){animation-delay:1.2s}
body.tgo-division .parcels path:nth-child(4){animation-delay:1.8s}
body.tgo-division .parcels path:nth-child(5){animation-delay:2.4s}
@keyframes fill{0%,8%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
body.tgo-division .scan{fill:url(#scanG);opacity:.55;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-division .uts{fill:url(#uts);animation:sweep 5.5s linear infinite}
body.tgo-division .stock{fill:url(#stockg);animation:sweep 6.5s linear infinite}
body.tgo-division .brk g{opacity:0;animation:fill 6.5s ease-in-out infinite}
body.tgo-division .brk g:nth-child(2){animation-delay:1.1s}
body.tgo-division .glab text{opacity:0;animation:fill 7s ease-in-out infinite}
body.tgo-division .glab text:nth-child(2){animation-delay:.9s}
body.tgo-division .glab text:nth-child(3){animation-delay:1.8s}
body.tgo-division .contours path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 7s ease-in-out infinite}
body.tgo-division .contours path:nth-child(2){animation-delay:.4s}
body.tgo-division .contours path:nth-child(3){animation-delay:.8s}
body.tgo-division .pts g{stroke:#7FCFAE;stroke-width:2.4;fill:#7FCFAE;opacity:0;animation:pop 7s ease-out infinite}
body.tgo-division .pts g:nth-child(2){animation-delay:.7s}
body.tgo-division .pts g:nth-child(3){animation-delay:1.4s}
@media(max-width:900px){
  body.tgo-division .dband{min-height:auto;padding-block:300px 46px}
  body.tgo-division .bmedia{width:100%;bottom:auto;height:280px;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-division .side-right .bmedia{left:0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-division .bcopy, body.tgo-division .side-right .bcopy{max-width:none;margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .hero .hv, body.tgo-division .bvid{display:none}
  body.tgo-division .bimg, body.tgo-division .bovl{animation:none}
  body.tgo-division .trace, body.tgo-division .nodes circle, body.tgo-division .verts circle, body.tgo-division .rings circle, body.tgo-division .parcels path, body.tgo-division .scan, body.tgo-division .uts, body.tgo-division .stock, body.tgo-division .brk g, body.tgo-division .glab text, body.tgo-division .contours path, body.tgo-division .pts g{animation:none;opacity:1;stroke-dashoffset:0}
}
body.tgo-division .vbadge{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:99;
  font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,42,49,.86);color:#9FBCBB;border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;pointer-events:none}
/* ---------- traced routes ---------- */
body.tgo-division .route, body.tgo-division .route-under{fill:none;stroke-linecap:round;stroke-dasharray:2800;stroke-dashoffset:2800}
body.tgo-division .route-under{stroke:rgba(7,28,34,.5);stroke-width:8;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-division .route{stroke:var(--mint);stroke-width:3.2;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes routedraw{
  0%{stroke-dashoffset:2800;opacity:0} 5%{opacity:.95}
  44%{stroke-dashoffset:0;opacity:.95} 80%{stroke-dashoffset:0;opacity:.95}
  93%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:2800;opacity:0}}
body.tgo-division .runner{fill:#EAFFF6;opacity:0;animation:run 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0} 5%{opacity:1}
  44%{offset-distance:100%;opacity:1} 52%{opacity:0} 100%{offset-distance:100%;opacity:0}}
@supports not (offset-path: path("M0 0 L1 1")){ body.tgo-division .runner{display:none} }
body.tgo-division .hovl .runA{offset-path:path("M -30 655 C 300 625, 620 594, 900 558 C 1080 536, 1300 470, 1640 396")}
body.tgo-division .hovl .runB{offset-path:path("M 940 -30 C 980 140, 1032 300, 1100 470 C 1162 618, 1232 762, 1310 930")}
body.tgo-division .hovl .rB, body.tgo-division .hovl .rBu, body.tgo-division .hovl .runB{animation-delay:1.9s}
body.tgo-division .cadovl .runA{offset-path:path("M -20 690 C 280 648, 540 600, 800 556 C 1060 512, 1250 482, 1460 452")}
body.tgo-division .cadovl .runB{offset-path:path("M 360 -20 C 500 190, 650 390, 800 556 C 950 720, 1110 880, 1250 1030")}
body.tgo-division .cadovl .rB, body.tgo-division .cadovl .runB{animation-delay:1.6s}
/* nodes fire as the light reaches them */
body.tgo-division .nd .ring{fill:none;stroke:var(--mint);stroke-width:2.2;opacity:0;transform-origin:center}
body.tgo-division .nd .dot{fill:#EAFFF6;opacity:0;transform-origin:center}
body.tgo-division .nd .ring{animation:ndring 11s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-division .nd .dot{animation:nddot 11s ease-out infinite}
@keyframes ndring{0%,10%{opacity:0;transform:scale(.2)} 16%{opacity:.85;transform:scale(1)}
  30%{opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)}}
@keyframes nddot{0%,10%{opacity:0;transform:scale(.3)} 16%{opacity:1;transform:scale(1)}
  80%{opacity:1} 93%{opacity:0} 100%{opacity:0}}
body.tgo-division .n1 .ring, body.tgo-division .n1 .dot{animation-delay:1.1s}
body.tgo-division .n2 .ring, body.tgo-division .n2 .dot{animation-delay:2.4s}
body.tgo-division .n3 .ring, body.tgo-division .n3 .dot{animation-delay:3.6s}
body.tgo-division .n4 .ring, body.tgo-division .n4 .dot{animation-delay:2.9s}
body.tgo-division .n5 .ring, body.tgo-division .n5 .dot{animation-delay:4.4s}
/* the original sheet declares .reveal without a duration, so the class swap
   popped instead of fading */
body.tgo-division .reveal{transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
body.tgo-division .reveal.in{opacity:1;transform:none}
/* ---------- hero, now a still ---------- */
body.tgo-division .hero .hlayer{position:absolute;inset:-6% -4%;z-index:0;will-change:transform}
body.tgo-division .hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-division .hovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-division .hero .art{z-index:3;opacity:.16}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .route, body.tgo-division .route-under, body.tgo-division .runner, body.tgo-division .nd .ring, body.tgo-division .nd .dot{animation:none;stroke-dashoffset:0;opacity:1}
  body.tgo-division .nd .ring{opacity:.5}
}
/* ---------- full-height hero ---------- */
body.tgo-division .hero{min-height:calc(100vh - 176px);min-height:calc(100svh - 176px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0}
body.tgo-division .hero>.hero-copy{flex:0 0 auto;display:block;padding-top:clamp(48px,9vh,110px);padding-bottom:0}
body.tgo-division .hero .hlayer{inset:-2% -2%}
/* the headline carries the weight change the reference site uses: a light
   first line, a heavy second. Our sentence happens to break exactly there. */
body.tgo-division .hero h1{max-width:none;margin-bottom:26px;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.6vw,4.6rem);text-shadow:0 2px 30px rgba(7,28,34,.55)}
body.tgo-division .hero h1 .l1{display:block;font-weight:300;color:#fff}
body.tgo-division .hero h1 .l2{display:block;font-weight:800;
  background:linear-gradient(112deg,#fff 6%,var(--mint) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-division .hero p.lede{max-width:42ch}
/* the scrim now has to work under text sitting high and left */
body.tgo-division .hero .scrim{background:
  linear-gradient(to right,rgba(7,28,34,.72) 0%,rgba(7,28,34,.50) 36%,
    rgba(7,28,34,.16) 64%,rgba(7,28,34,.02) 100%),
  linear-gradient(to bottom,rgba(7,28,34,.60) 0%,rgba(7,28,34,.22) 36%,
    rgba(7,28,34,.14) 70%,rgba(7,28,34,.52) 100%)}
body.tgo-division{--cue-x:26px}
/* physical offsets here on purpose: writing-mode:vertical-rl rotates the inline
   axis, so inset-inline-end resolves to the bottom and the cue lands in the
   wrong corner. The RTL case is handled explicitly below. */
body.tgo-division .scrollcue{position:absolute;right:var(--cue-x);bottom:30px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);writing-mode:vertical-rl}
html[dir="rtl"] body.tgo-division .scrollcue{right:auto;left:var(--cue-x)}
body.tgo-division .scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(to bottom,
  rgba(255,255,255,.1),rgba(255,255,255,.75));position:relative;overflow:hidden}
body.tgo-division .scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-54px;height:54px;
  background:linear-gradient(to bottom,transparent,var(--mint));
  animation:cue 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}
/* the figures leave the hero and become their own quiet strip */
body.tgo-division .figstrip{background:var(--ink);border-block:1px solid rgba(255,255,255,.12)}
body.tgo-division .figstrip .figs{border-top:0}
body.tgo-division .figstrip .fig{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:820px){
  body.tgo-division .hero{min-height:auto;padding-top:0}
  body.tgo-division .hero>.hero-copy{padding-top:56px;padding-bottom:64px}
  body.tgo-division .scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){body.tgo-division .scrollcue i::after{animation:none}}
/* ---------- new logo: sized by height, with clearance in the bar ---------- */
/* The old rule set a width and let the height fall where it fell, which put a
   103px image inside a 96px bar. Height-first cannot overflow. */
/* The mark is 2:1, so height drives width: 88px tall reads at 176px wide,
   close to the presence the old lockup had at 205px - but sized by height it
   cannot outgrow its bar the way the old rule did. */
body.tgo-division .logo img{width:auto;height:88px;display:block}
body.tgo-division nav{height:124px}
@media(max-width:900px){body.tgo-division .logo img{height:64px}body.tgo-division nav{height:96px}}
@media(max-width:640px){body.tgo-division .logo img{height:52px}body.tgo-division nav{height:82px}}
body.tgo-division .ftop img{width:auto;height:88px;display:block;margin-bottom:20px}
@media(max-width:640px){body.tgo-division .ftop img{height:68px}}
/* ---------- marquee: keep it on the GPU and inside the texture cap -------- */
body.tgo-division .marq-track{will-change:transform;backface-visibility:hidden}
@keyframes mscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(max-width:820px){
  body.tgo-division .marq-track{animation-duration:26s}
  body.tgo-division .lg{height:74px;padding:0 20px}
  body.tgo-division .lg img, body.tgo-division .lg svg{max-height:46px;max-width:120px}
}
/* ---------- coverage map: centred, same width as the bands above ---------- */
/* The wrap is left at its default 1240px so this section lines up exactly with
   every other band on the page. One column, centred, map at full wrap width. */
body.tgo-division #offices{padding-block:clamp(56px,7vw,92px)}
body.tgo-division #offices .cov{display:block;text-align:center}
body.tgo-division #offices .cov>*{width:100%}
body.tgo-division #offices .cov h2{margin-inline:auto;max-width:24ch}
body.tgo-division #offices .cov p{margin-inline:auto;max-width:70ch}
body.tgo-division #offices .covkey{justify-content:center;margin-bottom:30px}
body.tgo-division #offices .covmap{margin-inline:auto}
body.tgo-division #offices .covmap svg{width:100%;height:auto;display:block}
@media(min-width:1100px){body.tgo-division #offices .cov{grid-template-columns:none}}
/* ---------- technology partners ---------- */
body.tgo-division .tp{background:#fff;border-top:1px solid var(--line);padding-block:clamp(50px,7vw,88px)}
body.tgo-division .tp .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-division .tp h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-division .tp .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:34px}
body.tgo-division .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
body.tgo-division .tpgrid article{background:#fff;padding:26px 24px 30px}
body.tgo-division .tpgrid b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
body.tgo-division .tpgrid .role{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;display:block}
body.tgo-division .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.6}
/* ---- language switch ------------------------------------------------------
   The site carries Arabic on every string but had no way to reach it except a
   hand-typed ?lang=ar. This is that switch. */
body.tgo-division .langbtn{font:inherit;font-size:.76rem;font-weight:600;line-height:1;color:#CFE0E3;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
body.tgo-division .langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
body.tgo-division .langbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:640px){body.tgo-division .langbtn{padding:5px 11px;font-size:.72rem}}
/* ---- division bands: the whole panel is the link ------------------------- */
body.tgo-division .bcopy-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:transform .35s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){body.tgo-division .bcopy-link:hover{transform:translateY(-3px)}}
body.tgo-division .bcopy-link:focus-visible{outline:2px solid var(--mint);outline-offset:8px;border-radius:8px}
body.tgo-division .bgo{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:.95rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.4);padding-bottom:4px}
body.tgo-division .bgo svg{transition:transform .25s ease}
@media(hover:hover){body.tgo-division .bcopy-link:hover .bgo{border-color:var(--mint);color:var(--mint)}
  body.tgo-division .bcopy-link:hover .bgo svg{transform:translateX(5px)}}
html[dir="rtl"] body.tgo-division .bcopy-link:hover .bgo svg{transform:translateX(-5px)}
/* ---- technology partners: a card grid with room for the mark ------------- */
body.tgo-division .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;background:none;border:0}
body.tgo-division .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 30px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){body.tgo-division .tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
body.tgo-division .tplogo{height:56px;display:flex;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-division .tplogo img{max-height:40px;width:auto;object-fit:contain}
body.tgo-division .tplogo .mark{display:inline-flex;align-items:center;gap:10px}
body.tgo-division .tplogo .mark i{width:34px;height:34px;border-radius:9px;background:#EAF3F0;color:var(--teal);
  display:grid;place-items:center;font:800 .82rem/1 var(--f);font-style:normal;letter-spacing:.02em}
body.tgo-division .tplogo .mark b{font:700 1.06rem/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
body.tgo-division .tpgrid .role{font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
body.tgo-division .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.65}
body.tgo-division .tpnote{margin-top:26px;font-size:.9rem;color:var(--muted)}
body.tgo-division .tplink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.86rem;
  font-weight:600;color:var(--teal);text-decoration:none;align-self:flex-start}
body.tgo-division .tplink svg{transition:transform .22s ease}
body.tgo-division .tplink:hover{color:var(--deep)}
body.tgo-division .tplink:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-division .tplink:hover svg{transform:translateX(-4px)}
body.tgo-division .tpgrid article .d{flex:1}
body.tgo-division .bands-head{padding-block:clamp(52px,7vw,92px) clamp(26px,3vw,40px)}
body.tgo-division .bands-head .sec-head p{max-width:56ch}
/* ---- technology partners: the marks, the names, and not much else -------- */
body.tgo-division .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
body.tgo-division .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
body.tgo-division .tplogo{height:62px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-division .tplogo img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
html[dir="rtl"] body.tgo-division .tplogo img{object-position:right center}
body.tgo-division .tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
body.tgo-division .tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}
/* ---- section eyebrows: readable, not decorative ------------------------- */
body.tgo-division .mono{font-size:.84rem;letter-spacing:.13em}
html[dir="rtl"] body.tgo-division .mono{letter-spacing:0;font-size:.92rem}
body.tgo-division .n.mono, body.tgo-division .sec-head .n, body.tgo-division .band .n, body.tgo-division .bcopy .n, body.tgo-division .tp .n, body.tgo-division .lsec .n, body.tgo-division .pj-head .n, body.tgo-division .sv-head .n, body.tgo-division .dp-hero .n{
  font-size:.84rem;letter-spacing:.13em}
body.tgo-division .util .certs{font-size:.8rem}
body.tgo-division .bstat.mono{font-size:.82rem;letter-spacing:.1em}
body.tgo-division .svnum{font-size:.82rem;letter-spacing:.2em}
@media(max-width:640px){body.tgo-division .mono, body.tgo-division .n.mono{font-size:.78rem}}
/* ---- reveal: threshold by pixel, not by percentage -----------------------
   A percentage threshold never fires for an element taller than the viewport,
   which is exactly what a full division panel is. The observer below uses a
   zero threshold with a bottom margin instead, and unobserves on first hit so
   a revealed section can never fade back out. */
body.tgo-division .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-division .reveal{opacity:1;transform:none;transition:none}}
/* ================= division page, Option 1 ================================ */
body.tgo-division .dp-hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(72vh,560px)}
body.tgo-division .dp-hero .ph{position:relative;overflow:hidden;background:#08222A}
body.tgo-division .dp-hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-division .dp-hero .ph .svovl{opacity:1}
body.tgo-division .dp-hero .tx{background:var(--deep);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(36px,4.6vw,76px)}
body.tgo-division .dp-hero .n{color:var(--mint);letter-spacing:.2em;font-size:.72rem;margin-bottom:16px}
body.tgo-division .dp-hero h1{font-size:clamp(2rem,3.7vw,3.2rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.06;margin-bottom:18px;color:#fff}
body.tgo-division .dp-hero p{color:#CFE0E3;font-size:1.06rem;line-height:1.7;max-width:44ch}
body.tgo-division .dp-figs{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.14);
  gap:1px;border-block-end:1px solid rgba(255,255,255,.14)}
body.tgo-division .dp-figs div{background:var(--ink);padding:26px 24px 30px}
body.tgo-division .dp-figs b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:#fff;
  letter-spacing:-.03em;margin-bottom:6px}
body.tgo-division .dp-figs span{font-size:.84rem;color:#8FA9B0;line-height:1.5}
/* split panels ------------------------------------------------------------ */
body.tgo-division .sp{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
body.tgo-division .sp.one{grid-template-columns:1fr}
body.tgo-division .sp.one .tx{max-width:none}
body.tgo-division .sp .tx{padding:clamp(34px,4.6vw,76px);display:flex;flex-direction:column;justify-content:center}
body.tgo-division .sp.dk{background:var(--ink);color:#fff}
body.tgo-division .sp.dk h2, body.tgo-division .sp.dk b{color:#fff}
body.tgo-division .sp.dk p{color:#C9DDE0}
body.tgo-division .sp.dk .num span{color:#A9C4CA}
body.tgo-division .sp.lt{background:var(--paper)}
body.tgo-division .sp h2{font-size:clamp(1.45rem,2.5vw,2.15rem);font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
body.tgo-division .sp p{font-size:1.02rem;line-height:1.75;margin-bottom:14px;max-width:48ch}
body.tgo-division .sp .num{display:block}
body.tgo-division .sp .num article{border-block-start:1px solid rgba(255,255,255,.16);padding:18px 0;display:grid;
  grid-template-columns:44px 1fr;gap:14px;align-items:start}
body.tgo-division .sp.lt .num article{border-color:var(--line)}
body.tgo-division .sp .num i{font:600 .78rem/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green);font-style:normal}
body.tgo-division .sp .num b{display:block;margin-bottom:5px;font-size:1.01rem;line-height:1.4}
body.tgo-division .sp .num span{font-size:.95rem;line-height:1.6;color:var(--muted);display:block}
body.tgo-division .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body.tgo-division .tagrow span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 14px;font-size:.82rem}
body.tgo-division .sp.lt .tagrow span, body.tgo-division .lt-tags span{border-color:#DDE4E2;color:#4A6068}
@media(max-width:880px){body.tgo-division .sp{grid-template-columns:1fr}
  body.tgo-division .dp-hero{grid-template-columns:1fr}body.tgo-division .dp-hero .ph{min-height:260px}
  body.tgo-division .dp-figs{grid-template-columns:1fr}}
/* light sections ---------------------------------------------------------- */
body.tgo-division .lsec{background:#FBFBF9;padding-block:clamp(48px,6.5vw,92px);border-block-start:1px solid #E7ECEA}
body.tgo-division .lsec .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-division .lsec h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:12px}
body.tgo-division .lsec>.wrap>p{color:#5C7078;max-width:62ch;line-height:1.7;margin-bottom:30px}
body.tgo-division .grp{margin-top:clamp(30px,4vw,52px)}
body.tgo-division .grp:first-of-type{margin-top:0}
body.tgo-division .grp>h3{font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:.01em;
  padding-block-end:12px;border-block-end:2px solid var(--green);display:inline-block;margin-bottom:6px}
body.tgo-division .grows{border-block-start:1px solid #E7ECEA}
body.tgo-division .grows article{border-block-end:1px solid #E7ECEA;padding:22px 0;display:grid;
  grid-template-columns:46px minmax(180px,17rem) 1fr;gap:clamp(12px,2.4vw,36px);align-items:baseline}
body.tgo-division .grows i{font:600 .76rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green);font-style:normal}
body.tgo-division .grows b{font-size:1.04rem;color:var(--ink);line-height:1.4}
body.tgo-division .grows span{color:#5C7078;line-height:1.68;font-size:.98rem}
@media(max-width:820px){body.tgo-division .grows article{grid-template-columns:34px 1fr;gap:10px}
  body.tgo-division .grows b{grid-column:2}body.tgo-division .grows span{grid-column:2}}
body.tgo-division .why4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:#E7ECEA;border:1px solid #E7ECEA}
body.tgo-division .why4 article{background:#fff;padding:26px 24px 30px}
body.tgo-division .why4 b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:7px}
body.tgo-division .why4 span{color:#5C7078;font-size:.95rem;line-height:1.65}
body.tgo-division .ptab{width:100%;border-collapse:collapse;font-size:.97rem}
body.tgo-division .ptab th{text-align:start;font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding:0 0 14px;
  border-block-end:1px solid #E7ECEA}
body.tgo-division .ptab td{padding:16px 0;border-block-end:1px solid #E7ECEA;color:#41565E;vertical-align:top}
body.tgo-division .ptab td:first-child{color:var(--ink);font-weight:600;padding-inline-end:22px}
body.tgo-division .ptab td:last-child{white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums}
body.tgo-division .tnote{color:#5C7078;font-size:.95rem;margin-top:16px}
@media(max-width:640px){body.tgo-division .ptab, body.tgo-division .ptab tbody, body.tgo-division .ptab tr, body.tgo-division .ptab td{display:block;width:100%}
  body.tgo-division .ptab thead{display:none}
  body.tgo-division .ptab tr{border-block-end:1px solid #E7ECEA;padding-block:14px}
  body.tgo-division .ptab td{border:0;padding:2px 0}
  body.tgo-division .ptab td:last-child{text-align:start}}
body.tgo-division .toolcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3.4vw,52px)}
body.tgo-division .toolcols .lbl{font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:16px}
body.tgo-division .chips{display:flex;flex-wrap:wrap;gap:8px}
body.tgo-division .chips span{border:1px solid #DDE4E2;border-radius:999px;padding:8px 15px;font-size:.84rem;
  color:var(--ink);background:#fff}
body.tgo-division .glance{display:block}
body.tgo-division .glance article{border-block-start:1px solid var(--line);padding:16px 0;display:grid;
  grid-template-columns:minmax(120px,12rem) 1fr;gap:18px;align-items:baseline}
body.tgo-division .glance b{font-size:.95rem;color:var(--ink);font-weight:600}
body.tgo-division .glance span{color:#5C7078;line-height:1.6}
@media(max-width:560px){body.tgo-division .glance article{grid-template-columns:1fr;gap:4px}}
body.tgo-division .dp-cta{background:var(--ink);color:#fff;padding-block:clamp(46px,6vw,80px)}
body.tgo-division .dp-cta h2{font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:800;margin-bottom:14px;color:#fff}
body.tgo-division .dp-cta p{color:#C9DDE0;margin-bottom:26px;max-width:52ch;line-height:1.7}
body.tgo-division .ctabtns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
body.tgo-division .ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:12px 22px;color:#fff;text-decoration:none;font-weight:600;
  font-size:.95rem;transition:background .25s ease,border-color .25s ease}
body.tgo-division .ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
body.tgo-division .ghost svg{transition:transform .25s ease}
body.tgo-division .ghost:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-division .ghost:hover svg{transform:translateX(-4px)}
body.tgo-division .svovl{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;
  transition:opacity .9s ease .3s}
body.tgo-division .svrow.in .svovl{opacity:1}
body.tgo-division .strace{stroke-dasharray:1400;stroke-dashoffset:1400;animation:sdraw 8s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-division .strace.t2{animation-delay:.5s}
body.tgo-division .strace.t3{animation-delay:1s}
@keyframes sdraw{0%{stroke-dashoffset:1400;opacity:0}6%{opacity:.9}
  44%{stroke-dashoffset:0;opacity:.9}82%{stroke-dashoffset:0;opacity:.9}
  94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1400;opacity:0}}
body.tgo-division .srings circle{opacity:0;animation:sring 4.8s ease-out infinite;transform-box:fill-box;
  transform-origin:center}
body.tgo-division .srings circle:nth-child(2){animation-delay:1.6s}
body.tgo-division .srings circle:nth-child(3){animation-delay:3.2s}
@keyframes sring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(4.2)}}
body.tgo-division .snd .sring{fill:none;stroke:#7FCFAE;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
body.tgo-division .snd .sdot{fill:#EAFFF6;opacity:0}
body.tgo-division .snd .sring{animation:sndr 8s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-division .snd .sdot{animation:sndd 8s ease-out infinite}
@keyframes sndr{0%,12%{opacity:0;transform:scale(.2)}20%{opacity:.85;transform:scale(1)}
  36%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}
@keyframes sndd{0%,12%{opacity:0}20%{opacity:1}84%{opacity:1}96%,100%{opacity:0}}
body.tgo-division .s2 .sring, body.tgo-division .s2 .sdot{animation-delay:.8s}
body.tgo-division .s3 .sring, body.tgo-division .s3 .sdot{animation-delay:1.6s}
body.tgo-division .sparcels path{opacity:0;fill-opacity:.26;animation:sfill 8s ease-in-out infinite}
body.tgo-division .sparcels path:nth-child(2){animation-delay:.6s}
body.tgo-division .sparcels path:nth-child(3){animation-delay:1.2s}
body.tgo-division .sparcels path:nth-child(4){animation-delay:1.8s}
body.tgo-division .sverts circle{opacity:0;animation:sfill 8s ease-in-out infinite}
body.tgo-division .sverts circle:nth-child(n+3){animation-delay:.6s}
body.tgo-division .sverts circle:nth-child(n+5){animation-delay:1.2s}
@keyframes sfill{0%,8%{opacity:0}24%{opacity:1}74%{opacity:1}100%{opacity:0}}
body.tgo-division .sscan{fill:url(#stk);opacity:.5;animation:sswp 8s linear infinite}
body.tgo-division .sstock{fill:url(#stk);animation:sswp 8.5s linear infinite}
body.tgo-division .suts{fill:url(#uts2);animation:sswp 7.5s linear infinite}
@keyframes sswp{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-division .sbrk g{opacity:0;animation:sfill 8.5s ease-in-out infinite}
body.tgo-division .sbrk g:nth-child(2){animation-delay:1.2s}
body.tgo-division .scont path{stroke-dasharray:1500;stroke-dashoffset:1500;animation:sdraw 8s ease-in-out infinite}
body.tgo-division .scont path:nth-child(2){animation-delay:.5s}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .svovl{opacity:1}
  body.tgo-division .strace, body.tgo-division .srings circle, body.tgo-division .snd .sring, body.tgo-division .snd .sdot, body.tgo-division .sparcels path, body.tgo-division .sverts circle, body.tgo-division .sscan, body.tgo-division .sstock, body.tgo-division .suts, body.tgo-division .sbrk g, body.tgo-division .scont path{animation:none;stroke-dashoffset:0;opacity:.85}
}
/* round2-ceo:start - lists and headings restored from the CEO's copy */
body.tgo-division .ceol{list-style:none;margin:2px 0 16px;padding:0;display:grid;gap:7px}
body.tgo-division .ceol li{position:relative;padding-inline-start:20px;line-height:1.55;font-size:.96rem}
body.tgo-division .ceol li::before{content:"";position:absolute;inset-inline-start:0;top:.74em;width:10px;height:2px;
  background:var(--mint,#7FCFAE);border-radius:2px}
body.tgo-division .sp.dk .ceol li, body.tgo-division .dp-hero .ceol li{color:#C9DDE0}
body.tgo-division .num .ceol{margin:8px 0 8px;gap:5px}
body.tgo-division .num .ceol li{color:#A9C4CA;font-size:.92rem;padding-inline-start:18px}
body.tgo-division .ceoq li{font-style:italic}
body.tgo-division .num span+span{margin-top:8px}
body.tgo-division .svlead{margin:-4px 0 18px;max-width:56ch}
body.tgo-division .sp .tx .svhead{color:var(--mint,#7FCFAE);font-size:.76rem;letter-spacing:.13em;margin-bottom:10px;text-transform:uppercase}
body.tgo-division .ceoclose{font-weight:600;color:#fff!important;margin-top:6px}
body.tgo-division .dp-hero .tx .ceolede{font-size:1.08rem;color:#fff;font-weight:600;margin-bottom:12px}
/* round2-ceo:end */
/* ---- what a measurement looks like ---------------------------------------
   Three pictures, and only two of them are ours. The third is the instrument
   as its manufacturer photographs it, so it is shown at the size it actually
   is - 580px - on its own white card and labelled as theirs. Blown up to fill
   a column it would be soft, and it would read as a photograph we took. */
body.tgo-division .emfset{padding-block:clamp(50px,7vw,96px);background:#FBFBF9;border-block-start:1px solid #E7ECEA}
body.tgo-division .emfset .n.mono{color:#327C5E;letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
html[dir="rtl"] body.tgo-division .emfset .n.mono{letter-spacing:0;font-family:inherit;font-size:.86rem}
body.tgo-division .emfset h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:10px}
body.tgo-division .emfset .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:28px}
body.tgo-division .emfgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(14px,2vw,22px);align-items:stretch}
body.tgo-division .emfgrid figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#E7ECEA}
body.tgo-division .emfgrid .tall{grid-row:span 2;aspect-ratio:4/5}
body.tgo-division .emfgrid .wide{aspect-ratio:3/2}
body.tgo-division .emfgrid .tall img, body.tgo-division .emfgrid .wide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
body.tgo-division .emfgrid figure:hover img{transform:scale(1.04)}
body.tgo-division .emfgrid figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:46px 16px 14px;color:#fff;
  font:600 .7rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;
  background:linear-gradient(to top,rgba(11,42,49,.88),rgba(11,42,49,0))}
html[dir="rtl"] body.tgo-division .emfgrid figcaption{letter-spacing:0;text-transform:none;font-family:inherit;
  font-size:.88rem}
/* the instrument card: white, small, and honest about whose picture it is */
body.tgo-division .emfgrid .emfkit{background:#fff;border:1px solid #E2E8E5;border-radius:16px;display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
  padding:clamp(16px,2.4vw,26px);text-align:center}
body.tgo-division .emfgrid .emfkit img{inline-size:100%;max-inline-size:340px;block-size:auto;display:block;margin-bottom:8px}
body.tgo-division .emfgrid .emfkit b{font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
body.tgo-division .emfgrid .emfkit small{color:var(--muted);font-size:.8rem;line-height:1.5;max-inline-size:34ch}
@media(max-width:820px){
  body.tgo-division .emfgrid{grid-template-columns:minmax(0,1fr)}
  body.tgo-division .emfgrid .tall{grid-row:auto;aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){body.tgo-division .emfgrid figure:hover img{transform:none}}
/* ---- the towers the measurements are taken at --------------------------- */
body.tgo-division .emftow{padding-block:clamp(40px,5vw,74px)}
body.tgo-division .emftow .towgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
body.tgo-division .emftow figure{margin:0}
body.tgo-division .emftow img{width:100%;height:auto;display:block;border-radius:10px;aspect-ratio:4/5;object-fit:cover}
body.tgo-division .emftow figcaption{font-size:.9rem;color:var(--muted);margin-top:10px;line-height:1.5}
@media (max-width:760px){body.tgo-division .emftow .towgrid{grid-template-columns:1fr;gap:22px}}
/* ---- in the workshop: the job, end to end --------------------------------
   The picture tracks whichever stage you are reading, the same way the case
   studies work on the projects page. On a phone the two columns become one
   block so the picture can stay pinned - a sticky item cannot leave its own
   grid row. */
body.tgo-division .mseq{background:#FBFBF9;padding-block:clamp(50px,7vw,96px);border-block-start:1px solid #E7ECEA}
body.tgo-division .mseq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start}
body.tgo-division .mseqimg{position:sticky;top:150px;width:100%;aspect-ratio:3/2;border-radius:18px;
  overflow:hidden;background:#E7ECEA}
body.tgo-division .mseqimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.05);transition:opacity .7s cubic-bezier(.3,0,.3,1),transform 1.3s cubic-bezier(.3,0,.3,1)}
body.tgo-division .mseqimg img.on{opacity:1;transform:none}
body.tgo-division .mseqcap{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;pointer-events:none;
  padding:52px 20px 15px;color:#fff;font:600 .7rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(11,42,49,.86),transparent)}
html[dir="rtl"] body.tgo-division .mseqcap{letter-spacing:0;text-transform:none;font-family:inherit;font-size:.86rem}
body.tgo-division .mseqhead{grid-column:1/-1;margin-bottom:6px}
body.tgo-division .mseqhead h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:10px}
body.tgo-division .mseqhead p{color:var(--muted);max-width:56ch;line-height:1.7}
body.tgo-division .mseqlist article{padding-block:clamp(30px,5vw,62px);border-block-end:1px solid #E4E9E7}
body.tgo-division .mseqlist article:last-child{border-block-end:0}
body.tgo-division .mseqlist .step{display:block;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:#327C5E;margin-bottom:12px}
html[dir="rtl"] body.tgo-division .mseqlist .step{letter-spacing:0;text-transform:none;font-family:inherit;font-size:.84rem}
body.tgo-division .mseqlist b{display:block;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px;line-height:1.25}
body.tgo-division .mseqlist p{color:var(--muted);line-height:1.72;max-width:46ch;margin:0}
@media(max-width:900px){
  body.tgo-division .mseq .wrap{display:block}
  body.tgo-division .mseqimg{position:sticky;top:99px;z-index:3;aspect-ratio:auto;height:34vh;min-height:200px;
    margin-bottom:20px;border-radius:14px;box-shadow:0 -18px 0 0 #FBFBF9}
  body.tgo-division .mseqcap{padding:40px 16px 12px}
  body.tgo-division .mseqlist article{padding-block:26px}
}
@media(max-width:640px){body.tgo-division .mseqimg{top:85px;height:32vh}}
@media(prefers-reduced-motion:reduce){body.tgo-division .mseqimg img{transition:none}}
/* ---- fabrication and welding --------------------------------------------
   Two photographs, side by side, because the pair says what one cannot: the
   same crew works at height on structure and at the bench on fittings. */
body.tgo-division .mweld{padding-block:clamp(46px,6.4vw,88px);background:#fff;border-block-start:1px solid #E7ECEA}
body.tgo-division .mweld .n.mono{color:#327C5E;letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
html[dir="rtl"] body.tgo-division .mweld .n.mono{letter-spacing:0;font-family:inherit;font-size:.86rem}
body.tgo-division .mweld h2{font-size:clamp(1.4rem,2.5vw,2.05rem);font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:10px}
body.tgo-division .mweld .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:26px}
body.tgo-division .mwpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
body.tgo-division .mwpair figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#E7ECEA;
  aspect-ratio:3/2}
body.tgo-division .mwpair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
body.tgo-division .mwpair figure:hover img{transform:scale(1.045)}
body.tgo-division .mwpair figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:46px 16px 14px;color:#fff;
  font:600 .7rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;
  background:linear-gradient(to top,rgba(11,42,49,.88),rgba(11,42,49,0))}
html[dir="rtl"] body.tgo-division .mwpair figcaption{letter-spacing:0;text-transform:none;font-family:inherit;
  font-size:.88rem}
@media(max-width:760px){body.tgo-division .mwpair{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){body.tgo-division .mwpair figure:hover img{transform:none}}
/* ---- the workshop gallery ------------------------------------------------
   One tall frame for the lining itself, then the rest of the floor around it.
   object-fit keeps every tile the same shape whatever the photograph's own. */
body.tgo-division .mgal{padding-block:clamp(40px,5vw,74px);background:var(--paper,#F4F8F8)}
body.tgo-division .mgal .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
body.tgo-division .mgal figure{margin:0;display:flex;flex-direction:column}
body.tgo-division .mgal img{width:100%;display:block;border-radius:10px;aspect-ratio:4/3;object-fit:cover}
body.tgo-division .mgal .tall{grid-row:span 2}
body.tgo-division .mgal .tall img{aspect-ratio:3/4;height:auto}
body.tgo-division .mgal figcaption{font-size:.9rem;color:var(--muted);margin-top:10px;line-height:1.5}
@media (max-width:900px){body.tgo-division .mgal .mgrid{grid-template-columns:repeat(2,1fr)}body.tgo-division .mgal .tall{grid-row:auto}body.tgo-division .mgal .tall img{aspect-ratio:4/3}}
@media (max-width:560px){body.tgo-division .mgal .mgrid{grid-template-columns:1fr}}
/* mech-r2:start - the lining hero's drawn layer and the workshop showcase */
body.tgo-division .lnovl path, body.tgo-division .lnovl circle{fill:none;vector-effect:non-scaling-stroke}
body.tgo-division .lnovl .ln-in{stroke:#EAFFF6;stroke-width:2.2;stroke-dasharray:1700;stroke-dashoffset:1700;
  animation:lnDraw 2.2s cubic-bezier(.6,0,.3,1) .4s forwards}
body.tgo-division .lnovl .ln-gauge{stroke:#7FCFAE;stroke-width:1.6;stroke-dasharray:4 10;opacity:.8;animation:lnTurn 30s linear infinite}
body.tgo-division .lnovl .ln-arc{stroke:#7FCFAE;stroke-width:5;stroke-linecap:round;stroke-dasharray:150 1700;opacity:.95;
  animation:lnTurn2 7s linear infinite}
body.tgo-division .lnovl .ln-x path{stroke:#fff;stroke-width:2;stroke-linecap:round}
body.tgo-division .lnovl .ln-x circle{fill:#7FCFAE;stroke:none}
body.tgo-division .lnovl .ln-t path{stroke:#EAFFF6;stroke-width:1.8;stroke-linecap:round;opacity:0;animation:lnIn .6s ease 2.3s forwards}
@keyframes lnDraw{to{stroke-dashoffset:0}}
@keyframes lnTurn{to{stroke-dashoffset:-140}}
@keyframes lnTurn2{to{stroke-dashoffset:-1850}}
@keyframes lnIn{to{opacity:.9}}
body.tgo-division .mx .mx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
body.tgo-division .mx .mx-head .lede{max-width:56ch}
body.tgo-division .mx-nav{display:flex;align-items:center;gap:10px}
body.tgo-division .mx-count{font:600 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted,#4D6A70);
  margin-inline-end:6px;font-variant-numeric:tabular-nums}
body.tgo-division .mx-count b{color:var(--ink,#0B2A31)}
body.tgo-division .mx-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #C9D7D6;background:#fff;color:var(--ink,#0B2A31);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
body.tgo-division .mx-nav button:hover{background:var(--ink,#0B2A31);color:#fff;border-color:var(--ink,#0B2A31)}
body.tgo-division .mx-nav button:focus-visible, body.tgo-division .mx-th:focus-visible, body.tgo-division .mx-stage:focus-visible{outline:2px solid var(--green,#3C9672);outline-offset:3px}
html[dir="rtl"] body.tgo-division .mx-nav svg{transform:scaleX(-1)}
body.tgo-division .mx-body{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;margin-top:26px}
body.tgo-division .mx-stage{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#08222A;isolation:isolate}
body.tgo-division .mx-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
body.tgo-division .mx-slide.on{opacity:1;pointer-events:auto}
body.tgo-division .mx-slide img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:0;aspect-ratio:auto}
body.tgo-division .mx-slide .mx-bg{object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.1);transform:scale(1.15)}
body.tgo-division .mx-slide .mx-img{object-fit:contain;transform:scale(1.04);transition:transform 6.5s ease-out}
body.tgo-division .mx-slide.on .mx-img{transform:scale(1)}
body.tgo-division .mx-slide figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:56px 22px 20px;margin:0;
  background:linear-gradient(to top,rgba(7,28,34,.82),transparent);color:#fff;font-size:1rem;font-weight:600;line-height:1.45}
body.tgo-division .mx-bar{position:absolute;inset-inline:0;inset-block-start:0;height:3px;background:rgba(255,255,255,.14);z-index:2}
body.tgo-division .mx-bar i{display:block;height:100%;width:0;background:var(--mint,#7FCFAE)}
body.tgo-division .mx-rail{display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:100%}
body.tgo-division .mx-th{position:relative;flex:1 1 0;min-height:64px;border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  background:#08222A;opacity:.55;transition:opacity .25s ease}
body.tgo-division .mx-th img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;aspect-ratio:auto}
body.tgo-division .mx-th i{position:absolute;inset-block-start:8px;inset-inline-start:8px;font:600 .7rem/1 ui-monospace,Menlo,monospace;
  color:#fff;font-style:normal;background:rgba(7,28,34,.6);padding:4px 6px;border-radius:4px}
body.tgo-division .mx-th:hover{opacity:.85}
body.tgo-division .mx-th.on{opacity:1;box-shadow:inset 0 0 0 3px var(--mint,#7FCFAE)}
body.tgo-division .mx-th picture{display:block;width:100%;height:100%}
@media(max-width:900px){
  body.tgo-division .mx-body{grid-template-columns:1fr}
  body.tgo-division .mx-stage{aspect-ratio:4/3}
  body.tgo-division .mx-rail{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  body.tgo-division .mx-th{flex:0 0 96px;height:72px;scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .lnovl *{animation:none!important;stroke-dashoffset:0!important}
  body.tgo-division .lnovl .ln-t path{opacity:.9}
  body.tgo-division .mx-slide, body.tgo-division .mx-slide .mx-img, body.tgo-division .mx-th{transition:none}
  body.tgo-division .mx-bar{display:none}
}
/* mech-r2:end */
/* ---- the wide strip: one photograph, edge to edge ------------------------
   16:6 because that is the shape the division pages already use for a full
   width picture, and because the client's panoramic frames are 2.16:1 - they
   land in it with almost nothing thrown away. */
body.tgo-division .smband{position:relative;aspect-ratio:16/6;min-height:240px;display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden}
body.tgo-division .smband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-division .smband .bscrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(11,42,49,.90) 0%,rgba(11,42,49,.52) 30%,rgba(11,42,49,.05) 62%,
    rgba(11,42,49,0) 100%)}
body.tgo-division .smband .wrap{position:relative;z-index:2;padding-block:clamp(22px,3vw,40px);color:#fff}
body.tgo-division .smband h2{font-size:clamp(1.2rem,2.2vw,1.85rem);font-weight:700;letter-spacing:-.022em;margin-bottom:7px}
body.tgo-division .smband p{color:#CFE2E2;max-width:54ch;line-height:1.6;font-size:.98rem}
@media(max-width:700px){body.tgo-division .smband{aspect-ratio:4/3;min-height:0}}
/* ---- the fleet rail ------------------------------------------------------
   Nine photographs of the same white vehicles would be dull as a grid - you
   would see the repetition before you saw the work. A rail shows two or three
   at a time, so it reads as one operation in several places rather than nine
   pictures of a truck. It scrolls by drag, by wheel, by arrow key and by the
   two buttons; the bar underneath is the only thing that tells you how far
   along you are, so it is not decoration. */
body.tgo-division .smrail{background:#FBFBF9;padding-block:clamp(50px,7vw,96px);border-block-start:1px solid #E7ECEA}
body.tgo-division .smrhead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:24px}
body.tgo-division .smrhead .n.mono{color:#327C5E;letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
html[dir="rtl"] body.tgo-division .smrhead .n.mono{letter-spacing:0;font-family:inherit;font-size:.86rem}
body.tgo-division .smrhead h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:10px}
body.tgo-division .smrhead p{color:var(--muted);max-width:56ch;line-height:1.7}
body.tgo-division .smrnav{display:flex;gap:10px;flex:none;padding-block-end:4px}
body.tgo-division .smrnav button{inline-size:44px;block-size:44px;border-radius:50%;border:1px solid #D3DCD8;
  background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease}
body.tgo-division .smrnav button:hover:not(:disabled){background:#EEF3F1;border-color:#B9C8C3}
body.tgo-division .smrnav button:disabled{opacity:.34;cursor:default}
body.tgo-division .smrnav svg{inline-size:17px;block-size:17px;fill:none;stroke:currentColor;stroke-width:2}
html[dir="rtl"] body.tgo-division .smrnav svg{transform:scaleX(-1)}
body.tgo-division .smrtrack{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  padding-block-end:4px}
body.tgo-division .smrtrack::-webkit-scrollbar{display:none}
body.tgo-division .smrtrack figure{flex:0 0 clamp(236px,30vw,344px);scroll-snap-align:start;margin:0;
  position:relative;border-radius:16px;overflow:hidden;background:#E7ECEA;aspect-ratio:4/3}
body.tgo-division .smrtrack img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body.tgo-division .smrtrack figure:hover img{transform:scale(1.045)}
body.tgo-division .smrtrack figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:46px 16px 14px;color:#fff;
  font:600 .7rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;
  background:linear-gradient(to top,rgba(11,42,49,.88),rgba(11,42,49,0))}
html[dir="rtl"] body.tgo-division .smrtrack figcaption{letter-spacing:0;text-transform:none;font-family:inherit;
  font-size:.88rem}
body.tgo-division .smrbar{block-size:3px;background:#E1E7E4;border-radius:3px;margin-block-start:20px;overflow:hidden}
body.tgo-division .smrbar i{display:block;block-size:100%;inline-size:22%;background:#327C5E;border-radius:3px;
  transform-origin:left center;transition:transform .16s linear}
html[dir="rtl"] body.tgo-division .smrbar i{transform-origin:right center}
@media(max-width:700px){
  body.tgo-division .smrhead{display:block}
  body.tgo-division .smrnav{display:none}
  body.tgo-division .smrtrack figure{flex-basis:78vw}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-division .smrtrack{scroll-behavior:auto}
  body.tgo-division .smrtrack img, body.tgo-division .smrbar i{transition:none}
}


/* ===== tgo-services ===== services +615 ===== */
body.tgo-services *{margin:0;padding:0;box-sizing:border-box}
body.tgo-services{
  --ink:#0B2A31; --deep:#12414B; --teal:#1E6C78; --green:#3C9672; --mint:#7FCFAE;
  --muted:#5B7178; --line:#DCE6E6; --line2:#EDF3F3; --paper:#F4F8F8; --white:#fff;
  --grad:linear-gradient(150deg,#1E6C78 0%,#2F8478 55%,#3C9672 100%);
  --f:'Inter','Carlito',system-ui,sans-serif;
  --fa:'IBM Plex Sans Arabic','FreeSans','DejaVu Sans',sans-serif;
  --wrap:1240px;
}
html[dir="rtl"] body.tgo-services{font-family:var(--fa)}
body.tgo-services{scroll-behavior:smooth}
body.tgo-services{font-family:var(--f);color:var(--ink);background:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased}
body.tgo-services .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:700px){body.tgo-services .wrap{padding:0 20px}}
body.tgo-services a{color:inherit;text-decoration:none}
body.tgo-services img{max-width:100%;display:block}
body.tgo-services .mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] body.tgo-services .mono{letter-spacing:0;font-size:.8rem}
/* ---------- utility bar ---------- */
body.tgo-services .util{background:var(--ink);color:#9FB6BC;font-size:.78rem}
body.tgo-services .util .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:20px}
body.tgo-services .util .certs{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
body.tgo-services .util .certs b{color:#CFE2E2;font-weight:600}
body.tgo-services .util .certs i{font-style:normal;color:var(--mint)}
body.tgo-services .lang{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--deep);font-family:var(--f);font-size:.9rem;font-weight:700;padding:11px 18px;
  border-radius:6px;cursor:pointer;transition:.2s;white-space:nowrap}
body.tgo-services .lang:hover{border-color:var(--teal);color:var(--teal);background:#F7FBFA}
body.tgo-services .lang svg{flex:none;opacity:.75}
/* ---------- track record ---------- */
body.tgo-services .sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.tgo-services .sectors span{font-size:.86rem;font-weight:600;color:var(--deep);background:#fff;
  border:1px solid var(--line);padding:8px 15px;border-radius:99px}
body.tgo-services .recline{margin-top:26px;display:inline-flex;align-items:center;gap:9px;color:var(--teal);
  font-weight:700;font-size:.95rem}
body.tgo-services .recline svg{transition:transform .22s}
body.tgo-services .recline:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-services .recline svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-services .recline:hover svg{transform:scaleX(-1) translateX(4px)}
/* ---------- coverage map ----------
   Deliberately schematic. A survey graticule with points plotted on it, not a
   drawn coastline: a wrong outline of Oman would be worse than no map, and a
   plotted grid is what this company's own drawings look like. */
body.tgo-services .cov{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
@media(max-width:940px){body.tgo-services .cov{grid-template-columns:1fr;gap:34px}}
body.tgo-services .covmap{background:#08222A;border-radius:16px;overflow:hidden;direction:ltr;
  box-shadow:0 30px 70px -50px rgba(8,34,42,.9)}
body.tgo-services .covkey{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:.85rem;color:var(--muted)}
body.tgo-services .covkey span{display:inline-flex;align-items:center}
body.tgo-services .covkey i{display:inline-block;width:11px;height:11px;margin-inline-end:9px;flex:0 0 auto}
body.tgo-services .covkey .k1 i{background:#fff;border:2px solid var(--mint);border-radius:50%}
body.tgo-services .covkey .k2 i{background:var(--mint)}
body.tgo-services .covkey .k3 i{border:2px solid #CBDEDB;border-radius:50%}
/* ---------- coverage sheet ----------
   Boundaries from Natural Earth, public domain. Drawn as a survey sheet:
   exact graticule, corner ticks, tracked labels, crosshair over the head office. */
body.tgo-services .covmap svg{width:100%;height:auto;display:block}
/* on a phone the map is about a third the size; the secondary city names collide,
   so they drop out and the office markers carry the map. The dots stay, so the
   "Project site" key in the legend still points at something visible. */
@media(max-width:640px){body.tgo-services .covmap .lab-site, body.tgo-services .covmap .lab-sea{display:none}}
body.tgo-services .covmap .sea{fill:#08222A}
body.tgo-services .covmap .ctx path{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-services .covmap .off path{fill:#17444F;stroke:#2F6E7B;stroke-width:12}
body.tgo-services .covmap .home path{fill:#23705E;stroke:var(--mint);stroke-width:20}
body.tgo-services .covmap text{font-family:var(--f)}
html[dir="rtl"] body.tgo-services .covmap .lab-hq, html[dir="rtl"] body.tgo-services .covmap .lab-off, html[dir="rtl"] body.tgo-services .covmap .lab-site, html[dir="rtl"] body.tgo-services .covmap .lab-sub{
  font-family:var(--fa);letter-spacing:0;text-transform:none}
body.tgo-services .covmap .lab-hq{font-size:250px;font-weight:800;fill:#fff;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.8;stroke-width:34px;stroke-linejoin:round}
body.tgo-services .covmap .lab-off{font-size:180px;font-weight:600;fill:#D3E6E4;letter-spacing:20px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.7;stroke-width:26px;stroke-linejoin:round}
body.tgo-services .covmap .lab-site{font-size:158px;font-weight:600;fill:#A9C6C4;letter-spacing:14px;text-transform:uppercase;
  paint-order:stroke fill;stroke:#08222A;stroke-opacity:.75;stroke-width:26px;stroke-linejoin:round}
body.tgo-services .covmap .lab-sub{font-size:150px;font-weight:500;fill:var(--mint);fill-opacity:.72;letter-spacing:16px;
  text-transform:uppercase}
body.tgo-services .covmap .insea{fill:#061A20}
body.tgo-services .covmap .inland{fill:#0E2B33;stroke:#1A3C45;stroke-width:11}
body.tgo-services .covmap .inhome{fill:#23705E;stroke:var(--mint);stroke-width:16}
body.tgo-services .covmap .insframe{fill:none;stroke:var(--mint);stroke-opacity:.30;stroke-width:12}
body.tgo-services .covmap .lab-sea{font-size:132px;font-weight:500;fill:var(--mint);fill-opacity:.5;
  letter-spacing:12px;text-transform:uppercase}
html[dir="rtl"] body.tgo-services .covmap .lab-sea{font-family:var(--fa);letter-spacing:0;text-transform:none}
@media(max-width:820px){body.tgo-services .covmap .lab-sea{font-size:190px}}
body.tgo-services .covmap .dot-off{fill:var(--mint)}
body.tgo-services .covmap .dot-site{fill:none;stroke:#A9C6C4;stroke-width:26}
body.tgo-services .covmap .leader{fill:none;stroke:var(--mint);stroke-opacity:.4;stroke-width:10;stroke-dasharray:34 34}
body.tgo-services .covmap .hq .halo{fill:var(--mint);fill-opacity:.12}
body.tgo-services .covmap .hq .ring{fill:none;stroke:var(--mint);stroke-opacity:.8;stroke-width:16}
body.tgo-services .covmap .hq .core{fill:#fff}
@media(max-width:820px){
  body.tgo-services .covmap .lab-hq{font-size:330px}
  body.tgo-services .covmap .lab-off{font-size:250px;letter-spacing:12px}
  body.tgo-services .covmap .lab-site{font-size:230px;letter-spacing:8px}
  body.tgo-services .covmap .lab-sub{font-size:210px}
}
/* ---------- what we need to quote ---------- */
body.tgo-services .askrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:30px}
@media(max-width:760px){body.tgo-services .askrow{grid-template-columns:1fr}}
body.tgo-services .ask{background:#fff;border:1px solid var(--line);padding:26px 26px 28px}
body.tgo-services .ask b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:10px}
html[dir="rtl"] body.tgo-services .ask b{letter-spacing:0}
body.tgo-services .ask h3{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
html[dir="rtl"] body.tgo-services .ask h3{letter-spacing:0}
body.tgo-services .ask p{font-size:.93rem;color:var(--muted);line-height:1.55}
body.tgo-services .askfoot{margin-top:22px;font-size:.95rem;color:var(--muted)}
/* ---------- client logo wall ----------
   default state: flat and quiet, so the wall reads as one object.
   hover: the strip stops and the logo under the cursor comes back to life. */
body.tgo-services .marq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
body.tgo-services .marq-track{display:flex;align-items:center;width:max-content;animation:mscroll 40s linear infinite}
body.tgo-services .lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:104px;padding:0 32px;position:relative}
body.tgo-services .lg img, body.tgo-services .lg svg{max-height:74px;width:auto;max-width:200px;object-fit:contain;
  /* v4.4 (13 Oct 2026): in full colour, as TGO asked, so every client is
     recognisable at a glance (they were grey until hovered) */
  filter:none;opacity:1;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease}
body.tgo-services .lg:hover img, body.tgo-services .lg:hover svg{filter:none;opacity:1;transform:scale(1.06)}
body.tgo-services .lg::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.28}
/* Pause on hover is a mouse affordance, so it must be fenced behind a real
   pointer. A touchscreen synthesises :hover on tap and keeps it applied
   until the reader taps elsewhere, so an unfenced rule froze the strip
   wherever a scrolling finger happened to cross it. */
@media(hover:hover){body.tgo-services .marq:hover .marq-track{animation-play-state:paused}}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] body.tgo-services .marq-track{animation-name:mscrollR}
@keyframes mscrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* no hover on a touch screen, so show them properly there */
@media(hover:none){body.tgo-services .lg img, body.tgo-services .lg svg{filter:none;opacity:1}
  body.tgo-services .lg:hover img, body.tgo-services .lg:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){body.tgo-services .marq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
@media(max-width:700px){body.tgo-services .marq-track span{font-size:.92rem;padding:0 20px}}
/* ---------- motion ---------- */
body.tgo-services .hero .art{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,10px,0) scale(1.035)}}
body.tgo-services .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{r:7;opacity:.9}70%{r:26;opacity:0}100%{r:7;opacity:0}}
body.tgo-services .ring{animation:ringfade 8s ease-in-out infinite alternate}
@keyframes ringfade{from{opacity:.28}to{opacity:.62}}
body.tgo-services .fig b{transition:none}
@media(prefers-reduced-motion:reduce){body.tgo-services .marq-track, body.tgo-services .hero .art, body.tgo-services .pulse, body.tgo-services .ring{animation:none!important}}
/* ---------- header ---------- */
body.tgo-services header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.tgo-services nav{display:flex;align-items:center;gap:34px;height:96px}
body.tgo-services .logo img{width:205px;height:auto}
body.tgo-services .nav-links{display:flex;gap:26px;margin-inline-start:auto}
/* ---- the Services menu ---------------------------------------------------
   Services used to be a link to an index you then had to scroll. It is now a
   button that opens the six divisions where you already are, with the index
   itself kept as the last entry for anyone who wants the whole page.

   Closed, the panel is visibility:hidden rather than just transparent, so a
   screen reader and the Tab key skip it. The visibility transition is delayed
   on the way out and instant on the way in; the other way round, the panel
   would be unclickable for the length of the fade. */
body.tgo-services .navitem{position:relative;display:inline-flex;align-items:center}
body.tgo-services .nav-svc{font:inherit;font-size:.92rem;font-weight:500;color:var(--deep);background:none;
  border:0;margin:0;padding:4px 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:6px}
body.tgo-services .nav-svc .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:transform .2s ease}
body.tgo-services .navitem.open .nav-svc .chev{transform:rotate(180deg)}
body.tgo-services .nav-svc::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-services .nav-svc:hover::after, body.tgo-services .navitem.open .nav-svc::after{transform:scaleX(1)}
body.tgo-services .navsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;z-index:70;
  min-width:254px;margin:0;padding:8px;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(11,42,49,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
body.tgo-services .navitem.open>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
body.tgo-services .navsub li{margin:0}
body.tgo-services .navsub a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;
  color:var(--deep);white-space:nowrap}
body.tgo-services .navsub a::after{display:none}
body.tgo-services .navsub a:hover{background:#EDF3F1}
body.tgo-services .navall{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
body.tgo-services .navall a{font-size:.84rem;color:var(--muted);font-weight:500}
@media(hover:hover) and (min-width:961px){
  /* a transparent bridge across the gap, or the panel closes on the way to it */
  body.tgo-services .navitem::after{content:"";position:absolute;inset-inline:-16px;top:100%;height:16px}
  body.tgo-services .navitem:hover>.navsub{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  /* Escape, or a second click on Services, has to win against the pointer that
     is still sitting on the button - otherwise the panel refuses to shut until
     the mouse wanders off. .shut lasts until the pointer leaves. */
  body.tgo-services .navitem.shut:hover>.navsub{opacity:0;visibility:hidden;transform:translateY(-6px);
    pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
}
@media(max-width:960px){
  body.tgo-services .navitem{display:block;position:static;width:100%}
  body.tgo-services .nav-svc{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  body.tgo-services .nav-svc::after{display:none}
  body.tgo-services .navitem::after{display:none}
  body.tgo-services .navsub{position:static;min-width:0;display:none;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;transition:none;background:#F1F6F4;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 8px}
  body.tgo-services .navitem.open>.navsub{display:block}
  body.tgo-services .navsub a{border-radius:0;font-size:.95rem;padding-block:12px;
    padding-inline-start:40px;padding-inline-end:24px}
  body.tgo-services .navall{margin-top:0;border-top-color:#DCE6E6}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-services .navsub, body.tgo-services .nav-svc .chev{transition:none}
}
body.tgo-services .nav-links a{font-size:.92rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0}
body.tgo-services .nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:inherit;transition:transform .25s}
body.tgo-services .nav-links a:hover::after{transform:scaleX(1)}
body.tgo-services .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;transition:.22s;cursor:pointer;
  font-family:inherit}
body.tgo-services .btn.p{background:var(--grad);color:#fff}
body.tgo-services .btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.tgo-services .btn.g{border-color:var(--line);color:var(--deep);background:#fff}
body.tgo-services .btn.g:hover{border-color:var(--teal);color:var(--teal)}
body.tgo-services .btn.w{background:#fff;color:var(--deep)}
body.tgo-services .btn.o{border-color:rgba(255,255,255,.35);color:#fff}
body.tgo-services .btn.o:hover{background:rgba(255,255,255,.1)}
@media(max-width:960px){body.tgo-services nav .btn{margin-inline-start:0}}
@media(max-width:640px){body.tgo-services .logo{flex:0 0 auto}body.tgo-services .logo img{width:150px}body.tgo-services nav{height:76px;gap:12px}body.tgo-services nav .btn{display:none}}
/* ---------- hero ---------- */
body.tgo-services .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:92px 0 0}
body.tgo-services .hero .art{position:absolute;inset:0;opacity:.5}
body.tgo-services .hero .wrap{position:relative}
body.tgo-services .eyebrow{color:var(--mint);margin-bottom:22px}
body.tgo-services .hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;margin-bottom:24px}
html[dir="rtl"] body.tgo-services .hero h1{letter-spacing:0;line-height:1.3}
body.tgo-services .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-services .hero p.lede{font-size:1.12rem;color:#B7CCD1;max-width:56ch;margin-bottom:34px}
body.tgo-services .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
body.tgo-services .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14)}
body.tgo-services .fig{background:var(--ink);padding:30px 26px 34px}
body.tgo-services .fig b{direction:ltr;unicode-bidi:isolate;display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:8px}
body.tgo-services .fig span{font-size:.82rem;color:#8FA9B0;display:block;line-height:1.4}
/* In Arabic the caption flows right-to-left while the figure itself is forced LTR,
   so the two used to sit on opposite edges of the cell. Centring the pair keeps the
   number over its own caption. */
html[dir="rtl"] body.tgo-services .fig{text-align:center}
html[dir="rtl"] body.tgo-services .fig b{text-align:center}
@media(max-width:900px){body.tgo-services .figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body.tgo-services .hero{padding-top:56px}body.tgo-services .hero-cta{margin-bottom:46px}body.tgo-services .fig{padding:22px 18px 24px}
  body.tgo-services .fig b{font-size:1.9rem}}
/* ---------- clients ---------- */
body.tgo-services .clients{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0}
body.tgo-services .clients .lbl{color:var(--muted);margin-bottom:20px;text-align:center}
body.tgo-services .cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
body.tgo-services .cl-row span{font-weight:700;font-size:1.02rem;color:#5E787E;letter-spacing:-.01em;
  white-space:nowrap}
@media(max-width:700px){body.tgo-services .cl-row span{font-size:.9rem}body.tgo-services .cl-row{gap:12px 22px}}
/* ---------- sections ---------- */
body.tgo-services section.pad{padding:96px 0}
@media(max-width:760px){body.tgo-services section.pad{padding:64px 0}}
body.tgo-services .sec-head{margin-bottom:52px;max-width:62ch}
body.tgo-services .sec-head .n{color:var(--green);margin-bottom:14px}
body.tgo-services .sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:16px}
html[dir="rtl"] body.tgo-services .sec-head h2{letter-spacing:0;line-height:1.35}
body.tgo-services .sec-head p{color:var(--muted);font-size:1.05rem}
/* divisions */
body.tgo-services .divs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){body.tgo-services .divs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.tgo-services .divs{grid-template-columns:1fr}}
body.tgo-services .div-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px 32px;
  transition:.25s;position:relative;overflow:hidden;background:#fff}
body.tgo-services .div-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
body.tgo-services .div-card:hover{border-color:#BFD6D6;transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(11,42,49,.5)}
body.tgo-services .div-card:hover::before{transform:scaleY(1)}
body.tgo-services .div-card .ic{width:44px;height:44px;border-radius:9px;background:#EAF4F1;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--teal)}
body.tgo-services .div-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
body.tgo-services .div-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
body.tgo-services .div-card .more{font-size:.84rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:6px}
body.tgo-services .div-card .more svg{transition:transform .25s}
body.tgo-services .div-card:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] body.tgo-services .div-card:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] body.tgo-services .div-card .more svg{transform:scaleX(-1)}
/* EMF band */
body.tgo-services .band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-services .band .art2{position:absolute;inset:0;opacity:.28}
body.tgo-services .band .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;
  align-items:center;padding:88px 32px}
@media(max-width:940px){body.tgo-services .band .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px}}
body.tgo-services .band .n{color:var(--mint);margin-bottom:14px}
body.tgo-services .band h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:18px}
html[dir="rtl"] body.tgo-services .band h2{letter-spacing:0;line-height:1.35}
body.tgo-services .band p{color:#B7CCD1;margin-bottom:14px}
body.tgo-services .bignum{direction:ltr;unicode-bidi:isolate;font-size:clamp(4rem,9vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff,var(--mint));-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.tgo-services .bignum + .cap{color:#9FB6BC;font-size:.95rem;margin-top:10px;max-width:34ch}
body.tgo-services .emf-list{list-style:none;margin-top:26px;display:grid;gap:12px}
body.tgo-services .emf-list li{display:flex;gap:12px;font-size:.96rem;color:#CFE2E2;align-items:flex-start}
body.tgo-services .emf-list svg{flex:none;margin-top:5px;color:var(--mint)}
/* project record */
body.tgo-services .rec{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
body.tgo-services .rec .rhead, body.tgo-services .rec .rrow{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .55fr;gap:20px;
  padding:16px 26px;align-items:center}
body.tgo-services .rec .rhead{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted)}
body.tgo-services .rec .rrow{border-bottom:1px solid var(--line2);font-size:.95rem}
body.tgo-services .rec .rrow:last-child{border-bottom:none}
body.tgo-services .rec .rrow b{font-weight:600}
body.tgo-services .rec .rrow .yr{color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
body.tgo-services .tag{display:inline-block;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;
  border-radius:99px;background:#EAF4F1;color:var(--teal);white-space:nowrap}
@media(max-width:860px){body.tgo-services .rec .rhead{display:none}
  body.tgo-services .rec .rrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}}
/* certifications */
body.tgo-services .certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
@media(max-width:820px){body.tgo-services .certgrid{grid-template-columns:1fr}}
body.tgo-services .cert{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;
  display:flex;gap:18px;align-items:flex-start}
body.tgo-services .cert .badge{width:52px;height:52px;flex:none;border-radius:10px;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;
  text-align:center;line-height:1.1}
body.tgo-services .cert b{display:block;font-size:1.02rem;margin-bottom:5px}
body.tgo-services .cert span{font-size:.88rem;color:var(--muted);display:block}
body.tgo-services .prequal{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 30px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.tgo-services .prequal p{font-size:.98rem;color:var(--deep);max-width:60ch}
/* offices */
body.tgo-services .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){body.tgo-services .offices{grid-template-columns:repeat(2,1fr)}}
body.tgo-services .off{border-top:2px solid var(--line);padding-top:18px}
body.tgo-services .off b{display:block;font-size:1.05rem;margin-bottom:4px}
body.tgo-services .off span{font-size:.88rem;color:var(--muted)}
body.tgo-services .off.hq{border-top-color:var(--green)}
/* CTA */
body.tgo-services .cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
body.tgo-services .cta .art3{position:absolute;inset:0;opacity:.4}
body.tgo-services .cta .wrap{position:relative;padding:88px 32px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:60px;align-items:center}
@media(max-width:940px){body.tgo-services .cta .wrap{grid-template-columns:1fr;gap:36px;padding:64px 24px}}
body.tgo-services .cta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:16px}
html[dir="rtl"] body.tgo-services .cta h2{letter-spacing:0;line-height:1.35}
body.tgo-services .cta p{color:#B7CCD1;margin-bottom:26px;max-width:48ch}
body.tgo-services .formcard{background:#fff;border-radius:14px;padding:28px}
body.tgo-services .formcard .fl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
body.tgo-services .formcard input, body.tgo-services .formcard textarea, body.tgo-services .formcard select{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;font-size:.95rem;margin-bottom:16px;
  background:#fff;color:var(--ink);font-family:inherit}
body.tgo-services .formcard textarea{min-height:82px;resize:vertical}
body.tgo-services .formcard input:focus, body.tgo-services .formcard textarea:focus, body.tgo-services .formcard select:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,108,120,.12)}
body.tgo-services .formcard .btn{width:100%;justify-content:center}
/* footer */
body.tgo-services footer{background:var(--ink);color:#8FA9B0;padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.1)}
body.tgo-services .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){body.tgo-services .ftop{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){body.tgo-services .ftop{grid-template-columns:1fr}}
body.tgo-services .ftop img{width:190px;height:auto;margin-bottom:20px}
body.tgo-services .ftop h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[dir="rtl"] body.tgo-services .ftop h4{letter-spacing:0}
body.tgo-services .ftop a, body.tgo-services .ftop p{display:block;font-size:.9rem;margin-bottom:9px;color:#8FA9B0}
body.tgo-services .ftop a:hover{color:var(--mint)}
body.tgo-services .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:.82rem}
body.tgo-services .dirltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
body.tgo-services .reveal{opacity:0;transform:translateY(18px)}
body.tgo-services .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-services *{animation:none!important;transition:none!important}
  body.tgo-services .reveal{opacity:1;transform:none}}
/* division cards carry the same photograph as their service page */
body.tgo-services .div-card{padding:0;overflow:hidden}
body.tgo-services .dphoto{aspect-ratio:16/6;overflow:hidden;background:var(--ink)}
body.tgo-services .dphoto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
body.tgo-services .div-card:hover .dphoto img{transform:scale(1.05)}
body.tgo-services .div-card h3, body.tgo-services .div-card p, body.tgo-services .div-card .more{margin-inline:30px}
body.tgo-services .div-card .ic{display:none}
body.tgo-services .div-card h3{margin-top:26px}
body.tgo-services .div-card .more{margin-bottom:28px}
/* mobile menu, matching the rest of the site */
body.tgo-services .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;color:var(--deep)}
body.tgo-services .burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
body.tgo-services .burger span::before, body.tgo-services .burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
body.tgo-services .burger span::before{top:-6px}
body.tgo-services .burger span::after{top:6px}
@media(max-width:960px){
  body.tgo-services .nav-links{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 20px 40px -30px rgba(11,42,49,.6)}
  body.tgo-services .nav-links.open{display:flex}
  body.tgo-services .nav-links a{padding:14px 24px;font-size:1rem}
  body.tgo-services .nav-links a::after{display:none}
  body.tgo-services .burger{display:inline-flex;margin-inline-start:auto}
  body.tgo-services nav{position:static}
  body.tgo-services header .wrap{position:relative}
}
/* phones: links in lists need a finger-sized target */
@media(max-width:700px){
  body.tgo-services .ftop a, body.tgo-services .ftop p{padding:7px 0;margin-bottom:2px}
  body.tgo-services .fbot a{display:inline-block;padding:9px 0}
  body.tgo-services .recline{padding:9px 0}
  body.tgo-services .sectors span{padding:10px 16px}
  body.tgo-services .covkey span{padding:5px 0}
}
body.tgo-services .util .certs .certs-sm{display:none}
@media(max-width:820px){
  body.tgo-services .util .certs > span{display:none}
  body.tgo-services .util .certs .certs-sm{display:inline-flex;gap:6px}
}
@media(max-width:760px){
  body.tgo-services footer a, body.tgo-services .fbot a, body.tgo-services .nav-links a, body.tgo-services .crumb a, body.tgo-services .fcols a, body.tgo-services .util a, body.tgo-services a.lang{
    display:inline-flex;align-items:center;min-height:40px}
  body.tgo-services .divs a, body.tgo-services .grid a.card{min-height:44px}
}
body.tgo-services .pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin-top:26px}
body.tgo-services .pt>div{background:#fff;border:1px solid var(--line);padding:26px 28px;display:flex;
  flex-direction:column;gap:13px;align-items:flex-start}
body.tgo-services .pt img{height:40px;width:auto;max-width:200px;object-fit:contain}
body.tgo-services .pt b{font-size:1rem;font-weight:700;color:var(--ink)}
body.tgo-services .pt span{font-size:.93rem;color:var(--muted);line-height:1.6}
html[dir="rtl"] body.tgo-services .pt>div{align-items:flex-start}
/* a phone-sized finger needs a 40px target; these links are often bare text runs */
@media(max-width:640px){body.tgo-services a[href^="mailto:"], body.tgo-services a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}}
/* ---------- hero video ---------- */
body.tgo-services .hero{min-height:min(88vh,780px);display:flex;flex-direction:column;padding-top:92px;background:var(--ink)}
body.tgo-services .hero>.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:44px}
body.tgo-services .hero-cta{margin-bottom:0}
body.tgo-services .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(11,42,49,.93) 0%,rgba(11,42,49,.74) 28%,
    rgba(11,42,49,.30) 58%,rgba(11,42,49,0) 84%),
    linear-gradient(to bottom,rgba(11,42,49,.46) 0%,rgba(11,42,49,0) 24%,
    rgba(11,42,49,0) 66%,rgba(11,42,49,.92) 100%)}
body.tgo-services .hero .art{z-index:3;opacity:.22}
body.tgo-services .hero .wrap{z-index:4}
body.tgo-services .hero h1 em{background:linear-gradient(118deg,#EAFFF6 0%,var(--mint) 62%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-services .hero h1{max-width:13ch;text-shadow:0 2px 26px rgba(11,42,49,.5)}
body.tgo-services .hero p.lede{color:#DCEAEC;max-width:46ch;text-shadow:0 1px 14px rgba(11,42,49,.6)}
body.tgo-services .eyebrow{text-shadow:0 1px 10px rgba(11,42,49,.65)}
body.tgo-services .figs{border-top:1px solid rgba(255,255,255,.18)}
body.tgo-services .fig{background:rgba(11,42,49,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ---------- division bands ---------- */
body.tgo-services .bands-head{padding-block:58px 26px}
body.tgo-services #record{padding-block:54px}
body.tgo-services #record .sec-head{margin-bottom:22px}
body.tgo-services .dband{position:relative;min-height:min(72vh,580px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
body.tgo-services .dband:nth-of-type(even){background:#0E333B}
/* Full bleed, but only across its own side. The photographs are square, so a
   strip spanning the whole width would slice the subject - which is exactly
   what took the top off the tower. Instead the image runs edge to edge on the
   side away from the copy and dissolves into the panel, so there is no card,
   no border, and nothing cropped. */
body.tgo-services .bmedia{position:absolute;top:-40px;bottom:-40px;width:58%;z-index:0;
  -webkit-mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to left,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-services .side-left .bmedia{right:0}
body.tgo-services .side-right .bmedia{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to right,#000 54%,rgba(0,0,0,.45) 80%,transparent 100%)}
body.tgo-services .bimg, body.tgo-services .bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The drawn layer must ride exactly the same drift as the photograph under it.
   Animating only the image pulled the traced roads off the real roads by a
   couple of hundred pixels at the far end of the cycle. */
body.tgo-services .bimg, body.tgo-services .bovl{animation:bdrift 34s ease-in-out infinite alternate;
  transform-origin:50% 50%;will-change:transform}
@keyframes bdrift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
body.tgo-services .bovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-services .dband .wrap{position:relative;z-index:3;width:100%}
body.tgo-services .bcopy{max-width:31rem}
body.tgo-services .side-right .bcopy{margin-inline-start:auto}
body.tgo-services .bcopy .n{color:var(--mint);margin-bottom:14px;letter-spacing:.14em;font-size:.72rem}
body.tgo-services .bcopy h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff;text-shadow:0 2px 18px rgba(7,28,34,.55)}
body.tgo-services .bcopy p{color:#C9DDE0;font-size:1.02rem;margin-bottom:18px;text-shadow:0 1px 12px rgba(7,28,34,.55)}
body.tgo-services .bstat{color:var(--mint);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:26px;padding-inline-start:14px;border-inline-start:2px solid var(--green)}
body.tgo-services .dband .btn.o{border-color:rgba(255,255,255,.5);color:#fff}
body.tgo-services .dband .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ---------- drawn overlays ---------- */
body.tgo-services .trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 6s ease-in-out infinite}
body.tgo-services .t2{animation-delay:.45s}
body.tgo-services .t3{animation-delay:.9s}
body.tgo-services .t4{animation-delay:1.35s}
body.tgo-services .t5{animation-delay:1.8s}
@keyframes draw{0%{stroke-dashoffset:2400}45%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
body.tgo-services .nodes circle, body.tgo-services .verts circle{opacity:0;animation:pop 6s ease-out infinite}
body.tgo-services .nodes circle:nth-child(2), body.tgo-services .verts circle:nth-child(2){animation-delay:.5s}
body.tgo-services .nodes circle:nth-child(3), body.tgo-services .verts circle:nth-child(3){animation-delay:1s}
body.tgo-services .nodes circle:nth-child(4){animation-delay:1.5s}
body.tgo-services .verts circle:nth-child(4){animation-delay:1.5s}
body.tgo-services .verts circle:nth-child(5){animation-delay:2s}
body.tgo-services .verts circle:nth-child(6){animation-delay:2.5s}
body.tgo-services .verts circle:nth-child(7){animation-delay:3s}
body.tgo-services .verts circle:nth-child(8){animation-delay:3.5s}
@keyframes pop{0%,18%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}
  86%{opacity:1}100%{opacity:0}}
body.tgo-services .rings circle{opacity:0;transform-origin:305px 230px;animation:ring 4.6s ease-out infinite}
body.tgo-services .rings circle:nth-child(2){animation-delay:1.15s}
body.tgo-services .rings circle:nth-child(3){animation-delay:2.3s}
body.tgo-services .rings circle:nth-child(4){animation-delay:3.45s}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
body.tgo-services .parcels path{opacity:0;fill-opacity:.3;animation:fill 7s ease-in-out infinite}
body.tgo-services .parcels path:nth-child(2){animation-delay:.6s}
body.tgo-services .parcels path:nth-child(3){animation-delay:1.2s}
body.tgo-services .parcels path:nth-child(4){animation-delay:1.8s}
body.tgo-services .parcels path:nth-child(5){animation-delay:2.4s}
@keyframes fill{0%,8%{opacity:0}26%{opacity:1}72%{opacity:1}100%{opacity:0}}
body.tgo-services .scan{fill:url(#scanG);opacity:.55;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-services .uts{fill:url(#uts);animation:sweep 5.5s linear infinite}
body.tgo-services .stock{fill:url(#stockg);animation:sweep 6.5s linear infinite}
body.tgo-services .brk g{opacity:0;animation:fill 6.5s ease-in-out infinite}
body.tgo-services .brk g:nth-child(2){animation-delay:1.1s}
body.tgo-services .glab text{opacity:0;animation:fill 7s ease-in-out infinite}
body.tgo-services .glab text:nth-child(2){animation-delay:.9s}
body.tgo-services .glab text:nth-child(3){animation-delay:1.8s}
body.tgo-services .contours path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 7s ease-in-out infinite}
body.tgo-services .contours path:nth-child(2){animation-delay:.4s}
body.tgo-services .contours path:nth-child(3){animation-delay:.8s}
body.tgo-services .pts g{stroke:#7FCFAE;stroke-width:2.4;fill:#7FCFAE;opacity:0;animation:pop 7s ease-out infinite}
body.tgo-services .pts g:nth-child(2){animation-delay:.7s}
body.tgo-services .pts g:nth-child(3){animation-delay:1.4s}
@media(max-width:900px){
  body.tgo-services .dband{min-height:auto;padding-block:300px 46px}
  body.tgo-services .bmedia{width:100%;bottom:auto;height:280px;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-services .side-right .bmedia{left:0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
    mask-image:linear-gradient(to top,transparent 0,#000 46%)}
  body.tgo-services .bcopy, body.tgo-services .side-right .bcopy{max-width:none;margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  body.tgo-services .hero .hv, body.tgo-services .bvid{display:none}
  body.tgo-services .bimg, body.tgo-services .bovl{animation:none}
  body.tgo-services .trace, body.tgo-services .nodes circle, body.tgo-services .verts circle, body.tgo-services .rings circle, body.tgo-services .parcels path, body.tgo-services .scan, body.tgo-services .uts, body.tgo-services .stock, body.tgo-services .brk g, body.tgo-services .glab text, body.tgo-services .contours path, body.tgo-services .pts g{animation:none;opacity:1;stroke-dashoffset:0}
}
body.tgo-services .vbadge{position:fixed;inset-block-end:14px;inset-inline-end:14px;z-index:99;
  font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,42,49,.86);color:#9FBCBB;border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;pointer-events:none}
/* ---------- traced routes ---------- */
body.tgo-services .route, body.tgo-services .route-under{fill:none;stroke-linecap:round;stroke-dasharray:2800;stroke-dashoffset:2800}
body.tgo-services .route-under{stroke:rgba(7,28,34,.5);stroke-width:8;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-services .route{stroke:var(--mint);stroke-width:3.2;animation:routedraw 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes routedraw{
  0%{stroke-dashoffset:2800;opacity:0} 5%{opacity:.95}
  44%{stroke-dashoffset:0;opacity:.95} 80%{stroke-dashoffset:0;opacity:.95}
  93%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:2800;opacity:0}}
body.tgo-services .runner{fill:#EAFFF6;opacity:0;animation:run 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0} 5%{opacity:1}
  44%{offset-distance:100%;opacity:1} 52%{opacity:0} 100%{offset-distance:100%;opacity:0}}
@supports not (offset-path: path("M0 0 L1 1")){ body.tgo-services .runner{display:none} }
body.tgo-services .hovl .runA{offset-path:path("M -30 655 C 300 625, 620 594, 900 558 C 1080 536, 1300 470, 1640 396")}
body.tgo-services .hovl .runB{offset-path:path("M 940 -30 C 980 140, 1032 300, 1100 470 C 1162 618, 1232 762, 1310 930")}
body.tgo-services .hovl .rB, body.tgo-services .hovl .rBu, body.tgo-services .hovl .runB{animation-delay:1.9s}
body.tgo-services .cadovl .runA{offset-path:path("M -20 690 C 280 648, 540 600, 800 556 C 1060 512, 1250 482, 1460 452")}
body.tgo-services .cadovl .runB{offset-path:path("M 360 -20 C 500 190, 650 390, 800 556 C 950 720, 1110 880, 1250 1030")}
body.tgo-services .cadovl .rB, body.tgo-services .cadovl .runB{animation-delay:1.6s}
/* nodes fire as the light reaches them */
body.tgo-services .nd .ring{fill:none;stroke:var(--mint);stroke-width:2.2;opacity:0;transform-origin:center}
body.tgo-services .nd .dot{fill:#EAFFF6;opacity:0;transform-origin:center}
body.tgo-services .nd .ring{animation:ndring 11s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-services .nd .dot{animation:nddot 11s ease-out infinite}
@keyframes ndring{0%,10%{opacity:0;transform:scale(.2)} 16%{opacity:.85;transform:scale(1)}
  30%{opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)}}
@keyframes nddot{0%,10%{opacity:0;transform:scale(.3)} 16%{opacity:1;transform:scale(1)}
  80%{opacity:1} 93%{opacity:0} 100%{opacity:0}}
body.tgo-services .n1 .ring, body.tgo-services .n1 .dot{animation-delay:1.1s}
body.tgo-services .n2 .ring, body.tgo-services .n2 .dot{animation-delay:2.4s}
body.tgo-services .n3 .ring, body.tgo-services .n3 .dot{animation-delay:3.6s}
body.tgo-services .n4 .ring, body.tgo-services .n4 .dot{animation-delay:2.9s}
body.tgo-services .n5 .ring, body.tgo-services .n5 .dot{animation-delay:4.4s}
/* the original sheet declares .reveal without a duration, so the class swap
   popped instead of fading */
body.tgo-services .reveal{transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
body.tgo-services .reveal.in{opacity:1;transform:none}
/* ---------- hero, now a still ---------- */
body.tgo-services .hero .hlayer{position:absolute;inset:-6% -4%;z-index:0;will-change:transform}
body.tgo-services .hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-services .hovl{position:absolute;inset:0;width:100%;height:100%}
body.tgo-services .hero .art{z-index:3;opacity:.16}
@media(prefers-reduced-motion:reduce){
  body.tgo-services .route, body.tgo-services .route-under, body.tgo-services .runner, body.tgo-services .nd .ring, body.tgo-services .nd .dot{animation:none;stroke-dashoffset:0;opacity:1}
  body.tgo-services .nd .ring{opacity:.5}
}
/* ---------- full-height hero ---------- */
body.tgo-services .hero{min-height:calc(100vh - 176px);min-height:calc(100svh - 176px);
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0}
body.tgo-services .hero>.hero-copy{flex:0 0 auto;display:block;padding-top:clamp(48px,9vh,110px);padding-bottom:0}
body.tgo-services .hero .hlayer{inset:-2% -2%}
/* the headline carries the weight change the reference site uses: a light
   first line, a heavy second. Our sentence happens to break exactly there. */
body.tgo-services .hero h1{max-width:none;margin-bottom:26px;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.6vw,4.6rem);text-shadow:0 2px 30px rgba(7,28,34,.55)}
body.tgo-services .hero h1 .l1{display:block;font-weight:300;color:#fff}
body.tgo-services .hero h1 .l2{display:block;font-weight:800;
  background:linear-gradient(112deg,#fff 6%,var(--mint) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tgo-services .hero p.lede{max-width:42ch}
/* the scrim now has to work under text sitting high and left */
body.tgo-services .hero .scrim{background:
  linear-gradient(to right,rgba(7,28,34,.72) 0%,rgba(7,28,34,.50) 36%,
    rgba(7,28,34,.16) 64%,rgba(7,28,34,.02) 100%),
  linear-gradient(to bottom,rgba(7,28,34,.60) 0%,rgba(7,28,34,.22) 36%,
    rgba(7,28,34,.14) 70%,rgba(7,28,34,.52) 100%)}
body.tgo-services{--cue-x:26px}
/* physical offsets here on purpose: writing-mode:vertical-rl rotates the inline
   axis, so inset-inline-end resolves to the bottom and the cue lands in the
   wrong corner. The RTL case is handled explicitly below. */
body.tgo-services .scrollcue{position:absolute;right:var(--cue-x);bottom:30px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);writing-mode:vertical-rl}
html[dir="rtl"] body.tgo-services .scrollcue{right:auto;left:var(--cue-x)}
body.tgo-services .scrollcue i{display:block;width:1px;height:54px;background:linear-gradient(to bottom,
  rgba(255,255,255,.1),rgba(255,255,255,.75));position:relative;overflow:hidden}
body.tgo-services .scrollcue i::after{content:"";position:absolute;inset-inline:0;top:-54px;height:54px;
  background:linear-gradient(to bottom,transparent,var(--mint));
  animation:cue 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(108px)}}
/* the figures leave the hero and become their own quiet strip */
body.tgo-services .figstrip{background:var(--ink);border-block:1px solid rgba(255,255,255,.12)}
body.tgo-services .figstrip .figs{border-top:0}
body.tgo-services .figstrip .fig{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:820px){
  body.tgo-services .hero{min-height:auto;padding-top:0}
  body.tgo-services .hero>.hero-copy{padding-top:56px;padding-bottom:64px}
  body.tgo-services .scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){body.tgo-services .scrollcue i::after{animation:none}}
/* ---------- new logo: sized by height, with clearance in the bar ---------- */
/* The old rule set a width and let the height fall where it fell, which put a
   103px image inside a 96px bar. Height-first cannot overflow. */
/* The mark is 2:1, so height drives width: 88px tall reads at 176px wide,
   close to the presence the old lockup had at 205px - but sized by height it
   cannot outgrow its bar the way the old rule did. */
body.tgo-services .logo img{width:auto;height:88px;display:block}
body.tgo-services nav{height:124px}
@media(max-width:900px){body.tgo-services .logo img{height:64px}body.tgo-services nav{height:96px}}
@media(max-width:640px){body.tgo-services .logo img{height:52px}body.tgo-services nav{height:82px}}
body.tgo-services .ftop img{width:auto;height:88px;display:block;margin-bottom:20px}
@media(max-width:640px){body.tgo-services .ftop img{height:68px}}
/* ---------- marquee: keep it on the GPU and inside the texture cap -------- */
body.tgo-services .marq-track{will-change:transform;backface-visibility:hidden}
@keyframes mscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
@media(max-width:820px){
  body.tgo-services .marq-track{animation-duration:26s}
  body.tgo-services .lg{height:74px;padding:0 20px}
  body.tgo-services .lg img, body.tgo-services .lg svg{max-height:46px;max-width:120px}
}
/* ---------- coverage map: centred, same width as the bands above ---------- */
/* The wrap is left at its default 1240px so this section lines up exactly with
   every other band on the page. One column, centred, map at full wrap width. */
body.tgo-services #offices{padding-block:clamp(56px,7vw,92px)}
body.tgo-services #offices .cov{display:block;text-align:center}
body.tgo-services #offices .cov>*{width:100%}
body.tgo-services #offices .cov h2{margin-inline:auto;max-width:24ch}
body.tgo-services #offices .cov p{margin-inline:auto;max-width:70ch}
body.tgo-services #offices .covkey{justify-content:center;margin-bottom:30px}
body.tgo-services #offices .covmap{margin-inline:auto}
body.tgo-services #offices .covmap svg{width:100%;height:auto;display:block}
@media(min-width:1100px){body.tgo-services #offices .cov{grid-template-columns:none}}
/* ---------- technology partners ---------- */
body.tgo-services .tp{background:#fff;border-top:1px solid var(--line);padding-block:clamp(50px,7vw,88px)}
body.tgo-services .tp .n{color:var(--green);letter-spacing:.18em;font-size:.72rem;margin-bottom:14px}
body.tgo-services .tp h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;color:var(--ink)}
body.tgo-services .tp .lede{color:var(--muted);max-width:58ch;line-height:1.7;margin-bottom:34px}
body.tgo-services .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
body.tgo-services .tpgrid article{background:#fff;padding:26px 24px 30px}
body.tgo-services .tpgrid b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
body.tgo-services .tpgrid .role{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:10px;display:block}
body.tgo-services .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.6}
/* ---- language switch ------------------------------------------------------
   The site carries Arabic on every string but had no way to reach it except a
   hand-typed ?lang=ar. This is that switch. */
body.tgo-services .langbtn{font:inherit;font-size:.76rem;font-weight:600;line-height:1;color:#CFE0E3;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
body.tgo-services .langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
body.tgo-services .langbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:640px){body.tgo-services .langbtn{padding:5px 11px;font-size:.72rem}}
/* ---- division bands: the whole panel is the link ------------------------- */
body.tgo-services .bcopy-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:transform .35s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){body.tgo-services .bcopy-link:hover{transform:translateY(-3px)}}
body.tgo-services .bcopy-link:focus-visible{outline:2px solid var(--mint);outline-offset:8px;border-radius:8px}
body.tgo-services .bgo{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:.95rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.4);padding-bottom:4px}
body.tgo-services .bgo svg{transition:transform .25s ease}
@media(hover:hover){body.tgo-services .bcopy-link:hover .bgo{border-color:var(--mint);color:var(--mint)}
  body.tgo-services .bcopy-link:hover .bgo svg{transform:translateX(5px)}}
html[dir="rtl"] body.tgo-services .bcopy-link:hover .bgo svg{transform:translateX(-5px)}
/* ---- technology partners: a card grid with room for the mark ------------- */
body.tgo-services .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;background:none;border:0}
body.tgo-services .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 30px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
@media(hover:hover){body.tgo-services .tpgrid article:hover{border-color:#BFD6D0;transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,42,49,.55)}}
body.tgo-services .tplogo{height:56px;display:flex;align-items:center;margin-bottom:20px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-services .tplogo img{max-height:40px;width:auto;object-fit:contain}
body.tgo-services .tplogo .mark{display:inline-flex;align-items:center;gap:10px}
body.tgo-services .tplogo .mark i{width:34px;height:34px;border-radius:9px;background:#EAF3F0;color:var(--teal);
  display:grid;place-items:center;font:800 .82rem/1 var(--f);font-style:normal;letter-spacing:.02em}
body.tgo-services .tplogo .mark b{font:700 1.06rem/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
body.tgo-services .tpgrid .role{font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
body.tgo-services .tpgrid span.d{color:var(--muted);font-size:.95rem;line-height:1.65}
body.tgo-services .tpnote{margin-top:26px;font-size:.9rem;color:var(--muted)}
body.tgo-services .tplink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.86rem;
  font-weight:600;color:var(--teal);text-decoration:none;align-self:flex-start}
body.tgo-services .tplink svg{transition:transform .22s ease}
body.tgo-services .tplink:hover{color:var(--deep)}
body.tgo-services .tplink:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-services .tplink:hover svg{transform:translateX(-4px)}
body.tgo-services .tpgrid article .d{flex:1}
body.tgo-services .bands-head{padding-block:clamp(52px,7vw,92px) clamp(26px,3vw,40px)}
body.tgo-services .bands-head .sec-head p{max-width:56ch}
/* ---- technology partners: the marks, the names, and not much else -------- */
body.tgo-services .tpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:18px;background:none;border:0}
body.tgo-services .tpgrid article{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
body.tgo-services .tplogo{height:62px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-services .tplogo img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
html[dir="rtl"] body.tgo-services .tplogo img{object-position:right center}
body.tgo-services .tpgrid b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:6px}
body.tgo-services .tpgrid span.d{color:var(--muted);font-size:.93rem;line-height:1.6}
/* ---- section eyebrows: readable, not decorative ------------------------- */
body.tgo-services .mono{font-size:.84rem;letter-spacing:.13em}
html[dir="rtl"] body.tgo-services .mono{letter-spacing:0;font-size:.92rem}
body.tgo-services .n.mono, body.tgo-services .sec-head .n, body.tgo-services .band .n, body.tgo-services .bcopy .n, body.tgo-services .tp .n, body.tgo-services .lsec .n, body.tgo-services .pj-head .n, body.tgo-services .sv-head .n, body.tgo-services .dp-hero .n{
  font-size:.84rem;letter-spacing:.13em}
body.tgo-services .util .certs{font-size:.8rem}
body.tgo-services .bstat.mono{font-size:.82rem;letter-spacing:.1em}
body.tgo-services .svnum{font-size:.82rem;letter-spacing:.2em}
@media(max-width:640px){body.tgo-services .mono, body.tgo-services .n.mono{font-size:.78rem}}
body.tgo-services .tplogo{height:74px;display:flex;align-items:center;margin-bottom:18px;
  padding-bottom:18px;border-block-end:1px solid var(--line2)}
body.tgo-services .tplogo img{height:auto;max-width:100%;max-height:56px;object-fit:contain;object-position:left center}
/* ---- technology partners: dark band, white chips ---- */
body.tgo-services .tp{background:var(--ink);border-block-start:0;position:relative;overflow:hidden}
body.tgo-services .tp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 100% at 88% 0%,rgba(127,207,174,.12),transparent 60%)}
body.tgo-services .tp .wrap{position:relative;z-index:2}
body.tgo-services .tp .n{color:var(--mint)}
body.tgo-services .tp h2{color:#fff}
body.tgo-services .tp .lede{display:none}
body.tgo-services .tpchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:18px;margin-top:clamp(26px,3vw,44px)}
body.tgo-services .tpchips .tpcell{display:flex;flex-direction:column;align-items:center;gap:14px}
body.tgo-services .tpchips .chip{background:#fff;border-radius:14px;width:100%;height:96px;
  display:flex;align-items:center;justify-content:center;padding:18px 22px;
  transition:transform .28s ease,box-shadow .28s ease}
@media(hover:hover){body.tgo-services .tpchips .tpcell:hover .chip{transform:translateY(-3px);
  box-shadow:0 20px 38px -26px rgba(0,0,0,.6)}}
body.tgo-services .tpchips .tplogo{display:flex;align-items:center;justify-content:center;width:100%;border:0;padding:0;margin:0}
body.tgo-services .tpchips .tplogo img{height:auto;max-height:56px;max-width:100%;object-fit:contain}
body.tgo-services .tpchips .tpname{font-size:.86rem;font-weight:600;color:#A8C2C7}
/* ---- reveal: threshold by pixel, not by percentage -----------------------
   A percentage threshold never fires for an element taller than the viewport,
   which is exactly what a full division panel is. The observer below uses a
   zero threshold with a bottom margin instead, and unobserves on first hit so
   a revealed section can never fade back out. */
body.tgo-services .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){body.tgo-services .reveal{opacity:1;transform:none;transition:none}}
/* ================= services index, dark ==================================
   Same split-panel structure she approved; the ground goes back to the deep
   palette so the photographs sit in it rather than on it. */
body.tgo-services{background:var(--ink);color:#DCE8EA}
body.tgo-services .sv-head{background:var(--ink);padding-block:clamp(56px,8vw,104px) clamp(30px,4vw,52px);
  position:relative;overflow:hidden}
body.tgo-services .sv-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 110% at 86% 0%,rgba(127,207,174,.13),transparent 62%)}
body.tgo-services .sv-head .wrap{position:relative;z-index:2}
body.tgo-services .sv-head .n{color:var(--mint);letter-spacing:.18em;font-size:.72rem;margin-bottom:18px}
body.tgo-services .sv-head h1{font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:20px;max-width:18ch;color:#fff}
body.tgo-services .sv-head h1 em{font-style:normal;font-weight:700;color:var(--mint)}
body.tgo-services .sv-head p{color:#A8C2C7;font-size:1.1rem;max-width:58ch;line-height:1.7}
body.tgo-services .svnum{font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;
  color:var(--mint);margin-bottom:16px}
body.tgo-services .svrow h2{font-size:clamp(1.6rem,2.7vw,2.35rem);font-weight:700;letter-spacing:-.022em;margin-bottom:14px}
body.tgo-services .svrow h2 a{color:#fff;text-decoration:none;
  background-image:linear-gradient(var(--mint),var(--mint));background-size:0% 2px;
  background-position:0 100%;background-repeat:no-repeat;padding-bottom:3px;
  transition:background-size .45s cubic-bezier(.2,.6,.2,1),color .3s ease}
body.tgo-services .svrow h2 a:hover, body.tgo-services .svrow h2 a:focus-visible{background-size:100% 2px;color:var(--mint)}
body.tgo-services .svrow p{color:#A8C2C7;font-size:1.02rem;line-height:1.72;margin-bottom:22px;max-width:48ch}
body.tgo-services .svtags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
body.tgo-services .svtags span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 14px;
  font-size:.82rem;color:#BFD4D8}
body.tgo-services .svopen{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-weight:600;
  text-decoration:none;align-self:flex-start}
body.tgo-services .svopen svg{transition:transform .25s ease}
body.tgo-services .svopen:hover svg{transform:translateX(4px)}
html[dir="rtl"] body.tgo-services .svopen:hover svg{transform:translateX(-4px)}
body.tgo-services .svrow .ph{position:relative;overflow:hidden;background:#08222A}
body.tgo-services .svrow .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.tgo-services .svrow .ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(127,207,174,.14) 50%,transparent 62%);
  transform:translateX(-120%);animation:svsweep 9s cubic-bezier(.5,0,.5,1) infinite}
body.tgo-services .svrow:nth-child(even) .ph::after{animation-delay:1.6s}
@keyframes svsweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
body.tgo-services .svmark{position:absolute;z-index:3;width:42px;height:42px;pointer-events:none;
  border:0 solid var(--mint);opacity:0;transition:opacity .6s ease .35s}
body.tgo-services .svrow.in .svmark{opacity:.9}
body.tgo-services .svmark.tl{inset-block-start:20px;inset-inline-start:20px;border-block-start-width:2px;border-inline-start-width:2px}
body.tgo-services .svmark.br{inset-block-end:20px;inset-inline-end:20px;border-block-end-width:2px;border-inline-end-width:2px}
body.tgo-services .svrow .ph, body.tgo-services .svrow .tx{opacity:0;transition:opacity .85s cubic-bezier(.2,.6,.2,1),
  transform .85s cubic-bezier(.2,.6,.2,1)}
body.tgo-services .svrow .ph{transform:translateX(-34px)}
body.tgo-services .svrow .tx{transform:translateX(34px)}
body.tgo-services .svrow:nth-child(even) .ph{transform:translateX(34px)}
body.tgo-services .svrow:nth-child(even) .tx{transform:translateX(-34px)}
body.tgo-services .svrow.in .ph, body.tgo-services .svrow.in .tx{opacity:1;transform:none}
body.tgo-services .svrow.in .tx{transition-delay:.12s}
body.tgo-services .svrow .ph img{animation:svdrift 32s ease-in-out infinite alternate;will-change:transform}
@keyframes svdrift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@media(hover:hover){body.tgo-services .svrow:hover .ph img{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){
  body.tgo-services .svrow .ph, body.tgo-services .svrow .tx{opacity:1;transform:none;transition:none}
  body.tgo-services .svrow .ph img{animation:none}body.tgo-services .svrow .ph::after{animation:none;opacity:0}}
/* butted panels, alternating depths of the same dark */
body.tgo-services .svrow{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-block-start:1px solid rgba(255,255,255,.1)}
/* The rows arrive from the side, so before they are revealed they sit 34px
   outside the page and widen it. Clipping the row keeps that movement inside
   the layout instead of putting a scrollbar across the whole site. */
body.tgo-services .svrow{overflow-x:clip}
@supports not (overflow-x:clip){body.tgo-services .svrow{overflow:hidden}}
body.tgo-services .svrow .ph{min-height:clamp(320px,34vw,470px)}
body.tgo-services .svrow .tx{padding:clamp(34px,4.4vw,70px);display:flex;flex-direction:column;justify-content:center}
body.tgo-services .svrow:nth-child(odd) .tx{background:var(--ink)}
body.tgo-services .svrow:nth-child(even) .tx{background:var(--deep)}
body.tgo-services .svrow:nth-child(even) .ph{order:2}
@media(max-width:880px){body.tgo-services .svrow{grid-template-columns:1fr}body.tgo-services .svrow:nth-child(even) .ph{order:0}
  body.tgo-services .svrow .ph{min-height:230px}}
body.tgo-services .svovl{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;
  transition:opacity .9s ease .3s}
body.tgo-services .svrow.in .svovl{opacity:1}
body.tgo-services .strace{stroke-dasharray:1400;stroke-dashoffset:1400;animation:sdraw 8s cubic-bezier(.45,0,.2,1) infinite}
body.tgo-services .strace.t2{animation-delay:.5s}
body.tgo-services .strace.t3{animation-delay:1s}
@keyframes sdraw{0%{stroke-dashoffset:1400;opacity:0}6%{opacity:.9}
  44%{stroke-dashoffset:0;opacity:.9}82%{stroke-dashoffset:0;opacity:.9}
  94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1400;opacity:0}}
body.tgo-services .srings circle{opacity:0;animation:sring 4.8s ease-out infinite;transform-box:fill-box;
  transform-origin:center}
body.tgo-services .srings circle:nth-child(2){animation-delay:1.6s}
body.tgo-services .srings circle:nth-child(3){animation-delay:3.2s}
@keyframes sring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(4.2)}}
body.tgo-services .snd .sring{fill:none;stroke:#7FCFAE;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
body.tgo-services .snd .sdot{fill:#EAFFF6;opacity:0}
body.tgo-services .snd .sring{animation:sndr 8s cubic-bezier(.2,0,.2,1) infinite}
body.tgo-services .snd .sdot{animation:sndd 8s ease-out infinite}
@keyframes sndr{0%,12%{opacity:0;transform:scale(.2)}20%{opacity:.85;transform:scale(1)}
  36%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}
@keyframes sndd{0%,12%{opacity:0}20%{opacity:1}84%{opacity:1}96%,100%{opacity:0}}
body.tgo-services .s2 .sring, body.tgo-services .s2 .sdot{animation-delay:.8s}
body.tgo-services .s3 .sring, body.tgo-services .s3 .sdot{animation-delay:1.6s}
body.tgo-services .sparcels path{opacity:0;fill-opacity:.26;animation:sfill 8s ease-in-out infinite}
body.tgo-services .sparcels path:nth-child(2){animation-delay:.6s}
body.tgo-services .sparcels path:nth-child(3){animation-delay:1.2s}
body.tgo-services .sparcels path:nth-child(4){animation-delay:1.8s}
body.tgo-services .sverts circle{opacity:0;animation:sfill 8s ease-in-out infinite}
body.tgo-services .sverts circle:nth-child(n+3){animation-delay:.6s}
body.tgo-services .sverts circle:nth-child(n+5){animation-delay:1.2s}
@keyframes sfill{0%,8%{opacity:0}24%{opacity:1}74%{opacity:1}100%{opacity:0}}
body.tgo-services .sscan{fill:url(#stk);opacity:.5;animation:sswp 8s linear infinite}
body.tgo-services .sstock{fill:url(#stk);animation:sswp 8.5s linear infinite}
body.tgo-services .suts{fill:url(#uts2);animation:sswp 7.5s linear infinite}
@keyframes sswp{from{transform:translateX(0)}to{transform:translateX(1960px)}}
body.tgo-services .sbrk g{opacity:0;animation:sfill 8.5s ease-in-out infinite}
body.tgo-services .sbrk g:nth-child(2){animation-delay:1.2s}
body.tgo-services .scont path{stroke-dasharray:1500;stroke-dashoffset:1500;animation:sdraw 8s ease-in-out infinite}
body.tgo-services .scont path:nth-child(2){animation-delay:.5s}
@media(prefers-reduced-motion:reduce){
  body.tgo-services .svovl{opacity:1}
  body.tgo-services .strace, body.tgo-services .srings circle, body.tgo-services .snd .sring, body.tgo-services .snd .sdot, body.tgo-services .sparcels path, body.tgo-services .sverts circle, body.tgo-services .sscan, body.tgo-services .sstock, body.tgo-services .suts, body.tgo-services .sbrk g, body.tgo-services .scont path{animation:none;stroke-dashoffset:0;opacity:.85}
}


/* ---------------------------------------------------------------------------
   Chrome, not page design. The closing call to action and its buttons come
   from footer.php and appear on every page, so these rules have to sit outside
   the per-page scopes - scoped, they only styled the division pages and left
   the band unpainted everywhere else.
   ------------------------------------------------------------------------ */
.dp-cta{background:var(--ink);color:#fff;padding-block:clamp(46px,6vw,80px)}
.dp-cta h2{font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:#fff}
.dp-cta p{color:#C9DDE0;margin-bottom:26px;max-width:52ch;line-height:1.7}
.ctabtns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:12px 22px;color:#fff;text-decoration:none;font-weight:600;
  font-size:.95rem;transition:background .25s ease,border-color .25s ease}
.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ==== contrast on light grounds ==========================================
   The brand green measures 3.62:1 on white and 3.39:1 on the pale ground.
   WCAG AA asks 4.5:1 for text under 24px, and these labels are set at 11-13px
   with wide tracking, so it is a legibility problem before it is a compliance
   one. A darker tone of the same hue clears 4.7:1 on both grounds. Only the
   light contexts are changed - on the dark bands the green is already 8:1 and
   darkening it there would make things worse. */
:root{--green-ink:#327C5E;--muted-ink:#546C74}

body.tgo-home .bands-head .n.mono,
body.tgo-home .cov .n.mono,
body.tgo-projects .pj-head .n.mono,
body.tgo-projects .reg .sec-head .n.mono,
body.tgo-division .sp.lt .num article > i,
body.tgo-projects .stklist .num,
body.tgo-division .lsec > .wrap > .n.mono,
body.tgo-division .grp .grows article > i,
body.tgo-division .toolcols .lbl,
body.tgo-doc .vproof .vlbl,
body.tgo-doc .lhub .lcard .lrole{color:var(--green-ink)}

body.tgo-projects .jr .dv,
body.tgo-projects .regnone,
body.tgo-projects .jb .facts div span{color:var(--muted-ink)}

/* ==== focus, visible everywhere ==========================================
   Three components carried a focus style and nothing else did, so tabbing
   through the site left no trace on the buttons that matter. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px;
  border-radius:4px}
/* the dark green vanishes on the dark bands, so the ring goes mint there */
body.tgo-services a:focus-visible,body.tgo-services button:focus-visible,
.dband a:focus-visible,.dp-hero a:focus-visible,.dp-cta a:focus-visible,
.cta a:focus-visible,.tp a:focus-visible,.sv-head a:focus-visible,
.phead a:focus-visible,.util a:focus-visible,.util button:focus-visible,
footer a:focus-visible,footer button:focus-visible{outline-color:#7FCFAE}
/* the enquiry form is a white card inside a dark band, so it goes back */
.formcard a:focus-visible,.formcard button:focus-visible,.formcard input:focus-visible,
.formcard select:focus-visible,.formcard textarea:focus-visible{outline-color:var(--green-ink)}

.ghost svg{transition:transform .25s ease}
.ghost:hover svg{transform:translateX(4px)}
html[dir="rtl"] .ghost:hover svg{transform:translateX(-4px)}

/* ==== v4.0 chrome (build/chrome_live.py) ==== */
@font-face{font-family:"TGO Instrument";src:url("assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
/* ---- header and footer options: what all three share ----------------------
   The site-wide sheet styles bare header, nav and footer elements; every rule
   that matters is restated here with a class, so it wins without !important. */
html body .ch{--ink:#0B2A31;--deep:#12414B;--teal:#1E6C78;--mint:#7FCFAE;--lime:#D2F46B;--paper:#F4F8F8;--line:#DCE6E6;--muted:#55707A;
  --fd:"TGO Instrument","IBM Plex Sans Arabic","Inter",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
html body header:where(.ch), html body footer:where(.ch){position:relative;top:auto;z-index:auto;padding:0;margin:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:inherit}
html body :where(.ch) nav{display:flex;height:auto;gap:0;position:relative}
html body :where(.ch) a{text-decoration:none;color:inherit}
html body :where(.ch) button{font:inherit}
html body .chw{max-width:1240px;margin:0 auto;padding:0 32px;position:relative}
@media(max-width:700px){html body .chw{padding:0 20px}}
html body .ch .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
html body .ch .hx-arr{width:16px;height:16px;flex:0 0 auto;transition:transform .3s}
html[dir="rtl"] body .ch .hx-arr{transform:scaleX(-1)}
html body .ch .hx-ic{width:56%;height:56%}
html body .ch-topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html body .ch-topo g{fill:none;stroke:currentColor;stroke-width:1}
html body .ch .ch-2{display:block}

html body .ch :focus-visible{outline:2.5px solid var(--lime);outline-offset:3px;border-radius:8px}
@media(max-width:760px){html body footer.ch a{min-height:0}}
/* ======================================================= A: floating glass
   Chosen by Mariam on 1 October. A light frosted bar floating over the page;
   a lime pill slides to whichever link the pointer is on and comes back to
   the page you are on. "Services" goes to the services page; resting on it
   (or tapping its small arrow) opens the six divisions. */
html body header.ca{position:fixed;top:14px;left:0;right:0;z-index:90;pointer-events:none}
html body .ca-bar{pointer-events:auto;position:relative;display:flex;align-items:center;gap:18px;width:calc(100% - 32px);max-width:1320px;height:74px;margin:0 auto;padding:0 10px 0 22px;border-radius:24px;
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 0 0 1px rgba(11,42,49,.07),0 18px 44px -24px rgba(11,42,49,.42);transition:height .35s var(--ease),background .35s,box-shadow .35s}
html[dir="rtl"] body .ca-bar{padding:0 22px 0 10px}
html body header.ca.scrolled .ca-bar{height:66px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(11,42,49,.08),0 22px 50px -26px rgba(11,42,49,.5)}
html body .ca-logo{flex:none}
html body .ca-logo img{display:block;width:128px;height:auto}
html body .ca-nav{align-items:center;margin-inline-start:auto;height:44px}
html body .ca-pill{position:absolute;top:2px;left:0;width:0;height:40px;border-radius:999px;background:var(--lime);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
html body .ca-l{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 15px;border:0;border-radius:999px;background:none;
  font-size:.9rem;font-weight:600;line-height:1;color:var(--deep);white-space:nowrap;cursor:pointer;transition:color .25s}
html body .ca-l.hot, html body .ca-l.on{color:var(--ink)}
html body .ca-l-svc{padding-inline-end:6px;gap:2px;cursor:default}
html body .ca-sl{display:inline-flex;align-items:center;height:100%;color:inherit}
html body .ca-chev{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .25s}
html body .ca-chev:hover{background:rgba(11,42,49,.1)}
html body .ca.svc-open .ca-chev .chev{transform:rotate(180deg)}
html body .ca-end{flex:none;display:flex;align-items:center;gap:10px}
html body .ca .langbtn{color:var(--deep);border:1px solid rgba(11,42,49,.16);background:transparent;padding:10px 14px;font-size:.8rem}
html body .ca .langbtn:hover{border-color:var(--ink);background:#fff}
html body .ca-rfq{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 20px;border-radius:999px;background:var(--deep);color:#fff;font-size:.9rem;font-weight:700;white-space:nowrap;transition:background .3s}
html body .ca-rfq:hover{background:#185664}
html[dir="rtl"] body .ca-rfq{padding:0 20px 0 6px}
html body .ca-rfq i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .45s var(--ease)}
html body .ca-rfq:hover i, html body .ca-rfq:focus-visible i{transform:rotate(-45deg)}
html[dir="rtl"] body .ca-rfq:hover i, html[dir="rtl"] body .ca-rfq:focus-visible i{transform:rotate(45deg)}

/* the divisions, in a glass panel under the bar */
html body .ca-mega{pointer-events:auto;position:absolute;top:calc(100% + 10px);left:50%;width:min(880px,calc(100% - 32px));padding:12px;border-radius:26px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 0 0 1px rgba(11,42,49,.07),0 34px 70px -30px rgba(11,42,49,.5);
  opacity:0;visibility:hidden;transform:translate(-50%,-10px) scale(.985);transform-origin:50% 0;transition:opacity .22s,transform .4s var(--ease),visibility 0s .4s}
html body .ca.svc-open .ca-mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .4s var(--ease),visibility 0s}
html body .ca-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html body .ca-d{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;color:var(--ink);transition:background .25s}
html body .ca-d-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--deep);color:var(--lime);transition:background .3s,color .3s,transform .4s var(--ease)}
html body .ca-d-n{flex:1;font-family:var(--fd);font-weight:700;font-stretch:82%;font-size:1.14rem;line-height:1.1}
html[dir="rtl"] body .ca-d-n{font-stretch:100%;font-size:1rem;line-height:1.4}
html body .ca-d .hx-arr{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s}
html[dir="rtl"] body .ca-d .hx-arr{transform:scaleX(-1) translateX(-6px)}
html body .ca-d:hover, html body .ca-d:focus-visible{background:var(--paper)}
html body .ca-d:hover .ca-d-ic, html body .ca-d:focus-visible .ca-d-ic{background:var(--lime);color:var(--ink);transform:rotate(-8deg)}
html body .ca-d:hover .hx-arr, html body .ca-d:focus-visible .hx-arr{opacity:1;transform:none}
html[dir="rtl"] body .ca-d:hover .hx-arr, html[dir="rtl"] body .ca-d:focus-visible .hx-arr{transform:scaleX(-1)}
html body .ca-all{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:15px 20px;border-radius:18px;background:var(--deep);color:#fff;font-size:.9rem;font-weight:700;transition:background .3s}
html body .ca-all .hx-arr{color:var(--lime)}
html body .ca-all:hover{background:#185664}

/* phones and narrow windows: the bar keeps the logo, the language and a round
   menu button; the menu opens as a glass sheet under it */
html body .ca-burger{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--deep);color:#fff;cursor:pointer}
html body .ca-burger span, html body .ca-burger span::before, html body .ca-burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),background .2s}
html body .ca-burger span{position:relative}
html body .ca-burger span::before, html body .ca-burger span::after{content:"";position:absolute;left:0}
html body .ca-burger span::before{top:-6px}html body .ca-burger span::after{top:6px}
html body .ca.menu-open .ca-burger span{background:transparent}
html body .ca.menu-open .ca-burger span::before{transform:translateY(6px) rotate(45deg)}
html body .ca.menu-open .ca-burger span::after{transform:translateY(-6px) rotate(-45deg)}
html body .ca-sheet{display:none}
@media(max-width:1180px){html body .ca-l{padding:0 11px;font-size:.86rem}html body .ca-l-svc{padding-inline-end:4px}html body .ca-rfq{padding-inline-start:16px}}
@media(max-width:1060px){
  html body .ca-nav, html body .ca-rfq, html body .ca-mega{display:none}
  html body .ca-burger{display:inline-flex}
  html body .ca-end{margin-inline-start:auto}
  html body .ca-bar, html body header.ca.scrolled .ca-bar{height:64px;padding:0 8px 0 18px;border-radius:22px}
  html[dir="rtl"] body .ca-bar, html[dir="rtl"] body header.ca.scrolled .ca-bar{padding:0 18px 0 8px}
  html body .ca-logo img{width:112px}
  html body .ca .langbtn{padding:9px 12px}
  html body .ca-sheet{pointer-events:auto;display:block;position:fixed;top:88px;left:16px;right:16px;max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow:auto;padding:12px;border-radius:26px;
    background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 0 0 1px rgba(11,42,49,.07),0 30px 60px -30px rgba(11,42,49,.5);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .4s var(--ease),visibility 0s .4s}
  html body .ca.menu-open .ca-sheet{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s var(--ease),visibility 0s}
  html body .ca-big{flex-direction:column;align-items:stretch;height:auto}
  html body .ca-b{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;font-family:var(--fd);font-weight:700;font-stretch:80%;font-size:2rem;line-height:1.05;color:var(--ink)}
  html[dir="rtl"] body .ca-b{font-stretch:100%;font-size:1.6rem;line-height:1.4}
  html body .ca-b .hx-arr{width:22px;height:22px;color:var(--teal)}
  html body .ca-b.on{background:var(--lime)}
  html body .ca-sh{margin:16px 12px 6px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
  html[dir="rtl"] body .ca-sh{letter-spacing:0;font-size:.84rem}
  html body .ca-sheet .ca-grid{grid-template-columns:1fr 1fr}
  html body .ca-sheet .ca-d{padding:10px;gap:10px}
  html body .ca-sheet .ca-d-ic{width:40px;height:40px}
  html body .ca-sheet .ca-d-n{font-size:1rem}
  html body .ca-srfq{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:18px 20px;border-radius:18px;background:var(--lime);color:var(--ink);font-weight:700}
}
@media(max-width:420px){html body .ca-sheet .ca-grid{grid-template-columns:1fr}}

/* the hero now runs to the top of the window, behind the bar */
html body .hx .hx-hero{height:calc(100vh + 40vh)}
html body .hx .hy-pin{top:0;height:100vh;min-height:640px}
@media(max-width:900px){html body .hx .hx-hero{height:auto}html body .hx .hy-pin{top:0;height:auto;min-height:0}}

/* ============================================ A: the footer, a lifted card
   A dark card (option B's ink, as Mariam asked) with rounded shoulders that
   rises over the end of the page, the sail from the logo drawn faintly behind. */
html body footer.fa{position:relative;z-index:3;margin-top:-56px}
html body .fa-card{position:relative;overflow:hidden;border-radius:48px 48px 0 0;background:var(--ink);color:#8FAAB0;padding:80px 0 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -30px 60px -34px rgba(0,0,0,.7)}
html body .fa-sail{position:absolute;top:36px;inset-inline-end:-50px;width:min(540px,44vw);height:auto;pointer-events:none}
html body .fa-sail path{fill:rgba(127,207,174,.05);stroke:rgba(127,207,174,.17);stroke-width:1.5}
html[dir="rtl"] body .fa-sail{transform:scaleX(-1)}
html body .fa-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
html body .fa-brand img{display:block;width:230px;height:auto;margin-inline-start:-8px}
html body .fa-act{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px}
html body .fa-rfq{display:inline-flex;align-items:center;gap:16px;height:64px;padding:0 8px 0 28px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:1.05rem;font-weight:700}
html[dir="rtl"] body .fa-rfq{padding:0 28px 0 8px}
html body .fa-rfq i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--lime);transition:transform .45s var(--ease)}
html body .fa-rfq:hover i{transform:rotate(-45deg)}
html[dir="rtl"] body .fa-rfq:hover i{transform:rotate(45deg)}
html body .fa-mail a{font-size:1.15rem;font-weight:600;color:#fff;border-bottom:1.5px solid rgba(210,244,107,.6);padding-bottom:3px}
html body .fa-mail a:hover{color:var(--lime)}
html body .fa-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,1.1fr) minmax(0,1fr);gap:32px;padding:46px 0 48px}
html body .fa-h{margin:0 0 16px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
html[dir="rtl"] body .fa-h{letter-spacing:0;font-size:.84rem}
html body .fa-cols a{display:block;width:fit-content;padding:5px 0;font-size:.94rem;color:#C9DBDE;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/0 1.5px;transition:color .25s,background-size .4s var(--ease)}
html[dir="rtl"] body .fa-cols a{background-position:100% 100%}
html body .fa-cols a:hover, html body .fa-cols a:focus-visible{color:#fff;background-size:100% 1.5px}
html body .fa-addr, html body .fa-own{margin:0;font-size:.94rem;line-height:1.6;color:#C9DBDE}
/* v4.2: the offices, as the homepage's coverage section lists them */
html body .fa-offs{display:grid;gap:14px}
html body .fa-off{margin:0;display:flex;flex-direction:column;gap:3px}
html body .fa-oc{font-size:.94rem;font-weight:600;line-height:1.4;color:#fff}
html body .fa-cols a.fa-oc{padding:0;color:#fff}
html body .fa-or{font-size:.8rem;line-height:1.4;color:#8FAAB0}
html body .fa-own{margin-top:14px;font-size:.84rem;color:#8FAAB0}
html body .fa-iso{display:flex;flex-wrap:wrap;gap:8px}
html body .fa-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(210,244,107,.35);font-size:.8rem;color:#E4F0F1}
html[dir="rtl"] body .fa-chip{padding:7px 8px 7px 12px}
html body .fa-chip i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--lime);color:var(--ink)}
html body .fa-chip i svg{width:11px;height:11px}
html body .fa-chip b{font-weight:600}
html body .fa-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem}
html body .fa-bot a:hover{color:#fff}
html body .fa-up{display:inline-flex;align-items:center;gap:12px;margin-inline-start:auto;padding:0;border:0;background:none;color:#fff;font-size:.86rem;font-weight:600;cursor:pointer}
html body .fa-up i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .35s var(--ease)}
html body .fa-up:hover i{transform:translateY(-4px)}
@media(max-width:960px){
  html body .fa-cols{grid-template-columns:1fr 1fr;gap:34px 24px}
}
@media(max-width:560px){
  html body footer.fa{margin-top:-36px}
  html body .fa-card{border-radius:32px 32px 0 0;padding:56px 0 26px}
  html body .fa-sail{top:20px;width:70vw;inset-inline-end:-30vw}
  html body .fa-brand img{width:180px}
  html body .fa-act{flex-direction:column-reverse;align-items:flex-start}
  html body .fa-rfq{height:58px;font-size:1rem}
  html body .fa-cols>div:nth-child(4){grid-column:1/-1}
  html body .fa-bot{flex-direction:column;align-items:flex-start}
  html body .fa-up{margin-inline-start:0}
}
/* v5.1: the company's social media accounts, under the certificates, drawn like the certificate
   chips but as links; and the staff link (the ERP) in the bottom row beside the Privacy notice */
html body .fa-follow{margin-top:28px}
html body .fa-soc{display:flex;flex-wrap:wrap;gap:8px}
html body .fa-cols a.fa-sl{display:inline-flex;align-items:center;gap:6px;padding:8px 8px 8px 13px;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);font-size:.8rem;line-height:1.2;color:#E4F0F1;transition:background-color .25s,color .25s,box-shadow .25s}
html[dir="rtl"] body .fa-cols a.fa-sl{padding:8px 13px 8px 8px}
html body .fa-sl b{font-weight:600}
html body .fa-sl i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--lime);transition:transform .35s var(--ease)}
html body .fa-sl i svg{width:13px;height:13px}
html[dir="rtl"] body .fa-sl i{transform:scaleX(-1)}
html body .fa-cols a.fa-sl:hover, html body .fa-cols a.fa-sl:focus-visible{background:var(--lime);color:var(--ink);box-shadow:none}
html body .fa-cols a.fa-sl:hover i, html body .fa-cols a.fa-sl:focus-visible i{color:var(--ink)}
html body .fa-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* an account with its platform's icon: the icon (any single-colour PNG) is drawn in the chip's own colour */
html body .fa-cols a.fa-sl-ic{padding:8px 14px 8px 11px}
html[dir="rtl"] body .fa-cols a.fa-sl-ic{padding:8px 11px 8px 14px}
html body .fa-si{flex:none;width:16px;height:16px;background:var(--lime);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background-color .25s}
html body .fa-cols a.fa-sl:hover .fa-si, html body .fa-cols a.fa-sl:focus-visible .fa-si{background:var(--ink)}

/* ---- v4.0 chrome: what the live site needs beyond the option sheet -------- */
/* The old stylesheet gives every page a footer rule of its own, scoped to the
   page (body.tgo-doc footer ...), which outranks the class above: undo it. */
html body footer.ch{background:none;padding:0;border:0;color:inherit}
html body header.ch{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
/* Logged in, WordPress puts its admin bar across the top of the window. */
html body.admin-bar header.ca{top:46px}
@media screen and (max-width:782px){html body.admin-bar header.ca{top:60px}}
/* Pages without a photograph at the top: the first section starts below the
   bar. A transparent border shows the section's own background, so a dark
   heading runs up behind the bar and a light page stays light. */
html body.tgo-doc header.ca+main.tgo-main>:not(.ab2):not(.ea3):first-child, html body.tgo-projects header.ca+main.tgo-main>*:first-child{border-top:100px solid transparent}
html body.tgo-doc header.ca+main.tgo-main>.ab2:first-child>section:first-of-type, html body.tgo-doc header.ca+main.tgo-main>.ea3:first-child>section:first-of-type{border-top:100px solid transparent}
@media(max-width:1060px){
  html body.tgo-doc header.ca+main.tgo-main>:not(.ab2):not(.ea3):first-child, html body.tgo-projects header.ca+main.tgo-main>*:first-child, html body.tgo-doc header.ca+main.tgo-main>.ab2:first-child>section:first-of-type, html body.tgo-doc header.ca+main.tgo-main>.ea3:first-child>section:first-of-type{border-top-width:88px}
}
/* the closing band before the footer leaves room for the card to lift over */
html body .dp-cta{padding-bottom:calc(clamp(46px,6vw,80px) + 56px)}
@media(max-width:560px){html body .dp-cta{padding-bottom:calc(46px + 36px)}}
/* v4.1: the quote button is the footer's job, said once (see rfq_of / tgo_rfq_flags) */
html body.tgo-rfq-none .ca-rfq, html body.tgo-rfq-none .ca-srfq, html body.tgo-rfq-none .fa-rfq, html body.tgo-rfq-foot .fa-rfq{display:none}

html.ch-lock{overflow:hidden}

/* v5.1: "Skip to the content", shown only when a keyboard reaches it */
.tgo-skip{position:fixed;left:16px;top:-120px;z-index:10000;padding:12px 22px;border-radius:999px;background:#0B2A31;color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;transition:top .2s}
.tgo-skip:focus{top:16px;outline:3px solid #D2F46B;outline-offset:2px}
html[dir="rtl"] .tgo-skip{left:auto;right:16px}
.tgo-skip-to{position:absolute;width:1px;height:1px;overflow:hidden;outline:0}
@media (prefers-reduced-motion:reduce){.tgo-skip{transition:none}}

/* ============ v5.1.3: fixes from the independent check of 16 Oct 2026 (QA report numbers) ============ */
/* 7. "Skip to the content" in its own colours on every page (page styles turned its words dark on dark) */
html body a.tgo-skip{position:fixed!important;left:16px!important;right:auto!important;top:-120px!important;z-index:10000!important;display:inline-block!important;
  margin:0!important;padding:12px 22px!important;border:0!important;border-radius:999px!important;background:#0B2A31!important;color:#fff!important;
  font:700 .95rem/1.3 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  text-decoration:none!important;opacity:1!important;transform:none!important;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:top .2s}
html[dir="rtl"] body a.tgo-skip{left:auto!important;right:16px!important;font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif!important}
html body a.tgo-skip:focus{top:16px!important;outline:3px solid #D2F46B!important;outline-offset:2px!important}
html body.admin-bar a.tgo-skip:focus{top:62px!important}
main.tgo-main:focus,main#top:focus{outline:0}
/* 8. figures read left to right in Arabic, as the agreed figures rule says */
html[dir="rtl"] .hy-stat>b{direction:ltr;unicode-bidi:isolate;text-align:right}
html[dir="rtl"] .ab-num,html[dir="rtl"] .ea-num{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .dp-figs .dirltr{display:inline}   /* a figure that wraps (9 kHz – 29.5 GHz) keeps to its caption's side */
/* 12. "go on" arrows point left in Arabic */
html[dir="rtl"] body.tgo-services .svopen svg{transform:scaleX(-1)}
html[dir="rtl"] body.tgo-services .svopen:hover svg{transform:translateX(-4px) scaleX(-1)}
html[dir="rtl"] #px .pm-svc svg{transform:scaleX(-1)}
/* 25a. no letter spacing in Arabic: it pulls joined letters apart (or, negative, pushes them together) */
html[dir="rtl"] label.fl,html[dir="rtl"] .sx-next-n,html[dir="rtl"] .lbl,html[dir="rtl"] .n{letter-spacing:0!important}
html[dir="rtl"] .emfgrid .emfkit b,html[dir="rtl"] .dk-spec .dk-t,html[dir="rtl"] .mseqlist article b{letter-spacing:0!important}
/* 25h. the division cards that jump down the page: the name is a link, and its ::after covers the card */
#sx .sx-jump{position:relative}
#sx .sx-jump .sx-cover{color:inherit;text-decoration:none}
#sx .sx-jump .sx-cover::after{content:"";position:absolute;inset:0;border-radius:8px}
#sx .sx-jump .sx-arr{pointer-events:none}
html[dir="rtl"] #sx .sx-jump .sx-arr{transform:rotate(90deg)}
html[dir="rtl"] #sx .sx-jump:hover .sx-arr{transform:rotate(90deg) translateX(4px)}
@supports selector(:has(a)){
  html[dir="rtl"] #sx .sx-jump:has(.sx-cover:focus-visible) .sx-arr{transform:rotate(90deg) translateX(4px)}
  #sx .sx-jump .sx-cover:focus-visible{outline:none}
  #sx .sx-jump:has(.sx-cover:focus-visible){outline:2.5px solid var(--lime);outline-offset:4px;border-radius:8px}
  #sx .sx-jump:has(.sx-cover:focus-visible) .sx-arr{opacity:1;transform:rotate(90deg) translateX(4px)}
}
/* 3. the first case study's Arabic figure on the narrowest phones: two lines, clear of the camera ring in the photo */
@media (max-width:389px){html[dir="rtl"] #px.pm1 .sc-c1 .sc-fig{font-size:2.4rem}}
/* 25c. iPhone: text keeps its size when the phone is turned sideways */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 25n. no smooth scrolling for people who ask their device for less motion */
@media (prefers-reduced-motion:reduce){html,html body,html body.tgo-doc,html body.tgo-projects,html body.tgo-division,html body.tgo-services{scroll-behavior:auto!important}
  html body a.tgo-skip{transition:none}}