/* ===========================================================
   AtomicNorth — global header and footer
   Loaded after site.css. Everything here is brand-book only:
   Montserrat, red #CC0000 primary, #92C4E0 / #D9EEFA secondary,
   #F0F0F0 / #979797 / #666666 / #323232 tints and shades.
   =========================================================== */

/* The header stack, measured rather than estimated. The top row is 66px and
   the header carries a 1px bottom border, so a page without a subnav is 67px
   and one with a subnav is 112px: the subnav is 44px plus its own 1px rule.
   These were 66 and 44, two pixels short of the real thing, which left the
   mega menu and the mobile sheet overlapping the header's bottom edge. */
:root{ --hdr-h:67px; --sub-h:0px }
body.has-subnav{ --sub-h:45px }

/* ---------- offsets driven by the header stack ---------- */
.mega{ top:calc(var(--hdr-h) + var(--sub-h)) }
.sheet{ inset:calc(var(--hdr-h) + var(--sub-h)) 0 0 }

/* Anchor targets land flush under the header, tucked a pixel behind it.
   This used to add 16px of breathing room, which meant every jump left a
   16px window onto whatever section came before. Harmless between two dark
   sections and very obvious above #industries, where the section before it
   is #F0F0F0: clicking Industries pinned a bright grey strip under the
   header. Breathing room is the section's own top padding, not a gap that
   shows the page behind it. The -1px absorbs sub-pixel rounding, so the
   worst case hides a pixel of the section rather than exposing one. */
section[id], .dcard[id]{
  scroll-margin-top:calc(var(--hdr-h) + var(--sub-h) - 1px) }
body.has-subnav .hero-in{ padding-top:196px }
@media(max-width:900px){ body.has-subnav .hero-in{ padding-top:172px } }

/* ---------- header ---------- */
/* the site header is a solid band, not a floating overlay: with two rows it
   would otherwise sit on top of the hero plate's own readouts */
.hdr{
  background:rgba(43,45,49,.92);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.hdr.solid{ box-shadow:0 10px 30px rgba(0,0,0,.35) }

/* hero and pinned canvases start below the header stack so their labels clear it */
.hero canvas,
.gapstage-pin canvas{
  top:calc(var(--hdr-h) + var(--sub-h));
  height:calc(100% - var(--hdr-h) - var(--sub-h));
}
body.has-subnav .gap-in{ padding-top:150px }
body.has-subnav .fam-in{ padding-top:146px }

.hdr-in{ gap:22px }
.hdr-strap{
  margin:0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--fg-faint);
  white-space:nowrap;
  padding-left:20px;
  border-left:1px solid var(--line);
  margin-right:auto;
}
.hdr-strap i{ font-style:normal; color:var(--orange); padding:0 4px }
@media(max-width:1420px){ .hdr-strap{ display:none } }
/* Strapline removed from the header: the logo now pushes the nav right at every width. */
.logo{ margin-right:auto }

.nav{ gap:22px }
.navlink[aria-current="true"]{ color:#fff; border-bottom-color:var(--orange) }

/* ---------- mega panels ---------- */
/* fully opaque: with six families the panel covers most of the viewport, and
   the hero headline underneath must not ghost through it */
.mega{ background:#303236 }

/* ---------- services mega: one group per family ---------- */
.mmg{ padding:10px 15px; border:1px solid transparent; transition:background .18s, border-color .18s }
.mmg:hover{ background:var(--ink-850); border-color:var(--line-soft) }
.mmg-h{
  display:flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:700; color:#fff; text-decoration:none;
}
.mmg-h::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c,var(--orange)); flex:none;
}
.mmg-h:hover{ color:var(--blue-pale) }
/* the blurb is clamped: a three-line blurb in one group added 20px to every
   group in its grid row, which is how the panel grew past the fold */
