/* ==========================================================================
   Lechon Ventures — lechonventures.com

   The palette, the type and the wordmark are lifted from the company profile
   rather than reinvented, so the website and the document a client is handed
   are recognisably the same company. Orange #F15A25, charcoal #241E1B and
   cream #F7F3F0 are the profile's own values, sampled from the file.

   No framework and no build step: one stylesheet, one script, plain HTML. The
   site has to be uploaded to shared hosting by hand and edited later by
   somebody who is not holding this conversation.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
    --ink:        #241E1B;
    --ink-2:      #2E2723;
    --ink-3:      #3A322D;
    --orange:     #F15A25;
    --orange-lo:  #FF8551;
    --orange-dim: rgba(241, 90, 37, .14);
    --cream:      #F7F3F0;
    --cream-2:    #EDE6E1;
    --line:       #DAD1CB;
    --grey:       #4D4D4D;
    --grey-2:     #7C736D;

    --display: "Archivo Black", "Arial Black", Impact, sans-serif;
    --body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono:    "JetBrains Mono", Consolas, ui-monospace, monospace;

    /* One easing everywhere. Motion that all moves the same way reads as a
       single system rather than as a pile of separate effects. */
    --ease: cubic-bezier(.22, .68, .16, 1);
    --shell: min(1240px, 92vw);
    --nav-h: 84px;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin: 0;
}

p { margin: 0; }

::selection { background: var(--orange); color: #fff; }

/* Focus that is visible without being ugly. Never removed: this is a public
   site and somebody will navigate it from a keyboard. */
:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- Shared pieces ------------------------------------------------------ */

.shell { width: var(--shell); margin-inline: auto; }

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 20px;
}

.eyebrow--muted { color: var(--grey-2); }

.rule {
    width: 84px;
    height: 5px;
    background: var(--orange);
    border: 0;
    margin: 26px 0 0;
}

.lede {
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--grey-2);
    max-width: 54ch;
}

section { position: relative; }

.pad { padding: clamp(80px, 10vw, 148px) 0; }

.on-cream { background: var(--cream); color: var(--ink); }
.on-cream .lede { color: var(--grey); }
.on-cream h2 { color: var(--ink); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
    --btn-bg: var(--orange);
    --btn-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 30px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 0;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

/* The fill wipes up from the floor of the button rather than fading, which
   matches the way the section reveals move. */
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .5s var(--ease);
}

.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(241, 90, 37, .28); }
.btn:hover::after { transform: translateY(0); }

.btn__arrow { transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(247, 243, 240, .3); }
.btn--ghost::after { background: var(--cream); }
.btn--ghost:hover { --btn-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cream); }

.on-cream .btn--ghost { --btn-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.on-cream .btn--ghost::after { background: var(--ink); }
.on-cream .btn--ghost:hover { --btn-fg: var(--cream); }

/* --- Navigation --------------------------------------------------------- */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: height .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}

.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(36, 30, 27, .92);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity .45s var(--ease);
}

.nav.is-stuck { height: 68px; }
.nav.is-stuck::before { opacity: 1; }

.nav__inner {
    position: relative;
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav__logo img { height: 34px; width: auto; transition: height .45s var(--ease); }
.nav.is-stuck .nav__logo img { height: 28px; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    position: relative;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(247, 243, 240, .74);
    padding: 6px 0;
    transition: color .35s var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease);
}

.nav__link:hover { color: var(--cream); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--cream); }

.nav__cta { padding: 13px 22px; }

/* Burger: three lines that become a cross, no icon font needed. */
.burger {
    display: none;
    width: 46px;
    height: 46px;
    background: none;
    border: 0;
    padding: 0;
    position: relative;
}

.burger span {
    position: absolute;
    left: 11px;
    width: 24px;
    height: 2px;
    background: var(--cream);
    transition: transform .45s var(--ease), opacity .3s var(--ease);
}

.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 29px; }

.is-menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8vw;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .7s var(--ease);
    visibility: hidden;
}

.is-menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }

.menu a {
    display: block;
    font-family: var(--display);
    font-size: clamp(34px, 8vw, 62px);
    text-transform: uppercase;
    line-height: 1.12;
    padding: 4px 0;
    color: var(--cream);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}

.is-menu-open .menu a { opacity: 1; transform: none; }
.menu a:hover { color: var(--orange); }
.menu__foot { margin-top: 44px; font-family: var(--mono); font-size: 13px; color: var(--grey-2); }
.menu__foot a { display: inline; font-family: inherit; font-size: inherit; opacity: 1; transform: none; color: var(--orange); }

