/* ==========================================================================
   SmartEdge — design system
   Values sampled from the approved Home mockup (01_MOCKUP_DESKTOP.png).
   Home is the global visual reference; every inner page inherits this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, no third-party request)
   -------------------------------------------------------------------------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/jakarta.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/jakarta-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/lora.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/lora-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Colour — sampled from the approved mockup */
  --se-navy:#061454;          /* headings */
  --se-navy-900:#011937;      /* dark structural band */
  --se-navy-800:#0a2050;
  --se-navy-700:#16296b;
  --se-ink:#2f3a4f;           /* body copy */
  --se-ink-soft:#5a6478;      /* secondary copy */
  --se-ink-faint:#7b8496;
  --se-line:#e4e8f0;
  --se-line-soft:#eef1f7;
  --se-white:#fff;
  --se-mist:#f7f9fc;          /* alternating section */
  --se-cream:#fcfaf6;         /* snapshot band */
  --se-ice:#f2f8fe;           /* footer */
  --se-orange:#fd6218;        /* primary action */
  --se-orange-dark:#e8540b;   /* hover */
  --se-orange-ink:#d93a0b;    /* small accent text (AA on white) */
  --se-amber:#f0a72b;         /* logo / contact accent */
  --se-blue:#0d3a7d;          /* the brand blue: solid grounds behind white glyphs */
  --se-blue-soft:#f6fbfe;
  --se-success:#1a6b34;
  --se-danger:#b32d2e;

  /* Type */
  --se-font-display:'Lora',Georgia,'Times New Roman',serif;
  --se-font-head:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --se-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* H1 keeps one visual height across the whole system */
  --se-h1-size:clamp(2rem,1.3rem + 1.9vw,2.65rem);
  --se-h1-lh:1.12;
  --se-h2-size:clamp(1.55rem,1.2rem + 1.15vw,2.15rem);
  --se-h2-lh:1.22;

  /* Space */
  --se-gutter:24px;
  --se-container:1280px;
  /*
   * Correction pass 1: major sections sit almost flush with one another.
   * --se-section-y is the padding on EACH side of a band, so two adjacent
   * padded sections leave 2x this value between their content: 3px + 3px
   * = the ~5px band separation the design calls for. The hairline added to
   * .se-section--padded below is what makes that boundary legible.
   *
   * --se-flow-y is the OLD value and is deliberately kept for the wrappers
   * that are the body of a page between a hero and a closing CTA. Those are
   * not a pair of neighbouring sections, so they keep real breathing room
   * rather than collapsing to nothing.
   */
  --se-section-y:3px;
  --se-flow-y:clamp(40px,5vw,72px);
  --se-gap:24px;

  /* Shape */
  --se-radius:14px;
  --se-radius-sm:10px;
  --se-radius-lg:20px;
  --se-radius-pill:999px;

  --se-shadow-sm:0 1px 2px rgba(6,20,84,.05),0 1px 3px rgba(6,20,84,.05);
  --se-shadow:0 4px 16px rgba(6,20,84,.07);
  --se-shadow-lg:0 18px 48px rgba(6,20,84,.14);
  --se-header-h:76px;
  --se-ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

/*
   The [hidden] attribute must win over component display rules. A class
   selector such as .se-chips{display:flex} otherwise beats the user-agent
   [hidden] rule, and an element the script hid stays on screen.
*/
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--se-header-h) + 16px)}

body{
  margin:0;
  font-family:var(--se-font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--se-ink);
  background:var(--se-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
svg{flex:none}

/* Prevent horizontal overflow from any decorative layer. */
.se-site{overflow-x:clip;display:flex;flex-direction:column;min-height:100vh}
.se-main{flex:1 0 auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.se-container{width:100%;max-width:var(--se-container);margin-inline:auto;padding-inline:var(--se-gutter)}

.se-section{position:relative}
.se-section--padded{padding-block:var(--se-section-y);border-top:1px solid var(--se-line-soft)}
/* The first band on a page sits under the header, not under another band, so
   it must not carry a rule across the top. */
.se-main > .se-section--padded:first-child,
.se-pagewrap > .se-section--padded:first-child{border-top:0}
.se-section--bg-white{background:var(--se-white)}
.se-section--bg-mist{background:var(--se-mist)}
.se-section--bg-cream{background:var(--se-cream)}
.se-section--bg-ice{background:var(--se-ice)}
.se-section--bg-navy{background:var(--se-navy-900);color:#fff}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.se-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--se-navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.se-skip:focus{left:0}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.se-h1,.se-h2,.se-h3,h1,h2,h3,h4,h5,h6{font-family:var(--se-font-head);color:var(--se-navy);margin:0 0 .5em;line-height:1.22;font-weight:800;letter-spacing:-.015em}

.se-h1,.se-display{font-family:var(--se-font-display);font-weight:600;font-size:var(--se-h1-size);line-height:var(--se-h1-lh);letter-spacing:-.012em}
.se-h1__accent{color:var(--se-orange);font-style:normal}
.se-h2{font-size:var(--se-h2-size);line-height:var(--se-h2-lh)}
.se-h3{font-size:1.25rem;line-height:1.3;font-weight:700}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--se-navy);text-decoration-color:color-mix(in srgb,var(--se-navy) 35%,transparent);text-underline-offset:3px}
a:hover{color:var(--se-orange-ink)}

:focus-visible{outline:3px solid var(--se-orange);outline-offset:2px;border-radius:4px}

/* Eyebrow */
.se-eyebrow{
  font-family:var(--se-font-head);
  font-size:.8125rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--se-orange-ink);margin:0 0 .65rem;
}
.se-eyebrow--onDark{color:#ffb27a}

/* Section heading block */
.se-sh{max-width:46ch}
.se-sh--center{margin-inline:auto;text-align:center}
.se-sh__title{margin:0 0 .6rem}
.se-sh__intro{font-size:1.0625rem;color:var(--se-ink-soft);margin:0}
/* A multi-paragraph intro keeps the same measure and rhythm as a single line,
   with real paragraph spacing so a longer section reads cleanly. */
.se-sh__intro--multi>p{margin:0 0 .9rem}
.se-sh__intro--multi>p:last-child{margin-bottom:0}
.se-sh__intro--multi>p+p{margin-top:0}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.se-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--se-font-head);font-weight:700;
  /* 1.1875rem / 700 keeps the label at or above the WCAG large-text
     threshold (18.66px bold), so the approved orange fill passes the 3:1
     minimum for its white label without altering the approved brand colour. */
  font-size:1.1875rem;line-height:1;
  padding:.8em 1.5em;border-radius:var(--se-radius-pill);
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .18s var(--se-ease),color .18s var(--se-ease),border-color .18s var(--se-ease),transform .18s var(--se-ease);
}
.se-btn .se-icon{transition:transform .18s var(--se-ease)}
.se-btn:hover .se-icon{transform:translateX(3px)}

