/*
 * Landing page styles — bright, dense, card-heavy, in the shape Indian cab-booking
 * sites use: utility bar, white header, tabbed booking widget over a light hero, then
 * stacked bands of cards.
 *
 * Separate from styles.css on purpose. That file dresses the partner app and is loaded
 * on every authenticated screen; mixing marketing layout into it would mean every
 * landing tweak risks the dashboard. Tokens are inherited from it so the brand stays
 * defined in one place.
 *
 * No photography anywhere, and that is a constraint rather than a preference: the
 * app's Content-Security-Policy allows images from 'self' and data: only, so every
 * illustration here is inline SVG or CSS. Hotlinked stock photos would be blocked.
 */

/* ==========================================================================
   Caveat, variable, Latin subset, OFL. Declared here and not in styles.css because
   only this page loads landing.css and the face is used by exactly one decorative
   line — the hero's script accent. Putting it in the shared sheet would make every
   authenticated screen carry a font it never renders.

   No unicode-range, deliberately. Inter needs one because it is the body face for the
   whole product and the range is what keeps U+20B9 inside the subset; a glyph falling
   out of that range silently swaps typeface mid-price. Caveat draws one English line
   and there is no second Caveat file for a range to arbitrate between, so a range here
   would buy nothing and add a second thing to keep in sync with the subset. Anything
   outside the file falls through the accent's own fallback stack instead.

   No <link rel="preload"> either: the accent is decorative, font-display: swap already
   covers it, and a second preload would compete with the Inter preload the real
   headline depends on.
   ========================================================================== */
@font-face {
  font-family: 'Caveat';
  src: url('/fonts/caveat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.lp {
  --lp-max: 1180px;
  --lp-ink: #17161a;
  --lp-amber: #f7a81b;
  --lp-amber-dk: #d98c05;
  --lp-cream: #fff8ea;
  --lp-shadow: 0 2px 4px rgba(23, 22, 26, .04), 0 12px 28px rgba(23, 22, 26, .07);
  --lp-shadow-lg: 0 18px 50px rgba(23, 22, 26, .14);
  background: #fff;
  color: var(--lp-ink);
}

.lp-wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 20px; }

.lp-band { padding: 58px 0; }
.lp-band.cream { background: var(--lp-cream); }
.lp-band.grey { background: #f7f5f2; }

/* Section headings: centred, with the short amber rule these sites all use. */
.lp-title { text-align: center; max-width: 760px; margin: 0 auto 38px; }

.lp-title h2 {
  font-size: clamp(1.45rem, 3.2vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}

.lp-title h2 em { color: var(--lp-amber-dk); font-style: normal; }

.lp-title h2::after {
  content: '';
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 2px;
  background: var(--lp-amber);
  margin: 14px auto 0;
}

.lp-title p { color: var(--muted); margin: 14px 0 0; line-height: 1.6; }
.lp-title.left { text-align: left; margin-inline: 0; }
.lp-title.left h2::after { margin-inline: 0; }

/*
 * The dark utility bar above the header is gone — .lp-util, .lp-util-inner and their
 * responsive rule with it. It carried a phone number, an email address and the opening
 * hours in 13px grey on near-black, which is the first band of colour a visitor sees
 * and the least useful: all three are repeated in the Contact section and the footer,
 * and the floating WhatsApp button is the route people actually take. Removing it puts
 * the white header, and the form under it, at the top of the fold on a phone.
 *
 * Deleted rather than commented out, because a rule left behind for a deleted element
 * is a selector nobody can safely change: it looks live and matches nothing.
 */

/* ---------------------------------------------------------------- header */

.lp-head-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.lp-head-inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/*
 * The header nav is gone — .lp-nav-links, its links, their hover state and the
 * max-width:940px rule that hid it. It had already been trimmed to a single link,
 * #contact; the header now carries the brand and the two actions. Every section it
 * pointed at stays, and the footer still deep-links into all six.
 *
 * The min-width:941px override on .lp-head-cta went with it. That rule only existed
 * so the nav's own auto margin did the pushing on desktop; left behind, it would
 * have parked both buttons against the brand. One auto margin now, at every width.
 */

/*
 * The brand mark as a bordered disc, and scoped to this header rather than changed in
 * styles.css. .brand-mark is shared by fourteen pages: the other thirteen sit in the dark
 * .topbar, where the mark is a bare 32px glyph on charcoal and an amber ring around it
 * would be a redesign of the whole authenticated shell. This is a landing-page request,
 * so it gets a landing-page selector.
 *
 * The svg is untouched — only the box around it changes: 32px down to 28px, a full round,
 * a 1.5px ring, and grid centring so the glyph is centred by the container rather than by
 * happening to fill it.
 *
 * The arc cannot clip, and that is geometry rather than hope. `* { box-sizing: border-box }`
 * makes the 28px include the ring, so the content box is 25px and the svg fills it. In the
 * 64-unit viewBox the arc is centred near (32, 31) with r 21 and stroke-width 6, so its
 * outer edge reaches 24 units from centre — 48 of 64, three quarters of the box. At 25px
 * that is an 18.8px disc, radius 9.4px, inside a ring whose inner radius is 12.5px: 3.1px
 * of clear air the whole way round. Nothing is clipped and nothing touches the ring. Adding
 * padding here would shrink the glyph into the middle of an empty circle, which is why
 * there is none.
 *
 * Crispness is not at risk from the smaller box — it is an svg, so the stroke is resolved
 * at device resolution; 6 units of a 64 box at 25px renders as 2.3px.
 *
 * --lp-amber-dk for the ring, not a new hex: 2.73:1 on the header's white, which is plainly
 * visible as an amber edge. WCAG 1.4.11 does not gate it — the mark is aria-hidden and the
 * brand link takes its accessible name from the wordmark beside it, so the ring identifies
 * nothing. --amber-700 is there at 3.91:1 if a stronger edge is wanted after seeing it.
 *
 * The `color` is the same scoping argument, and it is a bug fix rather than a dressing
 * choice. The mark's svg draws the outer arc in a hardcoded #F7A81B and the inner G in
 * `currentColor`; styles.css sets `.brand-mark { color: #fff }`, which is right on the
 * thirteen .topbar pages because that chrome is dark charcoal. This header is white, so
 * the inner stroke was white on white and the crossbar that tells a G from a C vanished —
 * the mark has always read as a C here. --lp-ink puts it back at 18.01:1 on the white
 * header and 9.07:1 against the amber arc it sits inside.
 *
 * Do NOT lift this into the shared .brand-mark rule. #fff is correct there, and the reason
 * is arithmetic rather than taste: --lp-ink is #17161a and --ink, the .topbar background,
 * is also #17161a. Moving this colour up would paint the inner stroke in the exact value
 * of the surface behind it — 1.00:1, not merely low contrast but the identical colour —
 * and blank the glyph on all thirteen authenticated pages. The same failure as today,
 * inverted, and thirteen pages wide instead of one. landing-check asserts both halves:
 * that this override lives on a .lp-head-bar selector, and that the shared rule still
 * says #fff.
 */
.lp-head-bar .brand-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--lp-amber-dk);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--lp-ink);
}

