/* gf-chrome.css — the header and footer every public page shares.
 *
 * Before this, the site had four different chrome systems: the homepage nav,
 * a separate one on /market, a third on /privacy, and none at all on /send,
 * /track, /bulk, /ecommerce, /account or /rider. Pages felt like different
 * websites because they were.
 *
 * Self-contained on purpose — it depends on no other stylesheet, so a page
 * with its own inline styles can adopt it without inheriting anything else.
 * All names are prefixed gfh- / gff- so nothing here can collide with the
 * styles a page already has.
 *
 * The mobile drawer is a hidden checkbox, not JavaScript. The nav is real
 * markup that works with scripting off and is visible to search engines.
 *
 * Two treatments, same structure: the default light one for the marketing and
 * shopping pages, and [data-gf-chrome="dark"] for the account and rider
 * portals, which are working tools rather than pages you read.
 *
 * There is deliberately no rule here giving the body room for the nav. It was
 * tried: `body { padding-top: 68px }` looked like the tidy way to stop pages
 * sliding under a position:fixed bar, and it broke the nav on every page that
 * has one.
 *
 * The nav has no background of its own. Its links are white, so it only works
 * over something dark - which means the page's header band has to reach the top
 * of the document and sit behind it. Padding the body pushed every hero down to
 * y=68, the top 68px behind the nav became the white page background, and the
 * white nav text disappeared. Each hero now carries its own clearance with
 * calc(var(--gf-nav-h) + var(--gf-hero-air)) instead, which keeps the dark
 * backdrop the design depends on.
 */

.gfh, .gff {
  --gfc-blue:var(--gf-blue); --gfc-blue-dark:var(--gf-blue-dark); --gfc-blue-dim:var(--gf-blue-dim);
  --gfc-ink:var(--gf-text); --gfc-ink-2:var(--gf-text-2); --gfc-ink-3:var(--gf-text-3);
  --gfc-bg:var(--gf-white); --gfc-surface:var(--gf-surface); --gfc-line:var(--gf-border);
  --gfc-foot-bg:#0B1524; --gfc-foot-ink:#E2E8F0; --gfc-foot-ink-2:#94A3B8; --gfc-foot-line:#1E293B;
  font-family:var(--gf-font);
  box-sizing:border-box;
}
.gfh *, .gff *, .gfh *::before, .gff *::before { box-sizing:border-box; }

[data-gf-chrome="dark"] .gfh {
  --gfc-ink:var(--gf-d-text); --gfc-ink-2:var(--gf-d-text-2); --gfc-ink-3:var(--gf-d-text-3);
  --gfc-bg:var(--gf-d-bg); --gfc-surface:var(--gf-d-surface); --gfc-line:var(--gf-d-border);
  --gfc-blue:var(--gf-blue); --gfc-blue-dark:var(--gf-blue-dark); --gfc-blue-dim:var(--gf-blue-dim);
}

/* ── Header ─────────────────────────────────────────────────────────── */
.gfh {
  position:sticky; top:0; z-index:50;
  background:var(--gfc-bg); border-bottom:1px solid var(--gfc-line);
}
.gfh__in {
  max-width:1180px; margin:0 auto; padding:0 20px;
  height:62px; display:flex; align-items:center; gap:10px;
}
.gfh__logo {
  display:flex; align-items:center; gap:9px;
  font-size:17px; font-weight:700; letter-spacing:-.35px;
  color:var(--gfc-ink); text-decoration:none; flex-shrink:0;
}
.gfh__logo img { width:27px; height:27px; object-fit:contain; }

.gfh__nav { display:flex; align-items:center; gap:2px; margin-left:18px; }
.gfh__nav a {
  padding:8px 12px; border-radius:8px;
  font-size:14.5px; font-weight:500; color:var(--gfc-ink-2); text-decoration:none;
  white-space:nowrap; transition:color .15s, background .15s;
}
.gfh__nav a:hover { color:var(--gfc-blue); background:var(--gfc-blue-dim); }
.gfh__nav a[aria-current="page"] { color:var(--gfc-blue); font-weight:600; }

