@CHARSET "UTF-8";

/*
Theme Name: Geiger Enterprises (v2)
*/

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

:root {
    --color-geiger      : #1e5d39;
    --color-geiger-deep : #16472c;
    --color-geiger-mid  : #205f3b;
    --color-ink         : #585858;
    --color-paper       : #fff;
    --color-mist        : #ededed;
    --color-canvas      : #f3f5f2;
    --color-card        : #e9e9e9;
    --color-line        : #bcbcbc;
    --color-hairline    : #d8ddd8;
    --font-sans         : "Open Sans", Arial, Helvetica, sans-serif;
    --breakpoint-desk   : 980px;
    --radius-sm         : 8px;
    --radius-md         : 12px;
    --radius-lg         : 16px;
    --radius-xl         : 24px;
}

button:not(:disabled),
[role="button"]:not(:disabled) {
    cursor : pointer;
}

html {
    overflow-x              : clip;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

body {
    margin      : 0;
    background  : var(--color-canvas);
    font-family : var(--font-sans);
    font-size   : 16px;
    font-weight : 400;
    line-height : 1.5;
    color       : var(--color-ink);
}

b,
strong {
    font-weight : 800;
}

h1,
h2,
h3,
h4 {
    font-weight : 800;
    color       : var(--color-geiger);
    text-wrap   : balance;
}

h1 {
    margin         : 0 0 0.85em;
    font-size      : 1.35rem;
    line-height    : 1.2;
    letter-spacing : 0.03em;
    text-transform : uppercase;
}

h2 {
    margin      : 0 0 0.35em;
    font-size   : 1.05rem;
    line-height : 1.25;
    color       : var(--color-ink);
}

h3 {
    margin      : 0 0 0.35em;
    font-size   : 0.95rem;
    line-height : 1.25;
    color       : var(--color-ink);
}

p {
    margin    : 0 0 0.75em;
    text-wrap : pretty;
}

a {
    color           : var(--color-geiger);
    text-decoration : none;
}

a:hover {
    text-decoration : underline;
}

img,
video {
    max-width : 100%;
    height    : auto;
}

.wrap {
    margin-inline : auto;
    width         : min(100% - 32px, 980px);
}

.grey {
    color : var(--color-ink);
}

.green {
    color : var(--color-geiger);
}

.required {
    font-weight : 800;
    color       : var(--color-geiger);
}

/* ---------- Lists ---------- */

ul.arrow,
ul.arrow-circle,
ul.horizontal,
ul.image-list,
ul.doc-list,
.footer-nav,
#menu-primary-navigation {
    list-style : none;
    margin     : 0;
    padding    : 0;
}

ul.arrow li {
    margin-bottom   : 0.55em;
    padding-left    : 26px;
    background      : url("./images/bullet-circle-02.svg") no-repeat 0 0.2em;
    background-size : 18px 18px;
}

ul.arrow li:last-child {
    margin-bottom : 0;
}

ul.arrow-circle > li {
    margin-bottom   : 1.35em;
    min-height      : 0;
    padding-left    : 26px;
    background      : url("./images/bullet-circle-02.svg") no-repeat 0 0.2em;
    background-size : 18px 18px;
}

ul.arrow-circle > li > h2:first-child {
    line-height : inherit;
}

ul.arrow-circle li ul {
    list-style : disc;
    margin     : 0.5em 0 0 1.25em;
    padding    : 0;
}

ul.arrow-circle li ul li {
    margin-bottom : 0.35em;
    min-height    : 0;
    padding-left  : 0;
    background    : none;
}

ul.image-list {
    flex-wrap : wrap;
    gap       : 12px;
    display   : flex;
    margin    : 0 0 1.5em;
}

ul.image-list img {
    display : block;
    border  : 2px solid var(--color-geiger);
}

/* ---------- Shell ---------- */

#page {
    flex-direction : column;
    display        : flex;
    min-height     : 100dvh;
    background     : var(--color-canvas);
}

#main {
    flex : 1 0 auto;
}