/*
 * line-height: 1 is the whole tidy-up. .wordmark declares no line-height, so it inherited
 * the body's and rendered a ~31px line box around 20px of text — which made .brand 31px
 * tall and centred the word against the disc by leading rather than by its own box. At 1
 * the box is the text, so .brand's align-items: center lands the wordmark's optical centre
 * on the disc's centre. Nothing else about the wordmark changes.
 */
.lp-head-bar .wordmark { line-height: 1; }

.lp-head-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lp-btn-amber {
  background: var(--lp-amber);
  color: #17161a;
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 16px rgba(247, 168, 27, .32);
  cursor: pointer;
}

.lp-btn-amber:hover { background: var(--lp-amber-dk); color: #fff; }
.lp-btn-ghost {
  border: 1.5px solid var(--border-strong);
  color: var(--lp-ink);
  background: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
}
.lp-btn-ghost:hover { border-color: var(--lp-amber); }

/*
 * The header pair, sized and shaped together.
 *
 * .lp-btn-amber is on three elements — this header, the hero's WhatsApp link and the
 * partner-recruit CTA — so the shared rule above is left exactly as it was and the
 * rectangle is scoped by ancestor. A modifier class would have worked too; the ancestor
 * wins on two counts: it needs no edit to the markup, so there is no new class token to
 * declare and nothing to forget on one of the three, and it cannot be pasted onto the
 * partner CTA by accident, because that button is not in this header. The partner CTA and
 * the hero button therefore keep the pill they were designed with.
 *
 * .lp-btn-ghost is only ever in this header — grep confirms one use — so it is changed in
 * place rather than scoped, which keeps the pair's numbers in one selector list instead of
 * two rules that have to be kept level.
 *
 * The drift fix is the flex box, not a nudge. Both buttons were inline-level with
 * symmetric padding but different font sizes and a 1.5px border on one of them, so their
 * boxes resolved to different heights and the labels only lined up by arithmetic. One
 * declared height with the label centred by flex removes the baseline from the question
 * altogether: identical 40px boxes, identical 18px of horizontal padding, labels centred
 * on both axes. 40px rather than --tap's 44px because the bar is 68px tall and a 44px
 * control leaves 12px of air above and below; the tap-target minimum is for the app's
 * touch surfaces, and this pair is a desktop-width header row.
 */
.lp-head-cta .lp-btn-amber,
.lp-btn-ghost {
  height: 40px;
  padding: 0 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Rectangular, not a pill. --r-xs is the smallest step on the radius scale. */
.lp-head-cta .lp-btn-amber { border-radius: var(--r-xs); }

/*
 * Below 520px the ghost button goes, and the selector is scoped to match the rule above
 * it. It used to be a bare .lp-btn-ghost, which was enough when nothing else set display
 * on the class; the pair rule above now does, at the same specificity, so a bare selector
 * here would rely on source order alone to keep the button hidden. Same width, same
 * behaviour, no longer contingent on which rule is written first.
 */
@media (max-width: 520px) { .lp-head-cta .lp-btn-ghost { display: none; } }

/*
 * Header contents centre below 520px, and 520px is not a new number: it is the width the
 * ghost button already disappeared at, three lines up, and it is already a breakpoint in
 * this file twice more (.lp-cities, .lp-footer-grid). Above it the header is brand-left
 * and actions-right and stays that way — that arrangement was fixed deliberately by
 * deleting a min-width: 941px override so that .lp-head-cta's margin-left: auto is the one
 * thing doing the pushing, and nothing here reintroduces a competing auto margin.
 *
 * Below 520px there is nothing to push against: the ghost button is gone, so the row is a
 * brand and a single action, and the auto margin's only remaining job is to pin that action
 * to the right edge of a 320px screen. So the auto margin is switched off — set to 0, which
 * removes it rather than competing with it — and justify-content on the flex parent takes
 * over. Exactly one mechanism at each width, and they cannot both be live.
 */
@media (max-width: 520px) {
  .lp-head-inner { justify-content: center; gap: 14px; }
  .lp-head-cta { margin-left: 0; }
}

/* ------------------------------------------------------------------ hero */

.lp-hero {
  position: relative;
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(247, 168, 27, .22), transparent 65%),
    linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
  padding: 46px 0 58px;
  overflow: hidden;
}

/*
 * THE DECORATIVE LAYER'S RULES ARE ALL GONE, with the markup they dressed. Seven selectors:
 *
 *   .lp-hero::after              the 78px road band: a dashed white centre line over a
 *                                charcoal gradient at .07 opacity
 *   .lp-hero-art                 the absolutely-positioned wrapper, clipped to the hero's
 *                                lower portion, hidden entirely below 1000px
 *   @media (max-width: 1000px)   that display: none
 *   .lp-hero-art .lp-hero-skyline  the faded 1600x300 line-art city
 *   .lp-hero-route               the "Nanded → Pune" group, left: 6%, bottom-aligned on the
 *                                road band's dash
 *   .lp-route-pill               its white pill
 *   .lp-hero-route .lp-route-line  the 224px dashed route with its origin ring and map pin
 *   .lp-hero-vehicle             the 120x64 saloon at left: 38%, opacity .16
 *
 * See the note in index.html where the layer used to sit for why it went. The short version:
 * line art and a photograph in the same band are two registers competing, and once the hero
 * became a photograph the drawings were the half that had to justify itself.
 *
 * .lp-hero keeps its own two background layers — the amber radial at 85% 0% and the cream
 * vertical gradient — and keeps overflow: hidden. Those are the band's own surface, not part
 * of the removed layer, and the gradient is what the trust band below used to seam against.
 *
 * Two pieces of reasoning worth not losing, because both would be rediscovered the hard way:
 *
 *   · The skyline was clipped to the hero's LOWER portion rather than filling it. The amber
 *     radial is brightest at 85% 0%, which is exactly where a full-height skyline would have
 *     been widest — directly behind the copy column.
 *   · The whole layer was hidden below 1000px, not merely reflowed. Every offset in it was
 *     measured against a two-column grid: the route group is a pill plus a 224px path, about
 *     357px wide, offset a further 6% from the left, which at a 360px viewport reaches 379px
 *     and had .lp-hero's overflow crop the destination pin clean off the end. A dashed route
 *     running off the screen with no pin is worse than no route.
 */

.lp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 1000px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .lp-hero-copy { order: 2; }
  .lp-widget-col { order: 1; }
}