.gfh__act { margin-left:auto; display:flex; align-items:center; gap:8px; }
.gfh__signin {
  padding:8px 12px; border-radius:8px;
  font-size:14.5px; font-weight:600; color:var(--gfc-ink-2); text-decoration:none; white-space:nowrap;
}
.gfh__signin:hover { color:var(--gfc-blue); background:var(--gfc-blue-dim); }
.gfh__cta {
  display:inline-flex; align-items:center; height:40px; padding:0 17px;
  border-radius:9px; background:var(--gfc-blue); color:#fff;
  font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .15s;
}
.gfh__cta:hover { background:var(--gfc-blue-dark); color:#fff; }

/* Mobile drawer, opened by a checkbox so the nav needs no script */
.gfh__toggle { position:absolute; opacity:0; pointer-events:none; }
.gfh__burger {
  display:none; margin-left:auto; width:42px; height:42px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:1px solid var(--gfc-line); border-radius:9px; background:var(--gfc-surface);
  cursor:pointer; flex-shrink:0;
}
.gfh__burger span { display:block; width:17px; height:2px; border-radius:2px; background:var(--gfc-ink); }
.gfh__drawer { display:none; }

  /* The marketing hero is not part of the job. "Ship Anywhere in Nigeria" is
     an answer to a question a first-time visitor asked, and /send is reached
     from the dashboard's own Send tab, so the hero was the first thing
     between a customer and the form they came to fill in. /bulk, /quote,
     /request-a-quote and /track each have their own version of the same thing.
     Signed out, on every one of them, it stays exactly where it was: these
     are public pages too, and a page needs a heading to be a page.

     Selected by [data-gf-hero] and not by class name, because /track has three
     .u-hero elements and only the first is the page's: the other two are
     inside #loading and #trackingResult. A class selector would have caught
     the hero wrapped around the tracking result and blanked the answer.

     Collapsed rather than removed, which is the part that matters, and the
     reason this is the rule's whole job. The box is the only thing holding
     the first content clear of the header, because the header is
     position:fixed and contributes no height of its own. Removing the box
     took that clearance with it and put the first field underneath the bar,
     and paying it back on .page-body only fixed /send - /quote,
     /request-a-quote and /track have no such wrapper and follow the hero with
     something else entirely. So the box stays, keeps its clearance, and only
     its contents go. session-nav.js empties it as it is parsed.

     The clearance is the header and nothing more. It used to add 32px of its
     own, because it was standing in for a bar with no background of its own
     that the hero had to reach the top of the document to sit behind. The
     header has a background now, so the hero is not behind anything, and the
     air after it belongs to whatever follows: .page-body on /send and /bulk,
     the section after .qc-hero on /quote, .section--top on /rentals, .u-page
     on /track. Adding it here as well meant every one of those pages opened
     with twice the space it was designed with.

   This used to live inside the max-width:900px block, so at desktop widths
   there was no clearance at all - the box kept its marketing padding until
   the JavaScript removed the whole thing a moment later, and the content
   below it moved up under the bar. It is not width-dependent now, so it is
   not inside a width query. */
html.gfd [data-gf-hero] {
  background: none;
  padding-top: var(--gf-nav-h, 62px);
  padding-bottom: 0;
}
html.gfd [data-gf-hero]::before { content: none; }
html.gfd [data-gf-hero] > * { display: none; }

@media (max-width:900px) {
  .gfh__nav, .gfh__act { display:none; }
  .gfh__burger { display:flex; }
  .gfh__drawer {
    display:block; position:fixed; inset:62px 0 auto 0;
    background:var(--gfc-bg); border-bottom:1px solid var(--gfc-line);
    padding:10px 20px 20px; max-height:calc(100vh - 62px); overflow-y:auto;
    /* Clears its own height plus the 62px it sits below the top of the
       viewport. It was translateY(-120%), where the spare 20% had to cover
       that 62px offset, so it only worked while the drawer was taller than
       about 310px. Cutting the drawer to three items left 24px of it, the
       bottom of the Sign out button, poking above the top of the page. A
       percentage transform cannot clear a fixed offset; this can. */
    transform:translateY(calc(-100% - 64px)); transition:transform .22s ease; z-index:49;
  }
  .gfh__toggle:checked ~ .gfh__drawer { transform:none; }
  /* The signed-in drawer ends in a Sign out <button> rather than a link,
     because signing out is an action and does not navigate. It has to be
     styled as a row of the drawer rather than left as the browser's default
     button, so it takes the same rules as the links: same height, same type
     size, same hairline between rows. The explicit zeroing of the other
     three borders is what stops the default button border box appearing
     around the hairlines. */
  .gfh__drawer a,
  .gfh__drawer button {
    display:flex; align-items:center; min-height:48px; padding:0 4px;
    font-size:16px; font-weight:500; color:var(--gfc-ink); text-decoration:none;
    border:0; border-bottom:1px solid var(--gfc-line);
    background:none; width:100%; text-align:left; cursor:pointer;
    font-family:inherit;
  }
  .gfh__drawer a:last-of-type,
  .gfh__drawer button:last-of-type { border-bottom:0; }
  .gfh__drawer a:focus-visible,
  .gfh__drawer button:focus-visible { outline:2px solid var(--gfc-blue); outline-offset:-3px; }
  .gfh__drawer .gfh__cta { width:100%; justify-content:center; height:48px; margin-top:14px; }
}

/* == Dashboard navigation ===========================================
 *
 * Added by session-nav.js on the signed-in pages, and only there. The public
 * site keeps the header nav it has always had.
 *
 * html.gfd is set before paint so the body padding is in place on the first
 * frame; the rail and the bar themselves are inserted once the body exists.
 * ================================================================== */

.gfd-side, .gfd-tabs {
  --gfc-blue:var(--gf-blue); --gfc-blue-dim:var(--gf-blue-dim);
  --gfc-ink:var(--gf-text); --gfc-ink-2:var(--gf-text-2); --gfc-ink-3:var(--gf-text-3);
  --gfc-bg:var(--gf-white); --gfc-surface:var(--gf-surface); --gfc-line:var(--gf-border);
  font-family:var(--gf-font);
  box-sizing:border-box;
}
.gfd-side *, .gfd-tabs *, .gfd-side *::before, .gfd-tabs *::before { box-sizing:border-box; }

/* Line art on currentColor, so a tab going blue takes its icon with it. */
.gfd-ic {
  width:21px; height:21px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
}

/* Neither exists until its own breakpoint claims it. */
.gfd-side, .gfd-tabs { display:none; }

/* -- Desktop: the rail ---------------------------------------------- */
@media (min-width:901px) {
  html.gfd body { padding-left:232px; }

  /* The body's 232px gutter moves the page content out from under the rail,
     and it moves nothing else. The header is position:fixed, and a fixed
     element is positioned against the viewport rather than against its
     parent's padding, so it needs the same 232px of its own or it starts at
     x=0 and is drawn over the rail's own logo - the header's z-index is 900
     against the rail's 52, so it is the header that wins.

     It has to live inside this breakpoint: the rail does not exist below
     901px and neither does the gutter.

     /account's own .gfh is position:sticky and in flow inside that gutter,
     so it is already clear of the rail and this rule does not touch it. The
     mounted header is fixed, because it replaces a fixed bar and the pages it
     mounts on already leave room for one - see the shared-shell section. */
  html.gfd .gfh--injected { left:232px; }

  .gfd-side {
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; width:232px; z-index:52;
    background:var(--gfc-bg); border-right:1px solid var(--gfc-line);
    padding-bottom:16px; overflow-y:auto;
  }

  /* The rail owns the brand at 900px and up, so the header hides its own
     logo rather than showing a second one two centimetres to the right. */
  html.gfd .gfh__logo { display:none; }

  /* And the six marketing links go with it. A signed-in customer clicking
     Freight lands back on /account, because session-nav.js hands every
     marketing page over to the dashboard - so these were not shortcuts, they
     were six dead ends across the top of the customer's own order history,
     one of which duplicated the Car hire tab in the rail beside it.

     The header keeps the notification bell and the customer's name, and
     .gfh__act carries margin-left:auto, so those two sit where the actions
     already were and nothing shifts across the 62px the links used to fill. */
  html.gfd .gfh__nav { display:none; }

  .gfd-side__logo {
    display:flex; align-items:center; gap:9px; flex-shrink:0;
    height:62px; padding:0 20px; border-bottom:1px solid var(--gfc-line);
    font-size:17px; font-weight:700; letter-spacing:-.35px;
    color:var(--gfc-ink); text-decoration:none;
  }
  .gfd-side__logo img { width:27px; height:27px; object-fit:contain; }

  .gfd-side__nav { display:flex; flex-direction:column; gap:2px; padding:14px 12px 0; }

  /* Group headings. They answer "what is this list" - what I came for, what
     services I use, my account, help - which a flat list of six could not,
     because Car Hire is a service, Help is a destination and Deliveries is
     neither, and the reader is left guessing which is which. */
  .gfd-grp { margin-bottom:14px; }
  .gfd-grp__h {
    margin:0 0 6px; padding:0 8px;
    font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--gfc-ink-3);
  }
  /* The first heading sits directly under the logo, where the padding above
     it would read as a gap in the brand block rather than a section break. */
  .gfd-grp:first-child { margin-top:0; }
  .gfd-grp:first-child .gfd-grp__h { padding-top:0; }
  .gfd-side__nav a {
    display:flex; align-items:center; gap:11px;
    padding:11px 12px; border-radius:var(--gf-r-sm);
    font-size:var(--fs-base); font-weight:500; line-height:1.2;
    color:var(--gfc-ink-2); text-decoration:none;
    transition:background .15s, color .15s;
  }
  .gfd-side__nav a:hover { background:var(--gfc-surface); color:var(--gfc-ink); }
  .gfd-side__nav a[aria-current="page"] {
    background:var(--gfc-blue-dim); color:var(--gfc-blue); font-weight:600;
  }
  .gfd-side__nav a:focus-visible { outline:2px solid var(--gfc-blue); outline-offset:2px; }

  /* Secondary, and visually quieter than the five destinations above it. */
  .gfd-side__foot { margin-top:auto; padding:14px 12px 0; }
  .gfd-side__foot a, .gfd-side__foot button {
    display:flex; align-items:center; width:100%; gap:11px;
    padding:10px 12px; border:0; background:none; border-radius:var(--gf-r-sm);
    font-family:inherit; font-size:var(--fs-sm); font-weight:500; text-align:left;
    color:var(--gfc-ink-3); text-decoration:none; cursor:pointer;
  }
  .gfd-side__foot a:hover, .gfd-side__foot button:hover {
    background:var(--gfc-surface); color:var(--gfc-ink);
  }
}

