/* ==========================================================================
   20. The company footer

   Three bands, in this order:

     Row 1   five columns of navigation and contact, on the brand navy.
     Row 2   brand, six marks and a contact block, on a deeper navy.
     Bar     the legal navigation, on the brand orange.

   The previous footer was one light band, which made it read as an afterthought
   against a navy site. The split into three bands is what makes it read as the
   company's closing statement, and it is what allows row 1 to hold five columns
   of navigation while row 2 holds the brand block without either of them
   competing for width.

   Colour contract:
     navy   #061454   band background
     deep   #04103c   row 2, so the two rows separate without a border
     white            primary text
     #C7D2E8          secondary text — a desaturated blue rather than a grey, so
                      the pair stays inside the brand palette
     orange           the legal bar, focus rings, hover accents

   Contrast: #C7D2E8 on #061454 is 8.9:1 and white on #061454 is 16.8:1, both
   comfortably past AA for body text. The orange bar uses #04103c text on
   #FD6218, which is 7.4:1.
   ========================================================================== */

.se-footer{
  background:var(--se-navy);
  color:#fff;
  margin-top:auto;
  /* The old hairline border sat between the footer and a light page, which is
     invisible here. Separation now comes from the colour itself. */
  border-top:0;
}
.se-footer a{color:#fff}

/* -------------------------------------------------------------- Row 1: columns */

.se-footer__cols{
  display:grid;
  /*
   * Four groups, each sized to what it has to hold rather than to an equal
   * share.
   *
   * These were repeat(5, minmax(0,1fr)) — five equal columns, with the Contact
   * block later moved out to row 2 and the row left with four equal tracks of
   * 219px. Equal is wrong here because the four groups do not contain the same
   * amount of text: measured at the footer's own 0.875rem, the longest label in
   * each group is
   *
   *     Company      About SmartEdge IT Solutions     197px
   *     Services     Cloud & Server Management        189px
   *     Industries   Logistics & Transportation       170px  (in two columns)
   *     Resources    Hire a Developer                 109px
   *
   * Industries needs twice the width of the others because it is the one group
   * that is split, and at 219px overall it had 105px per sub-column — narrower
   * than its own longest entry. That is what wrapped five industry links and is
   * what made row 1 read as a block of wrapped text rather than as navigation.
   *
   * The weights below follow those measurements: Industries gets 1.9fr, and the
   * other three are scaled to their own longest entry, with Resources lightest.
   * The total comes to about 1,100px of usable width at 1440px against about
   * 955px of content, so there is slack rather than a fit that only just works.
   *
   * They are plain fractional tracks with no max-content floor, deliberately. A
   * max-content minimum would guarantee no wrapping today but would also let the
   * row overflow its container the first time an owner edits a label, which is a
   * horizontal scrollbar instead of a wrapped word.
   */
  grid-template-columns:1.1fr 1.05fr 1.9fr .8fr;
  gap:clamp(22px,2.4vw,44px);
  padding-block:clamp(38px,4.2vw,60px) clamp(30px,3.4vw,44px);
}
.se-footer__col{min-width:0}
.se-footer__heading{
  margin:0 0 14px;
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  /* A short orange rule under each heading ties the five columns together and
     gives the row a baseline without a border running the full width. */
  padding-bottom:9px;
  position:relative;
}
.se-footer__heading::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:26px;height:2px;
  background:var(--se-orange);
  border-radius:2px;
}
/*
 * The navigation lists stack their items. The social row is also a <ul> inside a
 * .se-footer__col, and this rule was beating .se-social on specificity — two
 * classes and an element against one — so the six social icons were laid out as a
 * six-row grid down the Contact column instead of as a horizontal row. The
 * selector is narrowed to lists that are not the social row rather than the
 * social row being made more specific, so the stacking rule stays readable and
 * the intent stays in the selector.
 */