.se-btn--primary{background:var(--se-orange);color:#fff}
.se-btn--primary:hover{background:var(--se-orange-dark);color:#fff}
.se-btn--primary:active{transform:translateY(1px)}

.se-btn--outline{background:transparent;color:var(--se-navy);border-color:var(--se-navy)}
.se-btn--outline:hover{background:var(--se-navy);color:#fff}

.se-btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.se-btn--outline-light:hover{background:#fff;color:var(--se-navy);border-color:#fff}

.se-btn--light{background:#fff;color:var(--se-navy)}
.se-btn--light:hover{background:var(--se-cream);color:var(--se-navy)}

.se-btn--ghost{background:transparent;color:var(--se-navy);padding-inline:.5em}
.se-btn--ghost:hover{color:var(--se-orange-ink)}

/* Compact variant, used for an action that lives inside a card rather than
   beside a heading. Same tokens, smaller box. */
.se-btn--sm{font-size:.8125rem;padding:8px 14px}
.se-btn--sm .se-icon{width:15px;height:15px}

.se-btn--block{width:100%}
.se-btn--sm{font-size:1rem;padding:.6em 1.05em}

.se-iconbtn{
  /* 42px keeps the control comfortably above the 24px WCAG minimum and close
     to the 44px touch guidance, while fitting the 76px header. */
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;border:0;background:transparent;flex:none;
  color:var(--se-navy);cursor:pointer;transition:background-color .18s var(--se-ease),color .18s var(--se-ease);
}
.se-iconbtn:hover{background:var(--se-blue-soft);color:var(--se-orange-ink)}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.se-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--se-line-soft);transition:box-shadow .2s var(--se-ease)}
.se-header.is-stuck{box-shadow:0 2px 16px rgba(6,20,84,.08)}

.se-header__inner{display:flex;align-items:center;gap:20px;min-height:var(--se-header-h)}
.se-header__brand{flex:none}
.se-header__logo{display:inline-flex;align-items:center;text-decoration:none}
.se-logo{display:inline-flex}
.se-logo__img{width:auto;height:44px;object-fit:contain}
/*
   The header wordmark is the approved artwork at a reduced size. It has come down
   in two steps. From 44px it went to 40px, because at the original height it read
   as the loudest thing in the bar and crowded the navigation between roughly
   1024px and 1350px, where the wordmark is widest. It is now 37px: the brief asks
   for a slightly smaller header logo, and the mark was still the second-heaviest
   element in a bar whose job is to get out of the way of the navigation and the
   call to action. 37px keeps the wordmark legible at every desktop width and
   keeps its approved 1600:357 proportion, because only the height is declared
   and the width is derived from it. The footer variant is sized separately in
   footer.css.
*/
.se-header__logo .se-logo__img{height:37px}

.se-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.se-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.se-nav__list li{position:relative}
.se-nav__list a{
  display:flex;align-items:center;height:44px;padding:0 13px;border-radius:8px;
  font-family:var(--se-font-head);font-size:.9375rem;font-weight:600;color:var(--se-ink);
  text-decoration:none;white-space:nowrap;transition:color .16s var(--se-ease),background-color .16s var(--se-ease);
}
.se-nav__list .current-menu-item > a,
.se-nav__list .current_page_item > a,
.se-nav__list .current-menu-ancestor > a{color:var(--se-orange-ink)}
.se-nav__list .current-menu-item > a::after,
.se-nav__list .current_page_item > a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;background:var(--se-orange);
}

/*
   Above 1280px the navigation tightens.
   ------------------------------------
   The approved wordmark is 5.19:1, where the mark it replaced was 3.49:1, so at
   the same 44px height the new logo is 228px wide rather than 153px. That extra
   75px came straight out of the navigation: the nine-item list needs 854px and
   the space between the logo and the call-to-action gave it 740px, so the first
   and last items sat under the logo and the button.

   Rather than shrink the logo to a size where its own lettering stops being
   readable, the navigation absorbs the difference. Three things give: 5px less
   padding per side across ten items returns 100px, a 42px logo instead of 44px
   returns 10px, and an 8px gap instead of 20px returns 12px.

   Measured at 1440px: the list needs 763px and has 767px. At 1366px the
   container is the same 1280px, so the figures are identical. Below 1281px the
   existing blocks apply and the logo is already 40px.

   This block has to come after the base rule above. A media query placed earlier
   in the file loses to a later rule of equal specificity however much wider its
   screen range is, which is why the equivalent block written above the rule it
   modifies had no effect at all.
*/
@media (min-width:1281px){
  .se-logo__img{height:39px}
  .se-nav__list a{padding:0 8px}
  .se-nav__list .current-menu-item > a::after,
  .se-nav__list .current_page_item > a::after{left:8px;right:8px}
  .se-header__inner{gap:8px}
}
.se-nav__list a:hover{color:var(--se-orange-ink);background:var(--se-blue-soft)}
.se-nav__item{position:relative}

/*
  The desktop list shows submenus on hover, so its carets are decorative and
  hidden. The drawer has no hover, so the same carets are its only way to reach
  Company and Industries; hidden there, those sections are unreachable on a
  phone.
*/
.se-nav__caret{display:none}
.se-mobilenav__list .se-nav__caret{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:44px;height:52px;border:0;background:transparent;color:var(--se-ink-soft);cursor:pointer;padding:0;
}
.se-mobilenav__list li{position:relative}
.se-mobilenav__list .se-nav__caret[aria-expanded=true]{color:var(--se-orange-ink)}
.se-mobilenav__list .se-nav__caret[aria-expanded=true] .se-icon{transform:rotate(45deg)}
.se-mobilenav__list .se-mobilenav__svccaret[aria-expanded=true] .se-icon{transform:rotate(45deg)}

/*
  Submenus inside the drawer are stacked rows, not floating dropdowns.
  .se-nav__submenu is position:absolute and visibility:hidden for the desktop
  hover menu; left as it is, an expanded submenu stays invisible and overlaps
  the list, so Company and Industries remain unreachable on a phone.
*/
.se-mobilenav__list .se-nav__submenu{
  position:static;min-width:0;width:auto;background:none;border:0;border-radius:0;box-shadow:none;
  opacity:1;visibility:visible;transform:none;margin:0 0 8px;padding:0 0 0 14px;
}
.se-mobilenav__list .se-nav__submenu[hidden]{display:none}
.se-mobilenav__list .se-nav__submenu li{border:0}
.se-mobilenav__list .se-nav__submenu li a{display:block;padding:9px 10px;font-size:.9375rem;font-weight:500;color:var(--se-ink-soft);text-decoration:none;border-radius:8px}
.se-mobilenav__list .se-nav__submenu li a:hover{background:var(--se-mist);color:var(--se-navy)}
.se-nav__submenu{
  position:absolute;top:100%;left:0;min-width:230px;background:#fff;list-style:none;margin:0;padding:8px;
  border:1px solid var(--se-line);border-radius:12px;box-shadow:var(--se-shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s var(--se-ease),transform .16s var(--se-ease),visibility .16s;
}
.has-dropdown:hover > .se-nav__submenu,
.has-dropdown:focus-within > .se-nav__submenu{opacity:1;visibility:visible;transform:translateY(0)}
.se-nav__submenu a{height:auto;padding:9px 12px;border-radius:8px;font-weight:600}
.se-nav__submenu .sub-menu{margin:0}

/* --------------------------------------------------------------------------
   6b. Services mega menu
   Two rows of four category columns, each listing its services. The panel is
   anchored under the Services item and opens on hover, on focus-within, and on
   an explicit click or tap of the caret, so it never depends on hover alone.
   -------------------------------------------------------------------------- */
.se-nav__services--mega{position:relative}
.se-nav__caret--mega{position:absolute;top:50%;right:2px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;background:transparent;color:var(--se-ink-faint);cursor:pointer;padding:0}
.se-nav__caret--mega:hover{color:var(--se-orange-ink)}
.se-nav__services--mega>a{padding-right:30px}
.se-nav__caret--mega[aria-expanded=true] .se-icon{transform:rotate(45deg)}

/*
  The panel is a direct child of .se-header, which is position:sticky and is
  therefore its containing block, so its left and right edges resolve against the
  full header width. It has to stay a child of the header: nested inside the
  Services list item it resolves against a box only as wide as the word
  "Services", which collapses the four-column grid to 0px 0px 0px 0px and stacks
  every service link on top of the next.

  Visibility is driven entirely by is-open, set from main.js, because the trigger
  and the panel are no longer in one subtree and a CSS :hover or :focus-within
  selector can no longer bridge them.
*/
.se-mega{
  position:absolute;top:100%;left:0;right:0;z-index:90;
  background:#fff;border-top:1px solid var(--se-line-soft);border-bottom:1px solid var(--se-line);
  box-shadow:0 18px 40px rgba(6,20,84,.13);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--se-ease),transform .18s var(--se-ease),visibility .18s;
}
.se-mega.is-open{opacity:1;visibility:visible;transform:translateY(0)}

.se-mega__inner{padding-block:22px 18px}
.se-mega__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 26px}
.se-mega__col{min-width:0;padding:2px 0 8px}

.se-mega__cat{display:flex;align-items:flex-start;gap:9px;text-decoration:none;padding:7px 8px;border-radius:9px;transition:background-color .16s var(--se-ease)}
.se-mega__cat:hover{background:var(--se-blue-soft)}
.se-mega__caticon{flex:none;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--se-blue-soft);color:var(--se-orange-ink)}
.se-mega__cat:hover .se-mega__caticon{background:#fff}
.se-mega__catbody{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.se-mega__catlabel{font-family:var(--se-font-head);font-size:.875rem;font-weight:800;color:var(--se-navy);line-height:1.3}
.se-mega__cat:hover .se-mega__catlabel{color:var(--se-orange-ink)}
.se-mega__catblurb{font-size:.75rem;line-height:1.4;color:var(--se-ink-faint);margin-top:1px;
  /* Truncated rather than allowed to run into the next column. The category
     name and its services carry the meaning; the blurb is supporting text. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

.se-mega__services{list-style:none;margin:2px 0 0;padding:0 0 0 4px;display:grid;gap:1px}
.se-mega__services a{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:7px;text-decoration:none;font-size:.8125rem;font-weight:500;color:var(--se-ink-soft);line-height:1.35;transition:background-color .14s var(--se-ease),color .14s var(--se-ease)}
.se-mega__services a:hover{background:var(--se-mist);color:var(--se-navy)}
.se-mega__svcicon{flex:none;color:var(--se-ink-faint);display:inline-flex;align-items:center}
.se-mega__services a:hover .se-mega__svcicon{color:var(--se-orange-ink)}
.se-mega__svclabel{min-width:0}

.se-mega__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--se-line-soft)}
.se-mega__all{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}
.se-mega__all:hover{color:var(--se-orange-ink)}
.se-mega__cta{font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-ink-soft);text-decoration:none}
.se-mega__cta:hover{color:var(--se-orange-ink)}

.se-header__actions{display:flex;align-items:center;gap:8px;flex:none}
.se-burger{display:none}

.se-searchpanel{border-top:1px solid var(--se-line-soft);background:#fff}
.se-searchpanel__inner{padding-block:20px}
.se-searchpanel__hint{margin:10px 0 0;font-size:.875rem;color:var(--se-ink-faint)}

/* Search form */
.se-searchform__row{display:flex;gap:8px;align-items:stretch;max-width:640px}
.se-searchform__field{
  flex:1 1 auto;min-width:0;height:48px;padding:0 16px;font:inherit;font-size:.9375rem;
  border:1px solid var(--se-line);border-radius:var(--se-radius-pill);background:var(--se-mist);color:var(--se-ink);
}
.se-searchform__field::placeholder{color:var(--se-ink-faint)}
.se-searchform__field:focus{background:#fff;border-color:var(--se-orange);outline:2px solid color-mix(in srgb,var(--se-orange) 35%,transparent);outline-offset:1px}
.se-searchform__submit{
  flex:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--se-orange);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .18s var(--se-ease);
}
.se-searchform__submit:hover{background:var(--se-orange-dark)}

/* --------------------------------------------------------------------------
   6c. Services in the mobile drawer
   The same eight categories and their services, behind one disclosure
   control, so the drawer does not open to a wall of sixty links.
   -------------------------------------------------------------------------- */
.se-mobilenav__services{position:relative}
.se-mobilenav__services>a{padding-right:44px}
.se-mobilenav__svccaret{position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:52px;border:0;background:transparent;color:var(--se-ink-soft);cursor:pointer}
.se-mobilenav__svccaret[aria-expanded=true]{color:var(--se-orange-ink)}
.se-mobilenav__svccaret[aria-expanded=true] .se-icon{transform:rotate(45deg)}
.se-mobilenav__svcs{padding:2px 0 12px}
.se-mobilenav__svcs[hidden]{display:none}
.se-mobilenav__svccat{border-left:2px solid var(--se-line);margin:0 0 6px;padding-left:12px}
.se-mobilenav__svccatlink{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-navy);text-decoration:none}
.se-mobilenav__svccaticon{flex:none;color:var(--se-orange-ink);display:inline-flex;align-items:center}
.se-mobilenav__svclist{list-style:none;margin:0;padding:0 0 6px}
.se-mobilenav__svclist a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-size:.875rem;font-weight:500;color:var(--se-ink-soft);text-decoration:none}
.se-mobilenav__svclist a:hover{background:var(--se-mist);color:var(--se-navy)}
.se-mobilenav__svcicon{flex:none;color:var(--se-ink-faint);display:inline-flex;align-items:center}

/* Mobile drawer */
.se-mobilenav{position:fixed;inset:0;z-index:200;background:rgba(6,20,84,.45);opacity:0;transition:opacity .2s var(--se-ease)}
.se-mobilenav[data-open]{opacity:1}
.se-mobilenav__panel{
  position:absolute;inset:0 0 0 auto;width:min(400px,100%);background:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s var(--se-ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.se-mobilenav[data-open] .se-mobilenav__panel{transform:translateX(0)}
.se-mobilenav__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--se-line-soft)}
.se-mobilenav__nav{padding:12px 12px 4px;flex:1 1 auto}
.se-mobilenav__list{list-style:none;margin:0;padding:0}
.se-mobilenav__list li{border-bottom:1px solid var(--se-line-soft)}
/*
  Direct children only. The Services accordion and the Company/Industries
  submenus are nested lists inside this one, and an unscoped descendant selector
  would restyle their links to the same weight and size as the top-level rows.
*/
.se-mobilenav__list>li>a{display:block;padding:14px 10px;font-family:var(--se-font-head);font-weight:600;font-size:1.0625rem;color:var(--se-navy);text-decoration:none}
.se-mobilenav__list .current-menu-item > a{color:var(--se-orange-ink)}
.se-mobilenav__list .sub-menu{list-style:none;margin:0 0 8px;padding-left:14px;border-left:2px solid var(--se-line)}
.se-mobilenav__list .sub-menu a{font-size:.9375rem;font-weight:500;padding:9px 10px;color:var(--se-ink-soft)}
.se-mobilenav__foot{padding:16px 20px 24px;border-top:1px solid var(--se-line-soft);display:grid;gap:12px}
.se-mobilenav__foot .se-searchform__row{max-width:none}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.se-hero{position:relative;background:var(--se-white);overflow:hidden}
.se-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(1200px 520px at 88% -10%,var(--se-blue-soft) 0%,transparent 62%),
             radial-gradient(760px 420px at 4% 108%,#fff7f2 0%,transparent 60%);
  pointer-events:none;
}
.se-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:stretch;padding-block:clamp(36px,4.2vw,60px) clamp(44px,5vw,70px)}
.se-hero__content{align-self:center}
.se-hero__title{margin:0 0 .9rem;max-width:22ch}
.se-hero__lead{font-size:1rem;color:var(--se-ink);margin:0 0 .55rem;max-width:54ch}
.se-hero__sub{font-size:.875rem;color:var(--se-ink-soft);margin:0 0 1.3rem;max-width:56ch}
.se-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.3rem}