/* --- Hero --------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: 0;
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* The photographs are phone snaps in mixed light. Duotoning them into the
   brand colours turns that from a flaw into an art direction, and keeps the
   page from looking like a folder of pictures. */
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    filter: grayscale(1) contrast(1.16) brightness(.52);
    transform: scale(1.12);
    will-change: transform;
}

.hero__wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 78% 18%, rgba(241, 90, 37, .34), transparent 58%),
        linear-gradient(180deg, rgba(36, 30, 27, .82) 0%, rgba(36, 30, 27, .72) 42%, rgba(36, 30, 27, .97) 92%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: var(--shell);
    margin-inline: auto;
    padding-bottom: clamp(64px, 9vw, 132px);
}

.hero h1 {
    font-size: clamp(46px, 9.2vw, 132px);
    letter-spacing: -.025em;
    margin: 0;
}

/* Each line is a window; the words rise into it. Overflow hidden on the mask
   is what makes it read as a reveal rather than a fade. */
.mask { display: block; overflow: hidden; }

.mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.05s var(--ease);
}

.is-ready .mask > span { transform: translateY(0); }

.mask:nth-of-type(2) > span { transition-delay: .1s; }
.mask:nth-of-type(3) > span { transition-delay: .2s; }

.hero__accent { color: var(--orange); }

.hero__sub {
    max-width: 46ch;
    margin-top: 30px;
    color: rgba(247, 243, 240, .8);
    font-size: clamp(16px, 1.5vw, 19px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero__sub, .hero__actions, .hero__meta {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.is-ready .hero__sub { opacity: 1; transform: none; transition-delay: .45s; }
.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: .58s; }
.is-ready .hero__meta { opacity: 1; transform: none; transition-delay: .7s; }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(247, 243, 240, .16);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(247, 243, 240, .58);
}

.hero__meta b { color: var(--orange); font-weight: 700; }

/* The brand swoosh, drawn once on load. It is the profile's cover graphic,
   so the site opens on the same gesture the document does. */
.hero__swoosh {
    position: absolute;
    right: -6%;
    top: 4%;
    width: min(760px, 62vw);
    z-index: 1;
    pointer-events: none;
    opacity: .9;
}

.hero__swoosh path {
    fill: none;
    stroke: var(--orange);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 2.6s var(--ease);
}

.hero__swoosh .trail { stroke: rgba(241, 90, 37, .35); stroke-width: 6; }
.is-ready .hero__swoosh path { stroke-dashoffset: 0; }

.hero__swoosh circle {
    fill: var(--orange);
    transform-origin: center;
    opacity: 0;
    transition: opacity .5s var(--ease) 1.9s;
}

.is-ready .hero__swoosh circle { opacity: 1; }

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 3;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .3em;
    color: rgba(247, 243, 240, .5);
    text-transform: uppercase;
    display: grid;
    justify-items: center;
    gap: 8px;
}

@media (max-height: 760px), (max-width: 820px) { .scroll-cue { display: none; } }

.scroll-cue i { display: block; width: 1px; height: 40px; background: rgba(247, 243, 240, .3); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--orange); animation: cue 2.1s var(--ease) infinite; }

@keyframes cue {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* --- Marquee ------------------------------------------------------------ */

.marquee {
    background: var(--orange);
    color: #fff;
    padding: 20px 0;
    overflow: hidden;
    border-block: 1px solid rgba(0, 0, 0, .08);
}

.marquee__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
    display: flex;
    align-items: center;
    gap: 46px;
    padding-right: 46px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee__group span { display: inline-flex; align-items: center; gap: 46px; }
.marquee__group span::after { content: "●"; font-size: 7px; opacity: .55; }

@keyframes slide { to { transform: translateX(-50%); } }

/* --- Reveal ------------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .85s var(--ease), transform .85s var(--ease);
}

[data-reveal].in { opacity: 1; transform: none; }

/* --- Section heads ------------------------------------------------------ */

.head { max-width: 900px; }

.head h2 {
    font-size: clamp(32px, 5vw, 66px);
}

.head p { margin-top: 26px; }

.split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(36px, 6vw, 90px);
    align-items: start;
}

/* --- Who we are --------------------------------------------------------- */

.who__copy p + p { margin-top: 20px; }

.who__figure { position: relative; }

