/* ==========================================================================
   LOZY — UC-style footer
   assets/sass/footer/footer-uc.css     (markup: partials/footer/uc.blade.php)

   Geometry and motion are measured from unitedcarriers.com, not approximated:
     fluid scale   1em = 0.5787vw  (their 1rem), 1.0091vw <=991, 2.5445vw <=767
     hairlines     1px solid #E6E6E8
     ticker        3.2em, 16% ink, mask fade 10em both edges, .55px/frame
     roll-over     clip one line tall, -100% / +100% -> 0, .7s cubic-bezier(.22,1,.36,1)
     cursor        47px ring + 4px dot, mix-blend-mode:difference, 89px disc on CTAs

   The fluid font-size lives on .lzuc ONLY — never on html — so the rest of
   lozy.in keeps its 16px root. Every length inside is em, so the footer scales
   as one unit. Turn the whole footer up or down with --lzuc-scale (1 = reference).
   ========================================================================== */

.lzuc {
    --lzuc-scale: 1;
    --ink: #17171A;
    --ink-soft: rgba(23, 23, 26, .72);
    --ink-faint: rgba(23, 23, 26, .16);
    --muted: #5A5A5F;
    --paper: #FFFFFF;
    --surface: #F6F6F7;
    --line: #E6E6E8;
    --primary: #D71920;
    --primary-deep: #C0161B;
    --wa: #25D366;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Fluid by width AND height. The height term subtracts a FIXED 96px for the
       site's sticky menu bar (.lz-header, 91px) which floats over the footer, then
       divides by the footer's footprint — content + bar + the canvas wordmark
       always fit one screen, at any height, with nothing hidden behind the bar.
       0.00835 is the tightest case (1280x700) with a little margin; the canvas
       height grows with width, so the widest screens bind too. min-height then
       stretches the footer to fill. */
    font-size: min(calc(0.57870370373vw * var(--lzuc-scale)), calc((100vh - 104px) * 0.00825 * var(--lzuc-scale)));
    background: var(--paper);
    color: var(--ink);
    font-family: 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Scoped reset — :where() keeps this at the footer root's specificity, so
   component rules below (.lzuc-btn, .lzuc-social …) always win. Without it the
   reset's `background: none` beat .lzuc-btn--primary and the red pill vanished. */
.lzuc *,
.lzuc *::before,
.lzuc *::after { box-sizing: border-box; }
.lzuc :where(p, ul, li, h2, figure) { margin: 0; padding: 0; }
.lzuc :where(ul) { list-style: none; }
.lzuc :where(a) { color: inherit; text-decoration: none; }
.lzuc :where(img) { display: block; max-width: 100%; }
.lzuc :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.lzuc-wrap {
    /* Symmetric side padding — the reference's own --container--padding (4rem),
       which is 4em here. Full-bleed in width (no max-width), inset left and right
       by exactly the same amount. */
    max-width: none;
    margin: 0;
    padding: 2.4em 4em;
}

/* One screen: the footer fills the last viewport and the company-name band sits
   on its bottom edge, exactly like the reference (763px tall in a 763px window).
   Only from 992px — on phones a footer taller than the screen is normal. */
@media (min-width: 992px) {
    .lzuc {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        /* the sticky menu bar floats over the footer's top — reserve its real
           height (91px + 5px of air). Fixed, because the bar does not scale. */
        padding-top: 96px;
    }
    .lzuc-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .lzuc-dots { margin-top: auto; }
}

.lzuc-line { height: 1px; background: var(--line); }

.lzuc-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6em;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.1em !important;
}

/* ---------------------------------------------------------------- 1 · intro */
.lzuc-sub {
    font-size: 1.6em;
    color: var(--ink-soft);
    margin-bottom: 1.8em !important;
    max-width: 14em;
}

/* ------------------------------------------------- 2 · socials | company | assured */
.lzuc-row {
    display: grid;
    grid-template-columns: 217fr 618fr 294fr;   /* the reference's measured proportions */
    gap: 2em;
    padding: 1.6em 0 2em;
}

.lzuc-social-list { display: flex; gap: 1.2em; }
.lzuc-social {
    width: 4em;
    height: 4em;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: border-color .4s ease, color .4s ease;
}
.lzuc-social svg { width: 1.7em; height: 1.7em; fill: currentColor; }
.lzuc-social:hover { border-color: var(--ink); color: var(--ink); }

.lzuc-menu-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2em 2em;
}
.lzuc-menu-list .lzuc-roll,
.lzuc-menu-list a {
    width: max-content;
    font-size: 1.6em;      /* the reference's menu links are 1.6rem/500 — without
                              this they inherit the 7.4px root scale and read tiny */
    font-weight: 500;
}