/* -- Phone: the tab bar --------------------------------------------- */
@media (max-width:900px) {
  /* Enough room that the last delivery in a list is not sitting under the
     bar, plus whatever the phone reserves for its own home indicator. */
  html.gfd body { padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)); }

  .gfd-tabs {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    min-height:62px; padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--gfc-bg); border-top:1px solid var(--gfc-line);
  }
  .gfd-tabs a {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 2px 7px;
    color:var(--gfc-ink-3); text-decoration:none;
    font-size:var(--fs-xs); font-weight:600; letter-spacing:-.1px;
    -webkit-tap-highlight-color:transparent;
  }
  .gfd-tabs a span {
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .gfd-tabs a[aria-current="page"] { color:var(--gfc-blue); }
  .gfd-tabs a:focus-visible { outline:2px solid var(--gfc-blue); outline-offset:-3px; }
  .gfd-tabs .gfd-ic { width:22px; height:22px; }

  /* Six destinations leave about 53px a tab on a 320px screen, which is
     narrower than the word "Deliveries" at 11px. The bar tightens instead of
     truncating, and the icons carry the meaning at this size anyway. */
  @media (max-width:380px) {
    .gfd-tabs a { font-size:9.5px; letter-spacing:-.2px; padding:8px 1px 7px; gap:2px; }
    .gfd-tabs .gfd-ic { width:20px; height:20px; }
  }

  /* The header below 900px is a logo and a burger. On the dashboard that is
     dead space, so the customer's name comes back; signing out stays in the
     drawer, where a destructive action is harder to hit by accident. */
  html.gfd .gfh__act { display:flex; }
  html.gfd .gfh__act .gfh__cta { display:none; }
  html.gfd .gfh__signin { font-size:var(--fs-sm); padding:6px 10px; }

  /* The marketing footer, from the first frame.
     *
     * session-nav.js takes it off as it is parsed - it is the last thing in the
     * document, so the observer in the head catches it the moment it arrives -
     * but that is a microtask, and this is the belt to that pair of braces. The
     * footer is the one node whose paint is unmistakable: a signed-in customer
     * would otherwise see four columns of sales links and a registered-entity
     * line arrive under their own order history.
     *
     * Signed out, on every page, the whole footer stays exactly as it is. It is
     * carrying the address, the legal links and the navigation for people who
     * have not signed in and for the search engines, and nothing above this
     * line applies to them. The address does not go with it: it lives in the
     * Help pane on /account instead, beside the phone number that was already
     * there, because that is where somebody on this page would look for it. */
  html.gfd .gff { display:none; }

  /* The floating WhatsApp bubble lives at bottom:16px on z-index 60, which
     is directly on top of the bar. It moves up by the bar's height. */
  html.gfd .gff__wa   { bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  html.gfd .gff__chat { bottom:calc(144px + env(safe-area-inset-bottom, 0px)); }
}

/* == The header the seven dashboard tools wear ========================
 *
 * /account has its own .gfh in its markup. The other seven pages the
 * dashboard opens - /send, /quote, /bulk, /request-a-quote, /track,
 * /rentals and /rate - had the public marketing nav instead, and
 * session-nav.js used to rewrite its insides rather than replace it: the
 * links emptied, the sign-in chip renamed, the "Send a package" button
 * overwritten with a Sign out, the nav itself left in place. A rail was
 * then injected down the left of a marketing page.
 *
 * It is now removed, and this is what stands in its place. One shell, out
 * of one stylesheet, on all eight pages - which is the whole point, and
 * the reason there is so little here: the mounted header uses the .gfh
 * rules at the top of this file unchanged, so almost nothing new is
 * needed to style it.
 *
 * The two things that are new are the two things that cannot be inherited.
 *
 * The height. --gf-nav-h is documented in tokens.css as the one number
 * that must equal the bar, and five of these pages read it to work out how
 * much room to leave for the bar: /send and /bulk through [data-gf-hero],
 * /quote through .qc-hero, /rentals through .section--top, /track through
 * .u-page. /account's header is 62px, so this is 62px, and overriding the
 * token rather than re-declaring a number here moves the header and every
 * page that clears it together. Nothing hard-codes 68px, so nothing is
 * left behind still claiming a bar that is 62px tall.
 *
 * The position. /account's .gfh is position:sticky and in flow, and the
 * body gives it nothing: the pages it belongs to have no [data-gf-hero] and
 * nothing else to clear it either. The mounted header replaces a bar that
 * was position:fixed, and the pages it lands on already leave room for a
 * fixed bar, so it is fixed too. That is what keeps the vertical geometry
 * of those pages exactly as it was - the same 62px of clearance from the
 * same token - instead of stacking an in-flow header on top of a clearance
 * that was counting a bar which is no longer there.
 *
 * The rail owns the brand above 901px, so the mounted header hides its own
 * logo there, by the same rule that hides /account's. Below 901px there is
 * no rail and the header shows it, which is the header doing the job a
 * phone needs it to do.
 *
 * One breakpoint, 900px, which is the one the rail and the tab bar already
 * agree on. The public nav used to switch at 768px, so from 769 to 900 a
 * signed-in customer had the marketing bar with its full desktop actions,
 * no rail, and the application tab bar along the bottom - a band of widths
 * belonging to neither shell. There is no media query here at all, because
 * the .gfh rules above already break at 900px and the mounted header is
 * .gfh. That is the other reason this section is so short.
 * ================================================================== */

html.gfd { --gf-nav-h: 62px; }

html.gfd .gfh--injected { position:fixed; top:0; left:0; right:0; z-index:900; }

@media (prefers-reduced-motion:reduce) {
  .gfd-side__nav a { transition:none; }
}

/* == Product tour (assets/js/tour.js) ================================
 * A dimmed page with a hole cut around one thing at a time.
 *
 * The hole is not a mask. .gft__spot is a transparent box with a box-shadow
 * spread of 9999px, so the shadow paints everything outside it dark while
 * the box stays clear. One element, and it animates between targets, which
 * a four-panel overlay cannot do.
 * ================================================================== */

.gft {
  position: fixed; inset: 0; z-index: 9000;
  opacity: 0; transition: opacity .18s ease;
  font-family: var(--gf-font);
}
.gft--in { opacity: 1; }

.gft__spot {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 14, 26, .72);
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1),
              opacity .2s ease;
}
/* A step with no target dims the whole screen and centres the card. */
.gft--mid .gft__spot { box-shadow: 0 0 0 9999px rgba(8, 14, 26, .72); inset: 50% 50% 50% 50%; }