#branding {
    position : sticky;
    z-index  : 40;
    top      : 0;
}

.files-download-bar {
    background     : #1a1a1a;
    font-size      : 14px;
    font-weight    : 700;
    letter-spacing : 0.02em;
    color          : #fff;
    text-align     : center;
}

.files-download-bar a {
    display         : block;
    padding         : 10px 16px;
    color           : #fff;
    text-decoration : none;
}

.files-download-bar a:hover {
    background : #333;
    color      : #fff;
}

.branding-top {
    border-bottom : 1px solid color-mix(in srgb, var(--color-geiger) 14%, transparent);
    background    : var(--color-paper);
}

.branding-top-inner {
    align-items     : center;
    justify-content : space-between;
    gap             : 16px;
    display         : flex;
    min-height      : 64px;
    padding-block   : 8px;
    padding-top     : calc(8px + env(safe-area-inset-top));
}

#site-title {
    margin      : 0;
    font-size   : 0;
    line-height : 0;
}

#site-title a {
    display : block;
}

#site-title img {
    display : block;
    width   : auto;
    height  : 52px;
}

#site-description {
    display : none;
}

#header-contact {
    display : none;
}

.navbar-buttons {
    align-items : center;
    gap         : 4px;
    display     : flex;
    margin-left : auto;
}

.header-call {
    align-items     : center;
    justify-content : center;
    display         : inline-flex;
    width           : 44px;
    height          : 44px;
    border-radius   : var(--radius-md);
    color           : var(--color-geiger);
}

.header-call:hover {
    background      : color-mix(in srgb, var(--color-geiger) 8%, transparent);
    text-decoration : none;
}

.navbar-toggler {
    position        : relative;
    z-index         : 60;
    flex-direction  : column;
    justify-content : center;
    display         : flex;
    width           : 44px;
    height          : 44px;
    border          : 0;
    padding         : 0;
    background      : transparent;
    --line          : var(--color-geiger);
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    display       : block;
    transition    : transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    top 250ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 250ms cubic-bezier(0.22, 1, 0.36, 1);
    width         : 22px;
    height        : 3px;
    border-radius : 2px;
    background    : var(--line);
}

.navbar-toggler-icon {
    position : relative;
    margin   : 0 auto;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content  : "";
    position : absolute;
    left     : 0;
}

.navbar-toggler-icon::before {
    top : -7px;
}

.navbar-toggler-icon::after {
    bottom : -7px;
}

.navbar-toggler[aria-expanded="true"] {
    --line : var(--color-paper);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background : transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top       : 0;
    transform : rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom    : 0;
    transform : rotate(-45deg);
}

#access {
    position   : fixed;
    z-index    : 50;
    top        : 0;
    right      : 0;
    opacity    : 0;
    visibility : hidden;
    transform  : translateX(100%);
    overflow   : auto;
    transition : transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 250ms;
    width      : min(360px, 100%);
    height     : 100dvh;
    padding    : 88px 0 32px;
    background : var(--color-geiger);
    color      : var(--color-paper);
}

#access[aria-hidden="false"] {
    opacity    : 1;
    visibility : visible;
    transform  : translateX(0);
    transition : transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.nav-inner {
    width : 100%;
}

.menu-backdrop {
    position                : fixed;
    z-index                 : 45;
    inset                   : 0;
    border                  : 0;
    padding                 : 0;
    background              : color-mix(in srgb, var(--color-geiger) 18%, transparent);
    backdrop-filter         : blur(4px);
    -webkit-backdrop-filter : blur(4px);
}

body.menu-open {
    overflow : hidden;
}

#menu-primary-navigation {
    font-weight    : 800;
    letter-spacing : 0.05em;
    text-transform : uppercase;
}

#menu-primary-navigation > li > a {
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    display         : flex;
    min-height      : 48px;
    padding         : 12px 20px;
    color           : var(--color-paper);
    text-decoration : none;
}

