/* ==========================================================================
   SmartEdge — components
   Forms, modals, filters, pagination, listings and detail layouts.
   Depends on the tokens declared in main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms

   The form surface.

   The two forms on the site — Contact and Hire a Developer — sit inside a
   .se-infocard, which carries the white panel and its border. This block is
   what makes the form itself read as a form rather than as a list of loose
   controls: it gives the container a visible edge, lifts it off the section
   background, and sets a spacing rhythm the fields share.

   Both forms use the same classes, so the two pages cannot drift apart. Nothing
   here changes a field, a name, a validation rule or where a submission goes.
   -------------------------------------------------------------------------- */
.se-form{
  display:grid;
  gap:22px;

  /*
     The panel.

     A form has to be recognisable as a form before a single field is read, so it
     is given one clear boundary and one clear ground rather than being left to
     look like a column of loose controls. The ground is the palest blue in the
     palette rather than the grey mist it used: the form is the one interactive
     object on the page, and the blue is the half of the identity that belongs to
     controls and links. Orange stays on the submit button, the required markers
     and the focus ring, so the two brand colours each have one job.

     The border is one hairline in the brand blue at low strength rather than the
     generic line colour, which is what stops the panel reading as another grey
     card in a page full of them.
  */
  background:var(--se-blue-soft);
  border:1px solid rgba(13,58,125,.22);
  border-radius:var(--se-radius-lg);
  padding:clamp(18px,2.4vw,30px);
  box-shadow:0 1px 2px rgba(6,20,84,.04);
}

/* --------------------------------------------------------------- Grouping */

/*
   Named groups of fields.

   A formset with a legend, so the grouping is real: a screen reader announces the
   group name when a visitor tabs into it, and the browser's own form-restoration
   and password managers understand the structure. The visible legend carries the
   same name, with a short orange rule in front of it so the groups are scannable
   without reading them.

   The fieldset's own border and padding are reset. Left in place, a fieldset
   draws a second box inside the form panel and the page ends up with a box inside
   a box inside a card, which is the presentation this brief is asking to remove.
*/
.se-form__set{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.se-form__set + .se-form__set{
  margin-top:2px;
  padding-top:22px;
  border-top:1px solid rgba(13,58,125,.14);
}
.se-form__legend{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0 0 4px;
  padding:0;
  font-family:var(--se-font-head);
  font-size:.9375rem;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--se-navy);
}
.se-form__legend::before{
  content:'';
  flex:none;
  width:18px;
  height:3px;
  border-radius:2px;
  background:var(--se-orange);
}
.se-form__setnote{
  margin:0 0 16px;
  padding-left:28px;
  max-width:64ch;
  font-size:.875rem;
  line-height:1.55;
  color:var(--se-ink-soft);
}

.se-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.se-form__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.se-field--full{grid-column:1/-1}

/*
   The requirement form sits in a narrow sticky aside at every viewport width,
   so its two-column grid always clipped the selects ("Select project ty…").
   The grid is sized by the form's own container rather than by the viewport, so
   it goes to one column here while the contact form keeps its roomier layout.
*/
.se-haform .se-form__grid{grid-template-columns:1fr}

/* A field group: a label, a control and its help text, as one visible unit. */
.se-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  /*
     A hairline down the left of each field. Grouping the label, control and
     message this way means a reader scanning the form sees fields rather than
     thirty separate boxes, and an error reads as belonging to the field above
     it rather than as a line of red text somewhere on the form.

     The rule carries state: it takes the brand blue the moment focus enters the
     field, so the field you are in is findable at a glance on a long form without
     reading any text. It goes red only when the field is actually in error.
  */
  padding-left:12px;
  border-left:2px solid rgba(13,58,125,.16);
  transition:border-color .16s var(--se-ease);
}
.se-field:focus-within{border-left-color:var(--se-blue)}
.se-field[hidden]{display:none}

/* Labels sit above their control with a little more air than the control's own
   internal padding, which is what separates the two visually. The label flows as
   ordinary inline text rather than as flex rows, so "(optional)" stays beside
   the field name instead of being pushed to the far edge on narrow fields. */
.se-field__label{
  font-family:var(--se-font-head);
  font-size:.875rem;
  font-weight:700;
  color:var(--se-navy);
}
.se-field__req{color:var(--se-orange-ink)}
.se-field__optional{color:var(--se-ink-faint);font-weight:500;font-size:.8125rem;white-space:nowrap;margin-left:4px}
.se-field__help{
  margin:2px 0 0;
  font-size:.8125rem;
  line-height:1.55;
  color:var(--se-ink-faint);
}

