/* Service page layouts v2: section styles, moved verbatim from staging Additional CSS on 5 Oct 2026 by
   move_section_css_to_theme.py (site-rework prestaging). Loaded on the page and in the editor.
   The rules that adapt these sections to native blocks live in layout-v2-blocks.css. */
/* ---- service-h1 (from staging Additional CSS, moved 5 Oct 2026) ---- */
/* Service page headlines, 4 Oct 2026 (Rene: "go back to the fat orange and white thin design of headlines"):
   the same mix as the home page H1, thin white words with the orange part in bold. Applies to the shared
   service page H1 class, so every service page changes together. */
/* Rene's rule, 4 Oct: "bold is always orange, and thin is always white." The headline's plain words are
   thin white (200); the words wrapped in a span are bold orange. Which words are bold is set in each
   page's markup, never by flipping these weights. */
.bre-hero h1.bre-h1 { font-weight: 200 !important; }
/* bold set to 500 on 4 Oct after Rene compared 600, 500, 400 and 300 ("Anything above 500 is too fat"); 500 matches the menu */
.bre-hero h1.bre-h1 span, .bre-hero h1.bre-h1 strong { font-weight: 500 !important; color: #EF8354; }

/* ---- website-v2 (from staging Additional CSS, moved 5 Oct 2026) ---- */
.lp { padding: 6rem 0; position: relative; }
.lp + .lp::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,192,192,.25), transparent); }
.lp-in { max-width: 1080px; margin: 0 auto; padding: 0 16px; box-sizing: content-box; }
.lp h2 { color: #FFFFFF; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; margin: 0 0 1.5rem; }
.lp h3 { color: #FFFFFF; font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 0 0 .5rem; }
.lp p { color: #BFC0C0; font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.1rem; max-width: 68ch; }
.lp-eyebrow { color: #EF8354 !important; font-size: .8rem !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .8rem !important; }
.lp-2col { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; }
.lp-top { align-items: start; } .lp-mid { align-items: center; }
.lp-lead { color: #FFFFFF !important; font-size: 1.3rem !important; font-weight: 300; line-height: 1.55 !important; }
.lp-faults { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(191,192,192,.2); }
.lp-faults li { display: flex; gap: 1rem; align-items: baseline; color: #FFFFFF; font-size: 1.15rem; font-weight: 300;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(191,192,192,.2); }
.lp-x { flex: 0 0 14px; height: 14px; position: relative; top: 1px; }
.lp-x::before, .lp-x::after { content: ""; position: absolute; left: 6px; top: -1px; width: 2px; height: 16px; background: #EF8354; transform: rotate(45deg); }
.lp-x::after { transform: rotate(-45deg); }
.lp-punch { max-width: none !important; margin: 4rem 0 0 !important; color: #FFFFFF !important; font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important;
  font-weight: 200; line-height: 1.3 !important; }
.lp-punch span { color: #EF8354; font-weight: 500; }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.lp-card { border: 1px solid rgba(191,192,192,.22); border-radius: 14px; padding: 2rem 2rem 1.2rem; background: #363B4E; }
.lp-num { display: block; color: #EF8354; font-size: 2.6rem; font-weight: 200; line-height: 1; margin-bottom: 1.2rem; }
.lp-sticky { position: sticky; top: 120px; }
.lp-mech { padding: 1.6rem 1.6rem .4rem; margin-bottom: 1rem; background: #363B4E; border-radius: 14px; }  /* no edge bar: iron rule */
.lp-mech:last-child { margin-bottom: 0; }
.lp-time { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; position: relative; }
.lp-time::before { content: ""; position: absolute; top: 22px; left: 22px; right: 10%; height: 1px; background: rgba(191,192,192,.35); }
.lp-time li { position: relative; }
.lp-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(191,192,192,.5);
  background: #2D3142; color: #FFFFFF; font-weight: 600; margin-bottom: 1.4rem; position: relative; }
.lp-hot .lp-dot { background: #EF8354; border-color: #EF8354; color: #2D3142; }
.lp-hot h3 { color: #EF8354; }
.lp-time p { font-size: .95rem !important; }
.lp-band { background: #363B4E; }
.lp-big { color: #FFFFFF; font-weight: 200; font-size: 2rem; line-height: 1; }
.lp-big span { display: block; color: #EF8354; font-weight: 500; font-size: 11rem; line-height: .85; letter-spacing: -.04em; }
.lp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-tile { border: 1px solid rgba(191,192,192,.22); border-radius: 12px; padding: 2.2rem 1.5rem; color: #FFFFFF; font-size: 1.2rem; font-weight: 300; }
.lp-tile::before { content: ""; display: block; width: 28px; height: 2px; background: #EF8354; margin-bottom: 1.2rem; }
.lp-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.lp-table th, .lp-table td { text-align: left; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(191,192,192,.2); color: #BFC0C0; font-size: 1rem; vertical-align: top; }
.lp-table th { color: #FFFFFF; font-weight: 600; }
.lp-table td:first-child { color: #FFFFFF; font-weight: 500; width: 24%; }
.lp-table th:nth-child(2), .lp-table td:nth-child(2) { background: rgba(239,131,84,.08); color: #FFFFFF; }
.lp-table th:nth-child(2) { color: #EF8354; }
.lp-faq details { border-bottom: 1px solid rgba(191,192,192,.2); }
.lp-faq details:first-child { border-top: 1px solid rgba(191,192,192,.2); }
.lp-faq summary { list-style: none; cursor: pointer; color: #FFFFFF; font-size: 1.15rem; font-weight: 400; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 0; top: 1.1rem; color: #EF8354; font-size: 1.6rem; font-weight: 200; transition: transform .2s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { padding-bottom: .6rem; }
.lp-acc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.lp-acc-nav { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.lp-acc-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(191,192,192,.45); background: transparent;
  cursor: pointer; position: relative; }
.lp-acc-nav button::before { content: "\2190"; color: #FFFFFF; font-size: 1.1rem; }
.lp-acc-nav .lp-acc-next::before { content: "\2192"; }
.lp-acc-nav button:hover { background: #EF8354; border-color: #EF8354; }
.lp-acc-nav button:hover::before { color: #2D3142; }
.lp-acc { position: relative; overflow: hidden; height: 460px; margin-top: .5rem; }
.lp-acc-p { position: absolute; top: 0; bottom: 0; overflow: hidden; border: 1px solid rgba(191,192,192,.22); border-radius: 14px; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, #2D3142 30%, rgba(239,131,84,.55)); min-width: 0; box-sizing: border-box;
  transition: left .45s cubic-bezier(.3,.7,.3,1), width .45s cubic-bezier(.3,.7,.3,1); }
.lp-acc-p, .lp-acc-nav button { font-family: inherit; }
.lp-acc-art { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  -webkit-mask-image: radial-gradient(ellipse 48% 60% at 50% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 60% at 50% 46%, #000 55%, transparent 100%); }
.lp-acc-p::after { content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(45,49,66,.85)); opacity: 0; transition: opacity .4s; }
.lp-acc-p.is-open::after { opacity: 1; }
.lp-acc-no, .lp-acc-t { z-index: 1; }
.lp-acc-art .b2be-engine-fig { max-width: none !important; width: auto !important; height: 100%; margin: 0 !important; }
.lp-acc-art svg { height: 100% !important; width: auto !important; }
.lp-acc-p:not(.is-open) .lp-acc-art { opacity: .55; }
.lp-acc-no { position: absolute; top: 18px; left: 22px; color: #EF8354; font-size: 1rem; font-weight: 500; letter-spacing: .1em; opacity: 0; transition: opacity .3s; }
.lp-acc-t { position: absolute; left: 28px; bottom: 26px; right: 28px; text-align: left; color: #FFFFFF; font-size: 2.4rem; font-weight: 300;
  line-height: 1.1; opacity: 0; transition: opacity .3s; text-shadow: 0 2px 18px rgba(45,49,66,.8); }
.lp-acc-p.is-open .lp-acc-no, .lp-acc-p.is-open .lp-acc-t { opacity: 1; transition-delay: .35s; }
.lp-acc-caps { position: relative; min-height: 6.5rem; margin-top: 1.6rem; }
.lp-acc-cap { position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lp-acc-cap.is-open { opacity: 1; position: relative; pointer-events: auto; }
.lp-acc-cap p { font-size: 1.2rem !important; max-width: 62ch; }
.lp-acc-h { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; font-weight: 300 !important; margin: 0 0 .6rem !important; }
.lp-acc-cap strong { color: #FFFFFF; font-weight: 500; }
@media (max-width: 860px) {
  .lp-acc { height: 340px; gap: 6px; } .lp-acc-t { font-size: 1.5rem; left: 18px; bottom: 18px; }
  .lp-acc-head { align-items: flex-start; flex-direction: column; gap: 0; }
  .lp { padding: 4rem 0; }
  .lp-2col, .lp-grid, .lp-tiles { grid-template-columns: 1fr; gap: 2rem; }
  .lp-time { grid-template-columns: 1fr; } .lp-time::before { top: 0; bottom: 0; left: 22px; right: auto; width: 1px; height: auto; }
  .lp-time li { padding-left: 64px; } .lp-dot { position: absolute; left: 0; top: 0; }
  .lp-sticky { position: static; }
  .lp-big span { font-size: 7rem; }
  .lp-table { display: block; overflow-x: auto; }
}

/* The lead paragraph is normal body text, no word reveal (Rene, 11 Oct: that motion is for headlines
   and quotes only). It takes the section's paragraph style from .lp p. */
.v-reveal-rest { max-width: 60ch; }
.v-stack { padding-bottom: 6rem; }
.v-stack-card { position: sticky; background: #353a4d; border: 1px solid rgba(191,192,192,.22); border-radius: 16px;
  padding: 2rem 2rem 1.4rem; margin-bottom: 9rem; min-height: 170px; box-shadow: 0 -12px 30px rgba(20,22,32,.45); }
.v-stack-card p { color: #FFFFFF !important; font-size: 1.35rem !important; font-weight: 300; line-height: 1.45 !important; margin: 0 !important; }
.v-stack-no { display: block; color: #EF8354; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.v-stack-card .lp-x { position: absolute; right: 2rem; top: 2rem; }
.v-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 1.2rem; margin-top: 2.5rem; }
.v-bento-t { position: relative; overflow: hidden; border: 1px solid rgba(191,192,192,.22); border-radius: 16px; padding: 2rem;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(239,131,84,.16), transparent 60%), #363B4E;
  transition: border-color .3s; display: flex; gap: 1.5rem; }
.v-bento-t:hover { border-color: rgba(239,131,84,.6); }
.v-bento-0, .v-bento-3 { grid-column: span 2; }
.v-bento-copy { flex: 1 1 50%; position: relative; z-index: 1; }
.v-bento-art { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; margin: -2rem -2rem -2rem 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 50%, transparent 100%); }
.v-bento-art .b2be-engine-fig { max-width: 340px !important; }
.v-scrolly-idx { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.2rem; border-left: 1px solid rgba(191,192,192,.25); }
.v-scrolly-idx li { color: rgba(191,192,192,.55); font-size: 1.05rem; padding: .45rem 0; position: relative; transition: color .3s; }
.v-scrolly-idx li span { display: inline-block; width: 2.2rem; font-size: .8rem; letter-spacing: .1em; }
.v-scrolly-idx li::before { content: ""; position: absolute; left: calc(-1.2rem - 1px); top: 0; bottom: 0; width: 2px; background: #EF8354;
  transform: scaleY(0); transition: transform .3s; }
.v-scrolly-idx li.on { color: #FFFFFF; } .v-scrolly-idx li.on span { color: #EF8354; }
.v-scrolly-idx li.on::before { transform: scaleY(1); }
.v-scrolly-b { padding: 1.75rem 0; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s; }
.v-scrolly-b.on { opacity: 1; }
/* Steps sit at their own height with a hairline between them; 46vh left about 300px of empty space (Rene, 11 Oct). */
.v-scrolly-b + .v-scrolly-b { border-top: 1px solid rgba(191,192,192,.2); }
.v-scrolly-b h3 { font-size: 1.9rem !important; font-weight: 300 !important; margin-bottom: 1rem !important; }
.v-scrolly-no { color: #EF8354; font-size: .85rem; letter-spacing: .14em; margin-bottom: .6rem; }
.v-ticks { display: grid; grid-template-columns: repeat(36, 1fr); gap: 5px; align-items: end; height: 56px; margin-top: 3.5rem; }
.v-ticks i { display: block; justify-self: end; width: 2px; height: 26px; background: rgba(191,192,192,.28); transition: background .3s var(--d), height .4s var(--d); }
.v-ticks i.v-yr { height: 56px; width: 3px; }
.v-months.on .v-ticks i { background: #EF8354; }
.v-ticks-l { position: relative; height: 1.2rem; margin-top: .8rem; color: #BFC0C0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.v-ticks-l span { position: absolute; top: 0; transform: translateX(-100%); white-space: nowrap; } .v-ticks-l span:nth-child(1) { left: 0; transform: none; } .v-ticks-l span:nth-child(2) { left: 33.33%; } .v-ticks-l span:nth-child(3) { left: 66.66%; } .v-ticks-l span:nth-child(4) { left: 100%; }
.v-list { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid rgba(191,192,192,.2); }
.v-list li { display: flex; align-items: baseline; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(191,192,192,.2); cursor: default; }
.v-list-no { color: #EF8354; font-size: .85rem; letter-spacing: .14em; flex: 0 0 2.5rem; }
.v-list-t { color: #FFFFFF; font-size: clamp(1.8rem, 4.2vw, 3.6rem); font-weight: 200; line-height: 1.1; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s; }
.v-list-a { margin-left: auto; color: #EF8354; font-size: 2rem; opacity: 0; transform: translateX(-20px); transition: opacity .3s, transform .4s; }
.v-list li:hover .v-list-t { color: #EF8354; transform: translateX(1.2rem); }
.v-list li:hover .v-list-a { opacity: 1; transform: none; }
.v-tog-sw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 1.5rem 0 2rem; padding: 5px;
  border: 1px solid rgba(191,192,192,.35); border-radius: 999px; }
.v-tog-sw button { position: relative; z-index: 1; font-family: inherit; background: none; border: 0; cursor: pointer; color: #FFFFFF;
  font-size: 1rem; font-weight: 500; padding: .8rem 1.8rem; border-radius: 999px; transition: color .3s; }
.v-tog-sw button.is-on { color: #2D3142; }
.v-tog-sw i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #EF8354;
  transition: transform .45s cubic-bezier(.3,.7,.3,1), background .3s; }
.v-tog.them .v-tog-sw i { transform: translateX(100%); background: #FFFFFF; }
.v-tog-card { border: 1px solid rgba(191,192,192,.22); border-radius: 16px; overflow: hidden; }
.v-tog-row { display: grid; grid-template-columns: 30% 1fr; border-bottom: 1px solid rgba(191,192,192,.15); }
.v-tog-row:last-child { border-bottom: 0; }
.v-tog-k { padding: 1.5rem 2rem; color: #BFC0C0; font-size: 1rem; }
.v-tog-v { position: relative; padding: 1.5rem 2rem; overflow: hidden; }
.v-us, .v-them { display: block; color: #FFFFFF; font-size: 1.25rem; font-weight: 300; transition: transform .45s cubic-bezier(.3,.7,.3,1), opacity .3s; }
.v-them { position: absolute; inset: 1.5rem 2rem auto; opacity: 0; transform: translateY(110%); color: #BFC0C0; }
.v-tog.them .v-us { opacity: 0; transform: translateY(-110%); }
.v-tog.them .v-them { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .v-bento { grid-template-columns: 1fr; } .v-bento-0, .v-bento-3 { grid-column: auto; }
  .v-bento-t { flex-direction: column; } .v-bento-art { margin: 0 -2rem -2rem; height: 260px; }
  .v-scrolly-idx { display: none; } .v-scrolly-b { min-height: 0; opacity: 1; padding: 1.5rem 0; }
  .v-stack-card { margin-bottom: 4rem; }
  .v-ticks { gap: 2px; }
  .v-tog-row { grid-template-columns: 1fr; } .v-tog-k { padding-bottom: 0; }
  .v-tog-sw button { padding: .7rem 1rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v-reveal-text span { opacity: 1; } .v-scrolly-b { opacity: 1; } .v-months .v-ticks i { background: #EF8354; transition: none; }
}

.v-stack-card { margin-bottom: 1.6rem !important; background: #363B4E !important; border-color: #363B4E !important; }
/* No padding under the cards: it made them scroll away while the pinned text beside them stayed, leaving
   the text next to empty space (Rene, 11 Oct). With none, text and cards let go within a few pixels. */
.v-stack { padding-bottom: 0 !important; }
.v-stack-card:last-child { margin-bottom: 0 !important; }
.v-stack-card .v-stack-no { color: #FFFFFF; opacity: .75; }
/* Faults read like "How we build it": plain rows with a hairline between them. No card fill, no
   shadow, no stacking (Rene, 11 Oct: the light navy cards had to go). */
.v-stack-card { position: relative !important; top: auto !important; background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; margin: 0 !important; padding: 1.75rem 3rem 1.75rem 0 !important; }
.v-stack-card + .v-stack-card { border-top: 1px solid rgba(191,192,192,.2) !important; }
.v-stack-card .lp-x { right: 0; top: 1.75rem; width: 14px; }
.v-bento-t { background: #363B4E !important;
  border-color: #363B4E !important; }
.v-bento-1 { background: #EF8354 !important; border-color: #EF8354 !important; }
.v-bento-1 h3, .v-bento-1 p, .v-bento-1 .lp-num { color: #2D3142 !important; }
.v-bento-2 { background: #363B4E !important; border-color: #363B4E !important; }
.v-bento-2 p { color: #BFC0C0 !important; }
.v-scrolly-idx { border-left: 0 !important; padding-left: 0 !important; }
.v-scrolly-idx li::before { display: none !important; }
.v-scrolly-idx li { padding: .55rem 1rem !important; border-radius: 999px; transition: background .3s, color .3s; }
/* Rene, 5 Oct: two main colours (navy, orange); sand-lighter #F4EEE4 only for small elements such as pills */
.v-scrolly-idx li.on { background: #F4EEE4; color: #2D3142; } .v-scrolly-idx li.on span { color: #2D3142 !important; }
.lp-acc-p { background: #363B4E !important; border-color: #363B4E !important; }
.lp-acc-p.is-open { background: #363B4E !important; border-color: #363B4E !important; }
.lp-acc-art { -webkit-mask-image: none !important; mask-image: none !important; }
.lp-acc-art .b2be-engine-fig { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.lp-acc-p.is-open::after { display: none !important; }
.lp-acc-p.is-open .lp-acc-no { color: #EF8354 !important; font-weight: 700; }
.lp .b2be-machine > rect[fill^="url(#"] { display: none; }
.lp .b2be-machine [style*="fill:#"]:not([style*="fill:#e2e6f0"]) { fill: #363B4E !important; }
.lp .b2be-machine [id$="-grw"] stop { stop-color: #363B4E !important; }
/* Rene, 4 Oct: "make these cards orange and the drawings B2B Engine navy" (step accordion). Parts take the panel
   orange so they still hide the lines behind them; lines, lettering and grid go navy. */
.lp-acc .lp-acc-p, .lp-acc .lp-acc-p.is-open { background: #EF8354 !important; border-color: #EF8354 !important; }
.lp-acc .lp-acc-p:not(.is-open) .lp-acc-art { opacity: .7; }
.lp-acc .lp-acc-t, .lp-acc .lp-acc-p.is-open .lp-acc-no { color: #2D3142 !important; text-shadow: none !important; }
.lp-acc .lp-acc-t { font-weight: 400 !important; }
.lp-acc .b2be-machine [style*="fill:#"]:not([style*="fill:#e2e6f0"]) { fill: #EF8354 !important; }
.lp-acc .b2be-machine [id$="-grw"] stop { stop-color: #EF8354 !important; }
.lp-acc .b2be-machine .w path, .lp-acc .b2be-machine .w circle { stroke: #2D3142 !important; }
.lp-acc .b2be-machine .k, .lp-acc .b2be-machine [style*="fill:#e2e6f0"], .lp-acc .b2be-machine text, .lp-acc .b2be-machine tspan, .lp-acc .b2be-machine [fill="#e2e6f0"] { fill: #2D3142 !important; }
.lp-acc .b2be-machine [stroke="#e2e6f0"], .lp-acc .b2be-machine [stroke="#606982"], .lp-acc .b2be-machine [stroke="#3a4157"],
.lp-acc .b2be-machine [stroke="#34394c"], .lp-acc .b2be-machine [stroke="#ef8354"] { stroke: #2D3142 !important; }
/* Rene, 4 Oct, care section: "This should become navy again, and just make the elements a bit more orange on it".
   Bold orange "3", thin white "years"; the month ruler fills orange; eyebrow and year labels orange. */
.v-months { background: transparent !important; }
.v-months .lp-big span { color: #EF8354 !important; font-weight: 500 !important; }
.v-months .v-ticks i { background: #363B4E !important; }
.v-months.on .v-ticks i { background: #EF8354 !important; }
.v-months .v-ticks-l span { color: #EF8354; }
.v-months .v-ticks-l span:first-child { color: #BFC0C0; }
.v-list li { padding-left: 1.5rem !important; padding-right: 1.5rem !important; border-radius: 14px; transition: background .35s; }
.v-list li:hover { background: #EF8354; }
.v-list li:hover .v-list-t, .v-list li:hover .v-list-no, .v-list li:hover .v-list-a { color: #2D3142 !important; }
.v-tog-card { background: #363B4E; border-color: #363B4E !important; }
.v-tog-row { border-color: #2D3142 !important; }
/* Open answers have no card: they sit between the same hairlines as closed questions, so all text
   lines up and the light navy fill is gone (Rene chose this, 11 Oct). */

.v-tog:not(.them) .v-tog-card { background: #EF8354 !important; border-color: #EF8354 !important; }
.v-tog:not(.them) .v-tog-k, .v-tog:not(.them) .v-us { color: #2D3142 !important; }
.v-tog:not(.them) .v-tog-row { border-color: rgba(45,49,66,.18) !important; }
.v-tog-card { transition: background .45s ease, border-color .45s ease; }
.v-tog-sw button { font-weight: 500 !important; }
.v-tog:not(.them) .v-tog-k, .v-tog:not(.them) .v-us { font-weight: 500 !important; }

.lp h2 strong, .lp h2 b { color: #EF8354; font-weight: 500; }
.v-tiles { display: grid; gap: 1.2rem; margin-top: 2.5rem; }
.v-tiles-2 { grid-template-columns: 1fr 1fr; } .v-tiles-3 { grid-template-columns: repeat(3, 1fr); }
.v-tile { background: #363B4E; border-radius: 16px; padding: 2rem 2rem 1.2rem; }
.v-tile h3 { color: #FFFFFF !important; }
.v-tiles-2 .v-tile:first-child, .v-tiles-3 .v-tile:nth-child(2) { background: #EF8354; }
.v-tiles-2 .v-tile:first-child h3, .v-tiles-2 .v-tile:first-child p, .v-tiles-2 .v-tile:first-child .lp-num,
.v-tiles-3 .v-tile:nth-child(2) h3, .v-tiles-3 .v-tile:nth-child(2) p, .v-tiles-3 .v-tile:nth-child(2) .lp-num { color: #2D3142 !important; }
.v-reveal-rest + .v-reveal-rest { margin-top: -.2rem; }
.v-stat .lp-num { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; font-weight: 500 !important; margin-bottom: .9rem !important; }
.lp p.v-cite { font-size: .8rem !important; letter-spacing: .06em; opacity: .75; margin-top: -.4rem !important; }
@media (max-width: 860px) { .v-tiles-2, .v-tiles-3 { grid-template-columns: 1fr; } }
/* Rene, 5 Oct: "whenever orange is in play as a background colour, we're using a fatter font". Every text on an
   orange surface is at least 500, the button weight. Checked by scan_text_on_orange.py. */
.v-bento-1, .v-bento-1 *, .v-tiles-2 .v-tile:first-child, .v-tiles-2 .v-tile:first-child *,
.v-tiles-3 .v-tile:nth-child(2), .v-tiles-3 .v-tile:nth-child(2) *, .lp-acc-p .lp-acc-no,
.v-tog:not(.them) .v-tog-card, .v-tog:not(.them) .v-tog-card *, .v-list li:hover, .v-list li:hover * { font-weight: 500 !important; }