#menu-primary-navigation > li > a:hover,
#menu-primary-navigation > li > a:focus-visible,
#menu-primary-navigation > li.current > a {
    background      : var(--color-card);
    color           : var(--color-geiger);
    text-decoration : none;
}

.nav-phone {
    margin         : 16px 20px 0;
    border-top     : 1px solid color-mix(in srgb, var(--color-paper) 22%, transparent);
    padding-top    : 16px;
    font-weight    : 800;
    color          : var(--color-paper);
    text-transform : uppercase;
}

.nav-phone a {
    color : var(--color-paper);
}

.sub-menu {
    display    : none;
    padding    : 0;
    background : var(--color-card);
}

.sub-menu.is-open {
    display : block;
}

.sub-menu ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
}

.sub-menu a {
    align-items     : center;
    display         : flex;
    min-height      : 48px;
    padding         : 12px 20px;
    font-size       : 16px;
    font-weight     : 800;
    letter-spacing  : 0.05em;
    color           : var(--color-geiger);
    text-decoration : none;
    text-transform  : uppercase;
}

.sub-menu a:hover,
.sub-menu a:focus-visible,
.sub-menu li.current > a {
    background      : var(--color-geiger);
    color           : var(--color-paper);
    text-decoration : none;
}

.caret {
    flex-shrink        : 0;
    transition         : transform 150ms ease;
    margin-left        : auto;
    width              : 0;
    height             : 0;
    border-inline      : 5px solid transparent;
    border-block-start : 6px solid currentColor;
}

.caret.is-open {
    transform : rotate(180deg);
}

.site-hero {
    position   : relative;
    min-height : 200px;
    padding    : 24px 16px 28px;
    background : linear-gradient(180deg, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0.88) 72%, var(--color-paper) 100%),
    url("./images/bg1.jpg") 50% 0 / 1800px 600px no-repeat;
    color      : var(--color-ink);
}

.site-hero-inner {
    max-width : 28rem;
}

.hero-kicker {
    margin         : 0 0 8px;
    font-size      : 0.75rem;
    font-weight    : 700;
    letter-spacing : 0.14em;
    color          : var(--color-geiger);
    text-transform : uppercase;
}

.site-hero h1 {
    margin         : 0 0 10px;
    font-size      : 1.6rem;
    font-weight    : 800;
    font-style     : italic;
    line-height    : 1.12;
    letter-spacing : 0;
    color          : var(--color-ink);
    text-transform : uppercase;
}

.site-hero p {
    margin      : 0 0 18px;
    font-size   : 1rem;
    line-height : 1.5;
    color       : var(--color-ink);
}

.hero-cta {
    align-items     : center;
    justify-content : center;
    display         : inline-flex;
    min-height      : 44px;
    border-radius   : 999px;
    padding         : 0 18px;
    background      : var(--color-geiger);
    font-size       : 0.8125rem;
    font-weight     : 800;
    letter-spacing  : 0.04em;
    color           : var(--color-paper);
    text-transform  : uppercase;
}

.hero-cta:hover {
    background      : var(--color-geiger-deep);
    text-decoration : none;
}

/* ---------- Content ---------- */

#content {
    padding : 20px 0 40px;
}

.entry-content {
    border        : 1px solid color-mix(in srgb, var(--color-geiger) 10%, transparent);
    border-radius : var(--radius-lg);
    padding       : 20px 18px 24px;
    background    : var(--color-card);
    box-shadow    : 0 10px 28px color-mix(in srgb, var(--color-geiger) 6%, transparent);
}

#page.is-home .entry-content {
    border        : 0;
    border-radius : 0;
    padding       : 8px 0 16px;
    background    : transparent;
    box-shadow    : none;
}

ul.home-cols {
    grid-template-columns : 1fr;
    gap                   : 14px;
    display               : grid;
}

ul.home-cols > li {
    border        : 1px solid color-mix(in srgb, var(--color-geiger) 12%, transparent);
    border-radius : var(--radius-xl);
    padding       : 20px 20px 18px;
    background    : var(--color-card);
    box-shadow    : 0 8px 24px color-mix(in srgb, var(--color-geiger) 7%, transparent);
}

