/* Blue Ocean Insights · Direction A "Line of sight" (approved 30 Oct 2026)
   Light, report-like: margin labels, hairline matrices, typographic hero.
   Colour tokens derive from the logo: ink, steel-blue mark, grey ring. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-sans-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-sans-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --paper:#fbfbfc;   /* page */
  --white:#ffffff;   /* raised surfaces */
  --ink:#191715;     /* logo charcoal: text, primary buttons, footer */
  --steel:#004dfc;   /* logo blue (Insights, inner C): accent, links, rules. 5.8:1 on paper */
  --slate:#5a6271;   /* secondary text (6.0:1 on paper) */
  --rule:#dcdfe5;    /* hairlines */
  --tint:#eef2f8;    /* highlight band */
  --mark:#fff3c4;    /* unresolved placeholder (preview builds only) */
  --error:#b42318;
  --ok:#1d6b45;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --step--1:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.125rem,1.07rem + .3vw,1.3125rem);
  --step-2:clamp(1.375rem,1.25rem + .6vw,1.75rem);
  --step-3:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);
  --step-4:clamp(2.125rem,1.6rem + 2.6vw,3.75rem);
  --space:clamp(3rem,2rem + 4vw,5.5rem);
  --radius:4px;
  color-scheme:light;
}
:lang(ar){--font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,"Segoe UI",Tahoma,Arial,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--step-0);line-height:1.65;text-rendering:optimizeLegibility}
:lang(ar) body,body:lang(ar){line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--steel);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;color:var(--ink)}
p,ul,ol{margin:0}
p{max-width:66ch}
bdi{unicode-bidi:isolate}
mark.ph{background:var(--mark);color:#5c4400;border-radius:3px;padding:0 .3em;font-size:.92em;overflow-wrap:anywhere;word-break:break-word}

.in{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius);text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* Header */
.hdr{background:var(--white);border-bottom:1px solid var(--rule);position:relative;z-index:10}
.hdr .in{display:flex;align-items:center;gap:12px 28px;min-height:76px;flex-wrap:wrap;padding-block:10px}
.brand{display:block;flex:none}
.brand img{height:52px;width:auto}
@media (max-width:420px){.brand img{height:44px}}
.nav{display:flex;align-items:center;gap:4px 26px;flex:1;min-width:0;flex-wrap:wrap}
.nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px;flex:1}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--slate);text-decoration:none;font-size:var(--step--1)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--steel)}
.lang{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;color:var(--steel);text-decoration:none;font-size:var(--step--1)}
.lang:lang(ar){font-family:"IBM Plex Sans Arabic",var(--font)}
.menu-btn{display:none;margin-inline-start:auto;align-items:center;gap:8px;min-height:44px;padding-inline:14px;background:none;border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink);font:inherit;font-size:var(--step--1);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
@media (max-width:820px){
  .js .menu-btn{display:inline-flex}
  .js .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding-block:8px 14px;border-top:1px solid var(--rule)}
  .js .nav.open{display:flex}
  .js .nav ul{flex-direction:column;gap:0}
  .js .nav a{width:100%;font-size:var(--step-0)}
  .js .nav a[aria-current]{box-shadow:inset 3px 0 0 var(--steel);padding-inline-start:10px}
  .js .nav .btn{margin-top:10px}
}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:22px;border-radius:var(--radius);font:inherit;font-weight:600;font-size:var(--step--1);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid var(--ink)}
.btn.p{background:var(--ink);color:#fff}
.btn.p:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.btn.s{background:transparent;color:var(--ink)}
.btn.s:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none}
.more::after{content:"→"}
[dir="rtl"] .more::after{content:"←"}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--step--1);text-decoration:none;color:var(--slate)}
.back::before{content:"←"}
[dir="rtl"] .back::before{content:"→"}

/* Hero */
.hero{padding-block:clamp(3rem,2rem + 5vw,6.5rem)}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hero.with-aside .in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:860px){.hero.with-aside .in{grid-template-columns:minmax(0,1fr)}}
.hero-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1{font-size:var(--step-4);line-height:1.08;letter-spacing:-.015em;max-width:17ch}
.hero h1:lang(ar){letter-spacing:0;line-height:1.35;max-width:19ch}
.hero.inner h1{font-size:var(--step-3);max-width:24ch}
.lead{font-size:var(--step-1);color:var(--slate);max-width:60ch}
.hero .lead + .lead{margin-top:-6px}
.hero .ctas{margin-top:8px}
.tel{font-size:var(--step-0);color:var(--ink)}
.tel a{color:inherit}

/* Line of sight figure (Strategy and Performance) */
.los{margin:0;border:1px solid var(--rule);background:var(--white);border-radius:6px;padding:22px}
.los figcaption{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:600}
.los figcaption:lang(ar){letter-spacing:0;text-transform:none;font-size:var(--step--1)}
.los ol{list-style:none;padding:0;margin-top:14px}
.los li{position:relative;padding-block:10px;padding-inline-start:30px;font-weight:600}
.los li::before{content:"";position:absolute;inset-inline-start:6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid var(--steel);background:var(--white);z-index:1}
.los li:last-child::before{background:var(--steel)}
.los li::after{content:"";position:absolute;inset-inline-start:11px;top:50%;height:100%;border-inline-start:1px dashed #9aa6bd}
.los li:last-child::after{display:none}
.los li span{display:block;font-weight:400;font-size:var(--step--1);color:var(--slate)}

/* Image band (architectural light studies, decorative) */
.band{margin:0;padding-block:0 clamp(2rem,1.5rem + 2vw,3.5rem)}
.band-frame{position:relative;aspect-ratio:21/9;overflow:hidden;background:#e9e7e3;border:1px solid var(--rule)}
.band-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.band-frame{aspect-ratio:16/10}}
.cell-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e9e7e3;margin-bottom:6px}

