/* ============================================================
   FLAGSHIP BEATS (inc/flagship.php), 10 September 2026
   Loaded on flagship location and industry pages only, after the page's
   own stylesheet. Everything here is namespaced .fl-* so it can never
   collide with the industry (.ind-*) or location (.loc-*) modules it sits
   between. Type, colour and spacing come from the site's own tokens.
   ============================================================ */

/* ---------- shared ---------- */
.fl-p{margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch}
.fl-more{margin:18px 0 0;font-size:15.5px}
.fl-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:52ch}
.fl-foot{margin:28px 0 0;text-align:center;font-size:15px;line-height:1.55;color:var(--muted)}

/* On a place page the section tones are fixed per key by location.php and
   the new keys have none, so these carry the band themselves. */
.loc-sec-showcase,.loc-sec-promise,.loc-sec-mobile{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============================================================
   STAKES: the same business, three ways
   ============================================================ */
.fl-stakes{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,5vw,80px);align-items:center}
.fl-stakes .ind-head h2{max-width:18ch}
.fl-three{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fl-three-row{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:22px;align-items:center;
  padding:16px 20px 16px 16px;border-radius:16px;background:var(--white);border:1px solid var(--line);
}
.fl-three-you{border-color:rgba(217,98,14,.45);box-shadow:0 22px 44px -32px rgba(18,33,47,.55)}
.fl-three-art{position:relative;min-height:104px;display:flex;align-items:center}
.fl-three-cap b{display:block;font-family:var(--fh);font-size:15.5px;font-weight:800;letter-spacing:-0.025em;line-height:1.2;color:var(--ink)}
.fl-three-you .fl-three-cap b{color:var(--orange-dk)}
.fl-three-cap span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--muted)}