.se-input,.se-select,.se-textarea{
  width:100%;font:inherit;font-size:.9375rem;color:var(--se-ink);
  /*
     White controls on the tinted form panel, so a control is distinct from the
     surface it sits on. They were the same tint as the panel, which left the
     form reading as one flat block.
  */
  background:#fff;
  border:1px solid rgba(13,58,125,.20);
  /*
     A touch more height than the default 12px gives. At 46px a control is a
     comfortable target on a phone, and the desktop rows read as deliberate
     rather than as default form chrome.
  */
  border-radius:var(--se-radius-sm);
  padding:13px 14px;
  min-height:46px;
  transition:border-color .16s var(--se-ease),background-color .16s var(--se-ease),box-shadow .16s var(--se-ease);
  -webkit-appearance:none;appearance:none;
}
.se-textarea{min-height:140px;resize:vertical;line-height:1.6;padding-top:12px}
.se-select{
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3a7d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.se-input::placeholder,.se-textarea::placeholder{color:var(--se-ink-faint)}

/*
   The focus state.

   Blue edge, blue ring. It was orange, which put the same colour on the focus
   ring, the submit button and the required markers, so the three stopped being
   distinguishable at a glance and an orange ring on a white field read as a
   warning rather than as "you are here". Blue is the identity colour for
   interactive state, and it holds 8.6:1 against the white control.
*/
.se-input:focus,.se-select:focus,.se-textarea:focus{
  background:#fff;border-color:var(--se-blue);outline:none;
  box-shadow:0 0 0 3px rgba(13,58,125,.16);
}
.se-input:focus-visible,.se-select:focus-visible,.se-textarea:focus-visible{outline:none}

/* A date control's own picker indicator, so it is not a grey blob on the blue panel. */
.se-input[type=date]{cursor:pointer}
.se-input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.se-input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* Phone split: country code plus number */
.se-phone{display:flex;gap:8px}
.se-phone__cc{flex:0 0 96px}
.se-phone__num{flex:1 1 auto;min-width:0}

/*
   A field in error: the control turns, and so does the rule down its left, so the
   state is carried by a shape change as well as by colour.
*/
.se-field.has-error{border-left-color:var(--se-danger)}
.se-field.has-error .se-input,
.se-field.has-error .se-select,
.se-field.has-error .se-textarea{border-color:var(--se-danger);background:#fdf6f6;box-shadow:0 0 0 3px rgba(179,45,46,.12)}
.se-field__error{
  margin:0;font-size:.8125rem;color:var(--se-danger);font-weight:600;
  display:flex;align-items:flex-start;gap:5px;
}
/* A tick beside a field that has been corrected. */
.se-field.is-valid .se-field__label::after{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--se-success);
  display:inline-block;margin-left:6px;vertical-align:middle;
}

/*
   The honeypot.

   A real field for a robot, so it has to be hidden from everyone else properly:
   moved off the panel rather than left at zero opacity, where a tab key could
   still land in it.
*/
.se-hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.se-check{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;line-height:1.55;color:var(--se-ink-soft);cursor:pointer}
/*
   A checkbox and a radio, drawn rather than left to the operating system.

   The native control on a tinted panel is a small grey box that reads as part of
   the browser chrome rather than as part of the form. These are the same
   checkbox: appearance is removed, the box is drawn in the brand blue, and the
   tick is the brand orange. The change is presentation only, and the control is
   still a real input, still focusable, still submitted and still announced.
*/
.se-check input[type=checkbox],
.se-check input[type=radio],
.se-field input[type=checkbox],
.se-field input[type=radio]{
  appearance:none;-webkit-appearance:none;
  flex:none;
  width:20px;height:20px;margin:1px 0 0;
  border:2px solid rgba(13,58,125,.45);
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:border-color .15s var(--se-ease),background-color .15s var(--se-ease),box-shadow .15s var(--se-ease);
}
.se-check input[type=checkbox]{border-radius:6px}
.se-check input[type=radio]{border-radius:50%}
.se-check input[type=checkbox]:hover,
.se-field input[type=checkbox]:hover,
.se-check input[type=radio]:hover,
.se-field input[type=radio]:hover{border-color:var(--se-blue)}
.se-check input[type=checkbox]:focus-visible,
.se-field input[type=checkbox]:focus-visible,
.se-check input[type=radio]:focus-visible,
.se-field input[type=radio]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(13,58,125,.22);
  border-color:var(--se-blue);
}
/* The tick. Drawn with two borders rather than a background image, so it is
   sharp at any zoom and needs no extra request. */
.se-check input[type=checkbox]:checked,
.se-field input[type=checkbox]:checked{
  background:var(--se-orange);
  border-color:var(--se-orange);
}
.se-check input[type=checkbox]:checked::after,
.se-field input[type=checkbox]:checked::after{
  content:'';
  position:absolute;
  left:6px;top:2px;
  width:5px;height:10px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(43deg);
}
/* The radio dot. */
.se-check input[type=radio]:checked,
.se-field input[type=radio]:checked{
  border-color:var(--se-blue);
  border-width:6px;
}
.se-check a{color:var(--se-navy);font-weight:600}

/*
   File input.

   The native control draws its own button in the operating system's colours,
   which on the blue form panel was a dark grey slab that belonged to nothing on
   the page. The button is restyled to the brand orange so the one control the
   browser owns still looks like part of this form. The input itself is untouched:
   it is still a real file input, still validates the same files and still posts
   the same field.
*/
.se-file{display:flex;flex-direction:column;gap:8px}
.se-file__control{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.se-file__name{font-size:.875rem;color:var(--se-ink-soft)}
.se-field input[type=file]{
  width:100%;
  font:inherit;font-size:.875rem;color:var(--se-ink-soft);
  background:#fff;
  border:1px solid rgba(13,58,125,.20);
  border-radius:var(--se-radius-sm);
  padding:10px 12px;
  min-height:46px;
  cursor:pointer;
}
.se-field input[type=file]::file-selector-button{
  font-family:var(--se-font-head);
  font-size:.8125rem;
  font-weight:700;
  color:#fff;
  background:var(--se-orange);
  border:0;
  border-radius:7px;
  padding:8px 16px;
  margin-right:12px;
  cursor:pointer;
  transition:background-color .15s var(--se-ease);
}
.se-field input[type=file]::file-selector-button:hover{background:var(--se-orange-dark)}
.se-field input[type=file]:focus-visible{
  outline:none;
  border-color:var(--se-blue);
  box-shadow:0 0 0 3px rgba(13,58,125,.16);
}
.se-field input[type=file]:focus-visible::file-selector-button{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--se-blue);
}
.se-file__hint{font-size:.8125rem;color:var(--se-ink-faint);margin:0}
.se-file input[type=file]{
  font:inherit;font-size:.875rem;padding:10px 12px;background:var(--se-mist);
  border:1px dashed var(--se-line);border-radius:var(--se-radius-sm);width:100%;cursor:pointer;
}
.se-file input[type=file]::file-selector-button{
  font:inherit;font-weight:700;margin-right:12px;padding:8px 14px;border:0;border-radius:8px;
  background:var(--se-navy);color:#fff;cursor:pointer;
}