/* Sections: margin column + body */
.sec{border-top:1px solid var(--rule);padding-block:var(--space)}
.sec > .in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px 48px}
@media (max-width:760px){.sec > .in{grid-template-columns:minmax(0,1fr)}}
.side{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding-top:.55em}
.side:lang(ar){letter-spacing:0;text-transform:none;font-size:var(--step--1)}
.side.h{font-size:var(--step-1);letter-spacing:0;text-transform:none;color:var(--ink);padding-top:0;line-height:1.35}
.body{display:flex;flex-direction:column;gap:18px;min-width:0}
.body h2{font-size:var(--step-3);line-height:1.18}
.body h2:lang(ar){line-height:1.4}
.sec.tint{background:var(--tint);border-top:0}
.sec.tint h2{font-size:clamp(1.875rem,1.4rem + 2vw,2.875rem);line-height:1.15}
.sec.tint h2:lang(ar){line-height:1.4}
.sec.tint .body p{font-size:var(--step-1)}
.statement{font-size:var(--step-2);line-height:1.4;font-weight:600;max-width:34ch}
.note{font-size:var(--step--1);color:var(--slate);border-inline-start:3px solid var(--rule);padding-inline-start:14px}

/* Hairline matrix (service pillars, principles) */
.matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule);margin-top:8px}
@media (max-width:700px){.matrix{grid-template-columns:minmax(0,1fr)}}
.cell{border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule);background:var(--white);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cell h3,.cell .cell-h{font-size:var(--step-1);line-height:1.3}
.cell p{color:var(--ink)}
.cell .more{margin-top:auto}

/* Lists */
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-inline-start:26px}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:10px;height:2px;background:var(--steel)}
.ticks b{font-weight:600}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s;margin-top:6px}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;color:var(--slate);min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:.8125rem;font-weight:600;color:var(--steel);border-top:2px solid var(--steel);padding-top:10px;font-variant-numeric:tabular-nums}
.steps b{font-size:var(--step-1);line-height:1.3;color:var(--ink);font-weight:600}
.deliverables{background:var(--white);border:1px solid var(--rule);border-inline-start:3px solid var(--steel);padding:20px 22px;border-radius:2px}

/* Contact */
.form-wrap{display:flex;flex-direction:column;gap:18px;min-width:0}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:clamp(18px,3vw,28px);margin-top:4px}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:var(--step--1)}
.field label .opt{font-weight:400;color:var(--slate)}
.field input,.field select,.field textarea{width:100%;min-height:48px;font:inherit;font-size:var(--step-0);color:var(--ink);background:var(--paper);border:1px solid #9aa3b2;border-radius:var(--radius);padding:10px 12px}
.field textarea{min-height:170px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--steel);outline-offset:1px;border-color:var(--steel)}
.field [aria-invalid="true"]{border-color:var(--error);border-width:2px}
.err{color:var(--error);font-size:var(--step--1);font-weight:600}
.err:empty{display:none}
.count{font-size:.8125rem;color:var(--slate);font-variant-numeric:tabular-nums}
.ts{grid-column:1/-1;min-height:65px}
.form .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.status{grid-column:1/-1;font-weight:600;padding:14px 16px;border-radius:var(--radius)}
.status:empty{display:none}
.status.ok{background:#e7f4ec;color:var(--ok)}
.status.bad{background:#fdeceb;color:var(--error)}
.status.wait{background:var(--tint);color:var(--ink)}
.small{font-size:var(--step--1);color:var(--slate)}

/* Privacy document */
.doc .sec{padding-block:clamp(2rem,1.5rem + 2vw,3rem)}
.meta-line{font-size:var(--step--1);color:var(--slate)}

/* Footer */
.ftr{background:var(--ink);color:#c9ced8;font-size:var(--step--1)}
.ftr .in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:28px;padding-block:44px}
@media (max-width:760px){.ftr .in{grid-template-columns:minmax(0,1fr)}}
.ftr strong{color:#fff;font-weight:600}
.ftr a{color:#fff}
.ftr a:hover{color:#c9d8f2}
.ftr :focus-visible{outline-color:#fff}
.ftr ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.ftr li a{display:inline-flex;min-height:32px;align-items:center}
.ftr .legal{grid-column:1/-1;border-top:1px solid #3a404b;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.8125rem}
.ftr mark.ph{font-size:.8125rem}

/* Language chooser and 404 */
.solo{min-height:70vh;display:grid;place-items:center;padding-block:48px}
.solo .card{background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:560px;width:100%}
.solo h1{font-size:var(--step-2);line-height:1.3}
.choices{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.choices .btn{flex:1 1 180px;min-height:56px;font-size:var(--step-0)}
.choices .btn:lang(ar){font-family:"IBM Plex Sans Arabic",var(--font)}

@media (prefers-reduced-motion:no-preference){.btn,.nav a,.more{transition:background-color .18s,color .18s,border-color .18s}}
@media print{.hdr nav,.menu-btn,.ftr,.ctas,.btn{display:none!important}body{background:#fff}}