.se-hero__caps{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.se-hero__caps li{display:inline-flex;align-items:center;gap:7px;font-family:var(--se-font-head);font-size:.875rem;font-weight:600;color:var(--se-navy)}
.se-hero__caps .se-icon{color:var(--se-orange);background:color-mix(in srgb,var(--se-orange) 12%,transparent);border-radius:50%;padding:2px}

.se-hero__media{position:relative;display:flex}
.se-hero__img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center;border-radius:var(--se-radius-lg);box-shadow:var(--se-shadow-lg)}

.se-heropanel{
  position:absolute;right:-10px;bottom:-22px;width:min(268px,74%);
  background:#fff;border-radius:var(--se-radius);box-shadow:var(--se-shadow-lg);
  padding:20px 20px 18px;border:1px solid var(--se-line-soft);
}
.se-heropanel__title{font-size:1.0625rem;line-height:1.3;margin:0 0 12px;font-weight:800}
.se-heropanel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.se-heropanel li{display:flex;align-items:center;gap:9px;font-size:.875rem;font-weight:600;color:var(--se-ink)}
.se-heropanel .se-icon{color:#fff;background:var(--se-navy);border-radius:50%;padding:3px;flex:none}

/* --------------------------------------------------------------------------
   8. Snapshot / proof band
   -------------------------------------------------------------------------- */
.se-snapshot{background:var(--se-cream);border-block:1px solid color-mix(in srgb,var(--se-orange) 12%,transparent)}
.se-snapshot__grid{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.se-snapshot__grid--few{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.se-snapshot__item{display:flex;align-items:flex-start;gap:14px}
.se-snapshot__icon{
  flex:none;width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--se-orange-ink);box-shadow:var(--se-shadow-sm);
}
.se-snapshot__body{display:flex;flex-direction:column;min-width:0}
.se-snapshot__value{font-family:var(--se-font-head);font-size:1.75rem;font-weight:800;color:var(--se-navy);line-height:1.05;letter-spacing:-.02em}
.se-snapshot__label{font-family:var(--se-font-head);font-weight:700;font-size:.9375rem;color:var(--se-navy);margin-top:4px}
.se-snapshot__desc{font-size:.8125rem;color:var(--se-ink-soft);margin-top:2px}

/* --------------------------------------------------------------------------
   9. Technology strip
   -------------------------------------------------------------------------- */
.se-techstrip{background:var(--se-white);border-bottom:1px solid var(--se-line-soft)}
.se-techstrip__title{font-family:var(--se-font-body);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--se-ink-faint);text-align:center;margin:0 0 14px}
.se-techstrip__list{list-style:none;margin:0;padding:0 0 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
.se-techstrip__list li{
  font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);
  letter-spacing:-.01em;opacity:.82;transition:opacity .18s var(--se-ease),color .18s var(--se-ease);white-space:nowrap;
}
.se-techstrip__list li:hover{opacity:1;color:var(--se-navy-700)}

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
/*
   The homepage services section.

   This was a two-column grid: a 290px intro beside a 913px card grid. The cards
   are six items in two rows and come to 928px; the intro — an eyebrow, a
   two-line heading, two short paragraphs and one button — comes to 371px. The
   row is therefore 928px tall with 558px of nothing under the intro column, which
   is the shape of waste the brief asks about: one side of the section carrying
   content and a large empty area beneath it.

   Filling that column was considered and rejected. Anything put there would have
   to be new copy, or a copy already used further down this page, and neither is
   better than not having it. So the space is used by the content that is already
   in the section instead: the intro becomes a full-width band and the cards sit
   beneath it across the whole measure.

   The band itself is two columns — heading on the left, the paragraphs and the
   button on the right — so the intro does not simply become a 1,280px-wide
   paragraph. Reading measure is capped inside it rather than left to stretch.
*/
.se-home-services__grid{
  /*
     One column, in document order, below 1100px.

     The explicit placement rules further down this file name a column and a row
     for each child. A grid with one column has only row 1, so a child told to
     sit in column 2 gets an implicit second column: at 390px the web
     development banner rendered 158px wide beside a 170px column of prose and
     the composition overlapped itself. Below 1100px every child therefore
     returns to auto-placement and stacks in the order it is written, which is
     the order a person scanning one column expects.

     Explicit placement is what makes the composition survive a change of
     content above 1100px. With auto-placement the four children fell into
     document order, so removing one banner silently promoted another into its
     cell and the band lost its balance without anything visibly breaking.
  */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,2.8vw,42px);
}
.se-home-services__slot{
  display:flex;
  align-items:stretch;
  min-width:0;
}
.se-home-services__slot > .se-rail__item{flex:1 1 auto}
@media (min-width:1100px){
  .se-home-services__grid{
    /*
       A two-by-two composition:

           intro | web development
           AI    | mobile apps

       The introduction takes the top-left cell with its heading and two
       paragraphs. The web development banner keeps the top-right cell it has
       always had. The AI banner sits bottom-left, level with the mobile banner
       beside it, which is what fills the empty half of the band.
    */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    /* A row gap between the two bands of the composition, and a wider column gap
       so the intro and the banner beside it read as a pair. */
    column-gap:clamp(26px,2.8vw,42px);
    row-gap:clamp(18px,2vw,26px);
    align-items:stretch;
  }
  .se-home-services__grid > .se-home-services__intro{grid-column:1;grid-row:1}
  .se-home-services__grid > .se-home-services__slot--rail-a{grid-column:2;grid-row:1}
  .se-home-services__grid > .se-home-services__slot--rail-b{grid-column:1;grid-row:2}
  .se-home-services__grid > .se-home-services__slot--rail-c{grid-column:2;grid-row:2}
  /*
     Each banner keeps its own height inside its cell.

     It used to be stretched to the full row height with its blocks spread out
     by space-between. That was a way of making a filled card fill its cell, and
     there is nothing to fill now: the banner is prose, so it is as tall as its
     own content and the cell's remaining height is the page's, not the card's.
     Letting it stretch would leave the gap between the paragraph and the marks
     reading as a hole in the column.

     Below 1100px the banners stack, so this is the two-column composition only.
  */
  .se-home-services__slot--rail-a > .se-rail__item,
  .se-home-services__slot--rail-b > .se-rail__item,
  .se-home-services__slot--rail-c > .se-rail__item{
    height:auto;
  }
  /*
     The six cards span the full width below the whole composition, in the same
     3x2 arrangement as before.
  */
  .se-home-services__grid > .se-svccards{grid-column:1 / -1;grid-row:3}
}
.se-home-services__intro{
  /*
     One column, filling its cell of the composition.

     It was two columns — heading and paragraphs left, a single button right —
     which is what left the empty rectangle above the button. It now sits in the
     top-left cell of the 2x2 band beside the web development banner, so its own
     second column has nothing left to hold.

     Above 1100px it is a flex column whose call to action is pushed to the foot,
     matching the stretch on the banners opposite: without that the intro ended
     with 300px of white under its button while the banner beside it ran three
     times taller, and the band read as a short paragraph beside a tall one.
  */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,26px);
  align-items:start;
}
@media (min-width:1100px){
  .se-home-services__intro{
    display:flex;
    flex-direction:column;
    align-content:stretch;
    height:100%;
  }
  .se-home-services__intro .se-btn{margin-top:auto;align-self:flex-start}
}
.se-home-services__intro .se-sh__intro{max-width:62ch}
.se-home-services__intro .se-btn{margin-top:20px;justify-self:start}
.se-home-services__intro .se-sh__title{font-size:clamp(1.25rem,1.05rem + .5vw,1.45rem)}
.se-home-services__intro .se-sh__intro{font-size:.875rem}