.title-fuel-polishing,
.title-fueling-services,
.title-fuel-markets {
    margin         : 0 0 0.75em;
    border-bottom  : 2px solid var(--color-geiger);
    padding-bottom : 0.55em;
    font-size      : 1.05rem;
    font-weight    : 800;
    letter-spacing : 0.04em;
    color          : var(--color-geiger);
    text-transform : uppercase;
}

.about-partners,
.two-columns {
    gap     : 28px;
    display : grid;
}

.dashed-vertical {
    border-top  : 1px solid var(--color-hairline);
    padding-top : 20px;
}

.media-frame {
    margin-top : 8px;
    width      : 100%;
    max-width  : 100%;
}

.media-frame video {
    display       : block;
    width         : 100%;
    border-radius : var(--radius-md);
    background    : #111;
}

ul.horizontal.cols-4 {
    grid-template-columns : 1fr;
    gap                   : 12px;
    display               : grid;
    margin-top            : 1.25em;
}

ul.horizontal.cols-4 > li {
    border        : 1px solid var(--color-hairline);
    border-radius : var(--radius-lg);
    padding       : 16px 18px;
    background    : var(--color-canvas);
}

ul.horizontal.cols-4 h3 {
    margin-bottom  : 0.75em;
    font-size      : 1rem;
    color          : var(--color-geiger);
    text-transform : uppercase;
}

.doc-list li {
    margin-bottom : 1.5em;
}

.doc-list img {
    display    : block;
    margin-top : 8px;
    max-width  : min(100%, 320px);
    border     : 1px solid var(--color-hairline);
}

.thumb-link {
    display    : block;
    border     : 0;
    padding    : 0;
    background : none;
}

.lightbox {
    position        : fixed;
    z-index         : 80;
    inset           : 0;
    align-items     : center;
    justify-content : center;
    display         : flex;
    border          : 0;
    padding         : 16px;
    background      : color-mix(in srgb, var(--color-geiger-deep) 78%, transparent);
}

.lightbox img {
    max-width  : min(960px, 100%);
    max-height : 90dvh;
    border     : 4px solid var(--color-paper);
    box-shadow : 0 20px 50px rgb(0 0 0 / 0.35);
}

/* Forms */

.service-form {
    gap       : 16px;
    display   : grid;
    max-width : 720px;
}

.form-note {
    margin-bottom : 4px;
    font-style    : italic;
}

.field-block {
    gap     : 6px;
    display : grid;
}

.field-block label,
.sub-label {
    display   : block;
    font-size : 0.95rem;
}

.sub-label {
    margin-top : 4px;
    font-size  : 0.8rem;
    color      : color-mix(in srgb, var(--color-ink) 80%, transparent);
}

.field-row {
    gap     : 12px;
    display : grid;
}

.service-form input[type="text"],
.service-form input[type="email"],
.service-form input[type="tel"],
.service-form select,
.service-form textarea {
    width         : 100%;
    min-height    : 44px;
    border        : 2px solid var(--color-line);
    border-radius : var(--radius-sm);
    padding       : 8px 10px;
    background    : var(--color-paper);
    font-family   : var(--font-sans);
    font-size     : 16px;
    color         : var(--color-ink);
}

.service-form textarea {
    min-height : 160px;
    resize     : vertical;
}

.service-form input:focus,
.service-form select:focus,
.service-form textarea:focus {
    outline        : 2px solid color-mix(in srgb, var(--color-geiger) 45%, transparent);
    outline-offset : 1px;
    border-color   : var(--color-geiger);
}

.form-error {
    font-size : 0.85rem;
    color     : #8a1f1f;
}