.who__figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(.55) contrast(1.06);
    transition: filter .8s var(--ease), transform .8s var(--ease);
}

.who__figure:hover img { filter: none; transform: scale(1.015); }

/* An offset orange rule rather than a drop shadow: flat, printed, on-brand. */
.who__figure::before {
    content: "";
    position: absolute;
    inset: -14px -14px 26px 26px;
    border: 2px solid var(--orange);
    z-index: -1;
    transition: inset .8s var(--ease);
}

.who__figure:hover::before { inset: -22px -22px 34px 34px; }

.who__cap {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.chip {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 11px 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}

.chip:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

/* Facts, not figures. The profile leaves its counters as placeholders because
   the real numbers were never supplied, so the site states what is verifiable
   and counts nothing it cannot stand behind. */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-top: 56px;
    background: var(--line);
    border: 1px solid var(--line);
}

.fact { background: var(--cream); padding: 30px 26px; }

.fact b {
    display: block;
    font-family: var(--display);
    font-size: clamp(21px, 2.2vw, 29px);
    color: var(--orange);
    line-height: 1.06;
    text-wrap: balance;
    margin-bottom: 12px;
}

.fact span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey);
}

/* --- Services ----------------------------------------------------------- */

.services { background: var(--ink-2); }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1px;
    margin-top: 64px;
    background: rgba(247, 243, 240, .12);
    border: 1px solid rgba(247, 243, 240, .12);
}

.card {
    position: relative;
    background: var(--ink-2);
    padding: 40px 32px 120px;
    isolation: isolate;
    overflow: hidden;
    transition: color .55s var(--ease);
}

/* Fill sweeps up from the bottom: the same gesture as the buttons and the
   headline reveals. */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--orange);
    transform: translateY(100%);
    transition: transform .6s var(--ease);
}

.card:hover::before { transform: translateY(0); }
.card:hover .card__num,
.card:hover .card__body,
.card:hover .card__tag { color: rgba(255, 255, 255, .88); }
.card:hover .card__icon { stroke: #fff; transform: translateY(-4px); }

.card__num {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--orange);
    transition: color .45s var(--ease);
}

.card__icon {
    width: 42px;
    height: 42px;
    margin: 26px 0 24px;
    stroke: var(--orange);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .45s var(--ease), transform .55s var(--ease);
}

.card h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.08; }

.card__body {
    margin-top: 16px;
    font-size: 15.5px;
    color: rgba(247, 243, 240, .66);
    transition: color .45s var(--ease);
}

.card__tag {
    position: absolute;
    left: 32px;
    bottom: 34px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--orange);
    transition: color .45s var(--ease);
}

/* --- Coverage map ------------------------------------------------------- */

.coverage__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
    margin-top: 60px;
}

.map { width: 100%; max-width: 620px; height: auto; overflow: visible; }

.map__country {
    fill: var(--cream-2);
    stroke: var(--line);
    stroke-width: 2;
}

.map__route {
    fill: none;
    stroke: var(--orange);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 1400);
    stroke-dashoffset: var(--len, 1400);
    transition: stroke-dashoffset 1.5s var(--ease), opacity .4s var(--ease), stroke-width .4s var(--ease);
    opacity: .95;
}

.map.in .map__route { stroke-dashoffset: 0; }

.map__route:nth-of-type(2) { transition-delay: .12s; }
.map__route:nth-of-type(3) { transition-delay: .24s; }
.map__route:nth-of-type(4) { transition-delay: .36s; }
.map__route:nth-of-type(5) { transition-delay: .48s; }

/* Hovering a corridor in the list dims the rest, so the eye has one thing to
   follow instead of five. */
.coverage.is-focused .map__route { opacity: .12; }
.coverage.is-focused .map__route.is-lit { opacity: 1; stroke-width: 12; }
.coverage.is-focused .map__node { opacity: .2; }
.coverage.is-focused .map__node.is-lit { opacity: 1; }

.map__town { fill: var(--grey); }

/* Corridors run underneath the place names, so every label carries a halo of
   the map's own background. Without it GULU sits inside the northern route
   and simply cannot be read. */
.map__label {
    font-family: var(--mono);
    font-size: 19px;
    letter-spacing: .1em;
    fill: var(--grey);
    paint-order: stroke fill;
    stroke: var(--cream-2);
    stroke-width: 6;
    stroke-linejoin: round;
}
.map__label--post { fill: var(--ink); font-weight: 700; }
.map__label--hub {
    font-family: var(--display);
    font-size: 30px;
    fill: var(--ink);
    letter-spacing: 0;
    paint-order: stroke fill;
    stroke: var(--cream-2);
    stroke-width: 7;
    stroke-linejoin: round;
}