/*
 * .lp-badge-row, .lp-badge and the 520px rule that stacked them are GONE, with the markup.
 *
 * They were the three chips at the top of the hero — "★ No booking fee",
 * "Document-verified partners", "Replies on WhatsApp" — removed on the brief that the hero
 * column should be a photograph rather than an argument. None of the three claims left the
 * site: the booking fee is answered in the FAQ, document verification in the partner band,
 * and WhatsApp is a floating button on every scroll position.
 *
 * Worth recording rather than just deleting, because a real finding died with these rules:
 * no amber in this palette can be used as label text at 13px. On the pill's --amber-soft,
 * --lp-amber-dk measured 2.48:1, --amber-600 2.27:1 and --amber-700 3.55:1, all short of the
 * 4.5:1 that 13px bold needs — 18.66px is where WCAG large text starts, so weight does not
 * rescue it. The label used --new (#8a5605, 5.60:1), the palette's dark gold, and anyone
 * reaching for gold text at small sizes again should start from that measurement instead of
 * rediscovering it. styles.css states the general form at the top of the file: amber is a
 * fill colour, amber text fails WCAG.
 */

/*
 * .lp-hero-script and .lp-hero p.lead are GONE, along with the markup they dressed.
 *
 * The first was the Caveat accent reading "Where to today?", the second the supporting
 * sentence under the headline. Both were removed when the hero became a photograph with the
 * headline over it — the brief was a picture in place of that copy. Named here rather than
 * deleted quietly, because naming a removed selector is how this stylesheet records one.
 *
 * One consequence worth knowing before adding either back: .lp-hero-script was the ONLY
 * consumer of Caveat, so the @font-face at the top of this file now has nothing matching it.
 * The declaration and /fonts/caveat-latin.woff2 are deliberately kept — a @font-face with no
 * matching element is never fetched, so an unused face costs a visitor nothing, and the
 * accent is the kind of thing that comes back. It is dead weight in the repository only.
 *
 * The contrast reasoning that used to live here went with the rules, and this time it is not
 * needed anywhere: the headline is .sr-only now, so there is no light-text-over-photograph
 * problem left on this page's hero to solve. The same reasoning still applies to .lp-city
 * further down, which does put a name over a photograph, and it is written out there.
 */

