/* =====================================================================
 * SITE-REDESIGN-01 (2026-10-22): the public site's layout system.
 *
 * eg-brand.css already owns the brand - the teal ramp, Fraunces and
 * Manrope, the neutrals. It is the same palette both mobile apps read,
 * and nothing here redefines any of it. This file adds the LAYOUT the
 * site was missing: how a section is shaped, how the page alternates,
 * what a card looks like, and how all of it behaves on a phone.
 *
 * THE RHYTHM IS THE IDEA. The old site was one continuous light page
 * where every section looked like the last, so nothing had a beginning
 * or an end and the eye had nowhere to rest. The page now alternates
 * full-bleed bands - deep teal, cream, white, deep teal - so each
 * section announces itself before a word is read.
 *
 * Deep teal rather than the near-black navy the reference uses. The
 * rhythm is worth borrowing; the colour is not ours to borrow, and
 * #0A4E4A is the same dark both apps and the live logo already carry.
 *
 * MOBILE IS NOT AN AFTERTHOUGHT HERE. Every value below is written
 * mobile-first and scales up with clamp(), so there is no breakpoint at
 * which the design was "done" and a phone got the leftovers.
 * ===================================================================== */

:root {
    /* ---- Section rhythm ----
     * One number decides how the whole page breathes. The reference
     * uses a flat 104px; this scales from 56px on a phone - where 104
     * is a third of the screen spent on nothing - to 104 on a desktop.
     */
    --eg-band: clamp(56px, 8vw, 104px);
    --eg-band-hero: clamp(72px, 11vw, 160px);

    /* ---- Horizontal gutter ----
     * 20px on a phone, never more than 1200px of content.
     */
    --eg-gutter: clamp(20px, 5vw, 40px);
    --eg-max: 1200px;

    /* ---- Shape ---- */
    --eg-r-card: 16px;
    --eg-r-pill: 999px;
    --eg-r-inner: 12px;

    /* ---- A single, quiet elevation ----
     * One shadow, used sparingly. Several competing depths is how a
     * page starts to look like a template.
     */
    --eg-lift: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .06);
}

/* ---------------------------------------------------------------------
 * BANDS
 *
 * A band is full-bleed colour; the container inside it holds the
 * content to a readable measure. Keeping those two jobs separate is
 * what lets a section span the window without its text doing the same.
 * ------------------------------------------------------------------ */

.eg-band {
    padding-block: var(--eg-band);
    /* The gutter lives on the band, so a coloured edge still reaches
       the screen edge while the words never do. */
    padding-inline: var(--eg-gutter);
}

.eg-band--hero { padding-block: var(--eg-band-hero); }
.eg-band--tight { padding-block: calc(var(--eg-band) * .62); }

.eg-band--cream { background: var(--eg-cream); }
.eg-band--white { background: var(--eg-surface); }

/*
 * The dark band. Deep teal, not black: it has to sit beside the cream
 * without the page looking like two different sites.
 */
.eg-band--deep {
    background: var(--eg-teal-mid);
    color: #F2F7F6;
}

.eg-band--ink {
    background: var(--eg-teal-ink);
    color: #F2F7F6;
}

/*
 * Everything inside a dark band, without asking each element to know
 * what it is sitting on.
 */
.eg-band--deep h1, .eg-band--deep h2, .eg-band--deep h3,
.eg-band--deep h4, .eg-band--deep h5,
.eg-band--ink h1, .eg-band--ink h2, .eg-band--ink h3,
.eg-band--ink h4, .eg-band--ink h5 {
    color: #FFFFFF;
}

.eg-band--deep p, .eg-band--ink p { color: rgba(242, 247, 246, .78); }
.eg-band--deep a, .eg-band--ink a { color: var(--eg-mint); }

.eg-wrap {
    width: 100%;
    max-width: var(--eg-max);
    margin-inline: auto;
}

/* A narrower measure for pages that are mostly prose. */
.eg-wrap--prose { max-width: 760px; }

/* ---------------------------------------------------------------------
 * TYPE SCALE
 *
 * Fluid, so a headline is never the desktop size shrunk into a phone.
 * The negative tracking is the house style and the thing that stops
 * Fraunces at display sizes looking like a word processor.
 * ------------------------------------------------------------------ */

