/* ------------------------------------------------------------------
   GWS overrides. Loaded after CodeDesign's stylesheets so this file
   wins. Nothing in their CSS is edited, which keeps a re-pull clean.
   ------------------------------------------------------------------ */

/* Brand lockup: the real mark beside the wordmark, rather than a
   text-only stack. The mark is wider than tall (281:231). */
/* CodeDesign scopes its rules under .globals-module___rW7DG__root, which
   outranks a bare class selector. These match that specificity so the
   overrides actually apply. */
:where(.globals-module___rW7DG__root) .topbar-brand,
:where(.globals-module___rW7DG__root) .foot-brand .lockup,
.topbar-brand, .foot-brand .lockup {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
}
.brandmark { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.foot-brand .brandmark { height: 30px; }
/* the wordmark stacks inside its own column; the outer rule must not
   inherit CodeDesign's mono/purple span styling */
.topbar-brand .brandwords,
.foot-brand .brandwords {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1;
  font-family: inherit !important;
  letter-spacing: normal !important;
  color: inherit !important;
  margin-top: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Cross-page nav: mark the page you are on */
.topbar-audience a[aria-current="page"],
.topbar-panel-inner a[aria-current="page"] { color: var(--purple); font-weight: 600; }

/* A heading broken at its clause boundary. Each part is its own line, so the
   break falls where the sentence bends rather than where the measure runs out.
   balance handles what is left: where a part is still too long for its column
   it splits evenly instead of orphaning the last word on a line of its own. */
.ln { display: block; text-wrap: balance; }
.pagehead h1, .videohead h1, .prose h2, .shead h2, .band h2,
.ctaband h2, .statement .big, .alt-copy h2, .card h3, .step h3
  { text-wrap: balance; }

/* Reveal for the components written for this site, which are not part of
   CodeDesign's motion module. Same duration and easing tokens as theirs, so
   the two systems move at the same speed; a transition rather than a keyframe
   because there is only one shape of movement to express. --m-i staggers
   siblings within a group. */
html.motion-ready .rv { opacity: 0; transform: translateY(var(--rv-dist, 20px)); }
html.motion-ready .rv[data-motion-in="true"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--m-dur-base, .72s) var(--m-ease-out, cubic-bezier(.16,1,.3,1)),
              transform var(--m-dur-base, .72s) var(--m-ease-out, cubic-bezier(.16,1,.3,1));
  transition-delay: calc(var(--m-i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .rv,
  html.motion-ready .rv[data-motion-in="true"] {
    opacity: 1; transform: none; transition: none;
  }
}

/* The top bar holds its place while the page scrolls. It ships as
   position:relative, and on pages five thousand pixels long the navigation
   simply left. z-index 20 comes from their rule and already clears everything
   below it. */
.globals-module___rW7DG__root .topbar { position: sticky; top: 0; }

/* A page header on moving footage, shallower than the homepage hero. The
   scrim is a top-to-bottom gradient rather than left-to-right, because unlike
   the homepage the text is centred. Measured against the rendered pixels: the
   darkest point beneath the heading gives 8:1 on white. */
.videohead { position: relative; isolation: isolate; overflow: hidden;
             min-height: 420px; display: grid; align-items: center;
             background: var(--hero-bg) center/cover; }
/* the still variant carries its photograph on the section itself, and needs a
   heavier scrim: a bright daytime photograph puts the 17px subline at 4.2:1,
   under the 4.5 body text requires. Measured, not guessed. */
.videohead.still { background-size: cover; background-position: center; }
.videohead.still .videohead-dim {
  background: linear-gradient(180deg, rgba(12,12,22,.66)  0%,
                                      rgba(12,12,22,.78) 50%,
                                      rgba(12,12,22,.62) 100%);
}
.videohead-video { position: absolute; inset: 0; width: 100%; height: 100%;
                   object-fit: cover; object-position: center; z-index: 0;
                   filter: brightness(.86) saturate(.92); }
.videohead-dim { position: absolute; inset: 0; z-index: 1;
                 background: linear-gradient(180deg, rgba(12,12,22,.58) 0%,
                                                     rgba(12,12,22,.68) 50%,
                                                     rgba(12,12,22,.52) 100%); }
.videohead-inner { position: relative; z-index: 2;
                   width: min(1180px, 92vw); margin: 0 auto;
                   padding: 92px 0 88px; text-align: center; }
.videohead h1 { font-family: var(--serif); color: var(--paper);
                font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04;
                letter-spacing: -.02em; margin: 0 0 18px; font-weight: 500; }
.videohead p { color: #ffffffde; font-size: 18px; line-height: 1.6;
               max-width: 62ch; margin: 0 auto; }
@media (max-width: 860px) {
  .videohead { min-height: 340px; }
  .videohead-inner { padding: 64px 0 60px; }
}
/* reduced motion gets the poster frame and nothing that moves */
@media (prefers-reduced-motion: reduce) {
  .videohead-video { display: none; }
  .videohead { background: var(--hero-bg) center/cover; }
}

/* Interior pages open on a compact band rather than the video hero.
   The top bar is position:relative, not sticky, so the band never needed to
   clear it. It was carrying 132px of top padding for a bar that scrolls away,
   which is what made it tall and empty. Two columns then put the standfirst
   beside the heading instead of under it, which uses the width the band
   already occupies. */
.pagehead { padding: 76px 0 72px; background: var(--lavender); }
.pagehead-inner { width: min(1180px, 92vw); margin: 0 auto;
                  display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
                  gap: 20px 56px; align-items: end; }
.pagehead h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 60px);
               line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.pagehead p { max-width: 46ch; font-size: 17px; line-height: 1.6;
              color: var(--ink-2); margin: 0 0 8px; }
@media (max-width: 860px) {
  .pagehead { padding: 56px 0 52px; }
  .pagehead-inner { grid-template-columns: 1fr; align-items: start; }
}

/* same correction for the pages that open straight into content */
main > .prose:first-child, main > .people:first-child, main > .deflist:first-child
  { padding-top: 76px; }

/* A plain prose block, for pages the template has no component for */
.prose { width: min(1180px, 92vw); margin: 0 auto; padding: 72px 0; }
.prose-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px; }
.prose h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px);
            line-height: 1.1; letter-spacing: -.02em; margin: 0 0 18px; }