/* a listing on a directory */
.fl-dir{
  width:100%;padding:12px 14px;border-radius:10px;background:#F3F1EC;border:1px solid var(--line);
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 10px;align-items:center;
}
.fl-dir-mark{width:28px;height:28px;border-radius:50%;background:#CFC7B9;grid-row:1/3}
.fl-dir-name{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-dir-line{height:6px;border-radius:3px;background:#DDD7CC}
.fl-dir-line.is-short{width:55%}
.fl-dir-chip{grid-column:1/-1;justify-self:start;margin-top:4px;padding:3px 9px;border-radius:100px;background:#E3EAF3;color:#3B5998;font-family:var(--fh);font-size:10.5px;font-weight:700}

/* a website from a few years ago */
.fl-old{width:100%;padding:8px;border-radius:8px;background:#fff;border:1px solid #D8D2C6;display:grid;gap:6px;filter:saturate(.6)}
.fl-old-bar{display:flex;gap:4px}
.fl-old-bar i{width:7px;height:7px;border-radius:50%;background:#D8D2C6}
.fl-old-logo{font-family:"Times New Roman",Georgia,serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:#6B7A88;text-align:center;padding:6px 0;border-top:1px solid #E6E0D6;border-bottom:1px solid #E6E0D6}
.fl-old-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.fl-old-cols i{height:30px;border-radius:3px;background:#EDE9E1}
.fl-old-tag{font-size:10px;color:#9AA4AE;text-align:right}

/* a PrimeStart website, small */
.fl-you{width:100%}
.fl-you .sm{width:100%;box-shadow:none;border:1px solid var(--line)}
.fl-you .sm-hero{height:62px}
.fl-you .sm-services,.fl-you .sm-areas{display:none}
.fl-you .sm-nav > span{display:none}
.fl-you .sm-nav{height:28px;padding:0 10px}
.fl-you .sm-chrome{padding:6px 10px}
.fl-you .sm-foot{padding:6px 10px}

/* ============================================================
   SHOWCASE: the example website on a design board
   ============================================================ */
.fl-show{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,72px);align-items:center}
.fl-show-board{position:relative;padding:28px 26px 30px;border-radius:22px;background:rgba(18,33,47,.045);border:1px solid var(--line)}
.fl-crop{position:absolute;width:16px;height:16px}
.fl-crop--tl{left:-1px;top:-1px;border-left:2px solid var(--orange);border-top:2px solid var(--orange);border-radius:22px 0 0 0}
.fl-crop--br{right:-1px;bottom:-1px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);border-radius:0 0 22px 0}
.fl-show-desk{width:86%}
.fl-show-sm{box-shadow:0 30px 60px -32px rgba(18,33,47,.55)}
.fl-show-sm .sm-areas{display:none}
.fl-show-hand{position:absolute;right:16px;bottom:16px;width:31%;max-width:156px}
.fl-show-smp{width:100%;box-shadow:0 30px 58px -26px rgba(18,33,47,.7)}
.fl-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.fl-points li{position:relative;padding-left:26px}
.fl-points li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.fl-points b{display:block;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.fl-points span{display:block;margin-top:3px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ============================================================
   MANAGED: you never have to / PrimeStart does
   ============================================================ */
.fl-ledger{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.fl-ledger-col{padding:26px 28px 24px;border-radius:18px;border:1px solid var(--line);background:var(--white)}
.fl-ledger-us{background:var(--ink);border-color:var(--ink)}
.fl-ledger-k{margin:0 0 12px;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fl-ledger-us .fl-ledger-k{color:var(--amber)}
.fl-ledger ul{list-style:none;margin:0;padding:0}
.fl-ledger li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.fl-ledger-us li{border-top-color:rgba(255,255,255,.12);color:var(--on-dark-2)}
.fl-ledger-you li i{flex:none;position:relative;width:18px;height:18px;margin-top:3px;border-radius:50%;background:rgba(18,33,47,.07)}
.fl-ledger-you li i::before,.fl-ledger-you li i::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:2px;border-radius:1px;background:#8A96A3;transform:rotate(45deg)}
.fl-ledger-you li i::after{transform:rotate(-45deg)}
.fl-ledger-you li span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(18,33,47,.3);text-decoration-thickness:1px}
.fl-ledger-us li .tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--amber)}

/* ============================================================
   PROMISE: four things you can hold us to
   ============================================================ */
.fl-promise{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fl-promise li{padding:22px 22px 24px;border-radius:16px;background:var(--white);border:1px solid var(--line)}
.fl-promise-n{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--orange)}
.fl-promise b{display:block;margin-top:12px;font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.025em;line-height:1.2;color:var(--ink)}
.fl-promise p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .fl-promise{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .fl-stakes,.fl-show{grid-template-columns:minmax(0,1fr);gap:34px}
  .fl-show-board,.fl-show-desk,.fl-stakes-visual{min-width:0}
  .fl-show-sm{max-width:100%}
  .fl-stakes .ind-head h2{max-width:none}
  .fl-show-board{order:2}
  .fl-show-desk{width:100%}
  .fl-show-hand{width:30%;max-width:170px}
}
@media (max-width:640px){
  .fl-p{font-size:16px}
  .fl-three{gap:10px}
  .fl-three-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
  .fl-three-art{min-height:0}
  .fl-three-art > *{max-width:280px}
  .fl-show-board{padding:16px 12px 18px;border-radius:18px}
  .fl-show-hand{width:32%;right:8px;bottom:8px}
  .fl-show-smp{max-width:112px}
  .fl-points{gap:12px}
  .fl-ledger{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .fl-ledger-col{padding:18px 18px 16px}
  .fl-ledger li{font-size:15px;padding:10px 0}
  .fl-promise{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .fl-promise li{padding:18px 18px 20px}
  .fl-foot{margin-top:22px;text-align:left}
}

/* ============================================================
   FLAGSHIP PHONES
   mobile.css keeps the phone mock-ups of non-lead industry sections out of
   the flow to save the reader scrolling. On a flagship page the phone-first
   section IS the argument, so its phone stays, and the place pages, which
   borrow the same module, get the same treatment.
   ============================================================ */
@media (max-width:640px){
  body.is-flagship .ind-sec-mobile .ind-mockgrid-visual,
  body.is-flagship .ind-sec-mobile .ind-mobile-stage,
  body.is-flagship .loc-sec-mobile .ind-mockgrid-visual,
  body.is-flagship .loc-sec-mobile .ind-mobile-stage{display:block}
  body.is-flagship .ind-sec-mobile .ind-mockgrid,
  body.is-flagship .loc-sec-mobile .ind-mockgrid{grid-template-columns:1fr;gap:22px}
  body.is-flagship .ind-sec-mobile .ind-mockgrid-visual,
  body.is-flagship .loc-sec-mobile .ind-mockgrid-visual{order:2}
  body.is-flagship .ind-mobile-stage{display:flex;justify-content:center}
  body.is-flagship .ind-mobile-phone{max-width:230px}
  /* a place page's borrowed industry modules keep their own phone layout */
  body.is-flagship .loc-sec-platform .ind-cp,
  body.is-flagship .loc-sec-mobile .ind-mockgrid{grid-template-columns:1fr}
  body.is-flagship .loc-sec-platform .ind-cp > *,
  body.is-flagship .loc-sec-mobile .ind-mockgrid > *{min-width:0}
}
@media (max-width:640px){
  /* primestart.css hides every .scene-phone on a phone because in a hero
     scene it would cover the browser; in the phone-first section it is the
     only visual, so it stays. */
  body.is-flagship .ind-sec-mobile .scene-phone,
  body.is-flagship .loc-sec-mobile .scene-phone{display:block;position:relative;left:auto;bottom:auto;width:100%}
}