/*
 * The hero shot: a photograph in a rounded frame, and that is all it is.
 *
 * It briefly carried the h1 on top of a gradient scrim. Four rules went when the headline
 * became .sr-only, and they are named here because each was load-bearing for text that is no
 * longer there and putting any of them back alone would do nothing:
 *
 *   · .lp-hero-shot::before      — the bottom-up scrim that made white text readable
 *   · .lp-hero-shot h1           — the overlay type, its clamp, its colour and text-shadow
 *   · .lp-hero-shot h1 em        — "compare real fares" in --lp-amber
 *   · @media (max-width: 560px)  — a taller 4:3 box and a stronger scrim, which existed only
 *                                  because the headline wrapped to five lines on a phone
 *
 * `display: flex` and `align-items: flex-end` went with them: they were pinning the headline
 * to the bottom padding edge and have nothing to align now.
 *
 * aspect-ratio rather than a height, which is the one thing here that is not about the text:
 * the box is the photograph's own 4:3 at every width, no breakpoint has to guess a pixel
 * value, and paired with width/height on the <img> the space is reserved before any image
 * bytes arrive. That still matters — this is the first thing painted, so a late-arriving
 * image would otherwise shift the form beside it.
 */
.lp-hero-shot {
  position: relative;
  /*
   * 4:3, matching the hero photograph's own 1000x750 (1.3333 exactly). This value tracks
   * whichever file /img/hero.jpg is and has moved twice: 4/3 for a 294x220 photo, then 3/2
   * for the 800x532 one that replaced it, now 4/3 again for hero.jpg — a 1000x750 downscale
   * of a 1448x1086 source, whose 4:3 the resize preserved deliberately so this line could go
   * back. Matching the source means `object-fit: cover` crops nothing at all, which is the
   * whole reason to state a ratio here rather than a height. Change the photograph and this
   * number has to move with it; tools/ui-check.mjs reads the file's real intrinsic size, so
   * the <img> attributes cannot drift, but nothing checks this ratio against them.
   */
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--lp-shadow);
}

.lp-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * Centred. With the box now matching the file's own 4:3 there is nothing left for this to
   * decide — cover scales to fit exactly and crops neither axis. It was `center 30%` back when
   * the frame was 4:3 around a 1.336 source and the crop had somewhere to land; hero.jpg is a
   * true 1000x750, so frame and file agree and there is no crop left to position.
   *
   * Kept explicit rather than deleted so that dropping in a photograph of a different shape
   * degrades to a sensible centre crop instead of whatever the browser happens to default to.
   */
  object-position: center;
}

/*
 * .lp-hero-copy .lp-btn-amber is GONE with the link it sized: "Or message us on WhatsApp".
 *
 * It was the compact, centred variant of the shared amber button — .88rem on 9px/18px against
 * the shared rule's .95rem on 11px/22px. The shared .lp-btn-amber rule is deliberately NOT
 * touched: it still dresses the header's "Book a cab" and the partner band's "Become a
 * partner", and tools/landing-check.mjs still asserts it is a pill so squaring it cannot
 * happen by accident.
 *
 * The action itself did not leave the page. .lp-wa, the floating WhatsApp button, sits above
 * everything at every scroll position and goes to the same wa.me number, so removing this
 * one cost the hero a button and cost the visitor nothing.
 *
 * .lp-usp was also declared around here once, when the three trust bullets were the next thing
 * inside .lp-hero-copy. They moved to a band of their own below the hero and have now been
 * removed outright — see the note where the trust row used to be declared, further down.
 *
 * What is left in this column is one .sr-only h1 and .lp-hero-shot. Neither needs a rule
 * here: .sr-only is out of the layout entirely and the shot states its own box.
 */

/* ------------------------------------------------------- booking widget */

.lp-widget {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--lp-shadow-lg);
  overflow: hidden;
}

/*
 * The trip-type tab strip that used to sit across the top of the widget is gone, and
 * .lp-tabs, .lp-tab and the aria-selected and hover rules that dressed it went with it.
 * The tabs selected nothing you then filled in — the form asked for the same fields
 * whichever was active — so four choices bought a change of heading. The route is a
 * pair of real inputs now. See the note in /js/form.js for the wiring that went too.
 */

.lp-widget-body { padding: 22px; }