/* Six across at the approved desktop width, stepping down responsively. */
.se-svccards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
/*
   Correction pass: the six service cards now carry seven or eight lines of
   real copy each plus their own action, which cannot be read in a 200px
   column. Three columns gives each card a comfortable measure, and the
   3x2 block still occupies exactly the same width and order as the six-up
   row it replaces.
*/
@media (min-width:1101px){
  .se-svccards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.se-svccard{position:relative;background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease),border-color .2s var(--se-ease);display:flex;flex-direction:column}
.se-svccard:hover{transform:translateY(-3px);box-shadow:var(--se-shadow);border-color:color-mix(in srgb,var(--se-orange) 32%,var(--se-line))}
.se-svccard__media{display:block;overflow:hidden;background:var(--se-blue-soft);position:relative}
.se-svccard__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-svccard:hover .se-svccard__img{transform:scale(1.04)}
.se-svccard__cue{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--se-orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(6,20,84,.2);transition:transform .2s var(--se-ease);
}
.se-svccard:hover .se-svccard__cue{transform:translateX(3px)}
.se-svccard__body{display:flex;flex-direction:column;gap:7px;padding:13px 15px 16px;flex:1 1 auto}
.se-svccard__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.3;margin:0}
.se-svccard__title a{color:inherit;text-decoration:none}
.se-svccard__title a:hover{color:var(--se-orange-ink)}
/* Full approved copy is shown; the grid stretches every card to the same
   height in the row rather than clipping text. */