.eg-display {
    font-family: var(--eg-font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

.eg-h2 {
    font-family: var(--eg-font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.12;
    letter-spacing: -.03em;
    margin: 0 0 .4em;
    text-wrap: balance;
}

.eg-h3 {
    font-family: var(--eg-font-body);
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0 0 .35em;
}

.eg-lede {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 0 1.6em;
    color: var(--eg-ink-2);
}

.eg-band--deep .eg-lede,
.eg-band--ink .eg-lede { color: rgba(242, 247, 246, .8); }

/*
 * The eyebrow. Small, spaced and uppercase - the one place letter
 * spacing goes positive, because small caps need the air.
 */
.eg-eyebrow {
    display: inline-block;
    font-family: var(--eg-font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--eg-teal);
    margin: 0 0 14px;
}

.eg-band--deep .eg-eyebrow,
.eg-band--ink .eg-eyebrow { color: var(--eg-mint); }

/* ---------------------------------------------------------------------
 * BUTTONS
 *
 * Pills, because the site and both apps already use them. 44px minimum
 * so a thumb is never the problem.
 * ------------------------------------------------------------------ */

.eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 30px;
    border-radius: var(--eg-r-pill);
    border: 1.5px solid transparent;
    font-family: var(--eg-font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.eg-btn:hover { transform: translateY(-1px); text-decoration: none; }
.eg-btn:active { transform: translateY(0); }

.eg-btn--primary {
    background: var(--eg-teal);
    color: #FFFFFF;
}
.eg-btn--primary:hover { background: var(--eg-teal-mid); color: #FFFFFF; }

/* On a dark band the primary inverts - the brightest thing wins. */
.eg-band--deep .eg-btn--primary,
.eg-band--ink .eg-btn--primary {
    background: #FFFFFF;
    color: var(--eg-teal-ink);
}
.eg-band--deep .eg-btn--primary:hover,
.eg-band--ink .eg-btn--primary:hover { background: var(--eg-mint-soft); color: var(--eg-teal-ink); }

.eg-btn--ghost {
    background: transparent;
    border-color: var(--eg-hair);
    color: var(--eg-ink);
}
.eg-btn--ghost:hover { border-color: var(--eg-teal); color: var(--eg-teal); }

.eg-band--deep .eg-btn--ghost,
.eg-band--ink .eg-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}
.eg-band--deep .eg-btn--ghost:hover,
.eg-band--ink .eg-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* WhatsApp keeps its own colour - it is a recognised signal, not ours. */
.eg-btn--whatsapp { background: #25D366; color: #FFFFFF; }
.eg-btn--whatsapp:hover { background: #1FAE54; color: #FFFFFF; }

.eg-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------------------------------------------------------------------
 * CARDS AND GRIDS
 * ------------------------------------------------------------------ */

.eg-grid {
    display: grid;
    gap: clamp(14px, 2vw, 22px);
    /*
     * auto-fit with a minimum means the column count is decided by the
     * space available rather than by a breakpoint somebody has to
     * remember to update. One column on a phone, without a media query.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.eg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.eg-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.eg-card {
    background: var(--eg-surface);
    border: 1px solid var(--eg-hair);
    border-radius: var(--eg-r-card);
    padding: clamp(20px, 2.6vw, 30px);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.eg-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--eg-lift);
    border-color: transparent;
}

/* On dark bands a card is a lighter pane rather than a white block. */
.eg-band--deep .eg-card,
.eg-band--ink .eg-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}

.eg-band--deep .eg-card:hover,
.eg-band--ink .eg-card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: none;
}

.eg-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--eg-r-inner);
    background: var(--eg-mint-soft);
    color: var(--eg-teal);
    font-size: 22px;
    margin-bottom: 17px;
}

.eg-band--deep .eg-card__icon,
.eg-band--ink .eg-card__icon {
    background: rgba(127, 217, 206, .14);
    color: var(--eg-mint);
}

/* ---------------------------------------------------------------------
 * SMALL PARTS
 * ------------------------------------------------------------------ */

/* A status pill. Borrowed shape, our palette. */
.eg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--eg-r-pill);
    background: var(--eg-mint-soft);
    color: var(--eg-teal-mid);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.eg-band--deep .eg-pill,
.eg-band--ink .eg-pill {
    background: rgba(127, 217, 206, .15);
    color: var(--eg-mint);
}

/*
 * Numbered steps. The number is the ornament, so it is allowed to be
 * large and quiet rather than small and loud.
 */
.eg-step__n {
    font-family: var(--eg-font-display);
    font-size: clamp(35px, 4vw, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--eg-mint);
    opacity: .9;
    margin-bottom: 9px;
}

.eg-band--cream .eg-step__n,
.eg-band--white .eg-step__n { color: var(--eg-teal); opacity: .28; }

/* A stat: big number, small label. */
.eg-stat__n {
    font-family: var(--eg-font-display);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--eg-teal);
}

.eg-band--deep .eg-stat__n,
.eg-band--ink .eg-stat__n { color: var(--eg-mint); }

.eg-stat__l {
    font-size: 15px;
    color: var(--eg-ink-2);
    margin-top: 6px;
}

.eg-band--deep .eg-stat__l,
.eg-band--ink .eg-stat__l { color: rgba(242, 247, 246, .72); }

/* The hairline that separates a section header from its content. */
.eg-rule {
    height: 1px;
    background: var(--eg-hair);
    border: 0;
    margin: 0;
}

.eg-band--deep .eg-rule,
.eg-band--ink .eg-rule { background: rgba(255, 255, 255, .14); }

/* Centre a section header without centring the body text under it. */
.eg-head { margin-bottom: clamp(28px, 4vw, 48px); }
.eg-head--center { text-align: center; }
.eg-head--center .eg-lede { margin-inline: auto; }

/* ---------------------------------------------------------------------
 * MEDIA
 * ------------------------------------------------------------------ */

.eg-shot {
    width: 100%;
    height: auto;
    border-radius: var(--eg-r-card);
    display: block;
}

/*
 * Nothing on this site may push the page sideways. Said once, here,
 * rather than discovered per page on a phone.
 */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
 * MOTION
 *
 * One effect, used everywhere: content rises slightly as it arrives.
 * Anything more becomes the thing people remember instead of the
 * service.
 * ------------------------------------------------------------------ */

.eg-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}