/* Multi-select chips inside a form */
.se-multiselect{position:relative}
.se-multiselect__list{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--se-mist);border:1px solid var(--se-line);border-radius:var(--se-radius-sm)}
.se-multiselect__opt{position:relative}
.se-multiselect__opt input{position:absolute;opacity:0;width:0;height:0}
.se-multiselect__opt span{
  display:inline-block;padding:7px 13px;border-radius:var(--se-radius-pill);background:#fff;
  border:1px solid var(--se-line);font-size:.8125rem;font-weight:600;color:var(--se-ink);
  cursor:pointer;transition:all .16s var(--se-ease);
}
.se-multiselect__opt input:checked + span{background:var(--se-orange);border-color:var(--se-orange);color:#fff}
.se-multiselect__opt input:focus-visible + span{outline:3px solid var(--se-orange);outline-offset:2px}

/* CAPTCHA */
.se-captcha{margin:0}
.se-captcha__fallback{
  display:flex;flex-direction:column;gap:10px;padding:14px 16px;
  border:1px dashed color-mix(in srgb,var(--se-orange) 45%,var(--se-line));
  border-radius:var(--se-radius-sm);background:#fffaf7;font-size:.875rem;color:var(--se-ink-soft);
}
.se-captcha__fallback label{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--se-navy)}
.se-captcha__fallback input{width:150px;font:inherit;padding:8px 10px;border:1px solid var(--se-line);border-radius:8px;letter-spacing:.28em;text-transform:uppercase}

/* Honeypot — visually hidden but not display:none, so bots still fill it. */
.se-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Status messages */
.se-status{margin:0;padding:14px 16px;border-radius:var(--se-radius-sm);font-size:.9375rem;font-weight:600;line-height:1.55}
.se-status.is-success{background:#edf7f0;border:1px solid #bfe0cb;color:var(--se-success)}
.se-status.is-error{background:#fdf1f1;border:1px solid #f0c4c4;color:var(--se-danger)}

/* Form footer */
.se-form__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  /*
     A rule above the actions, so the end of the form is a boundary rather than
     a floating button under a column of fields.
  */
  padding-top:18px;
  border-top:1px solid rgba(13,58,125,.16);
}
.se-form__foot .se-btn{
  flex:0 0 auto;
  /*
     A full-height submit. It was sized like any other button in the site and
     sat shorter than the 46px controls beside it, which made the most important
     control on the page the least substantial one.
  */
  min-height:50px;
  padding:14px 26px;
}
.se-form__note{
  font-size:.8125rem;color:var(--se-ink-faint);margin:0;flex:1 1 240px;
  background:#fff;
  border:1px solid var(--se-line);
  border-left:2px solid var(--se-blue);
  border-radius:var(--se-radius-sm);
  padding:10px 12px;
  line-height:1.55;
}
.se-form__note a{color:var(--se-orange-ink);font-weight:600}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.se-modal{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,20,84,.6);opacity:0;transition:opacity .18s var(--se-ease);
}
.se-modal[hidden]{display:none}
.se-modal[data-open]{opacity:1}
.se-modal__panel{
  position:relative;width:100%;max-width:680px;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:var(--se-radius-lg);box-shadow:var(--se-shadow-lg);
  padding:clamp(22px,3vw,34px);transform:translateY(10px) scale(.99);transition:transform .2s var(--se-ease);
}
.se-modal[data-open] .se-modal__panel{transform:none}
.se-modal__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;
  background:var(--se-mist);color:var(--se-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .16s var(--se-ease);
}
.se-modal__close:hover{background:var(--se-line)}
.se-modal__title{margin:0 0 .3rem;font-size:1.375rem;padding-right:40px}
.se-modal__intro{margin:0 0 1.2rem;font-size:.9375rem;color:var(--se-ink-soft)}
.se-modal__jobref{
  display:inline-block;margin:0 0 1rem;padding:6px 12px;border-radius:var(--se-radius-pill);
  background:var(--se-blue-soft);border:1px solid var(--se-line);
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);
}
body.se-modal-open{overflow:hidden}

/* --------------------------------------------------------------------------
   Filter panel (portfolio)
   -------------------------------------------------------------------------- */
.se-filterlayout{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(22px,3vw,42px);align-items:start}

.se-filterpanel{
  position:sticky;top:calc(var(--se-header-h) + 16px);
  background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);
  padding:20px;display:grid;gap:20px;max-height:calc(100vh - var(--se-header-h) - 32px);overflow-y:auto;
}
.se-filtergroup__title{
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--se-ink-faint);margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.se-filtergroup__title button{
  background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--se-orange-ink);cursor:pointer;font-weight:800;font-size:.6875rem;
}
.se-filteropts{display:grid;gap:2px}
.se-filteropt{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:7px;cursor:pointer;font-size:.875rem;color:var(--se-ink);transition:background-color .14s var(--se-ease)}
.se-filteropt:hover{background:var(--se-mist)}
.se-filteropt input{width:16px;height:16px;flex:none;accent-color:var(--se-orange);cursor:pointer}
.se-filteropt__count{margin-left:auto;font-size:.75rem;color:var(--se-ink-faint);font-variant-numeric:tabular-nums}
.se-filteropt--all{font-weight:700;color:var(--se-navy)}

/* Category tree */
.se-tree{margin:0}
.se-tree__node{margin:0}
.se-tree__label{display:flex;align-items:center;gap:6px}
.se-tree__toggle{
  flex:none;width:22px;height:22px;border-radius:6px;border:1px solid var(--se-line);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--se-ink-soft);
  transition:transform .16s var(--se-ease),background-color .16s var(--se-ease);
}
.se-tree__toggle[aria-expanded=true]{transform:rotate(90deg);background:var(--se-mist)}
.se-tree__toggle:hover{background:var(--se-mist);color:var(--se-navy)}
.se-tree__children{list-style:none;margin:2px 0 2px 16px;padding-left:12px;border-left:1px solid var(--se-line)}
.se-tree__children[hidden]{display:none}