.gft__card {
  position: fixed; width: 330px; max-width: calc(100vw - 28px);
  background: var(--gf-white); color: var(--gf-text);
  border-radius: 16px; padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1);
}
.gft--mid .gft__card {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: none;
}

.gft__h { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.gft__p { font-size: 14.5px; line-height: 1.6; color: var(--gf-text-2); }

.gft__skip {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gf-text-3);
}
.gft__skip:hover { color: var(--gf-text); }

.gft__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.gft__dots { display: flex; gap: 5px; }
.gft__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gf-border-2); transition: background .2s, width .2s;
}
.gft__dots i.on { width: 16px; border-radius: 3px; background: var(--gf-blue); }

.gft__acts { display: flex; gap: 8px; }
.gft__back, .gft__next {
  border-radius: 9px; padding: 9px 16px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent;
}
.gft__back { background: none; border-color: var(--gf-border); color: var(--gf-text-2); }
.gft__back:hover { border-color: var(--gf-border-2); color: var(--gf-text); }
.gft__next { background: var(--gf-blue); color: var(--gf-white); }
.gft__next:hover { background: var(--gf-blue-dark); }
.gft__skip:focus-visible, .gft__back:focus-visible, .gft__next:focus-visible {
  outline: 2px solid var(--gf-blue); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gft, .gft__spot, .gft__card, .gft__dots i { transition: none; }
}