/*
 * The widget's sub-label is gone with it — #widgetSub was the only class="sub" element in
 * public/, so .lp-widget .sub dressed nothing and went too, the way .lp-util and
 * .lp-nav-links did above.
 *
 * Its margin could not just go with it. The 4px below the heading was the gap to the
 * sub-label, and the 16px below the sub-label was the gap to the form — so deleting the
 * element on its own would have left the heading 4px off the first input. The 16px is
 * moved onto #widgetTitle, which restores the separation the form was drawn with.
 *
 * On #widgetTitle rather than .lp-widget h2 because #successCard's h2 shares that rule and
 * does not want it: that heading is followed by #successMsg, which carries its own 6px
 * margin-top, and 16px would collapse over it and open the success card up for no reason.
 */
.lp-widget h2 { margin: 0 0 4px; font-size: 1.16rem; letter-spacing: -.01em; }
#widgetTitle { margin-bottom: 16px; }

.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .lp-two { grid-template-columns: 1fr; } }

/*
 * Inputs get an icon gutter, which is what makes these widgets readable at a glance.
 *
 * The grid is what the icon is aligned against, so it is declared here rather than left
 * implicit: one column, one row per child — label, input, .error — and align-content: start
 * so those rows keep their natural heights even when the field box is taller than they are.
 */
.lp-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

/*
 * Centred on the INPUT'S OWN ROW — which is neither the field box's centre nor its bottom edge.
 *
 * Both earlier derivations measured the wrong box. `top: 50%` sat the icon in the gap between the
 * block <label> and the input, because .lp-in is the whole .field. Anchoring to the field's bottom
 * edge — bottom: calc(var(--tap) / 2) — read correctly on four fields and wrong on Drop: .lp-two
 * is a two-column grid, .field:last-child drops the 14px margin-bottom that Pickup keeps, so the
 * row is sized by Pickup's margin box and Drop's box stretches 14px past its own input, carrying
 * the icon down with it. Under 420px .lp-two folds to one column, the stretch goes, and the same
 * CSS looks right — which is why the symptom read as Drop-specific rather than as the derivation
 * being wrong for every field that does not happen to end exactly at its input.
 *
 * So make the input's row the containing block. An absolutely positioned child of a grid container
 * is resolved against the grid AREA when both of its grid lines are named, instead of against the
 * padding box, so `top: 50%` here is 50% of the input and nothing else. Both lines must be written
 * out: for an out-of-flow child an `auto` line resolves to the container's padding edge, so
 * `grid-row: 2` alone would quietly restore the bug this replaces.
 *
 * Pickup and drop now derive alignment identically, at every font size and both sides of the fold,
 * with no offset left to be right at one size and wrong at another. A *visible* .error lands on
 * row 3 and no longer moves the icon, which the bottom-edge version could not manage.
 */
.lp-in > svg {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--lp-amber-dk);
  pointer-events: none;
}
.lp-in input, .lp-in select { padding-left: 38px !important; }

.lp-widget-foot {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ------------------------------------- trust row and trust strip, removed */

/*
 * EVERY RULE FOR BOTH BANDS IS GONE, with their markup. Eight selectors, named so a future
 * reader searching for any one of them finds out where it went rather than concluding it was
 * never here:
 *
 *   .lp-hero-trust                       the band wrapper, padding: 26px 0
 *   .lp-usp                              auto-fit grid, minmax(240px, 1fr), gap 16px 34px
 *   .lp-usp li                           flex row, 12px gutter
 *   .lp-usp .tick                        24px amber disc
 *   .lp-usp .tick svg                    14px tick inside it
 *   .lp-strip                            --lp-ink band, padding: 26px 0
 *   .lp-strip-grid                       4 tracks, centred
 *   @media (max-width: 760px)            the 2x2 fold
 *   .lp-strip b / .lp-strip span         1.45rem/800 amber value, .85rem #b6b1bd label
 *
 * See the note in index.html where the two bands used to sit for why they went and, more
 * usefully, for where each of their claims is still made further down the page. The short
 * version: the top of this page was making the same three promises in four different formats,
 * and this is the deduplication.
 *
 * Two measurements worth keeping out of the bin, because both were established the hard way
 * and both are about this palette rather than about these bands:
 *
 *   · --lp-amber on --lp-ink is 9.07:1 — past AA and AAA both. Amber works as text on
 *     charcoal. That is the exact mirror of the finding recorded where .lp-badge used to be
 *     declared: no amber in this palette clears 4.5:1 as small text on beige. Amber is a
 *     fill colour on light surfaces and a text colour on dark ones.
 *   · #b6b1bd on --lp-ink is 8.59:1, a shade lighter than --on-ink-muted (#a9a4b0, 7.40:1).
 *     Both clear AA, so the literal was never a bug — only an untokenised value.
 */

/* ------------------------------------------------------------ card grids */

.lp-grid { display: grid; gap: 22px; }
.lp-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .lp-grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .lp-grid.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
  .lp-grid.c2, .lp-grid.c3, .lp-grid.c4 { grid-template-columns: 1fr; }
}

.lp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--lp-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}

.lp-card:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-lg); }
.lp-card h3 { margin: 15px 0 8px; font-size: 1.06rem; letter-spacing: -.01em; }
.lp-card p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.58; }

.lp-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--lp-amber), #ffca63);
  color: #17161a;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(247, 168, 27, .28);
}
.lp-ico svg { width: 25px; height: 25px; }

/* ------------------------------------------- services, cities and fleet bands */