/* Results area */
.se-filterresults__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.se-filterresults__count{font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-ink-soft);margin:0}
.se-filterresults__count strong{color:var(--se-navy)}
.se-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.se-chip{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--se-radius-pill);
  background:var(--se-blue-soft);border:1px solid var(--se-line);color:var(--se-navy);
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;cursor:pointer;
  transition:background-color .16s var(--se-ease),border-color .16s var(--se-ease);
}
.se-chip:hover{background:#fff;border-color:var(--se-orange);color:var(--se-orange-ink)}
.se-filterclear{margin:0 0 18px}

.se-portgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.se-portgrid[aria-busy=true]{opacity:.55}
.se-portcard{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);display:flex;flex-direction:column;transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
.se-portcard:hover{transform:translateY(-3px);box-shadow:var(--se-shadow)}
.se-portcard__media{position:relative;display:block;background:var(--se-blue-soft);overflow:hidden}
.se-portcard__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-portcard:hover .se-portcard__img{transform:scale(1.04)}
.se-portcard__body{display:flex;flex-direction:column;gap:9px;padding:16px 17px 18px;flex:1 1 auto}
.se-portcard__title{font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);line-height:1.3;margin:0}
.se-portcard__desc{font-size:.875rem;line-height:1.6;color:var(--se-ink-soft);margin:0;flex:1 1 auto}
.se-tagrow{display:flex;flex-wrap:wrap;gap:6px}
.se-tag{
  display:inline-block;padding:3px 9px;border-radius:var(--se-radius-pill);
  background:var(--se-mist);border:1px solid var(--se-line-soft);
  font-size:.6875rem;font-weight:700;color:var(--se-ink-soft);letter-spacing:.01em;
}
.se-tag--industry{background:var(--se-blue-soft);color:var(--se-navy-700);border-color:#dbeafe}
.se-tag--tech{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.se-portcard__foot{margin-top:4px}
.se-portcard__more{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--se-font-head);font-size:.875rem;font-weight:700;
  color:var(--se-navy);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
}
.se-portcard__more .se-icon{color:var(--se-orange);transition:transform .2s var(--se-ease)}
.se-portcard__more:hover{color:var(--se-orange-ink)}
.se-portcard:hover .se-portcard__more .se-icon{transform:translateX(3px)}
.se-portcard__empty{grid-column:1/-1;padding:40px 24px;text-align:center;color:var(--se-ink-soft);background:var(--se-mist);border-radius:var(--se-radius)}

/* Portfolio detail modal content */
.se-pdetail{display:grid;gap:20px}
.se-pdetail__media{border-radius:var(--se-radius);overflow:hidden;background:var(--se-blue-soft)}
.se-pdetail__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.se-pdetail__gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.se-pdetail__gallery img{width:100%;aspect-radius:8px;aspect-ratio:4/3;object-fit:cover}
.se-pdetail__title{margin:0;font-size:1.5rem;line-height:1.25}
.se-pdetail__text{color:var(--se-ink);line-height:1.7}
.se-pdetail__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0;padding:16px;background:var(--se-mist);border-radius:var(--se-radius-sm)}
.se-pdetail__facts dt{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--se-ink-faint);margin:0}
.se-pdetail__facts dd{margin:2px 0 0;font-size:.9375rem;color:var(--se-ink);font-weight:600}
.se-pdetail__list{margin:0;padding-left:1.1em;color:var(--se-ink)}
.se-pdetail__list li{margin-bottom:6px}
.se-pdetail__actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:4px}

/* --------------------------------------------------------------------------
   Listings: blog, careers, archives
   -------------------------------------------------------------------------- */