.map__node { transition: opacity .4s var(--ease); }
.map__post { fill: var(--ink); }

.map__hub { fill: var(--orange); }
.map__ring { fill: none; stroke: var(--orange); stroke-width: 2.5; transform-origin: 555.6px 539.1px; }
.map.in .map__ring { animation: ping 3.4s var(--ease) infinite; }

@keyframes ping {
    0%   { transform: scale(.4); opacity: .85; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.corridors { list-style: none; margin: 0; padding: 0; }

.corridor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    text-align: left;
    background: var(--cream-2);
    border: 0;
    border-left: 3px solid transparent;
    padding: 18px 20px;
    margin-bottom: 8px;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}

.corridor:hover, .corridor:focus-visible { background: #fff; border-left-color: var(--orange); transform: translateX(5px); }

.corridor__route {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--orange);
    display: block;
}

.corridor__name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey);
    display: block;
    margin-top: 4px;
}

.corridor__to {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--cream);
    padding: 7px 11px;
    white-space: nowrap;
}

.coverage__note { margin-top: 20px; font-size: 14.5px; color: var(--grey-2); }

/* --- Values ------------------------------------------------------------- */

.values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 42px 48px;
    margin-top: 66px;
}

.value { display: flex; gap: 18px; }

.value__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange-dim);
    transition: background .45s var(--ease), transform .45s var(--ease);
}

.value:hover .value__icon { background: var(--orange); transform: rotate(-8deg) scale(1.06); }
.value:hover .value__icon svg { stroke: #fff; }

.value__icon svg { width: 21px; height: 21px; stroke: var(--orange); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--ease); }

.value h3 { font-size: 18px; line-height: 1.16; }
.value p { margin-top: 9px; font-size: 15px; color: var(--grey); }

/* --- Why us (orange band) ----------------------------------------------- */

.why { background: var(--orange); color: #fff; }
.why h2 { color: #fff; }
.why .eyebrow { color: rgba(255, 255, 255, .72); }

.why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 62px;
    margin-top: 58px;
}

.why__item { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .32); }
.why__item h3 { font-size: 19px; line-height: 1.14; }
.why__item p { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .84); }

/* --- Fleet -------------------------------------------------------------- */

.fleet { background: var(--ink); }

.fleet__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 60px;
}

.shot { position: relative; overflow: hidden; background: var(--ink-2); }

.shot img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(1) contrast(1.12) brightness(.8);
    transform: scale(1.03);
    transition: filter .9s var(--ease), transform .9s var(--ease);
}

.shot:hover img { filter: grayscale(0) contrast(1.04) brightness(.94); transform: scale(1.07); }

.shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(36, 30, 27, .88));
    pointer-events: none;
}

.shot figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(247, 243, 240, .82);
}

.shot figcaption b { color: var(--orange); display: block; margin-bottom: 5px; font-weight: 700; }

.shot--tall img { aspect-ratio: 4 / 6; }

/* --- Quote form --------------------------------------------------------- */

.quote { background: var(--cream); }

.quote__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.contact-list { list-style: none; margin: 36px 0 0; padding: 0; }
.contact-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }

.contact-list dt {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 6px;
}

.contact-list dd { margin: 0; font-size: 16px; color: var(--ink); }
.contact-list a:hover { color: var(--orange); }

.form { background: #fff; padding: clamp(26px, 3.4vw, 44px); border: 1px solid var(--line); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; margin-bottom: 18px; }

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 15px;
    font-family: var(--body);
    font-size: 15.5px;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}

.field textarea { resize: vertical; min-height: 116px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(241, 90, 37, .13);
}