.se-svccard__desc{font-size:.8125rem;line-height:1.6;color:var(--se-ink-soft);flex:1 1 auto}
.se-svccard__body .se-btn{margin-top:4px;align-self:flex-start}

/* --------------------------------------------------------------------------
   11. AI band
   -------------------------------------------------------------------------- */
.se-aiband{background:linear-gradient(140deg,#031a3d 0%,var(--se-navy-900) 46%,#062a5c 100%);color:#fff;position:relative;overflow:hidden}
.se-aiband::after{content:'';position:absolute;inset:0;background:radial-gradient(700px 320px at 82% 12%,rgba(56,132,255,.22) 0%,transparent 65%);pointer-events:none}
.se-aiband__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(24px,3.2vw,48px);align-items:center;padding-block:var(--se-section-y)}
.se-aiband__title{color:#fff;margin-bottom:.7rem}
/* Correction pass: this band carries several more lines of copy than it did,
   so the measure, size and leading are tightened just enough to keep the
   section the same height it was. The right-hand column is what sets the
   band height, and the copy column is not allowed to overtake it. */
.se-aiband__body{color:rgba(255,255,255,.82);font-size:.9375rem;line-height:1.6;max-width:52ch;margin-bottom:1.2rem}
.se-aiband__media{display:grid;gap:18px;justify-items:center}
.se-aiband__img{width:100%;border-radius:var(--se-radius);box-shadow:0 22px 60px rgba(0,0,0,.4)}
.se-aiband__labels{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.se-aiband__labels li{
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:600;color:#dbe9ff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--se-radius-pill);padding:5px 13px;
}

/* --------------------------------------------------------------------------
   12. Industries
   --------------------------------------------------------------------------
   The lead copy is a few hundred words, which is unreadable in the narrow
   column a short intro suited. The heading and its call to action now share
   one row across the top, the copy runs the full container width in two
   balanced columns below it, and the nine cards sit in a 3x3 grid
   underneath. Justification is applied to the body paragraphs only, and
   only where the measure is wide enough to need it. */
.se-home-industries__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2vw,32px);flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,30px);
}
.se-home-industries__head .se-sh{flex:1 1 auto;min-width:0}
.se-home-industries__actions{flex:0 0 auto}

/* Two columns across the full container gives roughly 70 characters a line on
   a desktop, which is the measure justification is readable at. Below the
   tablet breakpoint this becomes one left-aligned column. */
.se-home-industries__lead{margin-bottom:clamp(26px,3vw,44px)}
.se-home-industries__lead .se-sh__intro{
  columns:2;column-gap:clamp(28px,3.4vw,56px);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  orphans:2;widows:2;max-width:none;
}

.se-indcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.se-indcard{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
.se-indcard:hover{transform:translateY(-3px);box-shadow:var(--se-shadow)}
.se-indcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.se-indcard__media{display:block;overflow:hidden;background:var(--se-blue-soft)}
.se-indcard__img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-indcard:hover .se-indcard__img{transform:scale(1.04)}
.se-indcard__body{display:flex;flex-direction:column;gap:4px;padding:13px 14px 15px;flex:1 1 auto}
.se-indcard__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.3}
/* Full approved copy is shown; the grid equalises card height in each row
   rather than clamping the text. */
.se-indcard__desc{font-size:.8125rem;line-height:1.6;color:var(--se-ink-soft)}
/* Pinned to the bottom of the body so every card in a row finishes on the same
   line, and so the destination is stated rather than implied. */
.se-indcard__more{
  margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);
}
.se-indcard__more .se-icon{color:var(--se-orange);transition:transform .2s var(--se-ease)}
.se-indcard:hover .se-indcard__more .se-icon{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   13. Why
   --------------------------------------------------------------------------
   The introduction is a few hundred words. It used to sit in a track close to
   twice the width it needed, while the photograph beside it was capped well
   below that and pushed out to the edge, so copy and image were separated by
   dead space and the right half of the section stood empty for most of the
   section's height. The copy now takes a little over half the container and
   the photograph fills the rest of its track at a 4:5 crop, which at this
   width is about the height of the copy, so the two are balanced by their own
   content rather than by a set height.
 */

/* One grid of six, so a card always lines up with its neighbour in the same
   row. Two independent lists left them out of line whenever a description in
   one of them ran to an extra line. */
/*
   Bug fix: the section was 716px tall while the text beside it was only 284px,
   so the photograph ran 430px below the last line and the band read as mostly
   empty. The media column is now narrower and the crop is landscape rather
   than portrait, which brings the picture to roughly the height of the text:
   text ~284px, image ~311px, section ~311px at 1440px.
*/
.se-home-why__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.75fr);gap:clamp(28px,3.6vw,56px);align-items:center;margin-bottom:clamp(28px,3.4vw,44px)}
.se-home-why__intro .se-sh{max-width:none}
.se-home-why__intro .se-sh__intro{max-width:70ch}
.se-home-why__intro .se-btn{margin-top:20px}
.se-home-why__media{display:flex}
.se-home-why__img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 38%;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}

