body.lg{min-height:100vh;background:#06261C;overflow-x:hidden}
.lg-bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(1100px 700px at 15% 20%,#16704F 0%,transparent 62%),radial-gradient(900px 620px at 95% 95%,#0D4A36 0%,transparent 60%),#06261C}
.lg-bg::before{content:"";position:absolute;inset:0;opacity:.7;background-size:64px 112px;
background-image:linear-gradient(30deg,rgba(255,255,255,.045) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.045) 87.5%),linear-gradient(150deg,rgba(255,255,255,.045) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.045) 87.5%),linear-gradient(30deg,rgba(255,255,255,.045) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.045) 87.5%),linear-gradient(150deg,rgba(255,255,255,.045) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.045) 87.5%),linear-gradient(60deg,rgba(255,255,255,.03) 25%,transparent 25.5%,transparent 75%,rgba(255,255,255,.03) 75%);
background-position:0 0,0 0,32px 56px,32px 56px,0 0;-webkit-mask-image:radial-gradient(ellipse at 30% 45%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse at 30% 45%,#000 10%,transparent 78%)}
.lg-mark,.lg-glow{position:absolute;left:-4vmin;top:50%;width:min(112vmin,1000px);height:auto;aspect-ratio:1;object-fit:contain;transform:translateY(-50%);pointer-events:none;user-select:none;
-webkit-mask-image:radial-gradient(circle at center,#000 42%,transparent 71%);mask-image:radial-gradient(circle at center,#000 42%,transparent 71%)}
.lg-glow{filter:blur(46px) saturate(1.8) brightness(1.2);opacity:.5;transform:translateY(-50%) scale(1.08)}
.lg-mark{opacity:.3;filter:drop-shadow(0 0 36px rgba(240,200,120,.45));animation:lgfloat 26s ease-in-out infinite alternate}
.lg-ring{position:absolute;left:-4vmin;top:50%;width:min(112vmin,1000px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:1px dashed rgba(240,200,120,.22);animation:lgspin 90s linear infinite;pointer-events:none}
.lg-ring.r2{inset:auto;width:min(86vmin,770px);border-style:solid;border-color:rgba(255,255,255,.07);animation-direction:reverse;animation-duration:140s}
@keyframes lgfloat{from{transform:translateY(-52%) rotate(-2deg) scale(1)}to{transform:translateY(-48%) rotate(2deg) scale(1.04)}}
@keyframes lgspin{to{transform:translateY(-50%) rotate(360deg)}}
.lg-wrap{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;padding:28px clamp(18px,5vw,72px);gap:30px}
.lg-hero{color:#fff;align-self:end;padding-bottom:6vh}.lg-hero h1{font-size:clamp(1.9rem,3.3vw,3.1rem);line-height:1.1;max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.lg-hero p{margin:12px 0 0;color:#B9D8CB;font-size:1.02rem}
.lg-card{position:relative;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:20px;padding:36px 34px 30px;width:min(430px,100%);justify-self:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4) inset;animation:lgin .7s cubic-bezier(.2,.8,.2,1) both}
.lg-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#176B4D,#B07D2B,#176B4D)}
@keyframes lgin{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.lg-card h2{font-size:1.65rem}.lg-card .sub{margin:4px 0 24px}
.lg-field{position:relative;margin-bottom:16px}
.lg-field input{height:58px;padding:22px 48px 6px 48px;border:1.5px solid #CBD8D1;border-radius:13px;background:#F4F8F6;font-size:1rem;transition:border-color .2s,box-shadow .2s,background .2s}
.lg-field input:hover{border-color:#9DB8AB}
.lg-field input:focus{outline:0;background:#fff;border-color:var(--gold);box-shadow:0 0 0 4px rgba(176,125,43,.2)}
.lg-field label{position:absolute;left:48px;top:18px;margin:0;font-weight:400;font-size:1rem;color:#6B7F77;pointer-events:none;transform-origin:left top;transition:transform .18s,color .18s}
.lg-field input:focus+label,.lg-field input:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.75);color:var(--green);font-weight:600}
.lg-field .ic{position:absolute;left:16px;top:18px;width:22px;height:22px;color:#7C918A;transition:color .2s;pointer-events:none}
.lg-field:focus-within .ic{color:var(--gold)}
.lg-eye{position:absolute;right:8px;top:9px;width:40px;height:40px;border:0;background:transparent;border-radius:10px;color:#6B7F77;cursor:pointer;display:grid;place-items:center}
.lg-eye:hover{background:#E4EEE9;color:var(--deep)}.lg-eye svg{width:21px;height:21px}
.lg-caps{display:none;font-size:.83rem;color:#8A5A0E;background:var(--warn);border-radius:8px;padding:6px 10px;margin:-6px 0 14px}.lg-caps.on{display:block}
.lg-btn{width:100%;height:54px;border:0;border-radius:13px;color:#fff;font:600 1rem "Public Sans",sans-serif;cursor:pointer;background:linear-gradient(135deg,#1E8A64,#12553E);box-shadow:0 10px 24px -10px rgba(23,107,77,.9);transition:transform .15s,box-shadow .2s,filter .2s;display:flex;align-items:center;justify-content:center;gap:10px}
.lg-btn:hover{filter:brightness(1.08);box-shadow:0 14px 28px -10px rgba(23,107,77,.95)}.lg-btn:active{transform:translateY(1px)}.lg-btn:focus-visible{outline:3px solid #9ED3BC;outline-offset:2px}
.lg-btn[disabled]{cursor:progress;filter:grayscale(.2) brightness(.95)}
.lg-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:lgspin2 .7s linear infinite;display:none}.lg-btn[disabled] .lg-spin{display:block}
@keyframes lgspin2{to{transform:rotate(360deg)}}
.lg-foot{text-align:center;color:#7C918A;font-size:.8rem;margin:18px 0 0}
@media(max-width:900px){.lg-wrap{grid-template-columns:1fr;align-content:space-between;gap:0;padding-top:5vh;padding-bottom:4vh}.lg-hero{align-self:start;padding:0;text-align:center}.lg-hero h1{font-size:1.45rem;max-width:none}.lg-hero p{display:none}
.lg-mark,.lg-glow,.lg-ring{left:50%;top:31%;width:112vw;margin-left:-56vw}.lg-mark{opacity:.38}.lg-ring.r2{width:84vw;margin-left:-42vw}
@keyframes lgfloat{from{transform:translateY(-52%) rotate(-2deg)}to{transform:translateY(-48%) rotate(2deg)}}}
@media(prefers-reduced-motion:reduce){.lg-mark,.lg-ring,.lg-card{animation:none!important}}
.app-logo{object-fit:contain;display:block}.login-logo{width:88px;height:88px;margin:0 auto 18px}

/* =========================================
   EXTRA-LARGE ROTATING FOUNDATION LOGO
   ========================================= */

.login-logo-circle {
    position: relative;
    width: clamp(500px, 43vw, 680px);
    height: clamp(500px, 43vw, 680px);
    flex: 0 0 auto;
    margin: 0 0 48px 12px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    isolation: isolate;
    overflow: visible;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.10));
}

/* Logo fills the circular area */
.login-logo-watermark {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 0.48;
    filter: saturate(0.9);
    z-index: 1;
}

/* First rotating ring */
.login-logo-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.20) 30deg,
        rgba(255, 255, 255, 0.95) 75deg,
        transparent 115deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.20) 225deg,
        rgba(255, 255, 255, 0.85) 270deg,
        transparent 310deg,
        transparent 360deg
    );
    animation: foundation-ring-spin 12s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* Second rotating ring */
.login-logo-circle::after {
    content: "";
    position: absolute;
    inset: -16px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-top-color: rgba(255, 255, 255, 0.95);
    border-right-color: transparent;
    border-radius: 50%;
    animation: foundation-ring-spin 18s linear infinite reverse;
    z-index: 0;
    pointer-events: none;
}

/* Subtle glass-style overlay */
.login-logo-overlay {
    position: absolute;
    inset: 12px;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, 0.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04),
            transparent 60%,
            rgba(0, 0, 0, 0.10)
        );
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        inset 0 -18px 30px rgba(0, 0, 0, 0.07);
}

/* Smooth rotation */
@keyframes foundation-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Tablet */
@media (max-width: 1100px) {
    .login-logo-circle {
        width: 400px;
        height: 400px;
        margin-bottom: 35px;
    }
}

/* Smaller tablets */
@media (max-width: 850px) {
    .login-logo-circle {
        width: 300px;
        height: 300px;
        margin-bottom: 28px;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .login-logo-circle {
        width: 180px;
        height: 180px;
        margin: 0 auto 25px;
    }

    .login-logo-watermark {
        inset: 8px;
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
    }

    .login-logo-overlay {
        inset: 8px;
    }

    .login-logo-circle::after {
        inset: -8px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .login-logo-circle::before,
    .login-logo-circle::after {
        animation: none;
    }
}


/* =========================================
   LOGIN LAYOUT FIX
   Large logo on the left;
   foundation name above the card on the right
   ========================================= */

.lg-wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: 30px;
}

.lg-hero {
    align-self: center;
    justify-self: center;
    padding-bottom: 0;
    width: 100%;
    min-width: 0;
}

/* Preserve the original large logo size */
.login-logo-circle {
    width: clamp(500px, 43vw, 680px);
    height: clamp(500px, 43vw, 680px);
    margin: 0 auto;
    flex-shrink: 0;
}

.lg-login-panel {
    width: 100%;
    max-width: 460px;
    min-width: 0;
    justify-self: center;
    align-self: center;
    margin-top: -20px;
}

/* Foundation heading above the white login card */
.lg-login-panel .login-brand-text {
    color: #ffffff;
    text-align: center;
    margin: 0 0 22px;
    padding: 0 4px;
}

.lg-login-panel .login-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #d8c18a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.lg-login-panel .login-brand-text h1 {
    max-width: none;
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.4px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
    overflow-wrap: anywhere;
}

.lg-login-panel .login-title-line {
    display: block;
    width: 70px;
    height: 3px;
    margin: 13px auto;
    border-radius: 10px;
    background: #d8c18a;
}

.lg-login-panel .login-brand-text p {
    margin: 0;
    color: #c5dfd2;
    font-size: 14px;
    line-height: 1.5;
}

.lg-login-panel .login-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #e1eee7;
    font-size: 12px;
}

.lg-login-panel .login-trust-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(216, 193, 138, 0.7);
    border-radius: 50%;
    color: #e8d39d;
    font-weight: 700;
}

/* Keep the login card centred under the heading */
.lg-login-panel .lg-card {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    justify-self: center;
}

/* Medium desktop screens */
@media (max-width: 1100px) and (min-width: 901px) {
    .login-logo-circle {
        width: 500px;
        height: 500px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: 23px;
    }

    .lg-login-panel {
        margin-top: 0;
    }
}

/* Tablet and mobile */
@media (max-width: 900px) {
    .lg-wrap {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 0;
        padding-top: 25px;
        padding-bottom: 30px;
    }

    .lg-hero {
        width: 100%;
        overflow: visible;
    }

    .login-logo-circle {
        width: min(500px, 88vw);
        height: min(500px, 88vw);
        max-width: 100%;
    }

    .lg-login-panel {
        width: min(460px, 100%);
        margin: 12px auto 0;
        transform: none;
    }

    .lg-login-panel .login-brand-text {
        margin-bottom: 18px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: clamp(22px, 5vw, 28px);
    }

    .lg-login-panel .login-brand-text p {
        font-size: 13px;
    }

    .lg-login-panel .lg-card {
        max-width: 430px;
    }
}

@media (max-width: 480px) {
    .lg-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .login-logo-circle {
        width: 180px;
        height: 180px;
    }

    .lg-login-panel .login-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: 22px;
    }
}

/* =========================================
   FINAL RESPONSIVE FIX
   Desktop: reduce logo by approximately 20%
   Mobile: compact layout with smaller logo
   ========================================= */

/* Prevent horizontal scrolling */
html,
body.lg {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* DESKTOP: fit the full layout within the viewport */
@media (min-width: 901px) {
    body.lg {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: hidden;
    }

    .lg-wrap {
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: 18px clamp(18px, 3vw, 48px);
        gap: 22px;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
        align-items: center;
        overflow: hidden;
    }

    .lg-hero {
        min-width: 0;
        padding: 0;
        align-self: center;
        justify-self: center;
    }

    /* About 20% smaller than the previous desktop size */
    .login-logo-circle {
        width: clamp(400px, 34.4vw, 544px);
        height: clamp(400px, 34.4vw, 544px);
        max-width: 100%;
        margin: 0 auto;
    }

    .lg-login-panel {
        width: 100%;
        max-width: 460px;
        min-width: 0;
        margin: 0 auto;
        align-self: center;
        transform: none;
    }

    .lg-login-panel .login-brand-text {
        margin-bottom: 14px;
    }

    .lg-login-panel .login-eyebrow {
        margin-bottom: 6px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: clamp(21px, 1.8vw, 27px);
        line-height: 1.2;
    }

    .lg-login-panel .login-title-line {
        margin: 8px auto;
    }

    .lg-login-panel .login-brand-text p {
        font-size: 13px;
    }

    .lg-login-panel .login-trust {
        margin-top: 7px;
    }

    .lg-login-panel .lg-card {
        box-sizing: border-box;
        padding: 25px 28px 22px;
    }

    .lg-card h2 {
        font-size: 1.45rem;
    }

    .lg-card .sub {
        margin-bottom: 18px;
    }

    .lg-field {
        margin-bottom: 12px;
    }

    .lg-field input {
        height: 52px;
    }

    .lg-field label {
        top: 15px;
    }

    .lg-btn {
        height: 49px;
    }

    .lg-foot {
        margin-top: 12px;
    }
}

/* SHORT DESKTOP SCREENS: tighten vertical spacing */
@media (min-width: 901px) and (max-height: 800px) {
    .lg-wrap {
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 16px;
    }

    .login-logo-circle {
        width: min(34.4vw, 480px);
        height: min(34.4vw, 480px);
    }

    .lg-login-panel .login-brand-text {
        margin-bottom: 10px;
    }

    .lg-login-panel .login-trust {
        margin-top: 5px;
    }

    .lg-login-panel .lg-card {
        padding: 20px 26px 18px;
    }

    .lg-card .sub {
        margin-bottom: 14px;
    }

    .lg-field {
        margin-bottom: 10px;
    }

    .lg-field input {
        height: 48px;
        padding-top: 19px;
    }

    .lg-field label {
        top: 13px;
    }

    .lg-btn {
        height: 46px;
    }

    .lg-foot {
        margin-top: 9px;
    }
}

/* MOBILE AND TABLET: compact, vertically arranged layout */
@media (max-width: 900px) {
    body.lg {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .lg-wrap {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        justify-items: center;
        gap: 0;
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 14px 18px 20px;
        overflow: visible;
    }

    .lg-hero {
        width: 100%;
        min-width: 0;
        align-self: start;
        justify-self: center;
        padding: 0;
        text-align: center;
    }

    /* Smaller mobile logo */
    .login-logo-circle {
        width: clamp(105px, 23vw, 165px);
        height: clamp(105px, 23vw, 165px);
        max-width: 100%;
        margin: 0 auto 12px;
    }

    .login-logo-watermark,
    .login-logo-overlay {
        inset: 7px;
        width: calc(100% - 14px) !important;
        height: calc(100% - 14px) !important;
    }

    .login-logo-circle::after {
        inset: -6px;
    }

    .lg-login-panel {
        width: 100%;
        max-width: 460px;
        min-width: 0;
        margin: 0 auto;
        align-self: start;
        transform: none;
    }

    .lg-login-panel .login-brand-text {
        margin: 0 0 12px;
        padding: 0 3px;
    }

    .lg-login-panel .login-eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: clamp(19px, 4.8vw, 25px);
        line-height: 1.2;
    }

    .lg-login-panel .login-title-line {
        margin: 7px auto;
    }

    .lg-login-panel .login-brand-text p {
        font-size: 12px;
        line-height: 1.35;
    }

    .lg-login-panel .login-trust {
        margin-top: 7px;
        font-size: 11px;
    }

    .lg-login-panel .lg-card {
        box-sizing: border-box;
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        padding: 23px 22px 18px;
    }

    .lg-card h2 {
        font-size: 1.4rem;
    }

    .lg-card .sub {
        margin: 4px 0 17px;
        font-size: 13px;
    }

    .lg-field {
        margin-bottom: 12px;
    }

    .lg-field input {
        height: 50px;
    }

    .lg-field label {
        top: 14px;
    }

    .lg-btn {
        height: 48px;
    }

    .lg-foot {
        margin-top: 11px;
        font-size: 11px;
    }
}

/* SMALL PHONES: maximise the space available */
@media (max-width: 480px) {
    .lg-wrap {
        padding: 10px 14px 16px;
    }

    .login-logo-circle {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }

    .lg-login-panel .login-brand-text {
        margin-bottom: 10px;
    }

    .lg-login-panel .login-brand-text h1 {
        font-size: 20px;
    }

    .lg-login-panel .login-trust {
        margin-top: 6px;
    }

    .lg-login-panel .lg-card {
        padding: 20px 18px 16px;
        border-radius: 16px;
    }

    .lg-card h2 {
        font-size: 1.3rem;
    }

    .lg-card .sub {
        margin-bottom: 15px;
    }

    .lg-field {
        margin-bottom: 10px;
    }

    .lg-field input {
        height: 47px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .lg-field label {
        left: 18px;
        top: 13px;
    }

    .lg-btn {
        height: 46px;
        font-size: 0.95rem;
    }

    .lg-foot {
        margin-top: 10px;
        line-height: 1.4;
    }
}

/* Very short mobile screens: allow scrolling rather than clipping */
@media (max-width: 900px) and (max-height: 650px) {
    .lg-wrap {
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .login-logo-circle {
        width: 80px;
        height: 80px;
        margin-bottom: 8px;
    }

    .lg-login-panel .login-brand-text {
        margin-bottom: 8px;
    }

    .lg-login-panel .lg-card {
        padding-top: 17px;
        padding-bottom: 14px;
    }

    .lg-card .sub {
        margin-bottom: 12px;
    }

    .lg-field {
        margin-bottom: 8px;
    }
}