.mmg > p{ margin-top:6px; font-size:12.5px; color:var(--fg-dim); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.mmg ul{ margin-top:10px; display:grid; gap:6px; padding-top:9px; border-top:1px solid var(--line-soft) }
.mmg ul a{ font-size:13px; line-height:1.35; color:var(--fg-mid); text-decoration:none; display:block }
.mmg ul a:hover{ color:#fff }
.mmg ul a[aria-current="page"]{ color:#fff; font-weight:700 }
.mmg ul a[aria-current="page"]::after{
  content:""; display:inline-block; width:14px; height:2px;
  background:var(--orange); vertical-align:middle; margin-left:8px;
}

/* ---------- in-page rail ---------- */
.subnav{
  border-top:1px solid var(--line-soft);
  background:rgba(43,45,49,.78);
  backdrop-filter:blur(12px);
}
.hdr.solid .subnav{ background:rgba(43,45,49,.94) }
.subnav-in{
  display:flex; align-items:center; gap:26px; height:44px;
  overflow-x:auto; scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{ display:none }
.subnav .pgname{
  font-size:11px; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  color:var(--orange); white-space:nowrap; padding-right:24px;
  border-right:1px solid var(--line); flex:none;
}
.subnav .navlink{ height:44px; font-size:13px; white-space:nowrap; flex:none }

/* ---------- footer ---------- */
.ftr{ padding:76px 0 30px }
.ftr-grid{ grid-template-columns:minmax(0,1.55fr) repeat(4,minmax(0,1fr)); gap:44px 34px }
.ftr-strap{
  margin-top:18px !important;
  font-size:10.5px; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:#fff;
}
.ftr-strap i{ font-style:normal; color:var(--orange); padding:0 4px }
.ftr-col{ display:flex; flex-direction:column; gap:34px }
.ftr-block h5{ margin-bottom:14px }
.ftr-block h5 a{ color:#fff; font-size:12px; text-decoration:none }
.ftr-block h5 a:hover{ color:var(--blue-pale) }
.ftr a[aria-current="page"]{ color:#fff; font-weight:700 }

.ftr-facts{
  margin-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px; max-width:38ch;
}
.ftr-facts li{ border-left:2px solid var(--orange); padding-left:12px }
.ftr-facts b{ display:block; font-size:17px; font-weight:800; color:#fff; line-height:1.2 }
.ftr-facts span{
  display:block; margin-top:4px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint);
}
.ftr-offices{
  margin-top:26px !important;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim);
}
.ftr-legal a{ font-size:12.5px }
.ftr-social{ margin-top:30px }
.ftr-social h5{ color:var(--fg-dim); margin-bottom:14px }
.ftr .ftr-social ul{ display:flex; flex-direction:row; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0 }
.ftr .ftr-social ul li a{
  display:flex; padding:0; min-height:0; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); color:var(--fg-dim);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.ftr .ftr-social ul li a:hover,.ftr .ftr-social ul li a:focus-visible{ background:var(--orange); border-color:var(--orange); color:#fff }
.ftr .ftr-social ul li a:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* One row: the brand block on the left, then four link columns.
   Facts stack under the boilerplate as a single column. */
.ftr-about ul.ftr-facts{ display:flex; flex-direction:column; gap:14px; max-width:none }

@media(max-width:1180px){
  .ftr-grid{ grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)) }
}
@media(max-width:820px){
  .ftr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px }
  .ftr-about{ grid-column:1 / -1 }
  .ftr-about p{ max-width:none }
  .ftr-about ul.ftr-facts{ flex-direction:row; flex-wrap:wrap; gap:14px 28px }
}
@media(max-width:520px){
  .ftr-grid{ grid-template-columns:1fr }
}


/* ---- third nav level: pages that hang off a child page ------------------- */
/* The live IA nests these under E-Business Suite, EPM, Technology Offerings
   and Mobility. Indented rather than promoted, so the mega column stays
   scannable at 22 links instead of reading as one flat list.
   The reset on the first line matters: .mmg-sub also matches `.mmg ul`, so
   without it every sub-list inherited that rule's top border and 12px margin
   and the Oracle column grew tall enough to push the second row of families
   off the bottom of the screen. */
.mmg .mmg-sub{ margin:5px 0 9px; padding:0 0 0 13px; gap:6px;
  border-top:0; border-left:1px solid var(--line-soft) }
.mmg .mmg-sub a{ font-size:12.5px; color:var(--fg-dim) }
.mmg .mmg-sub a:hover,.mmg .mmg-sub a:focus-visible{ color:var(--blue-pale) }

/* six families and 47 links do not fit one screen; scroll the panel rather
   than let the lower families fall below the fold */
.mega-in{ max-height:calc(100vh - var(--hdr-h) - var(--sub-h) - 8px);
  overflow-y:auto; overscroll-behavior:contain }

/* ---- wide families: width instead of height ------------------------------ */
/* Grid rows are as tall as their tallest item, so in six equal columns the
   Oracle group's 22 links stretched Managed IT and Application Management into
   751px boxes and pushed the panel 258px past the viewport. align-items:start
   stops the stretching; the span classes give the two long families room to
   flow their links into columns instead of running down the page. Each parent
   keeps its indented children with it, because a column break between them
   would read as two unrelated lists. */
/* align-items:start is scoped to the services panel: the Industries panel next
   to it wants its cards stretched to a common height, or the one card with a
   two-line blurb sits 20px taller than the other five. */
#mm-services .mega-in{ align-items:start }
/* site.css gives .mega-in `padding:26px 0 32px`, and the zero in that
   shorthand wipes out .shell's side padding. Above 1366px the 1320px
   max-width hides it; below, every link sits hard against the screen edge.
   Put the gutter back explicitly.

   --gutter rather than the three hardcoded values this used to carry: it is
   the same 46/24/18px, declared once in site.css, so a change to the page
   gutter no longer has to be made in two files that can drift apart. The
   two media queries that followed this line are gone for the same reason. */
.mega-in{ padding-block:14px; padding-inline:var(--gutter) }
/* the panel footer is one row, not a block: it was costing 80px of the height
   the families need */
.mega-foot{ margin-top:8px; padding-top:12px; align-items:center }
/* one line, not two: at 62ch the note wrapped and the wrapped line was the
   thing the panel had to scroll to reach */
.mega-foot p{ font-size:12.5px; max-width:none; flex:1 1 auto }
.mmg-w3{ grid-column:1 / -1; order:-1 }
.mmg-w2{ grid-column:span 2 }
.mmg-w3 > p,.mmg-w2 > p{ max-width:74ch }
.mmg-w3 > ul,.mmg-w2 > ul{ display:block; column-gap:28px; column-rule:1px solid var(--line-soft) }
.mmg-w3 > ul{ column-count:4 }
.mmg-w2 > ul{ column-count:3 }
.mmg-w3 > ul > li,.mmg-w2 > ul > li{ break-inside:avoid; padding-bottom:7px }
.mmg-w3 > ul > li:last-child,.mmg-w2 > ul > li:last-child{ padding-bottom:0 }

@media(max-width:1180px){
  .mmg-w3 > ul{ column-count:3 }
  .mmg-w2{ grid-column:1 / -1 }
  .mmg-w2 > ul{ column-count:3 }
}

.ssub .ssub-in{ padding-left:26px; font-size:13.5px; color:var(--fg-dim) }
.ssub .ssub-in::before{ content:""; display:inline-block; width:10px; height:1px;
  margin-right:8px; vertical-align:middle; background:var(--line-soft) }

/* ---- breadcrumb on a phone ---------------------------------------------- */
/* The deep Oracle pages carry four items now, and the crumb is uppercase with
   .14em tracking, so at 390px each item took a line of its own and the trail
   became a four-line stack above the headline. One scrolling row instead, the
   same pattern the in-page rail already uses. The edge fade comes from the
   shared rule below rather than from here, so a two-item crumb that fits is
   not faded for an affordance it does not need. */
@media(max-width:700px){
  .crumb{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    gap:8px; font-size:11px; letter-spacing:.10em }
  .crumb::-webkit-scrollbar{ display:none }
  .crumb > *{ flex:none }
}

/* ---- the sideways rows say so ------------------------------------------- */
/* Three rows scroll sideways on a narrow screen: the subnav, the crumb and
   the in-page rail. Each hides its scrollbar, so without a cue the last item
   sits cut at the bezel and reads as a fault rather than as a row that
   continues. assets/js/scrollcue.js sets data-ovf only on a row that is
   actually overflowing, and only on the side that has more to show, which is
   the part CSS cannot work out for itself.

   A mask, not a gradient overlay: these rows sit on three different
   backgrounds (the blurred subnav, the hero, the gap panel) and a painted
   gradient would have to match each one. */
[data-ovf]{ --cue:26px }
[data-ovf="r"]{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--cue)),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - var(--cue)),transparent) }
[data-ovf="l"]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--cue));
          mask-image:linear-gradient(90deg,transparent,#000 var(--cue)) }
[data-ovf="lr"]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--cue),#000 calc(100% - var(--cue)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--cue),#000 calc(100% - var(--cue)),transparent) }