.gfh__logo:focus-visible, .gfh__nav a:focus-visible, .gfh__signin:focus-visible,
.gfh__cta:focus-visible, .gfh__burger:focus-visible, .gfh__drawer a:focus-visible,
.gff a:focus-visible {
  outline:2px solid var(--gfc-blue); outline-offset:2px; border-radius:6px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.gff { background:var(--gfc-foot-bg); color:var(--gfc-foot-ink-2); margin-top:64px; }
.gff__in { max-width:1180px; margin:0 auto; padding:52px 20px 26px; }
.gff__grid {
  display:grid; gap:34px;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
}
.gff__logo {
  display:flex; align-items:center; gap:9px;
  font-size:17px; font-weight:700; color:var(--gfc-foot-ink); letter-spacing:-.35px;
  text-decoration:none; margin-bottom:12px;
}
.gff__logo img { width:27px; height:27px; object-fit:contain; }
.gff__tag { font-size:14px; line-height:1.65; max-width:34ch; margin:0 0 16px; }
.gff__h {
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gfc-foot-ink); margin-bottom:13px;
}
.gff__links { display:flex; flex-direction:column; gap:9px; }
.gff__links a { font-size:14px; color:var(--gfc-foot-ink-2); text-decoration:none; }
.gff__links a:hover { color:#fff; }
/* The coverage promise, under the tagline. Small and factual: it answers
   "do you even go there" before anybody has to ask it. */
.gff__coverage {
  font-size:13px; line-height:1.6; color:var(--gfc-foot-ink);
  background:rgba(255,255,255,.06); border-radius:8px; padding:10px 13px; max-width:34ch;
}

/* Registered entity, address and hours. A corporate buyer checks for these
   before committing, so they get their own row rather than being buried in a
   link column. Rendered by scripts/chrome.js only when the values are real. */
.gff__legal {
  margin-top:36px; padding-top:20px; border-top:1px solid var(--gfc-foot-line);
  display:flex; flex-wrap:wrap; gap:8px 26px; font-size:13px; line-height:1.6;
}
.gff__legal strong { color:var(--gfc-foot-ink); font-weight:600; }
.gff__legal + .gff__bottom { margin-top:20px; border-top:0; padding-top:0; }

/* Sticky WhatsApp. Bottom-right on desktop, and lifted clear of the thumb bar
   on phones — where nearly all of this traffic is. */
.gff__wa {
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#0B2E17; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .15s, box-shadow .15s;
}
.gff__wa { border:0; cursor:pointer; padding:0; }
.gff__wa:hover { transform:scale(1.06); box-shadow:0 10px 28px rgba(0,0,0,.28); }
.gff__wa.is-open { transform:scale(.94); }

/* The composer. A small chat card rather than a jump straight into WhatsApp:
   people who land in a blank thread send "hi" and wait, because composing the
   whole problem from nothing on a phone keyboard is work. Written here, once,
   for all twelve pages. */
.gff__chat {
  position:fixed; right:16px; bottom:82px; z-index:61;
  width:min(340px, calc(100vw - 32px));
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  font-family:var(--gf-font);
  animation:gffChatIn .16s ease-out;
}
@keyframes gffChatIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@supports (padding:env(safe-area-inset-bottom)) {
  .gff__chat { bottom:calc(82px + env(safe-area-inset-bottom)); }
}
.gff__chat-head {
  display:flex; align-items:center; gap:10px;
  background:#075E54; color:#fff; padding:13px 15px;
}
.gff__chat-dot { width:9px; height:9px; border-radius:50%; background:#25D366; flex-shrink:0; }
.gff__chat-head b { display:block; font-size:14.5px; }
.gff__chat-head small { display:block; font-size:11.5px; opacity:.75; }
.gff__chat-x {
  margin-left:auto; background:none; border:0; color:#fff; font-size:22px;
  line-height:1; cursor:pointer; opacity:.8; padding:0 2px;
}
.gff__chat-x:hover { opacity:1; }
.gff__chat-body { padding:14px 15px 15px; background:#ECE5DD; }
.gff__chat-msg {
  background:#fff; border-radius:0 10px 10px 10px; padding:10px 13px;
  font-size:14px; line-height:1.5; color:#111; margin:0 0 12px;
  box-shadow:0 1px 1px rgba(0,0,0,.08); max-width:88%;
}
.gff__chat-body textarea {
  width:100%; border:1px solid #d4cfc7; border-radius:10px; padding:11px 13px;
  font:16px/1.45 var(--gf-font); color:#111; background:#fff;
  resize:vertical; min-height:74px; outline:none;
}
.gff__chat-body textarea:focus { border-color:#25D366; box-shadow:0 0 0 3px rgba(37,211,102,.18); }
.gff__chat-send {
  width:100%; min-height:46px; margin-top:10px; border:0; border-radius:10px;
  background:#25D366; color:#0B2E17; font:600 15px var(--gf-font); cursor:pointer;
}
.gff__chat-send:hover { background:#1FBB59; }
.gff__chat-note { font-size:11.5px; color:#5a5a5a; text-align:center; margin:9px 0 0; }

/* The guided options. Tapping an answer is faster than typing a question, and
   most of what people ask has a fixed answer the site already knows. */
.gff__chat-body { max-height:min(62vh, 460px); overflow-y:auto; }
.gff__chat-opts { display:flex; flex-direction:column; gap:7px; }
.gff__chat-opt {
  text-align:left; background:#fff; border:1px solid #d4cfc7; border-radius:10px;
  padding:11px 13px; font:15px/1.4 var(--gf-font); color:#111; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.gff__chat-opt:hover { border-color:#25D366; background:#F4FBF6; }
.gff__chat-alt {
  display:block; width:100%; margin-top:8px; background:none; border:0;
  font:13.5px var(--gf-font); color:#075E54; text-decoration:underline;
  cursor:pointer; padding:6px 0;
}
.gff__chat-back {
  background:none; border:0; color:#fff; font-size:19px; line-height:1;
  cursor:pointer; opacity:.85; padding:0 4px; margin-left:auto;
}
.gff__chat-back:hover { opacity:1; }
.gff__chat-back + .gff__chat-x { margin-left:6px; }
a.gff__chat-send { display:block; text-align:center; text-decoration:none; line-height:46px; }
@media print { .gff__chat { display:none; } }
.gff__wa:active { transform:scale(.97); }
@supports (padding:env(safe-area-inset-bottom)) {
  .gff__wa { bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media print { .gff__wa { display:none; } }

.gff__bottom {
  margin-top:38px; padding-top:20px; border-top:1px solid var(--gfc-foot-line);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; font-size:13px;
}
.gff__bottom nav { display:flex; gap:20px; }
.gff__bottom a { color:var(--gfc-foot-ink-2); text-decoration:none; }
.gff__bottom a:hover { color:#fff; }
.gff__flag { margin-left:auto; }

@media (max-width:820px) { .gff__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) {
  .gff__grid { grid-template-columns:1fr; gap:28px; }
  .gff__flag { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { .gfh__drawer { transition:none; } }