.field input::placeholder, .field textarea::placeholder { color: #B3AAA4; }

.form__note { margin-top: 14px; font-size: 13px; color: var(--grey-2); }

/* Honeypot. Hidden from people, irresistible to the bots that fill every
   field on a page. */
.gotcha { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__alert { padding: 14px 16px; border-left: 3px solid var(--orange); background: var(--orange-dim); font-size: 15px; margin-bottom: 22px; color: var(--ink); }
.form__alert--ok { border-left-color: #1E9E62; background: rgba(30, 158, 98, .1); }

/* --- Footer ------------------------------------------------------------- */

.foot { background: var(--ink); border-top: 1px solid rgba(247, 243, 240, .1); padding: 74px 0 30px; }

.foot__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 44px;
}

.foot img { height: 40px; width: auto; }
.foot__blurb { margin-top: 22px; max-width: 40ch; font-size: 15px; color: rgba(247, 243, 240, .58); }

.foot h4 {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .24em;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 11px; font-size: 15px; color: rgba(247, 243, 240, .68); }
.foot a:hover { color: var(--orange); }

.foot__bar {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid rgba(247, 243, 240, .1);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(247, 243, 240, .42);
}

/* --- Floating contact buttons -------------------------------------------
   In Uganda the first move on a business website is usually to message rather
   than to fill in a form, so WhatsApp sits on every screen size and the phone
   sits above it on touch devices, where ringing is one tap.

   WhatsApp green is used rather than the brand orange on purpose: this button
   is a recognised object, and recolouring it costs more in recognition than it
   gains in tidiness. */

.wa-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 71;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 58px;
    padding: 0 5px;
    border-radius: 999px;
    background: #25D366;
    box-shadow: 0 0 0 3px var(--cream), 0 12px 30px rgba(36, 30, 27, .42);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--cream), 0 16px 36px rgba(37, 211, 102, .45); }

.wa-fab__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.wa-fab__icon svg { width: 27px; height: 27px; fill: #fff; }

/* The label is collapsed to nothing and opens on hover, so the button is a
   circle at rest and explains itself when somebody reaches for it. */
.wa-fab__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: max-width .5s var(--ease), opacity .35s var(--ease), padding .5s var(--ease);
}

.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label {
    max-width: 220px;
    opacity: 1;
    padding-right: 18px;
}

/* One slow ring, once the page has settled. Enough to catch the eye, not
   enough to nag. */
.wa-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #25D366;
    z-index: -1;
    animation: wa-ping 3.6s var(--ease) infinite;
}

@keyframes wa-ping {
    0%, 60%  { transform: scale(1); opacity: .5; }
    85%      { transform: scale(1.32); opacity: 0; }
    100%     { transform: scale(1.32); opacity: 0; }
}

/* Floating call button: on a phone, the action is often just "ring them". */
.call-fab {
    position: fixed;
    right: 21px;
    bottom: 90px;
    z-index: 70;
    width: 56px;
    height: 56px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    /* A cream ring, because the button floats over both the charcoal page
       and the orange marquee band, and orange-on-orange is invisible. */
    box-shadow: 0 0 0 3px var(--cream), 0 10px 28px rgba(36, 30, 27, .45);
}

.call-fab svg { width: 23px; height: 23px; stroke: #fff; stroke-width: 1.9; fill: none; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
    .split, .coverage__grid, .quote__grid, .foot__grid { grid-template-columns: 1fr; }
    .coverage__grid { gap: 44px; }
    .foot__grid { gap: 38px; }
}

@media (max-width: 820px) {
    .hero__meta { gap: 8px 22px; margin-top: 34px; }
    .nav__links { display: none; }
    .nav__cta { display: none; }
    .burger { display: block; }
    .call-fab { display: grid; }
    .wa-fab__label { display: none; }
    .wa-fab { padding: 0 5px; }
    .hero__swoosh { width: 92vw; right: -22%; top: auto; bottom: 32%; opacity: .5; }
    .hero { min-height: 92svh; }
    .form__row { grid-template-columns: 1fr; }
    .why__grid { gap: 0 32px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .card { padding: 32px 24px 104px; }
    .card__tag { left: 24px; }
    .fleet__grid { grid-template-columns: 1fr; }
}

/* --- Motion preference --------------------------------------------------
   Everything above is decoration on top of a page that already works. When
   somebody has asked their system for less movement, all of it stops --
   including the marquee and the map draw, which are the two that would
   otherwise keep going. */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal], .mask > span, .hero__sub, .hero__actions, .hero__meta { opacity: 1; transform: none; }
    .map__route { stroke-dashoffset: 0; }
    .hero__swoosh path { stroke-dashoffset: 0; }
    .hero__swoosh circle { opacity: 1; }
    .marquee__track { animation: none; }
    .wa-fab::before { animation: none; opacity: 0; }
}

@media print {
    .nav, .menu, .call-fab, .scroll-cue, .marquee, .form { display: none; }
    body { background: #fff; color: #000; }
}