.se-listing{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,290px);gap:clamp(20px,2.6vw,38px);align-items:start}
.se-listing--wide{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
.se-listing--plain{grid-template-columns:minmax(0,1fr)}

.se-sidebar{display:grid;gap:22px;position:sticky;top:calc(var(--se-header-h) + 16px)}
.se-sidebar--right{position:sticky}

.se-widget{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:18px}
.se-widget--flat{background:transparent;border:0;padding:0}
.se-widget--tint{background:var(--se-mist);border-color:var(--se-line-soft)}
.se-widget__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.se-widget__title .se-icon{color:var(--se-orange)}
.se-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.se-widget li{margin:0}
.se-widget a{font-size:.875rem;color:var(--se-ink);text-decoration:none;display:block;padding:6px 8px;border-radius:7px;line-height:1.45}
.se-widget a:hover{background:var(--se-mist);color:var(--se-orange-ink)}
.se-widget a.is-active{background:var(--se-blue-soft);color:var(--se-navy);font-weight:700}
.se-widget__count{margin-left:auto;font-size:.75rem;color:var(--se-ink-faint);font-variant-numeric:tabular-nums}
.se-widget li{display:flex;align-items:center;gap:6px}
.se-widget__note{font-size:.8125rem;color:var(--se-ink-soft);margin:0 0 10px}
.se-widget__cta{margin-top:10px}
.se-widget__promo{display:block;text-decoration:none;color:inherit;background:linear-gradient(140deg,var(--se-navy) 0%,#0d3a7d 100%);color:#fff;border-radius:var(--se-radius);padding:18px}
.se-widget__promo:hover{color:#fff}
.se-widget__promo strong{display:block;font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;margin-bottom:5px}
.se-widget__promo span{font-size:.8125rem;color:rgba(255,255,255,.82);line-height:1.5}

/* Post list (blog main) */
.se-postlist{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.se-postrow{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;
  background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;
  box-shadow:var(--se-shadow-sm);transition:box-shadow .2s var(--se-ease),transform .2s var(--se-ease);
}
.se-postrow:hover{box-shadow:var(--se-shadow);transform:translateY(-2px)}
.se-postrow__media{position:relative;display:block;background:var(--se-blue-soft);overflow:hidden;min-height:180px}
.se-postrow__img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-postrow:hover .se-postrow__img{transform:scale(1.04)}
.se-postrow__date{
  position:absolute;left:12px;top:12px;width:58px;padding:7px 4px;border-radius:10px;
  background:#fff;box-shadow:var(--se-shadow);text-align:center;line-height:1.15;
}
.se-postrow__date b{display:block;font-family:var(--se-font-head);font-size:1.25rem;font-weight:800;color:var(--se-navy)}
.se-postrow__date span{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--se-orange-ink)}
.se-postrow__body{padding:20px 22px;display:flex;flex-direction:column;gap:9px;min-width:0}
.se-postrow__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.75rem}
.se-postrow__cat{
  font-family:var(--se-font-head);font-weight:700;color:var(--se-orange-ink);
  background:color-mix(in srgb,var(--se-orange) 11%,transparent);border-radius:var(--se-radius-pill);padding:3px 10px;
}
.se-postrow__title{margin:0;font-size:1.1875rem;line-height:1.35}
.se-postrow__title a{text-decoration:none}
.se-postrow__title a:hover{color:var(--se-orange-ink)}
.se-postrow__excerpt{margin:0;font-size:.9375rem;line-height:1.65;color:var(--se-ink-soft);flex:1 1 auto}
.se-postrow__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--se-line-soft)}
.se-postrow__author{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--se-ink-soft)}
.se-postrow__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:var(--se-mist)}
.se-postrow__authormark{width:28px;height:28px;border-radius:50%;background:var(--se-blue-soft);color:var(--se-navy);display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--se-font-head);font-size:.6875rem;font-weight:800}
.se-postrow__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-navy);text-decoration:none}
.se-postrow__more .se-icon{color:var(--se-orange);transition:transform .2s var(--se-ease)}
.se-postrow:hover .se-postrow__more .se-icon{transform:translateX(3px)}

/* Blog detail */
.se-article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(24px,3vw,44px);align-items:start}
.se-article__main{min-width:0}
.se-article__header{margin-bottom:22px}
.se-article__cat{
  display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:var(--se-radius-pill);
  background:color-mix(in srgb,var(--se-orange) 11%,transparent);
  font-family:var(--se-font-head);font-size:.75rem;font-weight:800;color:var(--se-orange-ink);
}
.se-article__title{margin:0 0 14px;font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);line-height:1.2}
.se-article__byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.875rem;color:var(--se-ink-soft)}
.se-article__byline .se-postrow__avatar,.se-article__byline .se-postrow__authormark{width:38px;height:38px}
.se-article__meta-sep{color:var(--se-line)}
.se-article__hero{border-radius:var(--se-radius);overflow:hidden;margin-bottom:26px;background:var(--se-blue-soft)}
.se-article__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.se-article__tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--se-line)}
.se-article__back{margin-top:24px}
.se-related{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.se-related li{margin:0}

/* Careers */
.se-joblist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.se-jobrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:20px 22px;
  box-shadow:var(--se-shadow-sm);transition:box-shadow .2s var(--se-ease),transform .2s var(--se-ease);
}
.se-jobrow:hover{box-shadow:var(--se-shadow);transform:translateY(-2px)}
.se-jobrow__title{margin:0 0 7px;font-size:1.125rem;line-height:1.35}
.se-jobrow__title a{text-decoration:none}
.se-jobrow__title a:hover{color:var(--se-orange-ink)}
.se-jobrow__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:9px}
.se-jobrow__desc{margin:0 0 12px;font-size:.9375rem;color:var(--se-ink-soft);line-height:1.6}
.se-jobrow__actions{display:flex;gap:10px;flex-wrap:wrap}
.se-jobrow__count{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;text-align:right}
.se-jobrow__openings{font-family:var(--se-font-head);font-size:.75rem;font-weight:800;color:var(--se-navy);white-space:nowrap}

/* Career detail */
.se-jobdetail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,3vw,44px);align-items:start}
.se-jobdetail__aside{display:grid;gap:20px;position:sticky;top:calc(var(--se-header-h) + 16px)}
.se-jobmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:18px;background:var(--se-mist);border-radius:var(--se-radius);margin-bottom:26px}
.se-jobmeta dt{font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--se-ink-faint);margin:0 0 3px}
.se-jobmeta dd{margin:0;font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-navy)}
.se-jobsec{margin-bottom:28px}
.se-jobsec__title{font-size:1.1875rem;font-weight:800;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--se-line)}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.se-tabs{}
.se-tabs__list{
  display:flex;gap:8px;list-style:none;margin:0 0 28px;padding:0 2px 4px;
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.se-tabs__list::-webkit-scrollbar{height:6px}
.se-tabs__list::-webkit-scrollbar-thumb{background:var(--se-line);border-radius:3px}
.se-tabs__tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;scroll-snap-align:start;
  padding:11px 18px;border-radius:var(--se-radius-pill);border:1px solid var(--se-line);
  background:#fff;font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-ink);
  cursor:pointer;transition:all .16s var(--se-ease);
}
.se-tabs__tab:hover{border-color:var(--se-orange);color:var(--se-orange-ink)}
.se-tabs__tab[aria-selected=true]{background:var(--se-navy);border-color:var(--se-navy);color:#fff}
.se-tabs__icon{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--se-mist);color:var(--se-navy);flex:none}
.se-tabs__tab[aria-selected=true] .se-tabs__icon{background:rgba(255,255,255,.16);color:#fff}
.se-tabs__panel[hidden]{display:none}
.se-tabs__panel{animation:se-fade .22s var(--se-ease)}
@keyframes se-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Vertical (industries) */
.se-tabs--vertical .se-tabs__inner{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.se-tabs--vertical .se-tabs__list{flex-direction:column;overflow:visible;position:sticky;top:calc(var(--se-header-h) + 16px);margin:0}
.se-tabs--vertical .se-tabs__tab{width:100%;border-radius:var(--se-radius-sm);justify-content:flex-start;padding:12px 14px}

/* Panel inner layout (services / industries) */
.se-panelgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(22px,2.8vw,42px);align-items:start}
.se-panelgrid__media{border-radius:var(--se-radius);overflow:hidden;background:var(--se-blue-soft);position:sticky;top:calc(var(--se-header-h) + 16px)}
.se-panelgrid__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.se-panelgrid__body{display:grid;gap:26px}
.se-panelblock__title{font-size:1.1875rem;font-weight:800;margin:0 0 10px}
.se-panelgrid__actions{display:flex;flex-wrap:wrap;gap:12px}
.se-panelchips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.se-panelchips li{
  padding:6px 13px;border-radius:var(--se-radius-pill);background:var(--se-mist);border:1px solid var(--se-line-soft);
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);
}