/*
 * Section-scoped padding, by id. Every one of these numbers is already in this file's
 * rhythm — 26, 30, 38, 40 — because there is no spacing token scale to draw on: styles.css
 * tokenises type (--fs-*), radius (--r-*) and elevation, and nothing else. Inventing a
 * --sp ladder for four declarations would be a design-system change smuggled in under a
 * cosmetic pass, so these reuse the steps the file already stands on.
 *
 * #services loses 18px top and bottom off .lp-band's 58px. Its heading no longer has a
 * subtitle under it, so the 38px below .lp-title was measuring from the amber rule rather
 * than from a paragraph and read as a hole; 26px is the strip's own padding and closes it.
 *
 * The gap between #cities and #fleet was 116px — 58px of cities' bottom padding plus 58px
 * of fleet's top — for a section boundary with a cream band ending on one side and a
 * centred heading starting on the other. That is the dead space, and it is the sum of two
 * paddings, so both are cut: 38 and 30, giving 68px. Cities' tiles are 132px tall, so 38px
 * still leaves the cream band a clear margin under its last row.
 */
#services { padding: 40px 0; }
#services .lp-title { margin-bottom: 26px; }
#cities { padding-bottom: 38px; }
#fleet { padding-top: 30px; }

/*
 * Services keeps three across at full width and drops to two, not one, on a phone.
 *
 * Three is still right on desktop: the cards are a title and a three-word sub-label now, so
 * three of them fill a 1180px row without crowding, and two would leave a third of the band
 * empty. The existing .lp-grid.c3 breakpoints do that already — three, then two from 900px.
 *
 * The change is below 580px, where .lp-grid.c3 collapses to a single column. That collapse
 * is right for #contact, which shares the class and whose cards hold a postal address, a
 * mailto and opening hours; it is wrong for these six now that each card is two short lines.
 * So it is overridden for #services alone rather than changed on the shared class, and
 * #contact keeps stacking. The gap tightens to 14px and the card padding to 18px at that
 * width, because two 24px-padded cards in a 320px row leave about 100px of text column.
 */
@media (max-width: 580px) {
  #services .lp-grid.c3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #services .lp-card { padding: 18px; }
}

/*
 * The fleet heading's amber accent underline is already here, and deliberately not
 * duplicated: .lp-title h2::after draws a 62px by 4px --lp-amber rule, centred, under every
 * section heading on this page — "Choose your vehicle" included. It is exactly the "small
 * pseudo-element rule, no new asset" the brief asked for, it needs no new selector, and a
 * second underline scoped to #fleet would render two amber bars stacked under one heading.
 * Centring is likewise already done: .lp-title is text-align: center by default, and only
 * .lp-title.left opts out. Neither is used here.
 *
 * Recorded rather than left silent, so the next person to read the brief against the
 * stylesheet does not add the rule that is already three hundred lines up.
 */

/* ------------------------------------------------------------ city tiles */

/*
 * Four across, then two from 900px down — the two-column-on-narrow layout the brief asked
 * for was already here, so nothing about the template changes. The 520px rule only tightens
 * the gap, and it used to restate `1fr 1fr`, which is the same template the 900px rule
 * already set: it read as though the columns changed at 520px when only the gutter did.
 * Restated as the one declaration that is actually different. `gap: 12px` is a single value,
 * so the row and column gutters are equal by construction rather than by two numbers being
 * kept in step.
 */
.lp-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .lp-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lp-cities { gap: 12px; } }

/*
 * City tiles are photographs now: the supplied city photo fills the tile, a dark scrim
 * sits over it and the name sits on the scrim. The drawn gradient below stays as the
 * tile's own background because it is what a tile looks like before its lazy photo has
 * arrived and if the photo ever 404s — the tile degrades to the dark card it used to be
 * rather than to a white hole.
 *
 * min-height went from 132px to 168px. 132px was sized around a 62px line-art skyline
 * pinned to the bottom edge: it existed to give that stripe headroom, and the number was
 * about the svg, not about the tile. A photograph has a different problem. Four across in
 * a 1200px wrap the tile is roughly 286px wide, so 132px is a 2.2:1 letterbox — a 3:2
 * source loses about 40% of its height to that, and a portrait source loses most of
 * itself. 168px puts the tile near 1.7:1, which crops the landscape photos gently and
 * gives the scrim enough vertical run to fade rather than band. It is still a floor, not a
 * height: align-items: flex-end still pins the single line of text to the bottom padding
 * edge whatever the tile ends up being.
 */
.lp-city {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 168px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(160deg, #2f2c36, #17161a);
  box-shadow: var(--lp-shadow);
}

/*
 * The photo, filling the tile absolutely the way the skyline svg used to.
 *
 * object-fit: cover is the whole point. The eight sources are 294x220, 548x364, 800x450,
 * 600x450, 250x188, 800x450, 415x739 and 678x452 — one portrait among seven landscapes,
 * and no two the same. `fill` (the default for an <img> given both dimensions in CSS)
 * would stretch every one of them to the tile's ratio; the portrait Kolhapur photo would
 * be squashed to about a third of its height and would look obviously wrong.
 *
 * height: 100% with min-height on the parent rather than inset: 0 alone, because the
 * width/height attributes on the element are the intrinsic file size and would otherwise
 * win the used height on the first layout pass.
 */
.lp-city-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* No border-radius needed: .lp-city clips with overflow: hidden. */
}