/* The footer lists two levels, not three: the third level is on each parent
   page and on the sitemap. .ftr-in is kept because a nav change that puts
   grandchildren back in the footer should not also need a stylesheet edit. */
.ftr-block .ftr-in{ padding-left:12px }
.ftr-block .ftr-in a{ font-size:12px; color:var(--fg-dim) }
.ftr-block .ftr-in a:hover{ color:var(--blue-pale) }


/* =====================================================================
   Services mega: two panes
   ---------------------------------------------------------------------
   Seven families in a packed grid left holes (Managed IT and Salesforce
   leave a third of their row empty, Managed Business Services sat alone on
   the right) and the panel was 1006px tall, so it scrolled on every laptop
   and the lower families were never seen. Now: families on the left, the
   open family's pages on the right. Height is the longest family, not all
   seven; nothing scrolls; nothing is blank.
   Behaviour (assets/js/hdr-motion.js): hover with a short intent delay or
   focus switches the pane; click goes to the family page; arrow keys move
   between families; Right/Enter on a family moves into its links.
   ===================================================================== */
#mm-services .mega-in.mm2{
  display:grid;
  grid-template-columns:290px minmax(0, 1fr);
  grid-template-rows:1fr auto;
  gap:0 34px;
  padding-block:22px 16px;
  max-height:none;
  overflow:visible;
}