.prose p { font-size: 17px; line-height: 1.68; margin: 0 0 16px; opacity: .86; }
@media (max-width: 860px) { .prose-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Leadership row. Five people on one line needs a wider measure than the rest
   of the site, or the bios turn into narrow columns of two-word lines. */
.people { width: min(1320px, 94vw); margin: 0 auto; padding: 24px 0 84px;
          display: grid; gap: 22px;
          grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.person { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--paper); }
.person img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
              display: block; margin-bottom: 18px; }
.person h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 4px; line-height: 1.2; }
/* min-height reserves two lines for every title, so the bios all start on the
   same line even though "Senior IT & OT Infrastructure Expert" wraps and the
   others do not */
.person .role { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
                text-transform: uppercase; color: var(--purple); margin: 0 0 14px;
                line-height: 1.5; min-height: 30px; }
.person p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }

/* Definition rows, for industries and case studies */
.deflist { width: min(1180px, 92vw); margin: 0 auto; padding: 8px 0 84px; }
.defrow { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr);
          gap: 32px; padding: 30px 0; border-top: 1px solid rgba(20,16,60,.10); }
.defrow h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; }
.defrow .meta { font-size: 14px; opacity: .7; margin: 0; }
.defrow p { font-size: 16px; line-height: 1.65; margin: 0 0 10px; opacity: .88; }
@media (max-width: 860px) { .defrow { grid-template-columns: 1fr; gap: 12px; } }

/* ---------------- additional components, in the design's language ----------
   Built from the tokens CodeDesign hangs off the root wrapper (--serif, --mono,
   --purple, --lavender, --line, --ink) so these read as part of the same system.
   One shared measure keeps every section on the same left edge.             */

/* .people is deliberately absent: the leadership row keeps its own, wider
   measure, declared above. Listing it here would silently override that. */
:root { --gws-w: min(1180px, 92vw); }
.shead-inner, .cards, .steps, .uses, .deflist, .formwrap, .svcnav,
.alt, .tagwrap, .notewrap, .prose, .band .inner, .statement .inner, .ctaband .inner
  { width: var(--gws-w); margin-left: auto; margin-right: auto; }

/* anchors sit under a fixed top bar */
main [id] { scroll-margin-top: 108px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* the reset strips list markers; these lists read as lists */
.card ul, .step ul, .alt-copy ul { list-style: disc; }
.card li::marker, .step li::marker, .alt-copy li::marker { color: var(--lavender-deep); }

/* section heading */
.shead { padding: 64px 0 4px; }
.shead .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
                  text-transform: uppercase; color: var(--purple); margin: 0 0 12px; }
