/* Ommri Berhad — production header + shared behaviour.
   The design export faked responsiveness with canvas state toggles (desktop/mobile
   sc-if branches). Here that becomes a real media query at the same 1020px breakpoint
   the prototype's matchMedia used, so both navs ship and CSS decides. */

/* Palette derived from the logo: red #E0393C, coral #E96A60, charcoal #333333.
   The teal-green ink and gold accent the export shipped were the brief's declared
   placeholders and have been retired — see PALETTE in build.py. */
:root{
  --ink:#241E1E;        /* logo charcoal, deepened for full-bleed surfaces */
  --deep:#2E2625;
  --red:#E0393C;        /* logo primary — the "o" */
  --red-dark:#BF2A2D;
  --accent:#E96A60;     /* logo coral — the "mm" */
  --sand:#F6F2E9;
  --slate:#6B6260;
  --nav:#3B3130;
  --line:#E4DCDB;
  --rule:#EFE9E8;
}

/* ---------------------------------------------------------------- header */
.ogh{
  font-family:'Urbanist',system-ui,sans-serif;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.ogh-skip{
  position:absolute;left:-9999px;top:14px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 18px;
  border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;
}
.ogh-skip:focus{left:14px}

.ogh-inner{
  max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.ogh-logo{display:flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}
.ogh-logo img{display:block;height:34px;width:auto}

.ogh-nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,22px)}
.ogh-nav > a,
.ogh-drop-btn{
  font-family:inherit;font-size:15px;font-weight:600;
  text-decoration:none;padding:8px 4px;color:var(--nav);
  background:none;border:none;cursor:pointer;
  transition:color .25s;
}
.ogh-nav > a:hover,.ogh-drop-btn:hover{color:var(--red)}
.ogh-drop-btn{display:inline-flex;align-items:center;gap:7px}

/* Active page — one data-active swap per page drives the whole nav. */
.ogh[data-active="about"]      [data-nav="about"],
.ogh[data-active="strength"]   [data-nav="strength"],
.ogh[data-active="leadership"] [data-nav="leadership"],
.ogh[data-active="news"]       [data-nav="news"],
.ogh[data-active="careers"]    [data-nav="careers"],
.ogh[data-active="businesses"] [data-nav="businesses"],
.ogh[data-active="riverlens"]  [data-nav="businesses"],
.ogh[data-active="healthcare"] [data-nav="businesses"],
.ogh[data-active="travel"]     [data-nav="businesses"]{color:var(--red)}

/* dropdown */
.ogh-drop{position:relative}
.ogh-drop-wrap{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:12px;z-index:150;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility .18s;
}
.ogh-drop:hover .ogh-drop-wrap,
.ogh-drop:focus-within .ogh-drop-wrap,
.ogh-drop.is-open .ogh-drop-wrap{opacity:1;visibility:visible;pointer-events:auto}

.ogh-drop-panel{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 28px 70px rgba(36,30,30,.16);
  padding:12px;width:360px;display:flex;flex-direction:column;gap:2px;
}
.ogh-drop-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:14px;text-decoration:none;
  color:var(--ink);font-size:14px;font-weight:700;
}
.ogh-drop-top span{color:var(--accent)}
.ogh-drop-top:hover{background:var(--sand)}
.ogh-drop-rule{height:1px;background:var(--rule);margin:4px 10px}
.ogh-drop-item{display:flex;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none}
.ogh-drop-item > span:last-child{display:flex;flex-direction:column;gap:2px}
.ogh-di-t{font-size:15px;font-weight:700;color:var(--ink)}
.ogh-di-s{font-size:13px;color:var(--slate)}
.ogh-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.ogh-rl .ogh-dot{background:#2368F5}
.ogh-hc .ogh-dot{background:#159A78}
.ogh-tv .ogh-dot{background:#C38A28}
.ogh-dot-ink{background:var(--ink)}
.ogh-rl:hover{background:#E8F0FF}
.ogh-hc:hover{background:#E3F7F0}
.ogh-tv:hover{background:#FFF4DD}

.ogh-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:700;padding:11px 22px;
  border-radius:999px;transition:background .3s;
}
.ogh-cta:hover{background:var(--red)}

.ogh-burger{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  cursor:pointer;color:var(--ink);flex:none;
}
.ogh-ico-close{display:none}
.ogh-burger[aria-expanded="true"] .ogh-ico-open{display:none}
.ogh-burger[aria-expanded="true"] .ogh-ico-close{display:block}

/* mobile drawer */
.ogh-mobile{
  position:absolute;top:100%;left:0;right:0;z-index:140;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 40px 80px rgba(36,30,30,.18);
  max-height:calc(100dvh - 72px);overflow:auto;
}
.ogh-mobile[hidden]{display:none}
.ogh-mobile-in{padding:18px clamp(20px,4vw,40px) 30px;display:flex;flex-direction:column;gap:2px}
.ogh-m-lg{font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;padding:13px 2px;border-bottom:1px solid var(--rule)}
.ogh-m-label{padding:16px 2px 6px;font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--red)}
.ogh-m-sm{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;padding:11px 2px}
.ogh-m-sm .ogh-dot{margin-top:0;width:8px;height:8px}
.ogh-m-last{border-bottom:1px solid var(--rule);margin-bottom:6px}
.ogh-m-cta{margin-top:18px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;text-decoration:none;font-size:16px;font-weight:700;padding:15px 22px;border-radius:999px}
.ogh-m-ext{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px;font-size:13px}
.ogh-m-ext a{color:var(--slate);text-decoration:none;font-weight:600}

@media (max-width:1020px){
  .ogh-nav,.ogh-cta{display:none}
  .ogh-burger{display:inline-flex}
}
@media (min-width:1021px){
  .ogh-mobile{display:none}
}

/* ---------------------------------------------------------------- photography placeholders
   The export ships 57 <image-slot> elements — real Ommri photography has not been
   supplied yet. These render as an intentional, branded "image to come" panel rather
   than a broken frame, and each keeps its brief text so shooting/sourcing is unambiguous. */
.og-img{
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg,rgba(36,30,30,.045),rgba(36,30,30,.015)),
    repeating-linear-gradient(45deg,rgba(36,30,30,.028) 0 10px,transparent 10px 20px);
  border:1px solid rgba(36,30,30,.10);
  color:var(--slate);overflow:hidden;
}
.og-img-in{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px;text-align:center;max-width:min(90%,290px);
}
.og-img-in svg{opacity:.4;flex:none}
.og-img-cap{
  font-family:'Urbanist',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;line-height:1.45;
  color:rgba(107,98,96,.9);
}
.og-img-round{border-radius:50%}

/* ---------------------------------------------------------------- footer
   The footer sits on the logo's primary red. Its links are already white, so the
   design's brighten-on-hover would be invisible — underline instead. */
.og-footer a:hover,
.og-footer a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.og-footer :focus-visible{outline-color:#FFFFFF}

/* ---------------------------------------------------------------- news filter */
.og-hidden{display:none !important}

/* The design export sets display inline on nearly every element, which outranks the
   UA stylesheet's [hidden]{display:none}. Without this the contact success panel
   renders on the plain /contact page and the form never hides after submitting. */
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}