.btn-submit,
:is(button, input)[type="submit"] {
    align-items     : center;
    justify-content : center;
    display         : inline-flex;
    width           : 100%;
    min-height      : 48px;
    border          : 1px solid var(--color-geiger);
    border-radius   : var(--radius-sm);
    padding         : 8px 18px 8px 36px;
    background      : var(--color-geiger) url("./images/arrow_right.jpg") no-repeat 12px 50%;
    font-family     : var(--font-sans);
    font-size       : 16px;
    font-weight     : 800;
    color           : var(--color-paper);
}

.btn-submit:hover,
:is(button, input)[type="submit"]:hover {
    background-color : var(--color-geiger-deep);
}

.thank-you {
    padding : 8px 0 16px;
}

/* Footer */

#colophon {
    margin-top     : auto;
    border-top     : 1px solid var(--color-geiger);
    background     : var(--color-card);
    text-align     : center;
    text-transform : uppercase;
}

#colophon-inner {
    padding     : 22px 0 16px;
    font-size   : 16px;
    line-height : 1.8;
}

.footer-nav {
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 4px 0;
    display         : flex;
}

.footer-nav li {
    display : inline;
}

.footer-nav li:not(:first-child)::before {
    content : "\00a0\2022\00a0";
    color   : var(--color-ink);
}

.footer-nav a {
    color : var(--color-ink);
}

#la-design-studio {
    padding        : 14px 0 calc(14px + env(safe-area-inset-bottom));
    background     : var(--color-geiger);
    font-size      : 14px;
    line-height    : 1.4;
    color          : var(--color-paper);
    text-align     : center;
    text-transform : none;
}

#la-design-studio a {
    color : var(--color-paper);
}

.mejs-container {
    inline-size : 100% !important;
}

.wp-video,
.wp-video video {
    inline-size : 100% !important;
    block-size  : auto !important;
}

/* ---------- Tablet+ ---------- */

@media (min-width : 720px) {
    .field-row.split {
        grid-template-columns : 1fr 1fr;
    }

    ul.home-cols {
        grid-template-columns : repeat(2, 1fr);
    }

    .about-partners,
    .two-columns {
        grid-template-columns : 1.4fr 0.9fr;
        gap                   : 36px;
    }

    .dashed-vertical {
        border-top   : 0;
        border-left  : 1px solid var(--color-hairline);
        padding-top  : 0;
        padding-left : 28px;
    }

    ul.horizontal.cols-4 {
        grid-template-columns : repeat(2, 1fr);
    }
}

/* ---------- Desktop ---------- */

