/* Shared by every page (the approved home page direction): gold token, scrollbar, big headings and kickers,
   role colours, built-in tool tiles, the works-with strip, the close and footer. Loaded after theme.css. */
/* LAB: home page v2 (11 Nov 2026). People and outcomes, the reference site's rhythm; the app appears only in the film. */
.v2-h { max-width: 18ch; margin: 0 0 var(--s-7); }
/* works with: grouped tiles and the set-up */
.works2 { height: auto; min-height: 0; padding-block: var(--s-9, 96px); background: var(--app-sand, #f0ebe1); }
.works2 > .wrap { height: auto; display: block; }

/* v2.6 (owner's review): works-with is one short line: the words, then real logos with their names drifting past. No boxes. */
main > section.section.works5 { padding-block: 44px; border-block: 1px solid var(--line); }
main > section.section.works5 > .wrap.ww { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 56px; height: auto; }
.ww__h { margin: 0; max-width: 11ch; font: 600 26px/1.12 var(--font-display); letter-spacing: -0.025em; color: var(--ink); }
.ww__view { min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); }
.ww__view:focus-visible { -webkit-mask-image: none; mask-image: none; outline: 3px solid var(--app-gold, #8b6914); outline-offset: 6px; border-radius: 8px; }
.ww__track { display: flex; width: max-content; animation: ww-run 44s linear infinite; }
.ww__view:hover .ww__track, .ww__view:focus-visible .ww__track { animation-play-state: paused; }
.ww__list { list-style: none; margin: 0; padding: 0 32px; display: flex; align-items: center; gap: 64px; flex: none; }
.ww__item { display: flex; align-items: center; gap: 12px; flex: none; }
.ww__item img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.ww__item b { font: 600 19px/1 var(--font-text); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
@keyframes ww-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ww__track { animation: none; } .ww__list[aria-hidden] { display: none; } .ww__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 899px) { main > section.section.works5 { padding-block: 32px; } main > section.section.works5 > .wrap.ww { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ww__h { max-width: none; font-size: 22px; } .ww__list { gap: 44px; padding: 0 22px; } .ww__item img { width: 28px; height: 28px; } .ww__item b { font-size: 17px; }
}
.role--office { --c: #74d39b; --d: #1c7f47; }
.role--floor { --c: #74c7f0; --d: #0f6fa8; }
.role--cust { --c: #f59c8c; --d: #b4432c; }

/* v3.5 (owner's brief): "what makes Cabby different": a centred claim over four reasons, on the app's dark brown */
main > section.section.why { height: auto; min-height: 0; max-height: none; padding-block: var(--s-9, 96px); color: #fff; }
main > section.section.why > .wrap.why__in { display: block; height: auto; text-align: center; }
.why__kicker { margin: 0 0 var(--s-4); font: 600 14px/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--app-gold-lit, #d9b65a); }
.why__in h2 { margin: 0 auto var(--s-8); max-width: 24ch; font: 600 clamp(2rem, 4vw, 3.4rem)/1.06 var(--font-display); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
@media (max-width: 639px) { main > section.section.why { padding-block: var(--s-8, 64px); } .why__in h2 { margin-bottom: var(--s-6); } main > section.section.why > .wrap.why__in { text-align: left; } .why__in h2 { margin-left: 0; }
}

/* v3.6 (owner's review): the "different" section on a light ground: the claim, one sentence, then eight built-in tools,
   each with its own gold line icon drawn to match the Cabby mark */
main > section.section.why.why--light { background: var(--app-sand, #f0ebe1); color: var(--ink); }
main > section.section.works5 { background: var(--bg, #faf9f7); }
.why--light .why__kicker { display: inline-flex; align-items: center; gap: 10px; color: #6f5410; }
.why--light .why__kicker img { width: 22px; height: 21px; }
.why--light .why__in h2 { color: var(--ink); margin-bottom: var(--s-4); max-width: 22ch; }
.why__lead { margin: 0 auto var(--s-8); max-width: 54ch; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; color: #4d4a44; }
.why__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); text-align: left; }
.why__tiles > li { display: flex; }
.why__tile { display: grid; align-content: start; gap: 10px; width: 100%; padding: var(--s-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--lift-1); color: var(--ink); text-decoration: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease; }
.why__tile img { width: 56px; height: 56px; object-fit: contain; margin-bottom: var(--s-3); }
.why__tile h3 { margin: 0; font: 600 21px/1.18 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.why__tile p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #4d4a44; }
.why__tile:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: #c9b06a; }
.why__tile:focus-visible { outline: 3px solid var(--app-gold, #8b6914); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .why__tile { transition: none; } .why__tile:hover { transform: none; }
}
@media (max-width: 1099px) { .why__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) { .why__tiles { grid-template-columns: minmax(0, 1fr); } .why__lead { margin-inline: 0; margin-bottom: var(--s-6); }
}
/* The close: centred like "what makes Cabby different", one button. Then the links, then one legal line. */
.ft { position: relative; color: #fff; overflow: hidden; }
.ft__close { position: relative; text-align: center; padding-block: var(--s-9, 96px) var(--s-8, 64px); }
.ft__close::before { content: ""; position: absolute; left: 50%; bottom: -40px; width: min(760px, 90%); height: 320px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(217 182 90 / .16), transparent); pointer-events: none; }
.ft__close > * { position: relative; }
.ft__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s-4); font: 600 14px/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--app-gold-lit, #d9b65a); }
.ft__kicker img { width: 22px; height: 21px; filter: brightness(1.7) saturate(.9); }
.ft__close h2 { margin: 0 auto var(--s-4); max-width: 18ch; font: 600 clamp(2.1rem, 4.4vw, 3.75rem)/1.04 var(--font-display); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.ft__lead { margin: 0 auto var(--s-6); max-width: 46ch; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; color: #e9e4da; }
.ft__links { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: var(--s-5); padding-block: var(--s-7, 48px); border-top: 1px solid rgb(255 255 255 / .14); }
.ft__brand p { margin: var(--s-4) 0 0; max-width: 26ch; font: 500 17px/1.4 var(--font-display); letter-spacing: -0.01em; color: #e9e4da; }
.ft__col h3 { margin: 0 0 var(--s-3); font: 600 12.5px/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--app-gold-lit, #d9b65a); }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ft__col a { display: inline-block; padding: 5px 0; font-size: 15px; line-height: 1.4; color: #e2dccf; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1px no-repeat; transition: color .2s ease, background-size .3s cubic-bezier(.22, 1, .36, 1); }
.ft__col a:hover { color: #fff; background-size: 100% 1px; }
.ft__col a:focus-visible, .ft__legal a:focus-visible { outline: 2px solid #e8c878; outline-offset: 3px; border-radius: 2px; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: var(--s-4) var(--s-5); border-top: 1px solid rgb(255 255 255 / .14); font-size: 13.5px; color: #c9c2b4; }
.ft__legal a { color: #c9c2b4; }
@media (prefers-reduced-motion: reduce) { .ft__col a { transition: none; }
}
@media (max-width: 1023px) { .ft__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) { .ft__close { text-align: left; padding-block: var(--s-8, 64px) var(--s-7, 48px); } .ft__close h2, .ft__lead { margin-inline: 0; } .ft__close::before { left: 0; transform: none; } .ft__close .btn { width: 100%; justify-content: center; }
}
.ft__close .btn { display: inline-flex; width: auto; min-width: 0; }
@media (max-width: 639px) { .ft__close .btn { display: flex; width: 100%; }
}

/* v3.8 (owner's review): the page scrollbar is the app's own: thin, a gold thumb, no track (the app's index.css uses
   scrollbar-width: thin with its gold at low strength; a little stronger here so it reads on the dark bands too) */
html { scrollbar-width: thin; scrollbar-color: rgb(139 105 20 / .5) transparent; }

/* v3.9 (owner's review): a gold underline (the gold token) under "Cabby" in the runs heading, same bar as the role words */
:root { --gold: #8B6914; }

/* v4.0 (audit): fixes found by the responsive audit */
picture { display: contents; }
/* 3. the legal link is a full-size tap target */
.ft__legal a { display: inline-block; padding-block: 4px; min-height: 24px; }
@media (max-width: 639px) {
  .why__tile { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: var(--s-4); }
  .why__tile img { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .why__tile h3 { align-self: center; font-size: 19px; } .why__tile p { grid-column: 2; }
}

@media print {
  header.nav { position: absolute; }
}

/* Keep section bookmarks clear of the fixed header. */
.tb[id], #who, #works { scroll-margin-top: calc(var(--nav-h, 72px) + 12px); }

/* Cookie settings (footer) and the cookie choice bar (analytics.js) */
.ft__cookie { min-height: 24px; padding: 4px 0; border: 0; background: none; color: #c9c2b4; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ft__cookie:hover { color: #fff; }
.ft__cookie:focus-visible { outline: 2px solid #e8c878; outline-offset: 3px; border-radius: 2px; }
.cc { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin-inline: auto; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: #1e1b16; color: #f3efe7; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .5); font-size: 15px; line-height: 1.45; }
.cc[hidden] { display: none; }
.cc__text { flex: 1 1 320px; margin: 0; }
.cc__text a { color: #e8c878; text-decoration: underline; text-underline-offset: 3px; }
.cc__btns { display: flex; gap: 10px; }
.cc .btn { min-height: 44px; padding-inline: 20px; background: transparent; color: #f3efe7; border-color: rgb(255 255 255 / .45); }
.cc .btn:hover { background: rgb(255 255 255 / .1); }
.cc a:focus-visible, .cc .btn:focus-visible { outline: 2px solid #e8c878; outline-offset: 2px; }
@media (max-width: 639px) { .cc__btns { width: 100%; } .cc__btns .btn { flex: 1; justify-content: center; } }