/* ==========================================================================
   Technology marks and the service card

   Two things live here.

   1. The marks. Technology names used to render as words in a pill, so a page
      about a stack showed no trace of the stack. The sixteen official marks are
      now shown as themselves, at a fixed size, on the brand's light plate so a
      dark mark reads against a light tile and a light mark reads against it too.

   2. The card. A service page's media column is 592px wide at the 1280px
      container and the photography library is deliberately small, so a row of
      photographs fills 384px to 590px of it and leaves the rest empty. The card
      takes that space with the platforms the service works with, one sentence,
      the service's own call to action and a link to its category.
   ========================================================================== */

/* ------------------------------------------------------------- The marks */

.se-techmarks{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.se-techmarks__item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:7px;
  border-radius:11px;
  background:#fff;
  border:1px solid var(--se-line);
  flex:none;
  transition:transform .18s var(--se-ease),box-shadow .18s var(--se-ease);
}
.se-techmarks__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  /*
   * Marks are published as artwork on a transparent ground. contain rather than
   * cover, so a mark is never cropped to fill its tile, and never enlarged past
   * the size it was drawn at: the tile is the ceiling.
   */
}
.se-techmarks__item:hover{
  transform:translateY(-2px);
  box-shadow:var(--se-shadow-sm);
}

/* On the navy card the tile is a translucent white plate rather than solid, so
   the row reads as one surface rather than six white chips on navy. */
.se-techmarks--card .se-techmarks__item{
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.28);
}
.se-techmarks--card .se-techmarks__item:hover{
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

@media (max-width:560px){
  .se-techmarks{gap:7px}
  .se-techmarks__item{width:40px;height:40px;padding:6px;border-radius:9px}
}

/* ---------------------------------------- Hire a Developer technology grid */

/*
   The tile behind each mark.

   A real platform mark is published as artwork, often as a dark silhouette or a
   single brand colour. On the mist background of this section a dark silhouette
   needs a light plate to read against, which is what this is: the same treatment
   the mark tiles use everywhere else, at the size this grid already works to.
*/
.se-techgrid__markwrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  padding:9px;
  border-radius:13px;
  background:#fff;
  border:1px solid var(--se-line);
  box-shadow:var(--se-shadow-sm);
  transition:transform .18s var(--se-ease),box-shadow .18s var(--se-ease);
}
.se-techgrid__item:hover .se-techgrid__markwrap{
  transform:translateY(-2px);
  box-shadow:var(--se-shadow);
}
.se-techgrid__mark{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/*
   A platform with no real mark.

   An empty tile with the brand's hairline, rather than a generic glyph. The name
   beside it is what carries the meaning, and an invented symbol would be a
   substitute logo for a platform the reader already knows.
*/
.se-techgrid__blank{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  background:var(--se-blue-soft);
}

/* The band on a service page's technology section, and the homepage technology
   strip: centred, with a little more air above the names below. */
.se-techmarks--band{
  justify-content:center;
  margin-top:18px;
  gap:10px;
}
.se-techmarks--band .se-techmarks__item{
  width:52px;height:52px;padding:9px;border-radius:13px;
  box-shadow:var(--se-shadow-sm);
}
.se-techmarks--band + .se-panelchips{margin-top:18px}

@media (max-width:560px){
  .se-techmarks--band{gap:8px;margin-top:14px}
  .se-techmarks--band .se-techmarks__item{width:44px;height:44px;padding:8px;border-radius:11px}
  .se-techmarks--band + .se-panelchips{margin-top:14px}
}

/* ============================ The homepage promotional rail =================

   Three offers written out, in the one place on the homepage where the right of
   the main content measured as a 640px by 220px empty rectangle — the services
   introduction band.

   They are no longer three panels of colour. Each is a block of prose opened by
   a 3px brand rule, with the platform marks and the link set below it. Nothing
   here carries a surface, a border on any other side, a radius or a shadow, so
   the band reads as an editorial column rather than a card grid, and the brand
   is carried by the rule, the icon, the eyebrow and the link rather than by 590
   square pixels of orange.
*/

.se-rail{
  display:grid;
  gap:22px;
  align-content:start;
  min-width:0;
}
/*
   A banner's own height, not the row's.

   Two of the three banners sit side by side, and their content rarely matches
   exactly: one may carry five platform marks and the other two, and the copy
   lengths differ. The item is a flex column, so a stretch on the grid item would
   make it grow to the taller of the pair and the shorter one would end with the
   difference sitting below its own last line, which reads as an unfinished
   column rather than as a choice. align-self:start keeps each banner to its own
   content and the row keeps its space below.
*/
.se-rail__item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:start;
  min-width:0;
  padding:2px 0 2px 18px;
  border:0;
  border-left:3px solid var(--se-orange);
  border-radius:0;
  background:none;
  box-shadow:none;
  transition:border-color .2s var(--se-ease);
}
.se-rail__item--b{border-left-color:var(--se-blue)}
.se-rail__item:hover,
.se-rail__item--b:hover{border-left-color:var(--se-orange)}
.se-rail__head{
  display:flex;align-items:center;gap:9px;
  margin-bottom:8px;
}
.se-rail__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none;
  color:var(--se-orange-ink);
}
.se-rail__item--b .se-rail__icon{color:var(--se-blue)}
.se-rail__eyebrow{
  margin:0;
  font-family:var(--se-font-head);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--se-orange-ink);
}
.se-rail__item--b .se-rail__eyebrow{color:var(--se-blue)}
.se-rail__title{
  margin:0 0 6px;
  font-family:var(--se-font-head);
  font-size:1.0625rem;
  font-weight:800;
  line-height:1.3;
  color:var(--se-navy);
}
.se-rail__text{
  margin:0;
  max-width:54ch;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--se-ink-soft);
}
.se-rail .se-techmarks{margin-top:12px;gap:6px}
.se-rail .se-techmarks__item{
  width:32px;height:32px;padding:5px;border-radius:8px;
  background:#fff;
  border:1px solid var(--se-line-soft);
}
.se-rail__cta{
  display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;
  margin-top:14px;
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:800;
  color:var(--se-blue);
  text-decoration:none;
  transition:gap .18s var(--se-ease),color .15s var(--se-ease);
}
.se-rail__cta:hover{color:var(--se-orange-dark);text-decoration:underline;text-underline-offset:3px}
.se-rail__cta .se-icon{transition:transform .18s var(--se-ease)}
.se-rail__cta:hover .se-icon{transform:translateX(3px)}
.se-rail__cta:focus-visible{outline:2px solid var(--se-orange);outline-offset:3px;border-radius:3px}