.shead h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px);
            line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.shead .sub { font-size: 17px; line-height: 1.6; max-width: 64ch;
              opacity: .78; margin: 14px 0 0; }

/* sequenced blocks: a roadmap, a route, a set of offices */
.steps { padding: 26px 0 8px; display: grid; gap: 20px;
         grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr)); }
.step { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--paper); }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
           text-transform: uppercase; color: var(--purple); display: block; margin-bottom: 12px; }
.step h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; line-height: 1.2; }
.step p, .step li { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 6px; }
.step ul { margin: 0; padding-left: 18px; }
.step a { color: var(--purple); }

/* feature cards, holding either a paragraph or a list */
/* 260px, not more: four cards have to fit on one row at the full measure,
   otherwise the four-card sections break as three plus an orphan */
.cards { padding: 26px 0 8px; display: grid; gap: 22px;
         grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.card { border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: var(--paper); }
.card h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 12px; line-height: 1.2; }
.card p, .card li { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 7px; }
.card ul { margin: 0; padding-left: 18px; }
.card a { color: var(--purple); }

/* two-column list of short definitions */
.uses { padding: 26px 0 8px; display: grid; gap: 0 48px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); }
.use { padding: 20px 0; border-top: 1px solid var(--line); }
.use h4 { font-family: var(--serif); font-size: 19px; margin: 0 0 5px; }
.use p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }

/* A diagram shown whole rather than cropped to fill. Photographs can lose
   their edges to a crop; a diagram loses its meaning, so this one sits
   complete on the dark ground it was drawn against. */
.alt-img.contain, .figure-inner.contain, .svc-card .ph.contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #060606;
}

/* A practice's photograph, sized to the shared measure. Deliberately wide and
   shallow: it is a break in the reading, not a hero. */
.figure { width: var(--gws-w); margin: 40px auto 8px; }
.figure-inner { aspect-ratio: 21 / 8; border-radius: 20px;
                background-size: cover; background-position: center;
                background-color: var(--lavender-2); }
@media (max-width: 700px) { .figure-inner { aspect-ratio: 16 / 10; } }

/* alternating image / description rows */
.alt { padding: 20px 0 8px; }
.alt-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
           gap: 56px; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); }
.alt-row:first-child { border-top: 0; }
.alt-row.flip .alt-img { order: 2; }
.alt-img { aspect-ratio: 4 / 3; border-radius: 20px; background-size: cover;
           background-position: center; background-color: var(--lavender-2); }
.alt-copy .num { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
                 color: var(--purple); display: block; margin-bottom: 14px; }
.alt-copy h2 { font-family: var(--serif); font-size: clamp(26px,3vw,38px);
               line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
.alt-copy .lede { font-size: 18px; line-height: 1.55; margin: 0 0 12px; }
.alt-copy p { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 14px; }
.alt-copy ul { margin: 0 0 22px; padding-left: 18px; columns: 2; column-gap: 28px; }
.alt-copy li { font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
               margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 900px) {
  .alt-row { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
  .alt-row.flip .alt-img { order: 0; }
  .alt-copy ul { columns: 1; }
}

/* the row of services at the top of the services page */
.svcnav { padding: 34px 0 10px; display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fit, minmax(min(100%,190px),1fr)); }
.svcnav a { display: block; padding: 20px; border: 1px solid var(--line);
            border-radius: 14px; text-decoration: none; color: inherit;
            transition: border-color .18s, transform .18s; }
.svcnav a:hover, .svcnav a:focus-visible { border-color: var(--purple); transform: translateY(-2px); }
.svcnav .n { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
             color: var(--purple); display: block; margin-bottom: 10px; }
.svcnav strong { font-family: var(--serif); font-weight: 400; font-size: 17px;
                 line-height: 1.25; display: block; }

/* a band on the lavender tint, for emphasis */
.band { background: var(--lavender); padding: 76px 0; margin-top: 64px; }
.band h2 { font-family: var(--serif); font-size: clamp(28px,3.4vw,44px);
           line-height: 1.1; letter-spacing: -.02em; margin: 0 0 18px; }
.band p.lead { font-size: 17.5px; line-height: 1.65; max-width: 68ch;
               color: var(--ink-2); margin: 0 0 12px; }
.bandcards { display: grid; gap: 26px 40px; margin-top: 34px;
             grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.bandcards h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 8px; }
.bandcards p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }

/* a dark full-bleed statement */
.statement { background: var(--tile-dark); color: #fff; padding: 84px 0; margin-top: 64px; }
.statement .big { font-family: var(--serif); font-size: clamp(26px,3.4vw,42px);
                  line-height: 1.15; letter-spacing: -.02em; max-width: 24ch; margin: 0 0 22px; }
.statement .det { font-size: 16px; line-height: 1.7; max-width: 70ch;
                  opacity: .74; margin: 0; }

/* the two offices, closing the contact page.
   Not the card grid the rest of the site uses: with the street addresses gone
   a card is mostly empty, and a pale band between the white form and the deep
   purple footer steps the page down to its end rather than stopping dead.
   One office per row, read across the measure — the place, then the entity,
   then how to reach it. Side by side in two columns was tried first and the
   email address would not fit a quarter of the page without overflowing it. */
.offices { background: var(--lavender); padding: 74px 0 84px; margin-top: 64px; }
.offices .inner { width: var(--gws-w); margin: 0 auto; }
.offices h2 { font-family: var(--serif); font-size: clamp(26px,3.2vw,40px);
              line-height: 1.1; letter-spacing: -.02em; margin: 0 0 34px; }
.office-row { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
              gap: 32px 40px; align-items: start;
              padding: 34px 0; border-top: 1px solid var(--lavender-deep); }
.office-row:last-child { border-bottom: 1px solid var(--lavender-deep); }
.office-row .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
                       text-transform: uppercase; color: var(--purple);
                       display: block; margin-bottom: 12px; }
.office-row h3 { font-family: var(--serif); font-size: clamp(25px,2.7vw,33px);
                 line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px; }
.office-row .entity { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
/* .78, not the .62 this started at: at 10.5px the label is body text as far as
   WCAG is concerned, and .62 measured 3.4:1 on the lavender against a 4.5 bar */
.office-row .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--ink-2); opacity: .78;
                   display: block; margin-bottom: 9px; }
.office-row .cell p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.office-row .cell a { color: var(--purple); text-decoration: none; }
.office-row .cell a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .office-row { grid-template-columns: 1fr; gap: 22px; }
}

/* tag row */
.tagwrap { padding: 26px 0 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
             border: 1px solid var(--line-2); border-radius: 999px;
             padding: 7px 14px; color: var(--ink-2); }
.band .tags { margin-top: 26px; }
.band .tags span { border-color: var(--lavender-deep); }

/* a sourcing or caveat note */
.notewrap { padding: 22px 0 0; }
.note { font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
        border-left: 2px solid var(--lavender-deep); padding-left: 16px;
        max-width: 78ch; margin: 0; }

/* closing call to action */
.ctaband { padding: 84px 0 96px; }
.ctaband h2 { font-family: var(--serif); font-size: clamp(26px,3.4vw,42px);
              line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; margin: 0 0 28px; }
.ctaband .row { display: flex; flex-wrap: wrap; gap: 12px; }

/* contact form */
.formwrap { padding: 26px 0 8px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; }
.field { display: grid; gap: 7px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
               text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 1px; border-color: transparent;
}
.field textarea { min-height: 160px; resize: vertical; }
.form button { justify-self: start; }
.req { color: var(--purple); }
.hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 0; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }

/* The hero ships its scrim element with `background: none`, so the only thing
   darkening the video is a brightness filter. That was never enough for the
   17px subline, which is white at 78% alpha: measured against the rendered
   pixels it sat at 3.7:1, under the 4.5 that body text needs. This veil is
   heaviest through the middle band where the text sits and lifts at top and
   bottom so the picture still reads. */
.globals-module___rW7DG__root .hero-video-dim {
  background: linear-gradient(180deg, rgba(10,10,18,.40)  0%,
                                      rgba(10,10,18,.58) 36%,
                                      rgba(10,10,18,.58) 64%,
                                      rgba(10,10,18,.36) 100%);
}

/* The homepage break photograph is a bright daytime skyline, where the
   template's was a dim shoreline, so its scrim has to work harder for the
   white heading to stay legible. Their rule is scoped under the root wrapper,
   so a bare .beach:after here would lose on specificity; this matches it and
   wins on order. */
.globals-module___rW7DG__root .beach:after {
  background: linear-gradient(90deg, rgba(15,15,18,.84) 0%,
                                     rgba(15,15,18,.66) 55%,
                                     rgba(15,15,18,.22) 100%);
}

/* Client logo marquee, replacing the grid of company names set as text.
   Two identical sets sit side by side; the track slides left by exactly one
   set plus one gap, so the second set arrives where the first began and the
   loop never shows a seam. -50% of the track is one set plus half a gap, hence
   the extra half gap in the translate. Change the gap and change both. */
