/* Safe & Secure inner pages in the homepage style (2026-11-02).

   Sam: "why is the shop page so outdated? doesn't match the homepage style at
   all". Only the homepage, the safes page and the city pages had been rebuilt;
   every page on _base.html kept the old style B look (old display face, square
   corners, mono labels, white header bar). This sheet moves all of them over
   at once:

   1. the homepage's navy frame and nav (_base.html opens it, the hero macro
      ssx.light_hero continues it), with the breadcrumb inside the frame;
   2. the homepage hero bento for every inner page (white H1 tile, cream
      visit tile, white licence tile);
   3. the .ssx components (ssl-components.css) and the old .ssl-* blocks on
      the homepage's rounded tiles, pill buttons and Archivo headings.

   Linked by _base.html after the page's own sheets, so it wins the cascade
   without !important. The homepage and city pages (_shell.html) never load it. */

/* ---- 1. Frame: nav on top, hero below, one navy shape ------------------ */
body.ssl-inner{background:#F7F6F2}
.ib-head .frame{padding-bottom:0}
.ib-head .page{padding-bottom:16px}
body:has(.ib-hero) .ib-head .page{border-radius:28px 28px 0 0;padding-bottom:0}
.ib-hero .frame{padding-top:0}
.ib-hero .page{border-radius:0 0 28px 28px;padding-top:0}
.ib-head .nav{padding-bottom:18px}
body:not(:has(.ib-hero)) .ib-head{margin-bottom:8px}

/* breadcrumb inside the frame: small light caps on navy */
.ib-head .ib-crumb{background:none;border:0;padding:0 10px 16px;margin:0}
.ib-head .ib-crumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ib-head .ib-crumb li+li::before{color:#6E6C86}
.ib-head .ib-crumb a{color:#C9C7D6;border-bottom:1px solid transparent}
.ib-head .ib-crumb a:hover,.ib-head .ib-crumb a:focus-visible{color:#FFFFFC;border-bottom-color:#F2C230}
.ib-head .ib-crumb [aria-current="page"]{color:#FFFFFC}

/* ---- 2. Hero bento ------------------------------------------------------ */
.ib-bento{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr auto}
.ib-bento .main{grid-row:1/3;gap:32px;padding:40px 48px 40px}
.ib-bento .main h1{font-size:clamp(32px,3.7vw,58px);line-height:1.02;max-width:18ch}
.ib-bento .main .lede{font-size:17px;max-width:52ch;margin-top:20px}
.ib-bento .ib-visit{grid-template-columns:170px 1fr}
.ib-bento .ib-visit .ph{min-height:160px}
.ib-bento .ib-visit .visit-t{font-size:clamp(22px,2.1vw,30px);text-wrap:balance}
.ib-bento .ib-rate{padding:22px 26px;gap:16px}
.ib-bento .ib-rate .big{font-size:56px}
.hp .pill.outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:20px 32px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.hp .pill.outline:hover{background:var(--tile)}
.hp .main .actions .pill.outline svg{width:18px;height:18px}
@media (min-width:861px) and (max-width:1100px){
  .ib-bento .main{padding:34px 34px 32px}
  .ib-bento .ib-visit{grid-template-columns:130px 1fr}
}
@media (max-width:860px){
  .ib-bento{grid-template-rows:none}
  .ib-bento .main{grid-row:auto;padding:26px 20px}
  .ib-bento .main h1{font-size:clamp(28px,8vw,40px);max-width:none}
  .ib-bento .ib-visit{grid-template-columns:110px 1fr}
  .ib-bento .ib-visit .ph{min-height:120px}
  .ib-bento .ib-rate{display:none}
  .hp .main .actions{gap:10px}
  .hp .main .actions .pill{flex:1 1 auto;justify-content:center;padding:18px 20px}
  body:has(.ib-hero) .ib-head .page{border-radius:0}
  .ib-hero .page{border-radius:0 0 22px 22px}
}

/* ---- 3. Components on the homepage look -------------------------------- */
.ssx-root{--line:#D9D7E4;--line2:#C9C7D6;--navy3:#39347A}
/* small labels: Plex Sans caps like the homepage .cap, never mono */
.ssx-eb,.ssx-svc .ssx-no,.ssx-flipcue,.ssx-job .ssx-jn,.ssx-trustrow span,.ssx-area-more>summary,.ssx-van-more>summary,.ssx-step-book .ssx-bookcue,.ssx-nap,.ssx-prose th,.ssx-prose caption{font-family:var(--sans);font-weight:600;letter-spacing:.12em}
.ssx-eb{color:var(--navy3)}
.ssx-on-onyx .ssx-eb{color:var(--gold)}

/* section headings: the homepage's .two (Archivo 700, tight) */
.ssx-shead h2,.ssx-area h2,.ssx-shop h2,.ssx-van h2,.ssx-cprose h2{font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.ssx-shead h2{font-size:clamp(30px,3.2vw,48px)}
.ssx-van h2{font-size:clamp(34px,4vw,58px)}
.ssx-cprose h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
/* the closing band reads like the homepage booking card title */
.ssx-final h2{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.ssx-final .ssx-callbig{font-weight:800}

/* buttons: pills */
.ssx-btn,.ssx-svc-back .ssx-gobtn,.ssx-van-btn{border-radius:999px}
.ssx-btn{font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:0 28px}
.ssx-btn svg{width:18px;height:18px}

/* tiles: rounded, tile-grey fronts, no hairline boxes */
.ssx-svc-face{border-radius:18px}
.ssx-svc-front{background:#ECEBF2;border-color:#ECEBF2}
.ssx-svc:not(.ssx-flipped):hover .ssx-svc-front{border-color:#ECEBF2;background:#E2E1EC}
.ssx-svc-front h3,.ssx-svc-contact h3{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.05}
.ssx-svc-contact{border-radius:18px}
.ssx-svc .ssx-tags span,.ssx-svc-back .ssx-tags span{border-radius:999px;font-family:var(--sans);font-weight:600}
.ssx-on-onyx .ssx-svc-front{background:var(--onyx-card);border-color:var(--onyx-card)}
.ssx-on-onyx .ssx-svc:not(.ssx-flipped):hover .ssx-svc-front{background:#39347A;border-color:#39347A}

.ssx-cprose-item{border-radius:20px;border-color:transparent;background:#FFFFFC}
.ssx-on-onyx .ssx-cprose-item{background:var(--onyx-card)}
.ssx-gcard{border-radius:16px;border-color:transparent}
.ssx-check{border-radius:16px;border-color:transparent;background:#FFFFFC}
.ssx-on-onyx .ssx-check{background:var(--onyx-card)}
.ssx-check .ssx-ic{border-radius:50%}
.ssx-check h3,.ssx-wcard h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em}
.ssx-wcard{border-radius:16px}

/* common jobs: the homepage's white question cards */
.ssx-job{border-radius:16px;background:#FFFFFC;border-color:var(--line2);padding:20px}
.ssx-job:hover{border-color:var(--navy)}
.ssx-job .ssx-jt{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--navy)}
.ssx-on-onyx .ssx-job{background:var(--onyx-card);border-color:transparent}
.ssx-on-onyx .ssx-job .ssx-jt{color:#FFFFFC}

/* steps: the homepage step cards (tile, big Archivo number) */
.ssx-step,.ssx-step-book{border-radius:20px;border-color:transparent;background:#ECEBF2;padding:26px}
.ssx-step .ssx-n{font-family:var(--disp);font-weight:700;font-size:48px;letter-spacing:-.03em;color:var(--navy)}
.ssx-step h3{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em}
.ssx-on-onyx .ssx-step,.ssx-on-onyx .ssx-step-book{background:var(--onyx-card)}
.ssx-on-onyx .ssx-step .ssx-n{color:var(--gold)}
.ssx-step-book:hover{background:var(--gold)}

.ssx-trustrow{border-radius:999px;overflow:hidden;border-color:var(--line2)}
.ssx-area-more>summary .ssx-amx,.ssx-van-more>summary .ssx-van-plus{border-radius:50%}
.ssx-cities a,.ssx-van-chips a{transition:color .12s ease,border-color .12s ease}

.ssx-faqlist{border-top:0;display:grid;gap:10px}
.ssx-faqlist details{border:1px solid var(--line2);border-radius:16px;background:#FFFFFC;padding:0 18px}
.ssx-on-onyx .ssx-faqlist details{background:var(--onyx-card);border-color:transparent}
.ssx-faqlist summary{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em}
.ssx-faqlist summary .ssx-pm{font-family:var(--sans)}
.ssx-faqlist details[open]{border-color:var(--navy)}

.ssx-shop-img,.ssx-van-photo{border-radius:20px;border:0;overflow:hidden}
.ssx-van-photo img{width:100%}
.ssx-nap{border-radius:16px;border-color:transparent;font-size:14px;letter-spacing:0;text-transform:none}

.ssx-prose table{border-radius:12px;overflow:hidden}

/* ---- 4. Old .ssl-* blocks still used by a few templates ----------------- */
.ssl-eyebrow,.ssl-sub{font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;letter-spacing:.12em}