@media (max-width:560px){
  .se-rail{gap:18px}
  .se-rail__item{padding-left:14px}
}

/* ------------------------------------------------------------- The card */

.se-spcard{
  /*
     It reuses the existing .se-promo navy treatment for its surface, radius and
     padding, so it is the same promotional panel the rest of the site already
     uses and not a new component that has to be kept in step with it.

     The display is restated because .se-promo is a two-column grid laid out for
     an icon beside a body, and that put the card's footer in a second column
     outside the navy panel. The card has no leading icon and stacks, so it needs
     its own box model; the surface, radius, padding and shadow still come from
     .se-promo.
  */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin-top:18px;
}
.se-spcard__body{min-width:0}
.se-spcard .se-promo__title{
  font-size:1.0625rem;
  line-height:1.3;
  margin-bottom:.4rem;
}
.se-spcard .se-promo__text{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--se-ink-soft);
}
.se-spcard .se-techmarks{
  margin-top:14px;
}
.se-spcard__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}
/*
   The divider between the copy and the actions is a hairline in the page's own
   line colour. It was a translucent white, which only read against the navy the
   panel used to be.
*/
.se-spcard__foot .se-btn{
  font-size:.875rem;
  padding:10px 16px;
}
/*
   The category link is a text link, not a second button. Two buttons in a
   narrow column is a wall, and the category page is a secondary route rather
   than the action the panel is asking for.
*/
.se-spcard__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:700;
  color:var(--se-blue);
  text-decoration:none;
  transition:color .15s var(--se-ease);
}
.se-spcard__more .se-icon{transition:transform .18s var(--se-ease)}
.se-spcard__more:hover{color:var(--se-orange-dark);text-decoration:underline}
.se-spcard__more:hover .se-icon{transform:translateX(3px)}
.se-spcard__more:focus-visible{
  outline:2px solid var(--se-orange);outline-offset:3px;border-radius:3px;
}

/*
   The card sits under the photographs, in normal flow.

   The media column is left as a block on purpose. Making it a flex column to
   place the card beside a short photograph row also stretched the row itself,
   and the row's own grid then re-flowed from one line into two, which put the
   photographs at half the size the photography was assigned.
*/
.se-sp__media > .se-spcard{margin-top:20px}