.logos { overflow: hidden; padding: 8px 0 4px;
         -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
         mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos-track { --gap: 52px; display: flex; gap: var(--gap); width: max-content;
               animation: logo-marquee 46s linear infinite; }
.logos-set { display: flex; align-items: center; gap: var(--gap);
             margin: 0; padding: 0; list-style: none; }
/* A fixed cell with contain is what keeps a wordmark seven times wider than it
   is tall from dwarfing a round one. The source files are trimmed to the mark,
   so the box governs the optical weight rather than the original canvas. */
/* The cell is wide and shallow on purpose: the wide wordmarks cap on width and
   the square marks cap on height, which is what evens out their optical size. */
.logos-set li { flex: 0 0 auto; width: 150px; height: 64px;
                display: flex; align-items: center; justify-content: center; }
.logos-set img { max-width: 100%; max-height: 100%; width: auto; height: auto;
                 object-fit: contain; display: block; }
@keyframes logo-marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* stop it under the pointer, so a name can be read */
.logos:hover .logos-track, .logos:focus-within .logos-track { animation-play-state: paused; }

/* no motion means no marquee: fall back to a plain centred wall */
@media (prefers-reduced-motion: reduce) {
  .logos { mask-image: none; -webkit-mask-image: none; }
  .logos-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .logos-track > :nth-child(2) { display: none; }
  .logos-set { flex-wrap: wrap; justify-content: center; gap: 40px 56px; }
}
/* --gap drives both the layout and the translate, so one value keeps the loop
   seamless at every size */
@media (max-width: 700px) {
  .logos-track { --gap: 34px; }
  .logos-set li { width: 116px; height: 46px; }
}

/* Footer: two link columns instead of five, and the offices in a column of
   their own beside the mark rather than stacked under it. Their grid is six
   equal tracks, which would leave four children bunched in the left two
   thirds. */
.globals-module___rW7DG__root .foot-top { grid-template-columns: repeat(4, 1fr); gap: 56px; }
.globals-module___rW7DG__root .foot-offices .office + .office { margin-top: 28px; }
.globals-module___rW7DG__root .foot-offices h6 { margin-bottom: 12px; }
.globals-module___rW7DG__root .foot-offices p { color: #ffffffd9; font-size: 13px; line-height: 1.55; }
.globals-module___rW7DG__root .foot-offices a { color: #ffffffd9; font-size: 13px; }
.globals-module___rW7DG__root .foot-offices a:hover { color: var(--paper); }
/* Two columns, and the mark stays at span 1 so the four blocks pair off
   two and two. Letting it span the row leaves Company orphaned on a row of
   its own. */
@media (max-width: 1000px) {
  .globals-module___rW7DG__root .foot-top { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .globals-module___rW7DG__root .foot-brand { grid-column: span 1; }
}
@media (max-width: 560px) {
  .globals-module___rW7DG__root .foot-top { grid-template-columns: 1fr; }
}

/* Logo left, sections centred, Contact us right. The brand and the actions
   take equal flexible width from a zero basis, which is what puts the sections
   on the true centre of the bar rather than merely between the two. min-width
   stops either side collapsing under its own content on a narrow laptop.
   These match CodeDesign's scoped selectors so they win on order, not force. */
.globals-module___rW7DG__root .topbar-brand    { flex: 1 1 0; min-width: min-content; }
.globals-module___rW7DG__root .topbar-audience { flex: 0 1 auto; justify-content: center; }
.globals-module___rW7DG__root .topbar-actions  { flex: 1 1 0; min-width: min-content; }

/* stop the top nav wrapping onto two lines */
.topbar-audience { flex-wrap: nowrap; white-space: nowrap; }
.topbar-audience a { font-size: 11px; letter-spacing: .12em; }

/* A hairline between each section. Drawn with a pseudo-element rather than a
   typed "|" so a screen reader does not announce a pipe between every item,
   and so it sits on the optical centre of the gap at any size: the offset is
   derived from --nav-gap, so changing the gap moves the rules with it. */
.globals-module___rW7DG__root .topbar-audience { --nav-gap: 26px; gap: var(--nav-gap); }
.globals-module___rW7DG__root .topbar-audience a { position: relative; }
.globals-module___rW7DG__root .topbar-audience a + a::before {
  content: "";
  position: absolute;
  left: calc(var(--nav-gap) / -2);
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: var(--line-2);
}
@media (max-width: 1100px) {
  .globals-module___rW7DG__root .topbar-audience { --nav-gap: 18px; }
}