/*
 * Kolhapur only. 415x739 into a ~286x168 box crops to about a third of the image height,
 * so where that third is taken from decides what the tile shows. Centred, the crop lands
 * on the crowd and the wet ground and cuts the temple spires off the top. 22% pulls the
 * window up onto the spires, which is the recognisable part of the photo.
 */
.lp-city-photo.portrait { object-position: center 22%; }

/*
 * The scrim, and the reason the name is still legible.
 *
 * This used to be an amber radial wash alone — decoration over a flat near-black gradient
 * that was never a contrast risk, because the tile's own background was the only thing
 * under the text. A photograph is a contrast risk no token check can catch: a bright sky
 * or a pale wall behind the name is a plausible photo and would leave near-white text on
 * near-white pixels, and nothing in the suite could see it.
 *
 * So the wash is now the top layer of two, and the layer under it is a vertical dark
 * gradient: effectively transparent at the top, where there is no text and the photo
 * should be seen, ramping to 92% black at the bottom edge where the name sits. The name's
 * band — 16px of padding plus its line box, so roughly the bottom fifth of the tile —
 * falls between the .92 and .74 stops. Against the worst realistic case, a pure white
 * photo, that puts white text on an effective #1e1c1e to #474547, which is 16.7:1 down to
 * 9.3:1. Both clear AA and AAA with room to spare, which is the point: the floor holds
 * whatever photograph is dropped in later.
 *
 * The amber is down from .4 to .28. At .4 over a photograph it read as a colour cast on
 * the image rather than as a brand accent on a drawn tile.
 */
.lp-city::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(160px 90px at 80% 15%, rgba(247, 168, 27, .28), transparent 70%),
    linear-gradient(to top,
      rgba(10, 9, 12, .92) 0%,
      rgba(10, 9, 12, .74) 20%,
      rgba(10, 9, 12, .34) 55%,
      rgba(10, 9, 12, .06) 100%);
}

/*
 * One line of text in the tile now, not two: the sub-label under each city name is gone.
 *
 * min-height and align-items: flex-end above are what make that safe, and they are the
 * reason nothing here needed resizing. The tile's height was never set by its text — the
 * min-height is a floor the one-line content is nowhere near, and flex-end pins the name to
 * the bottom padding edge whatever its height. So the tile does not shrink and the name does
 * not float up: it lands exactly where the sub-label used to sit, over the photo, which is
 * what a captioned photo tile looks like.
 *
 * The colour is now #fff, not the #d8d4de it was. That grey was chosen against a flat
 * near-black gradient, where reading a shade off white is a legible restraint. Over a
 * photograph it is contrast headroom given away for nothing: nobody perceives #d8d4de as a
 * deliberate warm grey on top of an image, they only perceive it as slightly harder to
 * read, and it costs about 3 points of ratio at the top of the scrim (9.3:1 becomes 6.5:1
 * against the worst-case white photo). White is the call.
 *
 * text-shadow backs it up for the case the scrim cannot cover: a single blown-out
 * highlight right behind a letter, which is a local failure the gradient averages away.
 * One soft dark shadow, no offset worth noticing.
 *
 * z-index: 2 on both, above the ::before scrim's 1 and the photo's 0. This used to work by
 * paint order alone — position: relative with z-index auto paints after an absolutely
 * positioned ::before — which was true but fragile, and it is not worth relying on now that
 * there are three layers in the tile instead of two.
 *
 * The other thing this pair of rules fixed still stands. `.lp-city span` is a descendant
 * selector, so it used to match the sub-label and the wrapper both, and three of its five
 * declarations existed for the sub-label. Two were inert — font-size is overridden on the
 * <b> that is the only text left, and margin-top does nothing on the sole flex item of a
 * flex-end container with free space above it. The third was a trap: the name's colour was
 * never set on the name, it was inherited off the wrapper from a rule written for the second
 * line, so a tidy-up that dropped the now-redundant wrapper <span> would have silently
 * repainted every city name. The colour is stated on the <b> that actually uses it, which is
 * also what made moving it to #fff a one-line change with nothing else to find.
 *
 * position: relative on both is load-bearing, not decoration — .lp-city::before is an
 * absolutely positioned overlay, so it paints above in-flow content. Without it the names
 * sit under the gradient wash.
 */
.lp-city b {
  position: relative;
  z-index: 2;
  font-size: 1.04rem;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.lp-city span { position: relative; z-index: 2; display: block; }
.lp-city:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-lg); }

/* ----------------------------------------------------------------- fleet */

.lp-fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .lp-fleet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-fleet { grid-template-columns: 1fr; } }

.lp-veh {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lp-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.lp-veh:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-lg); }

