/* ==========================================================================
   SmartEdge — Hire a Developer
   Layout from packagedesign/09_HIRE_A_DEVELOPER/01_MOCKUP/Hire_a_Developer_Desktop_Approved.png
   Depends on main.css, components.css and pages.css.
   ========================================================================== */

.se-phero--hire .se-phero__media{justify-content:flex-end}
.se-phero--hire .se-phero__img{max-width:540px}

/* Hero capability strip */
.se-hacaps{border-top:1px solid var(--se-line-soft);padding-block:18px}
.se-hacaps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.se-hacaps__item{display:flex;align-items:center;gap:10px;font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-navy);min-width:0}
.se-hacaps__icon{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--se-amber);color:var(--se-orange-ink)}

/* --------------------------------------------------------------------------
   Correction pass additions
   -------------------------------------------------------------------------- */

/* Why hire: the text column keeps everything it had; the photograph and its
   action move into the right margin that was empty. The two columns are
   balanced by content, not by equal heights, so a short list does not leave
   a tall gap under the image. */
.se-havalue__grid{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);gap:clamp(24px,3vw,46px);align-items:start}
.se-havalue__main{min-width:0}
.se-havalue__media{position:sticky;top:calc(var(--se-header-h) + 20px);display:grid;gap:14px;justify-items:start;min-width:0}
.se-havalue__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}
.se-havalue__caption{margin:0;font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}
.se-havalue__promo{margin-top:20px}
.se-havalue__promo .se-promo__text{font-size:.875rem}

/* Security: imagery sits inside the column it belongs to, so the section
   keeps its two-column composition and only the shorter column grows. */
.se-hasec__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm);margin-top:24px}
.se-hasec__promo{margin-top:16px}
.se-hasec__promo .se-promo__text{font-size:.8125rem}

/* The comparison column: a narrow visual above the table, and a wide one
   under it, so the whitespace at both ends of the table is used without
   changing the table itself. */
.se-hasec__comparehead{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);align-items:center;margin-bottom:20px}
.se-hasec__compareimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm)}
.se-hasec__comparecap{margin:0;font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}
.se-hasec__next{margin:22px 0 0}
.se-hasec__nextimg{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm)}
.se-hasec__nextcap{margin-top:10px;font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}

/*
   The engagement-model comparison.

   Two cards side by side, each a heading and a list.

   The section is a .95fr / 1.05fr grid, and the comparison sits in the second
   column. In its table form that column held a three-cell table inside about
   330px, so every entry wrapped to four or five lines. As two cards it is
   readable, but 40% of a page is still a narrow place for a comparison a reader
   is meant to read across.

   So the comparison spans the full width of the section instead of one column.
   The security column above it is a heading, a paragraph, a check list and two
   images, and it stops well short of the section's height; the comparison was
   filling that height by being tall and thin. Full width, it is 1,232px across
   two 600px cards, which is what the content needs.

   The section's own two-column grid still governs the security column and the
   comparison, so the comparison declares itself against both tracks.
*/
.se-hasec__compare{
  grid-column:1 / -1;
  margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(22px,2.8vw,34px);
  border-top:1px solid var(--se-line);
}
.se-comparecards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  align-items:start;
}
.se-comparecards__col{
  background:#fff;
  border:1px solid var(--se-line);
  border-radius:var(--se-radius);
  padding:clamp(16px,1.8vw,20px);
  min-width:0;
}
.se-comparecards__col--ours{border-color:color-mix(in srgb,var(--se-orange) 34%,var(--se-line))}
.se-comparecards__title{
  margin:0 0 14px;
  font-family:var(--se-font-head);
  font-size:1rem;
  font-weight:800;
  color:var(--se-navy);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}
.se-comparecards__count{
  font-family:var(--se-font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--se-ink-faint);
}
/* One list, one row height each, so the two cards line up down the page even
   when the entries differ in length. */
.se-comparecards__list{list-style:none;margin:0;padding:0}
.se-comparecards__item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:9px 0;
  font-size:.875rem;
  line-height:1.5;
  color:var(--se-ink-soft);
  border-bottom:1px solid var(--se-line-soft);
}
.se-comparecards__item:last-child{border-bottom:0;padding-bottom:0}
.se-comparecards__item .se-icon{flex:none;margin-top:3px;color:var(--se-success)}
.se-comparecards__dash{flex:none;margin-top:0;color:var(--se-ink-faint)}
.se-comparecards__item.is-absent{color:var(--se-ink-faint)}

@media (max-width:1100px){
  .se-havalue__grid{grid-template-columns:1fr}
  .se-havalue__media{position:static;max-width:520px}
  .se-hasec__comparehead{grid-template-columns:1fr}
  .se-hasec__compareimg{max-width:420px}
  /* The section is one column here, so the block no longer has a column to sit
     in beside. */
  .se-hasec__compare{grid-column:auto}
}

/* Below 700px the two cards stack: at 390px each would be about 170px wide,
   which wraps every entry to three lines for no gain. */
@media (max-width:700px){
  .se-comparecards{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .se-hasec__nextimg{aspect-ratio:16/9}
  .se-hasec__img{aspect-ratio:16/9}
}

/* Body: process + security on the left, sticky form on the right.
   The body sits directly above the closing CTA band, which carries its own
   internal padding, so only the top half of the flow spacing belongs here;
   padding the bottom as well produced a 128px gap before the band. */
.se-habody{padding-block:var(--se-flow-y) 0}
.se-habody__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(22px,3vw,46px);align-items:start}
.se-habody__main{display:grid;gap:0}
.se-habody__aside{position:sticky;top:calc(var(--se-header-h) + 20px)}
.se-habody__main .se-section{padding-inline:0}

/* Security comparison */
.se-hasec__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,3vw,44px);align-items:start}
.se-hasec__intro{font-size:.9375rem;line-height:1.68;color:var(--se-ink);margin:.3rem 0 18px;max-width:60ch}
.se-hasec__compare .se-sh__title{margin-bottom:.3rem}

/* Closing CTA */
.se-hacta{background:linear-gradient(120deg,var(--se-navy) 0%,#0a2560 58%,#0d3a7d 100%)}
/*
   Bug fix: the band no longer declares a layout of its own. It used to be a
   two-column grid, which is why the Hire buttons were the one closing band
   on the site still floating to the right at desktop width. The shared
   .se-ctaband__grid rule in main.css now supplies the centred composition and
   this class is only a hook for the background and the small-screen buttons.
*/
.se-hacta .se-ctaband__grid{padding-block:clamp(34px,4vw,56px)}

@media (max-width:1100px){
  .se-habody__grid{grid-template-columns:1fr}
  .se-habody__aside{position:static}
  .se-hasec__grid{grid-template-columns:1fr}
  .se-hacaps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .se-hacaps__list{grid-template-columns:1fr;gap:12px}
  .se-hacta__actions .se-btn{width:100%}
}

/* The comparison table is a wide grid; on small screens it stacks so nothing
   is cropped or hidden. */
@media (max-width:560px){
  .se-compare,.se-compare tbody,.se-compare tr,.se-compare td,.se-compare th{display:block;width:auto}
  .se-compare thead{position:absolute;left:-9999px}
  .se-compare tr{border:1px solid var(--se-line);border-radius:var(--se-radius-sm);padding:10px 12px;margin-bottom:10px}
  .se-compare th,.se-compare td{border-bottom:0;padding:3px 0}
  .se-compare th[scope=row]{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--se-ink-faint)}
  .se-compare td::before{content:attr(data-label) ' ';font-weight:700;color:var(--se-navy);font-size:.75rem}
}