/* =========================================================
   Brand motifs and per-page layout patterns.

   The four inner pages were reading as one template with the
   copy swapped out. These give each page its own structure:
   About runs a timeline, For Leaders an offset stack and a
   stepper, For Companies a data band.

   SVG ships as data URIs so it stays decorative CSS rather
   than markup, and there is nothing extra to request.
   ========================================================= */

/* ---------- contour motif: echoes the homepage hero ---------- */
[data-fp~=mcontour]{position:relative;overflow:hidden}
[data-fp~=mcontour]::after{content:""!important;position:absolute;z-index:0;pointer-events:none;top:-18%;right:-14%;width:760px;height:760px;opacity:.5;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23E0312B' stroke-width='1.1' stroke-opacity='.34'%3E%3Cellipse cx='300' cy='300' rx='80' ry='68'/%3E%3Cellipse cx='300' cy='300' rx='124' ry='106'/%3E%3Cellipse cx='298' cy='302' rx='170' ry='146'/%3E%3Cellipse cx='296' cy='304' rx='218' ry='188'/%3E%3Cellipse cx='294' cy='306' rx='268' ry='232'/%3E%3C/g%3E%3C/svg%3E")}
[data-fp~=mcontour]>.e-con{position:relative;z-index:2}

/* ---------- capsule motif: the 'and' from the logo, oversized ---------- */
[data-fp~=mcapsule]{position:relative;overflow:hidden}
[data-fp~=mcapsule]::after{content:""!important;position:absolute;z-index:0;pointer-events:none;left:-90px;bottom:-70px;width:430px;height:190px;opacity:.5;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 170'%3E%3Crect x='3' y='3' width='394' height='164' rx='82' fill='none' stroke='%231E1A16' stroke-opacity='.16' stroke-width='2'/%3E%3Crect x='34' y='34' width='332' height='102' rx='51' fill='none' stroke='%23E0312B' stroke-opacity='.2' stroke-width='2'/%3E%3C/svg%3E")}
[data-fp~=mcapsule]>.e-con{position:relative;z-index:2}
/* ---------- ABOUT: vertical timeline ----------
   A career is a sequence, so About gets a rail rather than the card row
   every other page was using. */
[data-fp~=tlitem]{position:relative;padding:24px 0 34px 76px!important}
[data-fp~=tlitem]::before{content:""!important;position:absolute;left:18px;top:0;bottom:0;width:1px;background:rgba(30,26,22,.18)}
[data-fp~=tlitem]:first-child::before{top:32px}
[data-fp~=tlitem]:last-child::before{bottom:auto;height:32px}
[data-fp~=tlitem]::after{content:"";position:absolute;left:12px;top:26px;width:13px;height:13px;border-radius:100px;background:var(--fp-bone);border:2px solid var(--fp-red);z-index:1}
[data-fp~=tlyear] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;font-size:13px!important;letter-spacing:2px!important;color:var(--fp-red)!important;text-transform:uppercase}

/* ---------- ABOUT: staggered photo band ---------- */
[data-fp~=shots]>.e-con-inner,[data-fp~=shots]:not(:has(>.e-con-inner)){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
[data-fp~=shots] .e-con{width:auto!important;max-width:none!important}
[data-fp~=shotb]:nth-child(2){margin-top:64px!important}
[data-fp~=shotb]:nth-child(3){margin-top:24px!important}
[data-fp~=shotb] img{border-radius:16px!important;display:block;width:100%;height:auto}
[data-fp~=shotcap] .elementor-heading-title{font-family:Inter,sans-serif!important;font-weight:400!important;font-size:13px!important;color:var(--fp-muted)!important;letter-spacing:.2px!important}
/* ---------- FOR LEADERS: offset stack ----------
   The symptom list is meant to feel like it is closing in, so the blocks
   alternate sides down the page instead of sitting in a neat row. */
[data-fp~=stackitem]{position:relative;width:min(620px,88%)!important;max-width:none!important;padding:28px 34px 32px 34px!important;border-top:1px solid rgba(30,26,22,.16)}
[data-fp~=stackitem]:nth-child(even){margin-left:auto!important}
[data-fp~=ghostnum] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;font-size:66px!important;line-height:.9!important;letter-spacing:-3px!important;color:transparent!important;-webkit-text-stroke:1px rgba(224,49,43,.55)}

/* ---------- FOR LEADERS: horizontal stepper ---------- */
[data-fp~=stepper]>.e-con-inner,[data-fp~=stepper]:not(:has(>.e-con-inner)){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
[data-fp~=stepper] .e-con{width:auto!important;max-width:none!important}
[data-fp~=step]{position:relative;padding:44px 34px 0 0!important}
[data-fp~=step]::before{content:""!important;position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(30,26,22,.18)}
[data-fp~=step]:last-child::before{right:34px}
[data-fp~=step]::after{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:100px;background:var(--fp-red)}

/* ---------- FOR COMPANIES: data band ----------
   Three numbers that carry the business case, set at headline scale on the
   dark panel so the page opens on evidence rather than on cards. */
[data-fp~=databand]>.e-con-inner,[data-fp~=databand]:not(:has(>.e-con-inner)){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
[data-fp~=databand] .e-con{width:auto!important;max-width:none!important}
[data-fp~=datacell]{position:relative;padding:2px 36px 2px 0!important}
[data-fp~=datacell]+[data-fp~=datacell]{padding-left:40px!important}
[data-fp~=datacell]+[data-fp~=datacell]::before{content:""!important;position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.18)}
[data-fp~=bignum] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;font-size:82px!important;line-height:.94!important;letter-spacing:-3.5px!important;color:#FFFFFF!important}
[data-fp~=bignum] .elementor-heading-title em{font-style:normal;color:var(--fp-red)}
/* ---------- responsive ---------- */
@media (max-width:1024px){
  [data-fp~=bignum] .elementor-heading-title{font-size:58px!important;letter-spacing:-2.4px!important}
  [data-fp~=mcontour]::after{width:520px;height:520px;opacity:.34}
}
@media (max-width:767px){
  [data-fp~=tlitem]{padding:20px 0 28px 54px!important}
  [data-fp~=tlitem]::before{left:12px}
  [data-fp~=tlitem]::after{left:6px;top:22px}
  [data-fp~=stackitem]{width:100%!important;padding:24px 0 26px 0!important}
  [data-fp~=stackitem]:nth-child(even){margin-left:0!important}
  [data-fp~=ghostnum] .elementor-heading-title{font-size:46px!important}
  /* a horizontal stepper has nowhere to go on a phone, so it becomes a rail */
  [data-fp~=stepper]>.e-con-inner,[data-fp~=stepper]:not(:has(>.e-con-inner)){grid-template-columns:minmax(0,1fr)}
  [data-fp~=step]{padding:22px 0 22px 40px!important}
  [data-fp~=step]::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  [data-fp~=step]:first-child::before{top:26px}
  [data-fp~=step]:last-child::before{right:auto;bottom:auto;height:26px}
  [data-fp~=step]::after{left:0;top:20px}
  [data-fp~=databand]>.e-con-inner,[data-fp~=databand]:not(:has(>.e-con-inner)){grid-template-columns:minmax(0,1fr)}
  [data-fp~=datacell]{padding:20px 0!important}
  [data-fp~=datacell]+[data-fp~=datacell]{padding-left:0!important}
  [data-fp~=datacell]+[data-fp~=datacell]::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  [data-fp~=bignum] .elementor-heading-title{font-size:52px!important}
  [data-fp~=shots]>.e-con-inner,[data-fp~=shots]:not(:has(>.e-con-inner)){grid-template-columns:minmax(0,1fr)}
  [data-fp~=shotb]:nth-child(2),[data-fp~=shotb]:nth-child(3){margin-top:0!important}
  [data-fp~=mcontour]::after{width:360px;height:360px;top:-8%;right:-30%;opacity:.28}
  [data-fp~=mcapsule]::after{width:260px;height:115px;left:-70px;bottom:-40px}
}

/* ---------- rails, restated ----------
   Elementor's own .e-con::before sets `inset: 0`, which quietly expands any
   hairline drawn this way into a full-size block. Every geometry property
   has to be forced, not just the ones being changed. */
[data-fp~=tlitem]::before,[data-fp~=step]::before,[data-fp~=datacell]+[data-fp~=datacell]::before{content:""!important;position:absolute!important;border-radius:0!important;opacity:1!important}
[data-fp~=tlitem]::before{left:18px!important;right:auto!important;top:0!important;bottom:0!important;width:1px!important;height:auto!important;background:rgba(30,26,22,.18)!important}
[data-fp~=tlitem]:first-child::before{top:32px!important}
[data-fp~=tlitem]:last-child::before{bottom:auto!important;height:32px!important}
[data-fp~=step]::before{left:0!important;right:0!important;top:9px!important;bottom:auto!important;width:auto!important;height:1px!important;background:rgba(30,26,22,.18)!important}
[data-fp~=step]:last-child::before{right:34px!important}
[data-fp~=datacell]+[data-fp~=datacell]::before{left:0!important;right:auto!important;top:2px!important;bottom:2px!important;width:1px!important;height:auto!important;background:rgba(255,255,255,.18)!important}
@media (max-width:767px){
  [data-fp~=tlitem]::before{left:12px!important}
  [data-fp~=step]::before{left:6px!important;right:auto!important;top:0!important;bottom:0!important;width:1px!important;height:auto!important}
  [data-fp~=step]:first-child::before{top:26px!important}
  [data-fp~=step]:last-child::before{right:auto!important;bottom:auto!important;height:26px!important}
  [data-fp~=datacell]+[data-fp~=datacell]::before{left:0!important;right:0!important;top:0!important;bottom:auto!important;width:auto!important;height:1px!important}
}

/* Elementor sets .e-con{overflow:visible}, which lets the motif push the
   page wider than the viewport. Clipping has to be forced. */
[data-fp~=mcontour],[data-fp~=mcapsule]{overflow:hidden!important}

/* ---------- measure ----------
   Body copy was running to ~109 characters a line inside the wide columns,
   which is both hard to read and the reason the right half of several
   sections looked empty rather than intentionally open. */
.elementor-widget-text-editor p{max-width:68ch}
[data-fp~=ondark] .elementor-widget-text-editor p{max-width:62ch}

/* ---------- timeline reads as a rail, not a stack ----------
   Label, title and description each get a column, so the row uses the full
   1320 instead of trailing off into white space. */
@media (min-width:1025px){
  [data-fp~=tlitem]{display:grid!important;grid-template-columns:186px minmax(0,1fr) minmax(0,1.35fr);column-gap:44px;align-items:start}
  [data-fp~=tlitem]>.elementor-widget{width:auto!important;max-width:none!important}
  [data-fp~=tlyear] .elementor-heading-title{padding-top:9px}
  [data-fp~=tlitem] .elementor-widget-text-editor p{max-width:46ch}
}