/* FAQ accordion */
.se-faq{display:grid;gap:10px;margin:0}
.se-faq__item{border:1px solid var(--se-line);border-radius:var(--se-radius);background:#fff;overflow:hidden}
.se-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-navy);line-height:1.45;
}
.se-faq__q:hover{color:var(--se-orange-ink)}
.se-faq__icon{flex:none;width:24px;height:24px;color:var(--se-orange);transition:transform .18s var(--se-ease)}
.se-faq__q[aria-expanded=true] .se-faq__icon{transform:rotate(45deg)}
.se-faq__a{padding:0 18px 16px;margin:0;font-size:.9375rem;line-height:1.7;color:var(--se-ink-soft)}
.se-faq__a[hidden]{display:none}
/* An answer can link to the page its question is about. The underline keeps it
   reading as a link inside body text rather than as another heading. */
.se-faq__a a{color:var(--se-navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--se-orange) 60%,transparent)}
.se-faq__a a:hover{color:var(--se-orange-ink);text-decoration-color:currentColor}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.se-pagination{margin-top:32px;display:flex;justify-content:center}
.se-pagination .nav-links,.se-pagination .page-numbers{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.se-pagination a,.se-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--se-line);border-radius:10px;background:#fff;color:var(--se-ink);
  font-family:var(--se-font-head);font-size:.875rem;font-weight:700;text-decoration:none;
  transition:all .16s var(--se-ease);
}
.se-pagination a:hover{border-color:var(--se-orange);color:var(--se-orange-ink)}
.se-pagination .page-numbers.current{background:var(--se-navy);border-color:var(--se-navy);color:#fff}
.se-pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* --------------------------------------------------------------------------
   CTA strip / support band
   -------------------------------------------------------------------------- */
.se-supportband{background:var(--se-cream);border-block:1px solid color-mix(in srgb,var(--se-orange) 12%,transparent)}
.se-supportband__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-block:clamp(26px,3vw,40px)}
.se-support{display:flex;gap:12px;align-items:flex-start}
.se-support__icon{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--se-orange-ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--se-shadow-sm)}
.se-support__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);margin:0 0 3px}
.se-support__text{margin:0;font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.se-contactgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3vw,42px);align-items:start}
.se-contactcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.se-contactcard{
  background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:20px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--se-shadow-sm);
}
.se-contactcard__icon{width:46px;height:46px;border-radius:12px;background:var(--se-blue-soft);color:var(--se-navy);display:inline-flex;align-items:center;justify-content:center}
.se-contactcard__label{font-family:var(--se-font-head);font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--se-ink-faint)}
.se-contactcard__value{font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-navy);word-break:break-word;text-decoration:none}
a.se-contactcard__value:hover{color:var(--se-orange-ink)}
.se-contactcard__note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--se-ink-soft)}

.se-map{border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;background:var(--se-mist)}
.se-map__frame{width:100%;aspect-ratio:16/10;border:0;display:block;background:var(--se-mist)}
.se-map__fallback{padding:20px;display:grid;gap:10px}
.se-map__addr{font-size:.9375rem;line-height:1.6;margin:0;color:var(--se-ink)}
.se-infocard{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:18px;display:grid;gap:12px}
.se-infocard__row{display:flex;gap:11px;align-items:flex-start}
.se-infocard__row .se-icon{color:var(--se-orange-ink);flex:none;margin-top:2px}
.se-infocard__row strong{display:block;font-family:var(--se-font-head);font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--se-ink-faint);margin-bottom:2px}
.se-infocard__row span,.se-infocard__row a{font-size:.9375rem;color:var(--se-ink);text-decoration:none;line-height:1.55}
.se-infocard__row a:hover{color:var(--se-orange-ink)}

/* --------------------------------------------------------------------------
   Tabs / misc
   -------------------------------------------------------------------------- */