.lzuc-assure-desc {
    font-size: 1.6em;
    color: var(--ink-soft);
    margin-bottom: 1.2em !important;
}
/* one compact row of marks — the reference's own third column is exactly this:
   label, two lines of copy, then a single row of marks. The longer copy stays in
   the markup for screen readers and shows as a tooltip on hover. */
.lzuc-marks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8em 1.2em;
    margin-bottom: 1.6em;
}
.lzuc-marks li { display: grid; gap: .4em; align-content: start; }
.lzuc-marks svg { width: 1.8em; height: 1.8em; color: var(--ink); }
.lzuc-marks b { font-size: 1.2em; font-weight: 500; line-height: 1.25; display: block; }
.lzuc-marks span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lzuc-btns { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; }
.lzuc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    /* height/padding are in the button's OWN em (its font-size is 1.5em of the
       footer scale) — 2.8em ≈ 35px at a 1440 window, a compact pill */
    height: 2.8em;
    padding: 0 1.3em;
    border-radius: 100vmax;
    font-size: 1.5em;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.lzuc-btn--primary { background: var(--primary); color: #fff; }
.lzuc-btn--primary:hover { background: var(--primary-deep); }
.lzuc-btn--wa { border: 1px solid var(--wa); color: var(--ink); }
.lzuc-btn--wa:hover { background: var(--wa); }

/* ------------------------------------------------------- 3 · toggle + ticker */
.lzuc-info { padding-bottom: 1.6em; }

.lzuc-switch {
    position: relative;
    display: inline-flex;
    background: rgba(23, 23, 26, .05);
    border-radius: 100vmax;
    padding: .4em;
    margin-bottom: 1.4em;
}
.lzuc-switch-btn {
    position: relative;
    z-index: 2;
    width: 8.8em;
    padding: 1em 0;
    border-radius: 100vmax;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6em;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color .4s ease;
}
.lzuc-switch-btn.is-on { color: var(--ink); pointer-events: none; }
.lzuc-switch-pill {
    position: absolute;
    z-index: 1;
    top: .4em;
    left: .4em;
    bottom: .4em;
    width: 8.8em;
    background: var(--paper);
    border-radius: 100vmax;
    transition: transform .45s var(--ease);
}

.lzuc-ticker {
    /* full-bleed: it cancels the container padding so the marquee runs edge to
       edge, exactly like the reference */
    overflow: hidden;
    margin-left: -4em;
    margin-right: -4em;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10em, #000 calc(100% - 10em), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10em, #000 calc(100% - 10em), transparent 100%);
}
.lzuc-track { display: flex; width: max-content; will-change: transform; }
.lzuc-track ul { display: flex; align-items: center; gap: 1.4em; padding-right: 1.4em; }
.lzuc-track ul[hidden] { display: none; }
.lzuc-track li { display: flex; align-items: center; gap: 1.4em; white-space: nowrap; }
.lzuc-track li > .lzuc-roll,
.lzuc-track li a {
    font-size: 3.2em;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink-faint);
    transition: color .3s ease;
}
.lzuc-track li a:hover { color: var(--ink); }
.lzuc-sep { font-size: 3.2em; color: var(--ink-faint); }

/* ------------------------------------------------- 4 · thumb + three columns */
.lzuc-cols {
    display: grid;
    grid-template-columns: 217fr 618fr 294fr;
    gap: 2em;
    border-top: 1px solid var(--line);
    padding: 1.6em 0 1.8em;
}
.lzuc-thumb {
    margin-bottom: 1.4em;
    width: 100%;
    height: 10em;
    overflow: hidden;
    border-radius: .8em;
    background: var(--surface);
}
.lzuc-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }

.lzuc-value { font-size: 1.6em; font-weight: 500; line-height: 1.45; }
.lzuc-pair { margin-bottom: 1.4em; }
.lzuc-pair:last-child { margin-bottom: 0; }

.lzuc-places { font-size: 1.6em; color: var(--ink-soft); line-height: 1.7; }
.lzuc-places .lzuc-roll { color: var(--ink-soft); }
.lzuc-places .lzuc-roll:hover { color: var(--ink); }
.lzuc-slash { color: var(--line); margin: 0 .6em; }

.lzuc-dir {
    display: inline-flex;
    align-items: center;
    gap: .8em;
    font-size: 1.6em;
    color: var(--ink-soft);
    margin-top: 1em;
}
.lzuc-dir:hover { color: var(--ink); }

/* ------------------------------------------------------------ 5 · bottom bar */
.lzuc-bot {
    display: grid;
    grid-template-columns: 1fr auto;      /* copyright | links, then the chip row */
    align-items: center;
    gap: .9em 2em;
    border-top: 1px solid var(--line);
    padding: 1.2em 0;
}
.lzuc-copy {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
}
.lzuc-heritage {
    grid-column: 1 / -1;      /* the chip gets a row of its own */
    font-size: 1.75em;        /* a touch larger than the copyright beside it */
}
/* The heritage line — highlighted. It is Lozy's parentage, so it reads in ink on
   a soft surface chip instead of the muted grey of the copyright above it: the
   logo, the company name and the "since 1974" all sit inside one rounded chip.
   inline-flex so the chip centres the mark and keeps even gaps at any size. */