.se-footer__col ul:not(.se-social){
  list-style:none;margin:0;padding:0;
  display:grid;gap:9px;
}
.se-footer__col a{
  font-size:.875rem;
  line-height:1.5;
  color:#C7D2E8;
  text-decoration:none;
  display:inline-block;
  transition:color .15s var(--se-ease),transform .15s var(--se-ease);
}
.se-footer__col a:hover,
.se-footer__col a:focus-visible{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.se-footer__col li{font-size:.875rem;line-height:1.5;color:#C7D2E8}
.se-footer__col li>span{white-space:pre-line;display:block}

/* The contact column carries an address and icons rather than a link list. */
.se-footer__col--contact{display:flex;flex-direction:column;align-items:flex-start}
/*
 * The social row is the one thing in this column that must not be stretched to
 * the column's width: as a flex item it inherited align-items:stretch and then
 * wrapped its own six items down the page, one per line, instead of across it.
 */
.se-footer__col--contact .se-social{align-self:flex-start}
.se-footer__email,
.se-footer__contact-line,
.se-footer__address{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 11px;
  font-size:.875rem;
  line-height:1.55;
  color:#C7D2E8;
  text-decoration:none;
  min-width:0;
}
.se-footer__email{color:#fff;font-weight:600;word-break:break-word}
.se-footer__email:hover{color:var(--se-orange-2,#ffb27a);text-decoration:underline}
.se-footer__address .se-icon,
.se-footer__contact-line .se-icon,
.se-footer__email .se-icon{
  flex:none;margin-top:2px;color:var(--se-orange-2,#ffb27a);
}

/* ------------------------------------- Row 2: brand, contact, social */

/*
   Three columns, as the brief asks.

   1. the brand, its description and a quiet route into the services
   2. the contact details, moved down from row 1, and the small map
   3. the social icons, in a column of their own

   The tracks are 1.3fr / 1fr / auto rather than the two equal 1fr columns this
   row used to have. Equal gave each text column 405px, which is 46 characters at
   the footer's own 0.875rem, and the company description then wrapped to ten
   lines in a column 200px taller than either of its neighbours. The brand column
   now gets 457px — about 52 characters, which puts the description at six lines —
   and the contact column, which holds one address and one email address, keeps
   352px and does not need the rest.

   The third track is `auto` because the social column holds a single fixed-size
   row of six icons and should be exactly as wide as they are.
*/
.se-footer__brandrow{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:clamp(24px,3vw,52px);
  align-items:start;
  padding-block:clamp(26px,3vw,38px);
  border-top:1px solid rgba(255,255,255,.12);
  /* Row 2 sits on a marginally deeper navy. A 1px hairline alone did not
     separate two blocks of the same colour. */
  background:#04103c;
}
.se-footer__brandblock{min-width:0}
.se-footer__logo{display:inline-flex;text-decoration:none}
/*
   The footer uses the full-white variant of the approved wordmark: every inked
   pixel white, not the navy half with the orange kept. It sits on brand navy, so
   one white mark is what reads; a two-colour mark put a second, warmer note into
   a section that is otherwise entirely navy, directly above the orange legal bar
   and beside the orange call-to-action.

   It is sized a little narrower than the header mark. The header sits on white
   between two dark bands and is read against light; the footer mark sits on navy
   with white type around it, and at the same optical size the two competed. Both
   dimensions are declared so the footer does not reflow once the image has
   loaded, and object-fit:contain guarantees the approved 1600:357 proportion
   survives whatever the box ends up being.
*/
.se-footer__logo .se-logo__img{height:29px;width:150px;object-fit:contain}
/*
   The white plate behind the footer logo is gone.

   The logo used to be the approved JPEG sitting on its flat white field, so the
   navy "Smart" half of the wordmark was invisible on the navy footer and a
   white rounded rectangle was placed behind it to make it legible. That was a
   workaround around the file rather than a design decision, and it read as a
   chip pasted onto the footer.

   tools/build-logo-assets.php now derives a transparent PNG from the approved
   artwork — same letterforms, same two brand colours, same proportions, only
   the surrounding white field keyed out — and that is what the Media Library
   holds. The mark sits directly on the navy with no plate, no padding and no
   background, which is how the approved asset looks everywhere else.
*/
.se-footer__statement{
  margin:14px 0 0;
  font-size:.875rem;
  line-height:1.7;
  color:#C7D2E8;
  max-width:46ch;
}

/* A quiet route out of the brand column, so the description is not the last thing
   in it. Small, not a second call-to-action button: the footer already carries
   the real one in row 1 and the legal bar below. */
.se-footer__brandcta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:14px;
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  transition:color .15s var(--se-ease);
}
.se-footer__brandcta .se-icon{transition:transform .18s var(--se-ease)}
.se-footer__brandcta:hover{color:var(--se-orange-2,#ffb27a);text-decoration:underline}
.se-footer__brandcta:hover .se-icon{transform:translateX(3px)}

/* ------------------------------------------------- Row 2, column 2: small map */

/*
   A small map under the address, in the same column as the address it belongs to.

   The three settings behind it are the Contact page's own map settings, so the
   owner configures the map once and it appears in both places. With nothing
   configured the block is not in the markup at all, so this rule never draws an
   empty frame and never shows a map of a place the business is not at.
*/
.se-footer__map{
  margin-top:14px;
  /*
     An explicit width, not just a max-width.

     The contact column is a flex column with align-items:flex-start, so the map
     block was a shrink-to-fit item: it took its width from the iframe's own
     default 300px rather than from the column, and the directions link below it
     — which has no intrinsic width — collapsed to the width of its own text and
     wrapped onto two lines. width:100% resolves against the column and the
     max-width caps it, so the frame and the link are the same width on every
     viewport.
  */
  width:min(100%,280px);
  align-self:flex-start;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.se-footer__map-frame{
  display:block;
  width:100%;
  height:132px;
  border:0;
  /* A neutral filter, not a colour wash. Google embeds can be inverted to match a
     dark surface, but doing that to an embed the owner supplied would change the
     map they chose; the navy frame around it is enough separation. */
  background:rgba(255,255,255,.06);
}
/*
   The selector carries the container on purpose.

   .se-footer__col a sets display:inline-block and an 0.875rem size on every link
   in a footer column, and that selector is two parts long against this one's one.
   Left as a bare class, the directions link came out as an inline-block shrunk to
   the width of its own text and wrapped onto two lines inside a 280px map.
*/
.se-footer__map .se-footer__map-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 10px;
  white-space:nowrap;
  font-family:var(--se-font-head);
  font-size:.75rem;
  font-weight:700;
  line-height:1.4;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.12);
  transition:background-color .15s var(--se-ease),color .15s var(--se-ease);
}
.se-footer__map .se-footer__map-link:hover{background:var(--se-orange);color:#04103c}
.se-footer__map .se-footer__map-link .se-icon{transition:transform .18s var(--se-ease)}
.se-footer__map .se-footer__map-link:hover .se-icon{transform:translateX(3px)}

/* ------------------------------------------------------- Row 3: badge slots */

.se-footer__marks{min-width:0}
.se-footer__marks-caption{
  margin:0 0 12px;
  font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:#C7D2E8;
}

/*
   Nine slots, across as many columns as the row has filled.

   An explicit grid rather than a wrapping flex row, because left to wrap, badges
   of equal proportion can strand a single badge on a line of its own and that
   reads as an accident rather than as a row.

   The column count is not fixed at nine. Nine slots are configurable, but a slot
   with no image is not rendered at all — an empty frame is worse than no frame —
   so the grid is told how many badges it actually has, and lays out exactly that
   many across. With all nine filled it is nine across; with the six that exist
   today it is six across and the same row height. The slots are declared once in
   SmartEdge_Settings::footer_mark_fields() and counted here from the same settings
   group, so the field list and this grid cannot disagree about the count.
*/
.se-footer__marks-row{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(var(--se-badge-cols,6),minmax(0,1fr));
  gap:10px;
}

/*
   Tablet: six across becomes three, and nine becomes three by three. Fixed steps
   rather than auto-fit, so the cells stay a consistent size across the row instead
   of stretching to fill whatever width is left over.
*/
@media (max-width:1024px){
  .se-footer__marks-row{
    grid-template-columns:repeat(min(var(--se-badge-cols,6),3),minmax(0,1fr));
    max-width:520px;
  }
}

@media (max-width:600px){
  .se-footer__marks-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:300px;
  }
}

/*
   A cell, not an image size.

   The cell is a fixed-ratio box with its own background and the image is fitted
   inside it, so a cell is never a different size from its neighbours and the grid
   stays even whatever the source proportions are. The 3:1 ratio matches the
   supplied review badges, which are wide and short; an owner who uploads a
   squarer badge gets it fitted whole rather than stretched to fill.
*/
.se-footer__mark{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3 / 1;
  min-width:0;
  padding:6px 10px;
  border-radius:9px;
  /*
     A white plate behind each image.

     The supplied badges are artwork drawn on a white card. On the navy footer
     they would otherwise float without an edge, so the plate matches the badge's
     own background and gives the row a consistent, deliberate look. It does not
     alter or recolour the artwork, and it means an owner can drop in a dark mark
     or a light one and both are legible.
  */
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .18s var(--se-ease),box-shadow .18s var(--se-ease);
}

/* The link fills the cell so the whole badge is the hit target, not just the art. */
.se-footer__mark-link{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  text-decoration:none;
  border-radius:inherit;
}
.se-footer__mark-link:focus-visible{
  outline:2px solid var(--se-orange);
  outline-offset:2px;
}

/*
   object-fit:contain with the image constrained by both dimensions, so a file of
   any proportion fits its cell whole and is never stretched. Contain rather than
   cover, because cover would crop a badge to fill the box and cut off the logo or
   the rating at one end.
*/
.se-footer__mark-img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.se-footer__mark:hover,
.se-footer__mark:has(.se-footer__mark-link:hover){
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* ------------------------------------------------------------- Social profiles */

.se-social{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px;
}
/*
 * Six icons at 34px plus five 8px gaps is 238px, and the Contact column is about
 * 219px wide because it also carries the address. So the icons in that one column
 * step down to 30px and the gap to 6px: six at 30px plus five 6px gaps is 210px,
 * which fits on one line. Without this the row broke five-and-one and left a
 * single icon stranded underneath, which reads as a mistake rather than a list.
 */
.se-footer__col--contact .se-social{gap:6px}
.se-footer__col--contact .se-social__link{width:30px;height:30px;border-radius:8px}
.se-footer__col--contact .se-social__link .se-icon{width:16px;height:16px}
.se-social__item{display:flex}
.se-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:9px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-decoration:none;
  transition:background-color .15s var(--se-ease),color .15s var(--se-ease),border-color .15s var(--se-ease);
}
.se-social__link:hover{background:var(--se-orange);border-color:var(--se-orange);color:#fff}
/*
   An unconfigured platform, before the brand pairs are applied.

   This base state only needs to stop the generic hover above from firing, which
   would repaint an inert tile as though it were a link. It deliberately does not
   set a colour of its own: the brand pair further down this file is what actually
   paints every tile, and a dimmed colour here would win on source order and undo
   it. The visible difference between a live profile and a reserved slot is the
   dashed ring, the absent hover response and the element being a span rather
   than an anchor, all of which are described with the brand pair below.
*/
.se-social__link.is-unset{
  border-color:transparent;
  cursor:default;
}
.se-social__link.is-unset:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);
}
.se-footer__social{margin-top:4px}

/* ------------------------------------ Legal navigation, inside row 2 */

/*
   The legal links used to be a full-width orange bar under the whole footer. The
   brief asks for exactly three rows and a bar of its own is a fourth, so they now
   sit on their own line beneath the company statement in row 2's first column.

   They keep their own navigation semantics and their own accessible name, so this
   is still a navigation region and not a run-on paragraph of links. The colours
   change with the surface: on the navy footer these are white rather than the
   deep navy they used to be on orange, which would now fail contrast against a
   navy background.
*/
.se-footer__legal{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(199,210,232,.22);
}
.se-footer__copy{
  margin:0 0 8px;
  font-size:.8125rem;
  font-weight:600;
  color:#C7D2E8;
}
.se-footer__legal-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px 20px;
}
.se-footer__legal-links a,
.se-footer__cookie{
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  background:none;
  border:0;
  padding:3px 0;
  cursor:pointer;
  transition:color .15s var(--se-ease);
}
.se-footer__legal-links a:hover,
.se-footer__cookie:hover{color:var(--se-orange-2,#ffb27a);text-decoration:underline}
.se-footer__legal-links a:focus-visible,
.se-footer__cookie:focus-visible{
  outline:2px solid var(--se-orange-2,#ffb27a);outline-offset:2px;border-radius:3px;
}

.se-footer a:focus-visible,
.se-footer button:focus-visible{
  outline:2px solid var(--se-orange-2,#ffb27a);
  outline-offset:2px;
  border-radius:4px;
}

/* ------------------------------------------------- Row 2, column 3: social */

.se-footer__social-note{
  margin:12px 0 0;
  max-width:34ch;
  font-size:.75rem;
  line-height:1.55;
  color:rgba(199,210,232,.72);
}

/*
   The icons are larger here than they were in the old Contact column.

   They were 30px because that column also carried the postal address, leaving it
   about 219px of usable width, and six 30px icons plus gaps had to fit on one
   line or a single icon stranded on a second row. Social now has a column to
   itself with no address in it, so the width argument is gone: the icons go to
   46px and the glyphs to 22px, which is a comfortable target rather than the
   30px it was, and still leaves six icons plus five 12px gaps at 336px inside a
   column about 380px wide.
*/
.se-footer__social--lg{gap:12px;margin-top:4px}
.se-footer__social--lg .se-social__link{
  width:46px;height:46px;
  border-radius:12px;
}
.se-footer__social--lg .se-social__link .se-icon{width:22px;height:22px}

/*
   ================================ Social: SmartEdge blue and orange ==========

   The rule the whole site follows, and the footer is where it is most visible:

     orange ground -> blue icon      #FD6218 ground, #061454 glyph
     blue ground   -> white icon     #0D3A7D ground, #FFFFFF glyph

   Both pairs sit inside the approved palette and both clear WCAG AA for a
   non-text graphic. Measured contrast: navy #061454 on orange #FD6218 is 6.6:1,
   and white on the brand blue #0D3A7D is 9.4:1.

   The blue ground is --se-blue, the same custom property the header, the buttons
   and the banners use. It used to be a hard-coded #1B3A8C here, which is a
   different and lighter blue: the social row then read as a third colour that
   belonged to nothing else on the page, and one that was not in the palette.
*/
.se-social__link.is-brand-a,
.se-social__link.is-brand-b{
  border:0;
  transition:background-color .18s var(--se-ease),color .18s var(--se-ease),
             transform .18s var(--se-ease),box-shadow .18s var(--se-ease);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
/* Odd tiles in the row: orange ground, blue glyph. */
.se-social__link.is-brand-a{
  background:var(--se-orange);
  color:var(--se-navy);
}
.se-social__link.is-brand-a:hover{
  background:var(--se-navy);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.26);
}
/* Even tiles in the row: blue ground, white glyph. */
.se-social__link.is-brand-b{
  background:var(--se-blue);
  color:#fff;
}
.se-social__link.is-brand-b:hover{
  background:var(--se-orange);
  color:var(--se-navy);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.26);
}
.se-social__link.is-brand-a:focus-visible,
.se-social__link.is-brand-b:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/*
   An unconfigured tile.

   The brief sets one colour rule for the footer social row and it now holds in
   every state, configured or not:

     blue ground    -> white glyph
     orange ground  -> navy glyph

   An earlier version dimmed an unconfigured tile with opacity, which looked like
   a restrained solution and was not one. At 45% the orange tile's navy glyph
   composited towards the navy footer and read as brown, and the blue tile's
   white glyph sat at roughly 4.2:1 rather than the 9.7:1 the configured tile has.
   The two halves of the rule were both quietly broken by the same declaration,
   and only on the tiles a visitor actually sees, since no profile address is
   configured on this site.

   So the unconfigured tile is painted at full strength, exactly like a
   configured one, and the state is signalled by something that is not a colour:

     - a dashed hairline ring, which is the difference between a live link and a
       reserved slot at a glance
     - no hover response at all, no lift and no colour change
     - cursor:default, and it is a span rather than an anchor, so it is not in the
       keyboard tab order and cannot be activated

   The ground and the glyph keep the brand pair, the pair keeps its contrast, and
   the row still cannot mislead anybody into clicking something that does nothing.
*/
.se-social__link.is-unset.is-brand-a,
.se-social__link.is-unset.is-brand-b{
  box-shadow:none;
  cursor:default;
}
.se-social__link.is-unset.is-brand-a:hover,
.se-social__link.is-unset.is-brand-b:hover{
  transform:none;
  box-shadow:none;
  /* The ground and glyph stay exactly as they are: no hover repaint. */
  background:var(--se-orange);
  color:var(--se-navy);
}
.se-social__link.is-unset.is-brand-b:hover{
  background:var(--se-blue);
  color:#fff;
}

/*
   The reserved-slot ring. Dashed rather than solid because a solid hairline is
   what the configured tile's focus ring uses, and the two states must not be
   confusable.
*/
.se-social__link.is-unset{
  box-shadow:none;
  outline:1px dashed rgba(255,255,255,.34);
  outline-offset:-5px;
}

/* ============================ The thin orange legal bar ======================

   One line of type under the whole footer. It is the strip at the foot of the
   page, not a fourth row: no heading, no rule, no badge, and no more vertical
   space than the type itself needs.
*/
.se-legalbar{
  background:var(--se-orange);
  color:#04103c;
}
.se-legalbar__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 24px;
  padding-block:9px;
}
.se-legalbar__copy{
  margin:0;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.5;
  color:#04103c;
}
.se-legalbar__links{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 18px;
}
.se-legalbar__links a,
.se-legalbar__cookie{
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:700;
  line-height:1.5;
  color:#04103c;
  text-decoration:none;
  background:none;
  border:0;
  padding:2px 0;
  cursor:pointer;
  transition:opacity .15s var(--se-ease);
}
.se-legalbar__links a:hover,
.se-legalbar__cookie:hover{opacity:.72;text-decoration:underline;text-underline-offset:3px}
.se-legalbar__links a:focus-visible,
.se-legalbar__cookie:focus-visible{
  outline:2px solid #04103c;outline-offset:2px;border-radius:3px;
}
/* The consent control is not a document, so it reads as a control rather than as
   a fourth legal page: a dotted underline and no slash. */
.se-legalbar__cookie{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:4px;
}

@media (max-width:820px){
  /*
     The bar gets narrower type before it gets taller.

     At 0.8125rem the three legal links need about 400px and a 390px phone has
     350px of usable width, so they broke onto two lines and the bar went from
     one row to three. At 0.75rem with a 12px gap they need about 300px and fit
     on one, which keeps the bar to two rows on a phone: the copyright, then the
     links.
  */
  .se-legalbar__copy{font-size:.75rem}
  .se-legalbar__links{gap:4px 14px}
  .se-legalbar__links a,
  .se-legalbar__cookie{font-size:.75rem}
}

@media (max-width:560px){
  /* Stacked and left aligned, so neither side has to compress to fit beside the
     other on a 390px phone. */
  .se-legalbar__inner{
    flex-direction:column;align-items:flex-start;
    gap:4px;padding-block:9px;
  }
  .se-legalbar__links{gap:4px 12px}
}

/* ============================== Responsive ================================ */

/*
   Row 2 stops being three columns at 1180px.

   Contact goes to its own line so the address is not squeezed into a third of the
   width, and social sits beside the brand rather than under an empty third.
*/
@media (max-width:1180px){
  .se-footer__brandrow{grid-template-columns:minmax(0,1fr) auto}
  .se-footer__col--contact{grid-column:1 / -1;grid-row:2}
}

/*
   Row 1 keeps four columns well below the point where row 2 gives up three.

   It used to drop to three equal columns at 1180px. That discarded the
   proportional sizing and gave Industries a third of the row, which split into
   two sub-columns narrower than its own longest entry, and "Logistics &
   Transportation" and "Media & Entertainment" wrapped.

   The four-column layout needs about 1,072px before Industries falls under the
   ~380px it requires, so it holds until 1080px and then steps to two columns
   rather than to four cramped ones.
*/
@media (max-width:1080px){
  /*
     Two columns: Company beside Services, Industries beside Resources.

     Industries at half the row is still about 250px per sub-column at 1080px,
     which is wider than its longest entry, so nothing wraps on the way down.
     The order is unchanged, so the visual order still matches the DOM order.
  */
  .se-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .se-footer__brandrow{grid-template-columns:minmax(0,1fr);gap:26px}
  .se-footer__col--contact{grid-column:auto;grid-row:auto}
  .se-footer__statement{max-width:52ch}
}

@media (max-width:820px){
  .se-footer__legal-links{gap:6px 18px}
}

@media (max-width:560px){
  .se-footer__cols{grid-template-columns:minmax(0,1fr);gap:26px}
  .se-footer__heading{margin-bottom:11px}
  .se-footer__logo .se-logo__img{height:26px;width:136px}

  /*
     Two across on a phone.

     Three across would put nine cells three rows deep and six cells two rows
     deep; at 390px that is a badge block 200px or taller in a footer that is
     already the longest part of the page. Two across keeps six badges at three
     rows of two, which is compact and still shows the artwork clearly at about
     140px per cell.
  */
  .se-footer__marks-row{gap:8px;max-width:none}
  .se-footer__mark{padding:7px 9px;border-radius:8px}
}

@media (prefers-reduced-motion:reduce){
  .se-footer__col a,
  .se-social__link,
  .se-footer__mark{transition:none}
  /* The lift is on the cell now, not on the image inside it. */
  .se-footer__mark:hover{transform:none}
}

/* ------------------------------------------------- Industries, thirteen entries */

/*
   The Industries column carries thirteen entries: the overview plus twelve
   sectors. The list is laid out as two sub-columns so the footer row keeps five
   columns and the same height as its neighbours, rather than one column twice
   as tall as the rest.

   The items flow row-major — first item left, second right, third on the next
   line left — which is how a two-column list is normally read, and it keeps the
   approved industry order intact in the DOM as well as on screen.
*/
.se-footer__list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
  align-items: start;
}

/*
   The sub-columns are kept at every width, down to a phone.

   Collapsing them below 1180px was tried and reverted by measurement. With one
   column, the thirteen industry entries stack and the footer column becomes 417px
   beside a 147px Resources column — a ratio of 2.84, and a footer 2114px tall on
   a 390px screen, which is the "excessively tall ragged column" the brief rules
   out.

   Keeping two columns costs a few wrapped entries: "Logistics & Transportation"
   and "Travel & Hospitality" each take two lines at 167px. Two wrapped links are
   a far smaller cost than a footer a visitor has to scroll a third of the way
   through to reach the legal bar. The two-column reading order is unchanged
   because the items are laid out row-major.
*/