.se-whycols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:stretch}
.se-principle{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:15px 17px}
/* 46px container with a 26px glyph: enough presence to balance the longer
   principle copy without competing with the title. */
.se-principle__icon{flex:none;width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--se-blue-soft);color:var(--se-orange-ink)}
.se-principle__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.se-principle__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.3}
.se-principle__desc{font-size:.8125rem;color:var(--se-ink-soft);line-height:1.6}

/* --------------------------------------------------------------------------
   14. Process
   -------------------------------------------------------------------------- */
.se-home-process__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);gap:clamp(24px,3vw,44px);align-items:start}
.se-home-process__intro .se-btn{margin-top:20px}
.se-process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.se-process__step{display:flex;gap:12px;background:var(--se-mist);border-radius:var(--se-radius);padding:16px;border:1px solid var(--se-line-soft)}
.se-process__num{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--se-navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--se-font-head);font-weight:800;font-size:.9375rem;
}
.se-process__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.se-process__label{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy)}
.se-process__desc{font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}

/* --------------------------------------------------------------------------
   15. Featured work
   -------------------------------------------------------------------------- */
.se-home-work__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);gap:clamp(24px,3vw,44px);align-items:start}
.se-home-work__intro .se-btn{margin-top:20px}
.se-home-work__empty{grid-column:1/-1;color:var(--se-ink-soft);font-size:.9375rem;background:#fff;border:1px dashed var(--se-line);border-radius:var(--se-radius);padding:24px}
.se-workcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.se-workcard{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
.se-workcard:hover{transform:translateY(-3px);box-shadow:var(--se-shadow)}
.se-workcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.se-workcard__media{position:relative;display:block;overflow:hidden;background:var(--se-blue-soft)}
.se-workcard__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-workcard:hover .se-workcard__img{transform:scale(1.04)}
.se-workcard__cue{
  position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:var(--se-orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--se-shadow);transition:transform .2s var(--se-ease);
}
.se-workcard:hover .se-workcard__cue{transform:translateX(3px)}
.se-workcard__body{display:flex;flex-direction:column;gap:4px;padding:13px 14px 15px}
.se-workcard__label{font-family:var(--se-font-head);font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--se-orange-ink)}
.se-workcard__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.3}
.se-workcard__desc{font-size:.8125rem;line-height:1.6;color:var(--se-ink-soft)}
.se-workcard__tech{margin-top:auto;padding-top:8px;font-size:.6875rem;font-weight:700;letter-spacing:.03em;color:var(--se-ink-faint);text-transform:uppercase}

/* --------------------------------------------------------------------------
   16. Client feedback
   -------------------------------------------------------------------------- */
.se-home-feedback__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);gap:clamp(24px,3vw,44px);align-items:start}
.se-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.se-quote{background:var(--se-mist);border:1px solid var(--se-line-soft);border-radius:var(--se-radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.se-quote__text{margin:0;flex:1 1 auto}
.se-quote__text p{font-size:.9375rem;line-height:1.65;color:var(--se-ink);margin:0}
.se-quote__text p::before{content:'“';font-family:var(--se-font-display);font-size:2rem;color:var(--se-orange);line-height:0;vertical-align:-.18em;margin-right:2px}
.se-quote__by{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-navy)}
.se-quote__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}

/* --------------------------------------------------------------------------
   17. Insights
   -------------------------------------------------------------------------- */
/* Featured work and Insights share the mist background, so the boundary
   between them is a hairline rather than a colour change. */