.lzuc-micro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5em;
    text-transform: none;
    letter-spacing: 0;
    padding: .5em .9em;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
}
/* The Indo Arya mark, inline in the heritage line. Cropped from the supplied
   artwork and knocked out to transparency (assets/images/indo-arya-logo.png,
   406x72 = 4x the size it renders at). Sized in em so it scales with the footer. */
.lzuc-indo {
    display: inline-block;      /* the reset sends every img to display: block */
    height: 1.8em;              /* of the copy's own font-size → ~19px at 1440 */
    width: auto;
    vertical-align: middle;     /* the chip centres it; spacing comes from the gap */
    margin: 0;
}
.lzuc-legal { display: flex; gap: 2.2em; }
.lzuc-legal a,
.lzuc-legal .lzuc-roll { font-size: 1.6em; color: var(--ink-soft); }
.lzuc-legal a:hover { color: var(--ink); }

/* ------------------------------------------------- 6 · the dot wordmark */
/* The company name drawn as a dot matrix on a canvas — round dots, 2px across,
   on a 4px grid (both fixed CSS px on purpose: dots stay crisp at any footer
   scale). The canvas sizes itself to the exact text height, so this block has
   no height of its own. It is the last thing on the page.

   Colour comes from --dot; the JS paints the text with it, reads the pixels
   back and rebuilds the dots from them, so changing --dot is all it takes. */