.se-helper{padding:14px 16px;border-radius:var(--se-radius-sm);font-size:.875rem;line-height:1.6}
.se-helper--info{background:var(--se-blue-soft);border:1px solid #dbeafe;color:var(--se-navy-700)}
.se-helper--note{background:#fffaf7;border:1px dashed color-mix(in srgb,var(--se-orange) 40%,var(--se-line));color:var(--se-ink-soft)}

.se-sortbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.se-sortbar label{font-size:.8125rem;font-weight:600;color:var(--se-ink-soft)}
.se-sortbar select{width:auto;min-width:190px;padding:9px 38px 9px 13px;font-size:.875rem}

.se-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.se-stat{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:20px;text-align:center;box-shadow:var(--se-shadow-sm)}
.se-stat__value{font-family:var(--se-font-head);font-size:2rem;font-weight:800;color:var(--se-navy);line-height:1.1;letter-spacing:-.02em}
.se-stat__label{font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-orange-ink);margin:6px 0 3px}
.se-stat__desc{font-size:.8125rem;color:var(--se-ink-soft);line-height:1.5}

.se-storygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.se-story{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:24px;box-shadow:var(--se-shadow-sm)}
.se-story__icon{width:48px;height:48px;border-radius:12px;background:var(--se-blue-soft);color:var(--se-navy);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.se-story__title{font-size:1.0625rem;font-weight:800;margin:0 0 7px}
.se-story__text{margin:0;font-size:.9375rem;line-height:1.65;color:var(--se-ink-soft)}

.se-timeline{list-style:none;margin:0;padding:0;position:relative}
.se-timeline::before{content:'';position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--se-line)}
.se-timeline li{position:relative;padding:0 0 26px 48px;margin:0}
.se-timeline li:last-child{padding-bottom:0}
.se-timeline__dot{position:absolute;left:6px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--se-orange);border:3px solid #fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--se-orange) 35%,transparent)}
.se-timeline__year{font-family:var(--se-font-head);font-size:.8125rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--se-orange-ink);margin:0 0 3px}
.se-timeline__title{font-size:1.0625rem;font-weight:800;margin:0 0 5px}
.se-timeline__text{margin:0;font-size:.9375rem;line-height:1.65;color:var(--se-ink-soft)}

.se-mvv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.se-mvv__item{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:26px 24px;box-shadow:var(--se-shadow-sm);border-top:4px solid var(--se-orange)}
.se-mvv__title{font-size:1.125rem;font-weight:800;margin:0 0 9px}
.se-mvv__text{margin:0;font-size:.9375rem;line-height:1.7;color:var(--se-ink-soft)}