.eg-rise.is-in {
    opacity: 1;
    transform: none;
}

/*
 * Somebody who has asked their system for less movement gets none, and
 * - importantly - still gets the content. A reveal that depends on JS
 * plus motion is a blank page for them.
 */
@media (prefers-reduced-motion: reduce) {
    .eg-rise,
    .eg-rise.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .eg-btn:hover,
    .eg-card:hover { transform: none; }
}



/* =====================================================================
 * The SKIN section that used to live here is GONE.
 *
 * SITE-REDESIGN-01 skinned the ten existing templates by overriding the
 * classes they already carried - `.about-pro`, `.cta-pro`, `.counter`
 * and about forty more - with !important colour and background rules,
 * keyed off nothing but the class name.
 *
 * It made the live site unreadable. Measured on egbookings.in:
 *
 *   1.09:1  .counter            white on cream   "3", "24x7"
 *   1.01:1  stat caption        near-white on cream
 *   1:1     .cta-pro h2         white on white   "Tell us what you need"
 *
 * A dark band is not uniformly dark. Those sections hold white cards,
 * cream stat tiles, a quote panel - so "everything inside .cta-pro is
 * light text" turned the text ON those white cards white as well. A
 * class name cannot tell you what colour the ground under an element
 * is, and 5.4M px^2 of forced teal across a 11,000px page is not a
 * rhythm either.
 *
 * Removing this restores all ten pages to the design they shipped
 * with. Two things from that commit are deliberately KEPT, because
 * neither touches layout or contrast:
 *
 *   - the indigo -> teal value swap (55 places, the purchased theme's
 *     #667eea/#764ba2 - including the hero overlay that read violet)
 *   - the band system above, which only /drive's markup uses
 *
 * A redesign of the ten templates means editing the templates, with
 * each page looked at. It does not mean guessing from selectors.
 * ===================================================================== */

/* ---------------------------------------------------------------------
   SITE-TYPE-SCALE-03: user.layout.app's own footer bands.

   /drive's content was rebuilt on the band system, but the layout
   around it still carries the purchased theme's footer, whose two
   headings measured 35px/500 and 30px/600 - larger than the page's own
   section headings and at weights nothing else here uses. Brought onto
   the same 36px/700 the rest of the site now runs.

   Scoped to those two blocks so the layout's other markup is untouched.
   ------------------------------------------------------------------ */
.app-dwon h2,
.footer-social h2,
.sup-txt h2 {
    font-family: var(--eg-font-display);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

/* The same layout sets body copy at weight 300. Manrope's 300 is a
   genuine light cut, not synthesised, but it is thin enough on a white
   ground to cost legibility at body size - and nothing else on the
   site uses it. 400 to match every other page. */
.user-layout-body p,
.app-dwon p,
.footer-social p,
.sup-txt p,
.sup-txt h3 {
    font-weight: 400;
}

.sup-txt h3,
.sup-txt h3 a {
    font-size: 1.3125rem;
    letter-spacing: -.02em;
}

/* ---------------------------------------------------------------------
   The header buttons on user.layout.app are the purchased theme's red,
   #d51f2c - "Signup to Ride" outlined in it and "Signup to Drive"
   filled with it. Nothing in this brand is red, and these sit directly
   above a teal hero.

   eg-system.css loads after asset/css/style.css, so plain selectors of
   equal specificity win on order - except the padding and font-size,
   which the theme marks !important and which are fine as they are.
   ------------------------------------------------------------------ */
.menu-btn {
    background-color: var(--eg-teal, #0F6E68);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 110, 104, .28);
}

.menu-btn:hover,
.menu-btn:focus {
    background-color: var(--eg-teal-mid, #0A4E4A);
    color: #fff;
}

.btn-outline {
    border: 1px solid var(--eg-teal, #0F6E68);
    color: var(--eg-teal, #0F6E68);
    box-shadow: none;
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--eg-teal, #0F6E68);
    color: #fff;
}