/* ---- left: family tabs ---- */
.mm2-tabs{ list-style:none; margin:0; padding:0 18px 0 0; border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:2px }
.mm2-tab{
  position:relative; display:grid; grid-template-columns:8px 1fr 8px; align-items:center; gap:11px;
  padding:10px 12px; line-height:1.3; color:var(--fg-mid); text-decoration:none; font-size:14px; font-weight:600;
  border-radius:3px; transition:background .16s ease, color .16s ease;
}
.mm2-tab::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c, var(--orange));
  opacity:.55; transition:opacity .16s ease, transform .16s ease }
.mm2-tab svg{ width:6px; height:10px; opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease }
.mm2-tab:hover{ color:#fff; background:rgba(255,255,255,.035) }
.mm2-tab[aria-selected="true"]{ color:#fff; background:var(--ink-850, #383A3F) }
.mm2-tab[aria-selected="true"]::before{ opacity:1; transform:scale(1.25) }
.mm2-tab[aria-selected="true"] svg{ opacity:1; transform:none; color:var(--c, var(--orange)) }
/* the red rule on the active family's inside edge, joining it to the pane */
.mm2-tab[aria-selected="true"]::after{ content:""; position:absolute; right:-19px; top:8px; bottom:8px; width:2px;
  background:var(--c, var(--orange)) }
.mm2-tab:focus-visible{ outline:2px solid var(--blue-pale, #D9EEFA); outline-offset:-2px }

/* ---- right: the open family ---- */
.mm2-panes{ min-width:0; position:relative }
.mm2-pane[hidden]{ display:none }
.mm2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line-soft) }
.mm2-head h3{ margin:0; font-size:20px; font-weight:800; color:#fff; letter-spacing:-.01em }
.mm2-head p{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--fg-dim); max-width:62ch }
.mm2-overview{ flex:none; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:#fff; text-decoration:none; padding:8px 0; border-bottom:2px solid var(--c, var(--orange)); white-space:nowrap }
.mm2-overview svg{ width:12px; height:10px; transition:transform .18s ease }
.mm2-overview:hover svg{ transform:translateX(3px) }

.mm2-links{ list-style:none; margin:0; padding:0; column-count:var(--cols, 3); column-gap:30px;
  column-rule:1px solid var(--line-soft) }
.mm2-links > li{ break-inside:avoid; padding-bottom:4px }
.mm2-links a{ display:block; padding:6px 8px; margin:0 -8px; border-radius:3px; font-size:13.5px; line-height:1.35;
  color:var(--fg-mid); text-decoration:none; transition:background .14s ease, color .14s ease }
.mm2-links a:hover, .mm2-links a:focus-visible{ color:#fff; background:rgba(255,255,255,.045); outline:none }
.mm2-links > li > a{ font-weight:600; color:#E6E8EC }
.mm2-links a[aria-current="page"]{ color:#fff; font-weight:700; box-shadow:inset 2px 0 0 var(--orange) }
.mm2-sub{ list-style:none; margin:0 0 6px; padding:0 0 0 12px; border-left:1px solid var(--line-soft); margin-left:2px }
.mm2-sub a{ font-size:12.5px; padding:4px 8px; color:var(--fg-dim) }

/* pane entrance: content only, the panel itself does not move */
@keyframes mm2-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.mm2-pane:not([hidden]){ animation:mm2-in .22s cubic-bezier(.2,.7,.2,1) both }

#mm-services .mm2 .mega-foot{ grid-column:1 / -1; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line-soft); display:flex; gap:20px }

@media(max-width:1280px){
  #mm-services .mega-in.mm2{ grid-template-columns:250px minmax(0,1fr); gap:0 26px }
  .mm2-tab{ font-size:13.5px; padding:9px 10px; gap:9px }
  .mm2-pane[style*="--cols:4"] .mm2-links{ column-count:3 }
}
@media(prefers-reduced-motion:reduce){ .mm2-pane:not([hidden]){ animation:none } }

/* The two .mega-in gutter overrides that stood here are gone: the rule above
   now reads --gutter, which site.css already steps to 24px at 900 and 18px
   at 520. Same values, one declaration. */