.se-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center}
.se-split__media{border-radius:var(--se-radius);overflow:hidden;background:var(--se-blue-soft)}
.se-split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.se-nf__inner{max-width:62ch;margin-inline:auto;text-align:center;display:grid;gap:18px;justify-items:center}
.se-nf .se-h1{margin:0}
.se-nf__text{font-size:1.0625rem;color:var(--se-ink-soft);margin:0}
.se-nf .se-searchform__row{margin-top:4px}
.se-nf__links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;margin:8px 0 4px;padding:0}
.se-nf__links a{
  display:inline-block;padding:8px 15px;border-radius:var(--se-radius-pill);
  background:var(--se-mist);border:1px solid var(--se-line);
  font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-navy);text-decoration:none;
  transition:background-color .16s var(--se-ease),border-color .16s var(--se-ease);
}
.se-nf__links a:hover{background:#fff;border-color:var(--se-orange);color:var(--se-orange-ink)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .se-portgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-listing{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .se-listing .se-sidebar--right{grid-column:1/-1;position:static}
  .se-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1023px){
  .se-filterlayout{grid-template-columns:1fr}
  .se-filterpanel{position:static;max-height:none}
  .se-listing{grid-template-columns:1fr}
  .se-sidebar{position:static}
  .se-sidebar--left{order:2}
  .se-article{grid-template-columns:1fr}
  .se-jobdetail{grid-template-columns:1fr}
  .se-jobdetail__aside{position:static}
  .se-contactgrid{grid-template-columns:1fr}
  .se-panelgrid{grid-template-columns:1fr}
  .se-panelgrid__media{position:static}
  .se-tabs--vertical .se-tabs__inner{grid-template-columns:1fr}
  .se-tabs--vertical .se-tabs__list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .se-tabs--vertical .se-tabs__tab{width:auto;flex:0 0 auto}
  .se-mvv{grid-template-columns:1fr}
  .se-split{grid-template-columns:1fr}
  .se-supportband__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-postrow{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
}

@media (max-width:820px){
  .se-form__grid{grid-template-columns:1fr}
  .se-form__grid--3{grid-template-columns:1fr}
  .se-portgrid{grid-template-columns:1fr}
  .se-jobrow{grid-template-columns:1fr}
  .se-jobrow__count{align-items:flex-start;text-align:left;flex-direction:row;gap:14px}
  .se-pdetail__facts{grid-template-columns:1fr}
}

@media (max-width:640px){
  .se-postrow{grid-template-columns:1fr}
  .se-postrow__media{min-height:0;aspect-ratio:16/9}
  .se-contactcards{grid-template-columns:1fr}
  .se-supportband__grid{grid-template-columns:1fr}
  .se-statgrid{grid-template-columns:1fr}
  .se-form__foot .se-btn{width:100%}
  .se-modal{padding:0;align-items:flex-end}
  .se-modal__panel{max-width:none;max-height:94vh;border-radius:var(--se-radius-lg) var(--se-radius-lg) 0 0;padding:24px 18px 28px}
  .se-pdetail__gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-filterpanel{padding:16px}
}

/* ==========================================================================
   Promotional banner

   A compact SmartEdge banner used to occupy space the approved layout had
   already allocated but left empty. It is built from the same tokens as every
   other card on the site, so it reads as part of the design rather than as
   something bolted on. Three tones cover every placement:

     --card   white card on a mist or white section
     --tint   pale blue card, for a section that already has a white card
     --navy   dark band, for a section that is already dark

   The component is deliberately compact: it never sets a min-height, and it
   sizes to its own content, so filling an empty column cannot make the
   section it sits in taller.
   ========================================================================== */
.se-promo{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);
  border-radius:var(--se-radius);
  border:1px solid var(--se-line);
  background:#fff;
  box-shadow:var(--se-shadow-sm);
}
.se-promo--tint{background:var(--se-blue-soft);border-color:#dce9f6}
.se-promo--navy{background:linear-gradient(130deg,var(--se-navy) 0%,var(--se-navy-800) 100%);border-color:transparent;color:#fff;box-shadow:var(--se-shadow)}

/*
   The note variant: the same content with no surface.

   This is what a promotional block looks like when it is closing a section or
   balancing a column rather than being the thing to click. It has no background,
   no border, no radius and no shadow. What replaces the box is a single 3px rule
   down the left in the brand blue, real padding rather than padding that exists
   to fake a box, and typographic weight: a small orange eyebrow, a navy heading,
   the paragraph at the site's reading measure.

   The icon becomes a 32px mark sitting on the rule rather than a 40px tile in a
   tinted square, and the actions become inline text links with an arrow, because
   a filled button in a block that is deliberately not a surface is the loudest
   thing on the page and it is not the point.

   Because it carries no box, it can sit at the end of a narrow column without
   that column having to be stretched to match the one beside it, which is what
   the boxed version needed.
*/
.se-promo--note{
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding:2px 0 2px 18px;
  border:0;
  border-left:3px solid var(--se-blue);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.se-promo--note .se-promo__icon{
  width:32px;height:32px;border-radius:9px;
  background:rgba(13,58,125,.10);
  color:var(--se-blue);
}
.se-promo--note .se-promo__icon svg{width:18px;height:18px}
.se-promo--note .se-promo__eyebrow{
  margin-bottom:6px;
  color:var(--se-orange-ink);
}
.se-promo--note .se-promo__title{
  margin-bottom:8px;
  font-size:1.0625rem;
  color:var(--se-navy);
}
.se-promo--note .se-promo__text{max-width:60ch;color:var(--se-ink-soft)}
.se-promo--note .se-promo__points{margin-top:.7rem}
.se-promo--note .se-promo__points li{color:var(--se-ink-soft)}

/* The actions read as links rather than as buttons. */
.se-promo--note .se-promo__actions{
  margin-top:.85rem;
  gap:18px;
  flex-wrap:wrap;
}
.se-promo--note .se-promo__actions .se-btn{
  padding:0;
  min-height:0;
  border:0;
  background:none;
  box-shadow:none;
  font-size:.875rem;
  font-weight:700;
  color:var(--se-blue);
  gap:7px;
}
.se-promo--note .se-promo__actions .se-btn .se-btn__label{
  border-bottom:1px solid rgba(13,58,125,.35);
  padding-bottom:1px;
}
.se-promo--note .se-promo__actions .se-btn:hover{
  background:none;
  color:var(--se-orange-dark);
  transform:none;
}
.se-promo--note .se-promo__actions .se-btn:hover .se-btn__label{
  border-bottom-color:var(--se-orange);
}
.se-promo--note .se-promo__actions .se-btn .se-icon{width:16px;height:16px}

/* The primary action keeps one filled button, so there is still a clear default. */
.se-promo--note .se-promo__actions .se-btn--primary{
  padding:10px 18px;
  border-radius:var(--se-radius-pill);
  background:var(--se-orange);
  color:#fff;
  box-shadow:0 2px 8px rgba(253,98,24,.28);
}
.se-promo--note .se-promo__actions .se-btn--primary .se-btn__label{
  border-bottom:0;
}
.se-promo--note .se-promo__actions .se-btn--primary:hover{
  background:var(--se-orange-dark);
  color:#fff;
}

/* Anchored notes still need a hover that reads as a target. */
a.se-promo--note:hover{
  transform:none;
  box-shadow:none;
  border-left-color:var(--se-orange);
}

@media (max-width:640px){
  .se-promo--note{padding-left:14px;gap:12px}
  .se-promo--note .se-promo__actions{flex-direction:column;align-items:flex-start;gap:12px}
  .se-promo--note .se-promo__actions .se-btn--primary{
    align-self:stretch;
    justify-content:center;
    text-align:center;
  }
}

.se-promo__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;flex:none;
  background:color-mix(in srgb,var(--se-orange) 13%,transparent);
  color:var(--se-orange-ink);
}
.se-promo--navy .se-promo__icon{background:rgba(255,255,255,.14);color:#fff}
.se-promo--card .se-promo__icon,
.se-promo--tint .se-promo__icon{color:var(--se-navy)}

.se-promo__body{min-width:0}
.se-promo__eyebrow{
  font-family:var(--se-font-head);font-size:.6875rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--se-orange-ink);margin:0 0 .35rem;
}
.se-promo--navy .se-promo__eyebrow{color:var(--se-amber)}
.se-promo__title{
  font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;
  line-height:1.3;color:var(--se-navy);margin:0 0 .4rem;
}
.se-promo--navy .se-promo__title{color:#fff}
.se-promo__text{font-size:.9375rem;line-height:1.6;color:var(--se-ink);margin:0}
.se-promo--navy .se-promo__text{color:rgba(255,255,255,.84)}
.se-promo__points{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:5px}
.se-promo__points li{
  position:relative;padding-left:20px;
  font-size:.875rem;line-height:1.55;color:var(--se-ink);
}
.se-promo--navy .se-promo__points li{color:rgba(255,255,255,.86)}
.se-promo__points li::before{
  content:'';position:absolute;left:2px;top:.5em;
  width:7px;height:7px;border-radius:50%;background:var(--se-orange);
}
.se-promo__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:.9rem}
.se-promo__actions .se-btn{font-size:.875rem;padding:10px 16px}

/* Clickable variant: the whole card is the target, and the hover state is
   the same lift every other card on the site uses. */
a.se-promo{text-decoration:none;color:inherit;transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
a.se-promo:hover{transform:translateY(-2px);box-shadow:var(--se-shadow)}
a.se-promo:focus-visible{outline:3px solid var(--se-orange);outline-offset:3px}
a.se-promo .se-promo__title::after{
  content:'';position:absolute;
}
a.se-promo{position:relative}

@media (max-width:640px){
  .se-promo{grid-template-columns:1fr;gap:12px}
}