/*
 * The art box holds a photograph now, not a 116x62 line-art glyph centred in a cream panel.
 *
 * height went 108px to 180px for the same reason the city tile grew. 108px was the height
 * of a padded 62px glyph; three across in a 1200px wrap the card is roughly 386px wide, so
 * 108px is a 3.6:1 slot and a photo of a vehicle cropped to that is a band of bodywork with
 * the wheels and roof gone. 180px is about 2.1:1, which is a normal wide framing for a car
 * shot and keeps the whole vehicle in every one of the six.
 *
 * The cream gradient stays as the box's background rather than being deleted with the glyph.
 * These images are lazy, so there is a real moment before each one paints, and the card
 * should show the amber panel it always showed rather than a white gap. Same argument as the
 * dark gradient still under the city photos.
 *
 * display: grid / place-items: center went with the glyph: there is nothing to centre in a
 * box its child fills. Anything relying on the box being a grid container should say so.
 */
.lp-veh-art {
  height: 180px;
  background: linear-gradient(160deg, #fff3dc, #ffe6b8);
  overflow: hidden;
  border-bottom: 1px solid #f2e3c4;
}

/*
 * cover, and this section is where it is not optional: minibus.jpg is square 360x360 and
 * bus.jpg is 800x642 against roughly 3:2 for the other four. Stretched into one 2.1:1 box
 * the square mini bus would be pulled to nearly twice its width — a vehicle photo distorted
 * that far reads as a rendering fault, not as a wide crop.
 *
 * object-position stays centred for all six. Every supplied shot is a front three-quarter
 * view with the vehicle filling the middle band of the frame, so the centre crop is the
 * vehicle in all six cases; the square and the 1.25:1 sources lose sky and tarmac, which is
 * what they should lose.
 *
 * width/height: 100% overrides the intrinsic width/height attributes on the element, which
 * are there for the aspect-ratio the browser reserves before the file arrives, not for
 * layout once it has.
 */
.lp-veh-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-veh-body { padding: 16px 18px 18px; }
.lp-veh-body b { font-size: 1.02rem; display: block; }
.lp-veh-body .seats { font-size: .84rem; color: var(--muted); margin-top: 2px; display: block; }
.lp-veh-body p { margin: 10px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.lp-veh-tag {
  display: inline-block;
  margin-top: 12px;
  background: var(--lp-cream);
  border: 1px solid #f0dfb8;
  color: var(--lp-amber-dk);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- routes */

.lp-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .lp-routes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-routes { grid-template-columns: 1fr; } }

.lp-route {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--lp-shadow);
  text-decoration: none;
  color: inherit;
}
.lp-route:hover { border-color: var(--lp-amber); }
.lp-route .pin { width: 34px; height: 34px; border-radius: 10px; background: var(--lp-cream); color: var(--lp-amber-dk); display: grid; place-items: center; flex: none; }
.lp-route .pin svg { width: 17px; height: 17px; }
.lp-route b { display: block; font-size: .95rem; }
.lp-route span { font-size: .8rem; color: var(--muted); }

/* ------------------------------------------------------------------- how */

.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
@media (max-width: 820px) { .lp-steps { grid-template-columns: 1fr; } }

.lp-step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; box-shadow: var(--lp-shadow); position: relative; }

.lp-step::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  top: -16px;
  left: 22px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--lp-ink);
  color: var(--lp-amber);
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(23, 22, 26, .22);
}

.lp-step h3 { margin: 18px 0 8px; font-size: 1.04rem; }
.lp-step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.58; }

/* ------------------------------------------------------------------- faq */

.lp-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }

.lp-faq details { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: var(--lp-shadow); }
.lp-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: 12px; align-items: center; font-size: .98rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; margin-left: auto; color: var(--lp-amber-dk); font-size: 1.35rem; line-height: 1; }
.lp-faq details[open] summary::after { content: '\2013'; }
.lp-faq p { margin: 12px 0 0; color: var(--muted); line-height: 1.62; font-size: .94rem; }

/* --------------------------------------------------------------- partner */

.lp-cta {
  background: linear-gradient(135deg, #1f1d24, #17161a);
  color: #fff;
  border-radius: 18px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 28px;
  align-items: center;
}
@media (max-width: 780px) { .lp-cta { grid-template-columns: 1fr; padding: 28px; } }

.lp-cta h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -.02em; }
.lp-cta p { margin: 0; color: #b6b1bd; line-height: 1.6; }

/* ---------------------------------------------------------------- footer */

.lp-footer { background: var(--lp-ink); color: #a9a4b0; padding: 52px 0 26px; }

.lp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-footer-grid { grid-template-columns: 1fr; } }

.lp-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 15px; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-footer a { color: #a9a4b0; text-decoration: none; font-size: .92rem; }
.lp-footer a:hover { color: var(--lp-amber); }
.lp-footer p { font-size: .92rem; line-height: 1.62; margin: 0 0 14px; }

.lp-footer-base {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
}

/* Floating WhatsApp button, which is how people actually contact a cab desk. */
.lp-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
  text-decoration: none;
}
.lp-wa:hover { background: var(--wa-dark); }
.lp-wa svg { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-veh, .lp-city { transition: none; }
  .lp-card:hover, .lp-veh:hover, .lp-city:hover { transform: none; }
}

@media print { .lp-head-bar, .lp-wa { display: none; } }