.se-home-insights{border-top:1px solid var(--se-line-soft)}
.se-home-insights__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.82fr);gap:clamp(24px,3vw,44px);align-items:center}
.se-home-insights__intro .se-btn{margin-top:20px}
.se-postcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.se-postcard{background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
.se-postcard:hover{transform:translateY(-3px);box-shadow:var(--se-shadow)}
.se-postcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.se-postcard__media{display:block;overflow:hidden;background:var(--se-blue-soft)}
.se-postcard__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-postcard:hover .se-postcard__img{transform:scale(1.04)}
.se-postcard__body{display:flex;flex-direction:column;gap:7px;padding:15px 16px 17px;flex:1 1 auto}
.se-postcard__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.75rem}
.se-postcard__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 9px}
.se-postcard__date{color:var(--se-ink-faint)}
.se-postcard__title{font-family:var(--se-font-head);font-size:1rem;font-weight:800;color:var(--se-navy);line-height:1.35}
.se-postcard__excerpt{font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft);flex:1 1 auto}
.se-postcard__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);margin-top:2px}
.se-postcard__more .se-icon{color:var(--se-orange);transition:transform .2s var(--se-ease)}
.se-postcard:hover .se-postcard__more .se-icon{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   18. Final CTA band
   -------------------------------------------------------------------------- */
.se-ctaband{background:linear-gradient(120deg,var(--se-navy) 0%,#0a2560 58%,#0d3a7d 100%);color:#fff;position:relative;overflow:hidden}
.se-ctaband::after{content:'';position:absolute;inset:0;background:radial-gradient(620px 300px at 88% 20%,rgba(253,98,24,.24) 0%,transparent 62%);pointer-events:none}
/*
   Bug fix: the closing band is one centred composition on every page, so a
   visitor sees the same shape whether they arrive from Home, Services,
   Portfolio or Careers. It used to be a two-column grid, which pushed the
   buttons out to the far right and left the heading and copy ragged-left.
   The band is now a single centred stack: eyebrow, heading, copy, buttons.

   The heading is deliberately not given a max-width, because every approved
   heading fits the 1280px container on one line and a cap is what forced the
   wrap. The body copy is capped, because a readable measure is what makes
   centred text comfortable rather than tiring.
*/
.se-ctaband__grid{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(38px,4.4vw,62px)
}
.se-ctaband__intro{display:flex;flex-direction:column;align-items:center;width:100%;max-width:none}

/* --------------------------------------------------------------------------
   18a. Background video layer (closing CTA bands)

   Correction pass: the closing band on each page now carries a short,
   silent, muted background clip instead of a flat gradient. Three rules
   keep it safe and cheap:

     - The <video> is absolutely positioned and clipped by the band's own
       overflow:hidden, so it can never add a scrollbar or shift layout.
     - Its source lives in a data attribute and is only attached by script,
       and only when the visitor has not asked for reduced motion. A visitor
       who has asked never downloads the clip and sees the poster instead.
     - The scrim is a fixed black wash at 55%, which is what keeps the
       heading, the body copy and both buttons at full contrast no matter
       what the footage happens to be doing behind them.
   -------------------------------------------------------------------------- */
.se-vidbg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--se-navy-900);pointer-events:none}
.se-vidbg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border:0}
.se-vidbg__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.se-ctaband--careers{background:var(--se-navy);color:#fff}
.se-ctaband--careers .se-vidbg__scrim{background:rgba(0,0,0,.5)}

.se-ctaband__title{color:#fff;margin:0 0 .55rem;max-width:none}
/*
   The supporting paragraph.

   It was capped at 62ch, which measured 620px inside a 1280px container — 48% of
   the band, centred. On the home page that is a six-line block of copy floating
   in the middle of a 1280px band with 330px of empty navy on each side of it,
   and it reads as a caption rather than as the argument the band is making.

   The measure is now a share of the band rather than a fixed character count:
   78% of whatever the container is, with a 92ch ceiling so the line never gets
   long enough to lose the eye on the way back. That is 1000px on a 1280px
   container — four lines instead of six, in the same band height — and it
   collapses proportionally on a tablet instead of holding 620px inside a
   720px container and looking wrong.

   A paragraph is not a headline, so it keeps its own line height and is not
   centred by character; the band centres it as a block, which is what keeps the
   ragged edge symmetric.
*/
.se-ctaband__body{
  color:rgba(255,255,255,.84);
  font-size:1.0625rem;line-height:1.7;
  max-width:min(92ch,78%);margin:0;
  text-wrap:pretty;
}
.se-ctaband__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(18px,2.1vw,26px)}

/* --------------------------------------------------------------------------
   19. Shared: check lists, footer, breadcrumbs, page hero
   -------------------------------------------------------------------------- */
.se-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.se-checks li{display:flex;align-items:flex-start;gap:9px;font-size:.9375rem;line-height:1.55;color:var(--se-ink)}
.se-checks .se-icon{flex:none;margin-top:3px;color:#fff;background:var(--se-orange);border-radius:50%;padding:2px}

/* --------------------------------------------------------------------------
   Utility bar

   A slim strip above the navigation carrying the public company email and a
   short set of secondary links. 34px at desktop, inside the site container so
   its content lines up with the logo and the navigation below it.

   It is deliberately not sticky. A sticky strip above a sticky header means two
   stacked offsets to keep correct in the scroll-padding calculation and in the
   mega panel's positioning; letting the strip scroll away keeps the existing
   sticky header behaviour untouched. It is a sibling of the header rather than a
   child for the same reason the mobile drawer is: the header is the containing
   block for its fixed descendants.

   The background is the brand navy with white text, which is the conventional
   treatment for this component and reads as part of the header stack rather
   than as a separate band.
   -------------------------------------------------------------------------- */
.se-topbar{
  background:var(--se-navy);
  color:rgba(255,255,255,.82);
  font-size:.8125rem;
  line-height:1;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.se-topbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:34px;
}
.se-topbar__email{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.9);text-decoration:none;
  padding-block:7px;
  /* The address is the longest string in the bar; it is allowed to shrink
     rather than push the links off the row. */
  min-width:0;
}
.se-topbar__email span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.se-topbar__email .se-icon{flex:none;color:var(--se-orange-2,#ffb27a)}
.se-topbar__email:hover{color:#fff;text-decoration:underline}
.se-topbar__links{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:18px;flex:none;
}
.se-topbar__links a{
  display:inline-block;padding-block:7px;
  color:rgba(255,255,255,.82);text-decoration:none;
  white-space:nowrap;
  transition:color .15s var(--se-ease);
}
.se-topbar__links a:hover{color:#fff;text-decoration:underline}
.se-topbar__email:focus-visible,
.se-topbar__links a:focus-visible{
  outline:2px solid #ffb27a;outline-offset:2px;border-radius:3px;
}

/*
   Below 760px the secondary links go. Four items plus an address will not fit
   across a phone, and truncating all of them would be worse than showing fewer.
   The email stays, because it is the one thing in the bar a visitor cannot
   otherwise reach without scrolling to the footer.
*/
@media (max-width:760px){
  .se-topbar__inner{justify-content:center}
  .se-topbar__links{display:none}
  .se-topbar__email{font-size:.75rem}
}

/* --------------------------------------------------------------------------
   Breadcrumb

   The trail had no base rules at all. Only two overrides existed, both scoped
   to the Company submenu hero, so on every other page it rendered as an unstyled
   list of links: user-agent spacing, default link colour, and the current page
   drawn in the same weight as its ancestors. That is the drift the brief
   describes — the component had no design of its own, so it inherited the
   browser's.

   The rules below give it one. The trail is subordinate to the page title: above
   the hero, smaller than the H1, in the muted ink tone, with the current page
   picked out in the navy head weight. One line on one row on desktop, and the
   middle crumbs truncate rather than widening the page, so a long service name
   can never cause horizontal overflow.

   The separators are decorative and already carry aria-hidden, because the
   ordered list conveys sequence on its own. They are still a real text "/" so
   the trail stays legible with CSS disabled.
   -------------------------------------------------------------------------- */
.se-breadcrumb{
  padding-block:14px 0;
  font-size:.8125rem;
  line-height:1.4;
}
.se-breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;align-items:center;min-width:0;
}
.se-breadcrumb li{display:inline-flex;align-items:center;min-width:0}
.se-breadcrumb li a{
  color:var(--se-ink-soft);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch;
  transition:color .15s var(--se-ease);
}
.se-breadcrumb li a:hover{color:var(--se-orange-ink);text-decoration:underline}
.se-breadcrumb li[aria-current="page"] span{
  color:var(--se-navy);
  font-family:var(--se-font-head);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch;
}
.se-breadcrumb__sep{
  flex:none;margin-inline:10px;
  /*
   * A mid grey-blue rather than the hairline token.
   *
   * --se-line is #E4E8F0, which on white is 1.24:1 — effectively invisible. The
   * separator is the only cue that tells a visitor the trail has levels, so it has
   * to be seen even though it carries no information of its own. 2.4:1 is well
   * short of the 4.5:1 body-text threshold, which is correct and intended here:
   * the separator is decorative, aria-hidden and subordinate, and the labels either
   * side of it are what carry the meaning. What it must not do is disappear.
   */
  color:#9aa7bf;
  font-size:.8125rem;user-select:none;
}
.se-breadcrumb a:focus-visible{
  outline:2px solid var(--se-orange);outline-offset:2px;border-radius:3px;
}

@media (max-width:560px){
  /* Two lines if it has to, rather than shrinking the type or dropping levels. */
  .se-breadcrumb{padding-block:11px 0;font-size:.75rem}
  .se-breadcrumb ol{flex-wrap:wrap;row-gap:2px}
  .se-breadcrumb li a{max-width:22ch}
  .se-breadcrumb li[aria-current="page"] span{max-width:100%}
  .se-breadcrumb__sep{margin-inline:7px}
}

/*
   The footer moved to assets/css/footer.css when it was rebuilt as a two-level
   company footer. The rules that lived here were a single light band with four
   columns and a white social-icon row, which is why the footer read as an
   afterthought against a navy site. The old block is removed rather than left
   in place so its grid-template-columns and its light background cannot fight
   the new ones.
*/

/* --------------------------------------------------------------------------
   Social links

   One icon per platform, at a size that reads as a link rather than as a
   banner. The icon is decorative and the accessible name comes from the link,
   because a bare glyph tells a screen reader nothing.

   The shape rules now live in footer.css, because the social row sits on the
   navy footer and needs an inverted palette. What is left here is the
   unconfigured state: a platform with no URL renders as a span rather than a
   link, so it is neither focusable nor clickable. The old rules below targeted
   .se-social a only, so an unconfigured icon had no styling at all and the six
   slots were invisible to the owner who has to fill them in.
   -------------------------------------------------------------------------- */
.se-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.se-social__item{display:flex}
.se-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  color:var(--se-navy);background:#fff;
  border:1px solid var(--se-line);box-shadow:var(--se-shadow-sm);
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.se-social__link:hover{background:var(--se-blue);border-color:var(--se-blue);color:#fff;transform:translateY(-2px)}
.se-social__link:focus-visible{outline:3px solid var(--se-orange);outline-offset:2px}
/* Unconfigured: visible so the owner can see the slot, not actionable. */
.se-social__link.is-unset{
  color:var(--se-ink-faint);background:var(--se-ice);
  border-color:var(--se-line-soft);box-shadow:none;cursor:default;
}
.se-social__link.is-unset:hover{transform:none;background:var(--se-ice);color:var(--se-ink-faint);border-color:var(--se-line-soft)}
.se-social__icon{display:inline-flex;align-items:center;justify-content:center}
.se-social .se-icon{display:block}

/* --------------------------------------------------------------------------
   Footer marks

   Six small images in one row on desktop. They are displayed at their own
   proportions and never stretched, so a wide mark occupies more width than a
   narrow one rather than being distorted to match it.

   The row sits above the legal line and below the navigation, separated from
   both by rules, and carries no label unless the owner sets one. A row of
   small marks with no caption reads as decoration; the same row captioned
   "Partners" would be a claim, which is why the caption is a setting.
   -------------------------------------------------------------------------- */
/* The six footer marks moved to footer.css. */

/*
   Three empty media blocks used to sit here, left behind when the footer rules
   moved to footer.css. They had no closing brace, so every rule after this point
   in the file — including the 1023px rule that hides the desktop navigation and
   shows the burger button — was nested inside them and never applied at any
   width. That is why the navigation was still laid out at 820px, when it should
   have collapsed to the drawer.

   They are removed rather than closed. Closing them would restore the file's
   brace balance but leave three empty blocks that do nothing, and the next edit
   inside one of them would silently stop applying again.

   The footer responsive ladder now lives in assets/css/footer.css.
*/

/* ==========================================================================
   20b. Restored responsive blocks

   These media blocks went missing from this file. Their absence was not
   cosmetic: with no rule at 1023px hiding the desktop navigation, the primary
   menu rendered at 390px, overlapped the logo and the header call to action,
   and the burger that opens the mobile drawer stayed hidden. The page still
   returned 200 and still looked correct at 1440px, which is why it survived a
   desktop-only review.

   Recovered from the pre-visual-pass backup of this file and re-appended rather
   than merged, so each block is exactly the set of rules that was approved for
   that breakpoint. Anything written since then still wins, because those rules
   appear later in the file.
   ========================================================================== */
@media (max-width:1280px){

  :root{--se-container:1120px}

}

@media (max-width:1350px){
  /*
     Below 1351px the container steps down to 1120px while the nine-item list
     still needs its full width, so the whole header tightens together: a 37px
     logo, 6px link padding, a 0.8125rem label and an 8px gap.

     Measured at 1280px: the list needs 641px and has 645px. At 1024px the list
     needs 586px against 567px, and the 1100px block below tightens it again.
  */
  .se-logo__img{height:37px}
  .se-nav__list a{height:40px;padding:0 6px;font-size:.8125rem}
  .se-nav__list .current-menu-item > a::after,
  .se-nav__list .current_page_item > a::after{left:6px;right:6px;bottom:5px}
  .se-header__inner{gap:8px}
  .se-header__cta{font-size:1rem;padding:.7em 1.1em}

}

@media (max-width:1100px){

  .se-nav__list a{padding:0 6px;font-size:.75rem}
  .se-header__cta{font-size:.9375rem;padding:.65em 1em}
  .se-seo-desktop-only{display:none}
  .se-svccards{grid-template-columns:repeat(3,minmax(0,1fr))}

}

/*
   1024px to 1101px is the last band where the desktop navigation still fits.
   The container is the full viewport there, and at 1024px the nine-item list
   needs 586px against the 567px left between the logo and the call-to-action.
   A 34px logo and 5px of link padding close that gap without touching the
   drawer, which takes over below 1024px.

   Measured at 1024px after this block: the list needs 566px and has 571px.
*/
@media (min-width:1024px) and (max-width:1100px){

  .se-logo__img{height:34px}
  .se-nav__list a{padding:0 5px}
  .se-nav__list .current-menu-item > a::after,
  .se-nav__list .current_page_item > a::after{left:5px;right:5px}
  .se-header__inner{gap:8px}

}

@media (max-width:1023px){

  :root{--se-header-h:68px;--se-gutter:20px}
  .se-seo-desktop{display:none}
  .se-nav{display:none}
  /*
     The mobile menu button.

     It was a 42px circle with a transparent ground and a navy glyph, sitting on a
     white header: no contrast, no affordance, and at 360px it was the only
     control on the right of the bar. It is now a 48px square tile in the brand
     blue with a white glyph — 9.7:1 against the ground, past AA for a graphic —
     and the glyph itself goes from 22px to 26px, which is the size at which a
     three-line mark stops reading as three short strokes.

     Hover swaps to the brand orange with the same white glyph rather than to a
     tint of the blue, so the control is unmistakably a button and stays inside
     the two-colour palette.
  */
  .se-burger{
    display:inline-flex;
    width:48px;height:48px;
    border-radius:12px;
    background:var(--se-blue);
    color:#fff;
    box-shadow:0 2px 6px rgba(6,20,84,.22);
  }
  .se-burger .se-icon{width:26px;height:26px}
  .se-burger:hover{background:var(--se-orange);color:#fff}
  .se-burger:focus-visible{
    outline:3px solid var(--se-orange);outline-offset:2px;border-radius:12px;
  }
  .se-header__actions{margin-left:auto}
  .se-searchbtn{display:none}

  .se-hero__grid{grid-template-columns:1fr;gap:28px}
  .se-hero__title{max-width:none}
  .se-hero__media{order:2}
  .se-heropanel{position:static;width:100%;margin-top:-32px;margin-inline:16px;box-shadow:var(--se-shadow)}
  .se-hero__img{max-height:340px}

  .se-snapshot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-home-services__grid,
  .se-home-industries__grid,
  .se-home-process__grid,
  .se-home-work__grid,
  .se-home-feedback__grid{grid-template-columns:1fr}
  /* The services intro band is two columns on a desktop; below this it is one. */
  .se-home-services__intro{grid-template-columns:1fr;gap:14px}
  .se-home-insights__grid{grid-template-columns:1fr}
  .se-home-insights__intro{order:-1}
  .se-svccards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-indcards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .se-workcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-aiband__grid{grid-template-columns:1fr}
  .se-home-why__grid{grid-template-columns:1fr}
  .se-home-why__media{justify-content:flex-start}
  .se-ctaband__grid{grid-template-columns:1fr}
  .se-ctaband__title{max-width:none}


}

@media (max-width:640px){

  :root{--se-gutter:18px;--se-section-y:clamp(38px,7vw,54px)}
  .se-header__cta{display:none}
  .se-snapshot__grid{grid-template-columns:1fr;gap:16px;padding-block:22px}
  .se-svccards{grid-template-columns:1fr}
  .se-indcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .se-workcards{grid-template-columns:1fr}
  .se-quotes{grid-template-columns:1fr}
  .se-postcards{grid-template-columns:1fr}
  .se-process{grid-template-columns:1fr}
  .se-whycols{grid-template-columns:1fr}
  .se-hero__actions .se-btn{width:100%}
  .se-ctaband__actions .se-btn{width:100%}
  .se-techstrip__list{gap:12px 22px}
  .se-techstrip__list li{font-size:.9375rem}

  .se-searchform__row{flex-direction:row}

}

@media (max-width:400px){

  .se-indcards{grid-template-columns:1fr}
  .se-logo__img{height:34px}

}

@media (max-width:360px){

  .se-hero__caps li{font-size:.8125rem}
  .se-searchform__submit{width:44px;height:44px}
  .se-searchform__field{height:44px}

}