@media (min-width : 980px) {
    body,
    #page {
        background : var(--color-paper) url("./images/bg2.jpg") no-repeat 50% 0;
    }

    #page.is-home {
        background-image : url("./images/bg1.jpg");
    }

    h1 {
        font-size : 18px;
    }

    .site-hero {
        display : none;
    }

    #branding {
        position   : relative;
        z-index    : 40;
        height     : 442px;
        background : transparent;
    }

    .branding-top {
        border     : 0;
        background : transparent;
    }

    .branding-top-inner {
        position   : relative;
        display    : block;
        width      : 980px;
        height     : 442px;
        min-height : 0;
        padding    : 0;
    }

    #site-title {
        position : absolute;
        top      : 22px;
        left     : 0;
        margin   : 0;
    }

    #site-title img {
        width     : 179px;
        max-width : none;
        height    : 126px;
    }

    #site-description {
        position       : absolute;
        top            : 255px;
        left           : 32px;
        display        : block;
        margin         : 0;
        font-size      : 35px;
        font-weight    : 800;
        font-style     : italic;
        line-height    : 31px;
        white-space    : pre;
        color          : var(--color-ink);
        text-transform : uppercase;
    }

    #header-contact {
        position       : absolute;
        top            : 22px;
        right          : 0;
        display        : block;
        font-size      : 30px;
        font-weight    : 800;
        line-height    : 1.2;
        text-align     : right;
        text-transform : uppercase;
    }

    #header-contact a {
        color           : var(--color-geiger);
        text-decoration : none;
    }

    #header-contact a:hover {
        text-decoration : underline;
    }

    #header-contact .email a {
        display      : inline-block;
        min-height   : 18px;
        padding-left : 28px;
        background   : url("./images/icon_email.png") no-repeat 0 50%;
        font-size    : 20px;
        line-height  : 1.2;
    }

    .navbar-buttons {
        display : none;
    }

    #access,
    #access[aria-hidden="false"] {
        position    : absolute;
        top         : auto;
        bottom      : 224px;
        left        : 50%;
        right       : auto;
        opacity     : 1;
        visibility  : visible;
        transform   : none;
        overflow    : visible;
        transition  : none;
        margin-left : -490px;
        width       : 980px;
        height      : auto;
        padding     : 0;
        background  : transparent;
    }

    .nav-inner {
        margin : 0;
        width  : 100%;
    }

    #menu-primary-navigation {
        flex-wrap       : nowrap;
        justify-content : center;
        display         : flex;
        width           : 100%;
        border-radius   : 8px;
        background      : var(--color-geiger);
    }

    #menu-primary-navigation > li {
        position : relative;
        flex     : 0 0 auto;
    }

    #menu-primary-navigation > li > a {
        min-height     : 48px;
        padding        : 0 16px;
        background     : transparent;
        font-size      : 13px;
        letter-spacing : 0.04em;
        color          : var(--color-paper);
    }

    #menu-primary-navigation > li > a:hover,
    #menu-primary-navigation > li > a:focus-visible,
    #menu-primary-navigation > li.current > a {
        background : var(--color-card);
        color      : var(--color-geiger);
    }

    .caret {
        margin-left              : 8px;
        border-inline-width      : 4px;
        border-block-start-width : 5px;
    }

    .nav-phone,
    .menu-backdrop {
        display : none;
    }

    .sub-menu,
    .sub-menu.is-open {
        position   : absolute;
        z-index    : 20;
        top        : 100%;
        left       : 0;
        display    : none;
        min-width  : 100%;
        padding    : 0;
        background : var(--color-card);
    }

    #menu-primary-navigation > li:hover > .sub-menu,
    #menu-primary-navigation > li:focus-within > .sub-menu {
        display : block;
    }

    .sub-menu a {
        min-height     : 48px;
        padding        : 0 16px;
        font-size      : 13px;
        letter-spacing : 0.04em;
        white-space    : nowrap;
    }

    .sub-menu a:hover,
    .sub-menu a:focus-visible,
    .sub-menu li.current > a {
        background      : var(--color-geiger);
        color           : var(--color-paper);
        text-decoration : none;
    }

    #content {
        padding : 24px 0 56px;
    }

    #page.is-home #content {
        padding-top : 82px;
    }

    .entry-content {
        border-radius : var(--radius-xl);
        padding       : 32px 36px 36px;
        background    : var(--color-card);
    }

    #page.is-home .entry-content {
        border     : 0;
        padding    : 0;
        background : transparent;
        box-shadow : none;
    }

    ul.home-cols {
        grid-template-columns : repeat(3, 1fr);
        gap                   : 20px;
    }

    ul.home-cols > li {
        padding    : 24px;
        background : var(--color-card);
    }

    .title-fuel-polishing,
    .title-fueling-services,
    .title-fuel-markets {
        font-size : 1.15rem;
    }

    .two-columns {
        grid-template-columns : 1fr 1fr;
    }

    ul.horizontal.cols-4 {
        grid-template-columns : repeat(4, 1fr);
        gap                   : 16px;
    }

    ul.horizontal.cols-4 > li {
        background : color-mix(in srgb, var(--color-card) 70%, var(--color-paper));
    }

    .btn-submit,
    :is(button, input)[type="submit"] {
        width     : auto;
        min-width : 160px;
    }

    #colophon-inner {
        padding : 28px 0 20px;
    }

    #la-design-studio {
        padding : 16px 0;
    }
}

@media (prefers-reduced-motion : reduce) {
    #access,
    .navbar-toggler-icon,
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .caret {
        transition : none;
    }
}