@font-face {
    font-family: 'Russo One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/RussoOne-Regular.woff2') format('woff2');
}
.lzuc-dots {
    --dot: #a0a0a0;
    padding-top: .6em;
    padding-bottom: 26px;      /* the reference's own bottom padding */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lzuc-dots { --dot: #5a5a5a; }
}
:root[data-theme="dark"] .lzuc-dots { --dot: #5a5a5a; }

.lzuc-dots canvas {
    display: block;
    width: 100%;
    height: 0;                    /* the JS sets the real height after measuring */
    touch-action: pan-y;          /* vertical scrolling still works on touch */
}
.lzuc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 7 · map */
.lzuc-map {
    width: 100%;
    max-width: 150px;
    margin: 0 0 1.2em;
}
.lzuc-map svg { display: block; width: 100%; height: auto; }
.lzuc-map-land {
    fill: url(#lzucMapDots);
    stroke: rgba(23, 23, 26, .22);
    stroke-width: 1;
    stroke-linejoin: round;
}
.lzuc-map-halo {
    fill: var(--primary);
    opacity: .16;
    transform-box: fill-box;
    transform-origin: center;
    animation: lzuc-pulse 3s ease-out infinite;
    animation-delay: calc(var(--pin, 0) * .35s);
}
.lzuc-map-dot { fill: var(--ink); }
.lzuc-map-caption {
    font-size: 1.3em;
    line-height: 1.45;
    color: var(--muted);
}

@keyframes lzuc-pulse {
    0%   { transform: scale(.6); opacity: .30; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ==========================================================================
   THE ROLL-OVER HOVER
   Both copies sit in the SAME grid cell, so the clip box is exactly one line
   tall and the parked copy waits directly underneath it. (Give them separate
   rows and the box becomes two lines tall — both copies show on hover.)
   ========================================================================== */
.lzuc-roll { display: inline-block; }
.lzuc-roll-clip {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    overflow: hidden;
}
.lzuc-roll-top,
.lzuc-roll-bot {
    grid-area: 1 / 1 / 2 / 2;
    transition: transform .7s var(--ease);
    will-change: transform;
}
.lzuc-roll-bot { transform: translateY(100%); }
.lzuc-roll:hover .lzuc-roll-top { transform: translateY(-100%); }
.lzuc-roll:hover .lzuc-roll-bot { transform: translateY(0); }

/* the diagonal-arrow variant — swap, not fade */
.lzuc-arrow-link { position: relative; }
.lzuc-ic-wrap {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    overflow: hidden;
}
.lzuc-ic {
    grid-area: 1 / 1 / 2 / 2;
    width: 1.4em;
    height: 1.4em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform .7s var(--ease);
}
.lzuc-ic.b { transform: translate(-100%, 100%); }
.lzuc-arrow-link:hover .lzuc-ic.a { transform: translate(100%, -100%); }
.lzuc-arrow-link:hover .lzuc-ic.b { transform: translate(0, 0); }

/* ==========================================================================
   THE CUSTOM CURSOR  (page-level overlay — px, not em, so it is unaffected by
   which section's scale is active)
   ========================================================================== */
.lzuc-cursor {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    pointer-events: none;
    mix-blend-mode: difference;     /* the whole trick: inverts over any surface */
}
/* over a CTA the disc is a solid brand colour with white type — blending a red
   disc over a red button turns it cyan, so the blend is switched off for it */
.lzuc-cursor.is-solid { mix-blend-mode: normal; }
.lzuc-cursor-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 47px;
    height: 47px;
    /* dotted ring — visible everywhere, no longer hidden over text links */
    border: 1px dotted rgba(255, 255, 255, .85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease, border-color .35s ease, width .35s var(--ease), height .35s var(--ease), background-color .35s ease;
}
/* hover state: the ring opens up over anything interactive */
.lzuc-cursor-main.is-hover {
    width: 62px;
    height: 62px;
    border-color: #fff;
}
.lzuc-cursor-dot { width: 4px; height: 4px; border-radius: 99%; background: #fff; flex: none; }

/* the trailing dots that give the cursor its dotted tail */
.lzuc-cursor-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}
.lzuc-cursor-txt {
    position: absolute;
    width: 112px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}
.lzuc-cursor-main.is-link {
    width: 89px;
    height: 89px;
    background: var(--lzuc-fill, #17171A);
    border-color: transparent;
}
.lzuc-cursor-main.is-link .lzuc-cursor-txt { opacity: 1; transform: scale(1); }
@media (max-width: 991px) { .lzuc-cursor { display: none; } }

/* ==========================================================================
   ONE-SCREEN DENSITY (desktop only)
   The reference footer is 763px inside a 763px window — a single last screen.
   These tighten the block paddings so the whole footer lands inside one
   viewport at 1280x800 without touching a single type size. Delete the block
   and the footer just gets taller, nothing breaks.
   ========================================================================== */
@media (min-width: 992px) {
    .lzuc-wrap { padding-top: 2.2em; padding-bottom: 2.2em; }
    .lzuc-sub { margin-bottom: 1.2em !important; }
    .lzuc-row { padding-bottom: 1.2em; }
    .lzuc-marks { margin-bottom: 1em; }
    .lzuc-switch { margin-bottom: .8em; }
    .lzuc-switch-btn { padding-top: .7em; padding-bottom: .7em; }
    .lzuc-info { padding-bottom: 1em; }
    .lzuc-bot { padding-top: 1em; padding-bottom: 1em; }
    .lzuc-dots { padding-top: .4em; padding-bottom: 18px; }
}

/* ==========================================================================
   RESPONSIVE — the reference's own breakpoints
   ========================================================================== */
@media (max-width: 991px) {
    /* the reference's tablet value (1.0091vw) — clamped at the low end so 768px
       windows do not collapse to 7.7px em (which would render 12px text) */
    .lzuc { font-size: clamp(9px, calc(1.0090817356vw * var(--lzuc-scale)), 11px); }
    .lzuc-row,
    .lzuc-cols { grid-template-columns: 1fr 1fr; gap: 2.4em; }
    .lzuc-assure { grid-column: 1 / -1; }
    .lzuc-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lzuc-track li > .lzuc-roll,
    .lzuc-track li a,
    .lzuc-sep { font-size: 2.8em; }
    .lzuc-cols { padding-top: 2.4em; }
}

@media (max-width: 767px) {
    /* the reference's phone value (2.5445vw, calibrated for ~390px screens) —
       clamped so a 767px window does not blow the whole footer up 2.6x */
    .lzuc { font-size: clamp(9px, calc(2.5445292621vw * var(--lzuc-scale)), 12.5px); }
    .lzuc-wrap { padding: 3em 1.2em 1.5em; }
    .lzuc-row,
    .lzuc-cols { grid-template-columns: 1fr; gap: 2.4em; }
    .lzuc-ticker { margin-left: 0; margin-right: 0; }
    .lzuc-thumb { display: none; }
    .lzuc-marks { grid-template-columns: 1fr; }
    .lzuc-bot { grid-template-columns: 1fr; justify-items: start; gap: 1.2em; }
    .lzuc-legal { flex-wrap: wrap; gap: 1.2em 1.6em; }
    .lzuc-switch-btn { width: 9.6em; }
    .lzuc-switch-pill { width: 9.6em; }
}

@media (max-width: 479px) {
    .lzuc-menu-list { grid-template-columns: 1fr; }
    .lzuc-btns { flex-direction: column; }
    .lzuc-btn { width: 100%; }
}

/* ------------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    .lzuc .lzuc-roll-top,
    .lzuc .lzuc-roll-bot,
    .lzuc .lzuc-ic,
    .lzuc .lzuc-switch-pill,
    .lzuc .lzuc-track { transition: none !important; transform: none !important; }
    .lzuc-cursor { display: none !important; }
}

@media print {
    .lzuc-cursor { display: none !important; }
}