/* ==========================================================================
   YAR Energy – site styles
   Layered on top of Bootstrap 5.3 (no build step). Look and feel: dark teal-black
   sections, light grey surfaces, sharp corners, and brand orange as the accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Neutrals */
    --yar-dark: #001213;           /* deep teal-black: header, dark sections, headings       */
    --yar-light: #fafafa;
    --yar-gray: #f3f4f6;           /* light section background                               */
    --yar-muted: #a3b2b3;          /* secondary text on dark backgrounds                     */
    --yar-muted-text: #566566;     /* secondary text on light backgrounds (AA contrast)      */
    --yar-line: rgba(0, 18, 19, .12);

    /* Accents */
    --yar-orange: #F06A1A;         /* brand orange: dots, arrows, links, highlights          */
    --yar-orange-strong: #C5520D;  /* deeper orange behind white text (buttons), 4.6:1       */
    --yar-orange-text: #B84A0C;    /* darker orange for small text on light backgrounds      */
    --yar-green: #00b75f;          /* secondary accent (used sparingly: service card, success) */

    /* Motion + layout */
    --yar-ease: cubic-bezier(.2, 1, .3, 1);
    --yar-hero-overlap: 7rem;      /* how far the hero card hangs into the next section      */
    --yar-card-overlap: 21rem;     /* how far the contact card hangs into the footer         */

    /* Bootstrap theme overrides */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--yar-dark);
    --bs-body-bg: #fff;
    --bs-body-line-height: 1.625;
    --bs-primary: var(--yar-orange);
    --bs-primary-rgb: 240, 106, 26;
    --bs-success: var(--yar-green);
    --bs-link-color: var(--yar-orange-text);
    --bs-link-color-rgb: 184, 74, 12;
    --bs-link-hover-color: #8A3607;
    --bs-link-hover-color-rgb: 138, 54, 7;
    --bs-focus-ring-color: rgba(240, 106, 26, .3);
}

html {
    scroll-padding-top: 5rem; /* keep anchored sections clear of the sticky header */
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    color: var(--yar-dark);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 3px solid var(--yar-orange);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Shared components
   -------------------------------------------------------------------------- */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -.2em;
}

.skip-link:focus {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: #fff;
    color: var(--yar-dark);
    font-weight: 600;
}

/* Logo colours: see templates/partials/logo.php */
.logo-accent { fill: var(--yar-orange); }
.logo-base   { fill: currentColor; }

/* Buttons. Hovering swaps the label: the text slides up and out while a copy (from data-text)
   slides in from below. Square corners, no colour change. */
.yar-btn {
    --btn-h: 42px;
    position: relative;
    z-index: 1;
    display: inline-block;
    height: var(--btn-h);
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: var(--btn-h);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
}

.yar-btn--lg {
    --btn-h: 50px;
    padding: 0 30px;
    font-size: 15px;
}

.yar-btn > span {
    display: inline-block;
    height: var(--btn-h);
    line-height: var(--btn-h);
    transition: transform .65s var(--yar-ease), opacity .2s;
}

.yar-btn::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 2;
    line-height: var(--btn-h);
    opacity: 0;
    pointer-events: none;
    transform: scale(.95) translateY(12px);
    transition: transform .65s var(--yar-ease), opacity .2s;
}

.yar-btn:hover > span,
.yar-btn:focus-visible > span {
    opacity: 0;
    transform: scale(.95) translateY(-12px);
}

.yar-btn:hover::after,
.yar-btn:focus-visible::after {
    opacity: 1;
    transform: none;
}

.yar-btn:disabled {
    cursor: wait;
    opacity: .75;
}

.yar-btn--white  { background: #fff; color: var(--yar-dark); font-weight: 600; }
.yar-btn--dark   { background: var(--yar-dark); color: #fff; }
/* White text on orange. The brand orange itself (#F06A1A) is only 3.1:1 with white, too weak for a 15px label,
   so the button uses a slightly deeper orange (--yar-orange-strong, 4.6:1, WCAG AA). */
.yar-btn--orange { background: var(--yar-orange-strong); color: #fff; font-weight: 600; }

/* Text link with an animated underline: the line wipes out to the right, then draws in from the left. */
.line-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
}

.line-link::before,
.line-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 0;
    height: 1px;
    pointer-events: none;
    transition: all .4s var(--yar-ease);
}

.line-link::before { z-index: -2; width: 100%; background: rgba(240, 106, 26, .4); }
.line-link::after  { background: var(--yar-orange); }
.line-link:hover::before { width: 0; }
.line-link:hover::after  { width: 100%; left: 0; right: auto; transition-delay: .3s; }

/* Small label above a section title; the heading gets an orange full stop. */
.kicker {
    margin-bottom: .5rem;
    color: var(--yar-muted-text);
    font-size: .95rem;
    font-weight: 500;
}

.kicker--light { color: #fff; }
.kicker--dim   { color: #bbb; }

.title-dot::after {
    content: ".";
    color: var(--yar-orange);
}

.section {
    padding-block: clamp(4rem, 8vw, 6.25rem);
}

.section--dark { background: var(--yar-dark); color: #fff; }

.section-head {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-title {
    margin-bottom: 1.25rem;
    color: #000;
    font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.section-head .section-title { margin-bottom: 0; }
.section-title--light { color: #fff; }

/* Scroll reveal: only active when JS is available (the "js" class is set by assets/js/head.js). */
.js .has-anim {
    opacity: 0;
    transform: translateY(25px) scale(.99);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

.js .has-anim.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger siblings a little. */
.js .row > :nth-child(2) > .has-anim { transition-delay: .1s; }
.js .row > :nth-child(3) > .has-anim { transition-delay: .2s; }
.js .row > :nth-child(4) > .has-anim { transition-delay: .3s; }
.js .pills li:nth-child(2) { transition-delay: .08s; }
.js .pills li:nth-child(3) { transition-delay: .16s; }

/* Headline whose words rise into place one by one. */
.rise-word {
    display: inline-block;
    padding-bottom: .1em;
    vertical-align: top;
    overflow: hidden;
}

.rise-word > span { display: inline-block; }

.js .rise-words .rise-word > span {
    transform: translateY(110%);
    transition: transform .9s var(--yar-ease);
}

.js .rise-words.is-visible .rise-word > span { transform: none; }
.js .rise-words .rise-word:nth-child(2) > span  { transition-delay: .06s; }
.js .rise-words .rise-word:nth-child(3) > span  { transition-delay: .12s; }
.js .rise-words .rise-word:nth-child(4) > span  { transition-delay: .18s; }
.js .rise-words .rise-word:nth-child(5) > span  { transition-delay: .24s; }
.js .rise-words .rise-word:nth-child(6) > span  { transition-delay: .30s; }
.js .rise-words .rise-word:nth-child(7) > span  { transition-delay: .36s; }
.js .rise-words .rise-word:nth-child(8) > span  { transition-delay: .42s; }
.js .rise-words .rise-word:nth-child(n+9) > span { transition-delay: .48s; }

/* --------------------------------------------------------------------------
   3. Header and menus
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--yar-dark);
    color: #fff;
    transition: transform .5s var(--yar-ease);
    will-change: transform;
}

/* Scrolling down hides the header, scrolling up brings it back (see site.js). */
.site-header.is-hidden { transform: translateY(-100%); }

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.25rem;
    transition: padding .3s ease;
}

.site-header.is-pinned .site-nav { padding-block: .5rem; }

.brand-logo {
    display: block;
    height: 2.35rem;
    width: auto;
    color: #fff;
}

.site-menu {
    margin: 0 auto;
    padding: 0;
    align-items: center;
    list-style: none;
}

.site-menu a {
    display: block;
    padding: 1.25rem 1.375rem;
    color: #eee;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s;
}

.site-menu a.is-active { color: var(--yar-orange); font-weight: 600; }

/* Hover: the hovered link turns white while its siblings dim. */
.site-menu:hover a { color: rgba(255, 255, 255, .45); }
.site-menu a:hover,
.site-menu a:focus-visible { color: #fff; }

.site-actions {
    align-items: center;
    gap: 1rem;
}

.lang-dropdown { position: relative; }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: 1.25rem .5rem;
    border: 0;
    background: none;
    color: #eee;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
}

.lang-toggle:hover,
.lang-dropdown:focus-within .lang-toggle { color: #fff; }
.lang-toggle .icon { width: 1rem; height: 1rem; transition: transform .2s; }
.lang-dropdown:hover .lang-toggle .icon { transform: rotate(180deg); }

/* White dropdown panel with a small arrow, opens on hover or keyboard focus. */
.lang-menu {
    position: absolute;
    top: calc(100% - .35rem);
    right: 0;
    z-index: 10;
    min-width: 10rem;
    margin: 0;
    padding: .5rem 0;
    background: #fff;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.lang-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 1.1rem;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: #fff;
}

.lang-dropdown:hover .lang-menu,
.lang-dropdown:focus-within .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lang-menu a {
    display: block;
    padding: .55rem 1.25rem;
    color: var(--yar-dark);
    font-size: .9rem;
    text-decoration: none;
}

.lang-menu a:hover { background: var(--yar-gray); color: var(--yar-orange-text); }
.lang-menu a[aria-current] { font-weight: 700; }

.menu-toggle {
    padding: .25rem;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: opacity .2s;
}

.menu-toggle:hover { opacity: .7; }
.menu-toggle .icon { width: 1.9rem; height: 1.9rem; }

/* Mobile drawer (Bootstrap offcanvas) */
.nav-drawer {
    --bs-offcanvas-width: min(22rem, 88vw);
    --bs-offcanvas-bg: var(--yar-dark);
    --bs-offcanvas-color: #fff;
    padding: 1.25rem 1.5rem 1.5rem;
}

.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.nav-drawer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-drawer-menu a {
    display: block;
    padding: .95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #eee;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-drawer-menu a:hover { color: var(--yar-orange); }

.nav-drawer-foot {
    display: flex;
    gap: 1.25rem;
    margin-top: auto;
}

.nav-drawer-foot a {
    color: var(--yar-muted);
    font-weight: 700;
    text-decoration: none;
}

.nav-drawer-foot a.active { color: var(--yar-orange); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem) 0;
    background:
        radial-gradient(44rem 24rem at 90% 32%, rgba(240, 106, 26, .13), transparent 70%),
        var(--yar-dark);
    color: #fff;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The logo's swoosh, enlarged and faded as a background motif */
.hero-swoosh {
    position: absolute;
    left: -5%;
    bottom: 10%;
    width: 110%;
    height: auto;
    fill: var(--yar-orange);
    opacity: .09;
}

.hero-title {
    margin-bottom: 2rem;
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.9rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.hero-actions .line-link { color: #fff; }

.hero-lead {
    margin: 0;
    color: #fff;
    font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
    line-height: 1.6;
}

/* Photo card: the photo under a dark gradient, with logo, facts and contact at the bottom. It is styled like the
   contact card and hangs into the section below, the way the contact card hangs over the footer. */
.hero-card {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(26rem, 36vw, 32rem);
    margin-top: clamp(3rem, 6vw, 5rem);
    margin-bottom: calc(var(--yar-hero-overlap) * -1);
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--yar-dark);
    color: #fff;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}

/* Photo: slow zoom and drift, same as the contact card (see @keyframes photo-drift). */
.hero-card > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    transform-origin: 40% 50%;
    animation: photo-drift 30s ease-in-out infinite alternate;
    will-change: transform;
}

/* Gradient over the photo: darkest at the bottom, where the text is, plus a soft orange glow. */
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(34rem 16rem at 100% 100%, rgba(240, 106, 26, .22), transparent 70%),
        linear-gradient(0deg, rgba(0, 18, 19, .94) 0%, rgba(0, 18, 19, .78) 30%, rgba(0, 18, 19, .2) 60%, rgba(0, 18, 19, 0) 100%),
        linear-gradient(90deg, rgba(0, 18, 19, .55) 0%, rgba(0, 18, 19, 0) 55%);
    pointer-events: none;
}

.hero-card-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 2rem 3.5rem;
    width: 100%;
    padding: 2rem 2.5rem;
}

.hero-card-logo {
    display: block;
    width: 9.5rem;
    height: auto;
    color: #fff;
}

.hero-card-brand p {
    margin: .9rem 0 0;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .03em;
}

.hero-card-facts {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-around;
    gap: 1rem 2rem;
    margin: 0;
    /* Keeps the small labels readable where the facts sit over the brighter part of the photo (tablet layout). */
    text-shadow: 0 1px 10px rgba(0, 18, 19, .7);
}

.hero-card-facts dt {
    color: var(--yar-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hero-card-facts dd {
    margin: .15rem 0 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .hero-card-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 7rem 1.75rem 1.75rem; }
    .hero-card-facts { grid-template-columns: 1fr; justify-content: start; }
}

/* Tablet: facts on top, logo below. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-card-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "facts"
            "brand";
        padding-top: 2rem;
    }

    .hero-card-brand { grid-area: brand; }
    .hero-card-facts { grid-area: facts; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }

    /* The facts sit higher up the photo here, so the dark part of the gradient reaches further up. */
    .hero-card::after {
        background:
            radial-gradient(34rem 16rem at 100% 100%, rgba(240, 106, 26, .22), transparent 70%),
            linear-gradient(0deg, rgba(0, 18, 19, .94) 0%, rgba(0, 18, 19, .84) 45%, rgba(0, 18, 19, .5) 72%, rgba(0, 18, 19, 0) 100%),
            linear-gradient(90deg, rgba(0, 18, 19, .55) 0%, rgba(0, 18, 19, 0) 55%);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-card-facts { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card > img { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }

    .hero .col-lg-7 > *,
    .hero .col-lg-5,
    .hero-card {
        animation: rise .8s var(--yar-ease) both;
    }

    .hero .col-lg-7 > :nth-child(2) { animation-delay: .08s; }
    .hero .col-lg-7 > :nth-child(3) { animation-delay: .16s; }
    .hero .col-lg-5 { animation-delay: .2s; }
    .hero-card { animation-delay: .3s; }
}

/* --------------------------------------------------------------------------
   5. About + services
   -------------------------------------------------------------------------- */
/* This section starts under the lower part of the hero card. Its own white background is what makes the card
   look like it hangs out of the dark hero (without it the hero's dark colour would show behind the card). */
.section--after-card {
    position: relative; /* paints above the hero's dark background (the card itself has z-index 2) */
    padding-top: calc(var(--yar-hero-overlap) + clamp(3.5rem, 7vw, 5.5rem));
    background: #fff;
}

.about-sticky {
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .about-sticky {
        position: sticky;
        top: 6.5rem;
        grid-template-columns: 8rem 1fr;
        gap: 2rem;
    }
}

.about-label {
    margin: .55rem 0 0;
    color: var(--yar-dark);
    font-size: .875rem;
}

.about-body { max-width: 40rem; }

.about-body p { color: var(--yar-dark); text-wrap: pretty; }

.about-body .lead-text {
    font-size: 1.15rem;
}

.pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.pills li {
    padding: .5rem 1.25rem;
    border: 1px solid var(--yar-line);
    border-radius: 999px;
    background: #fff;
    font-size: .875rem;
}

/* Numbered cards that pile up as you scroll. */
.stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.stack-card {
    position: sticky;
    top: 5.25rem;
}

.stack-card:nth-child(2) { padding-top: 5px; }
.stack-card:nth-child(3) { padding-top: 10px; }
.stack-card:nth-child(4) { padding-top: 15px; }

.stack-item {
    position: relative;
    min-height: 28rem;
    padding: 1rem;
    overflow: clip;
    background: var(--stack-bg);
    color: #fff;
}

/* Abstract gradient backdrops (there are no photos): the palette plus our orange. */
.stack-item.is-orange {
    --stack-bg:
        radial-gradient(120% 90% at 100% 0%, #ffb27a 0%, rgba(255, 178, 122, 0) 55%),
        linear-gradient(135deg, #F06A1A 0%, #9a3406 60%, #4a1802 100%);
}

.stack-item.is-green {
    --stack-bg:
        radial-gradient(120% 90% at 0% 0%, #6fe3a5 0%, rgba(111, 227, 165, 0) 55%),
        linear-gradient(135deg, #00b75f 0%, #006b3a 55%, #00291c 100%);
}

.stack-item.is-slate {
    --stack-bg:
        radial-gradient(120% 90% at 100% 100%, #dfe8e8 0%, rgba(223, 232, 232, 0) 50%),
        linear-gradient(135deg, #a3b2b3 0%, #4c6567 50%, #0e2c2f 100%);
}

.stack-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 26rem;
    padding: 2rem;
    background: rgba(0, 18, 19, .62);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
}

.stack-icon .icon {
    width: 2.25rem;
    height: 2.25rem;
    stroke-width: 1.6;
}

.stack-num {
    position: absolute;
    top: 1.9rem;
    right: 2rem;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1;
}

.stack-body { margin-top: auto; }

.stack-body h3 {
    margin: 2rem 0 .75rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
}

.stack-body p {
    margin: 0;
    color: var(--yar-light);
    font-size: .875rem;
    line-height: 1.65;
}

.stack-tag {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .15rem .8rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    font-size: .75rem;
}

/* --------------------------------------------------------------------------
   6. Process
   -------------------------------------------------------------------------- */
.process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 20rem;
    padding: 2rem;
    overflow: clip;
    background: rgba(255, 255, 255, .05);
    transition: background .4s ease;
}

/* Orange line that draws across the top on hover */
.process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--yar-orange);
    transition: width .6s var(--yar-ease);
}

.process-card:hover { background: rgba(255, 255, 255, .09); }
.process-card:hover::before { width: 100%; }

.process-icon .icon {
    width: 3.5rem;
    height: 3.5rem;
    color: #fff;
    transition: transform .9s var(--yar-ease), color .3s;
}

.process-card:hover .process-icon .icon {
    color: var(--yar-orange);
    transform: rotate(90deg);
}

.process-card h3 {
    margin: 1.1rem 0 auto;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.1;
}

.process-card p {
    margin: 3rem 0 0;
    opacity: .8;
    text-wrap: balance;
}

.process-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.process-bar p { margin: 0; text-wrap: balance; }

/* --------------------------------------------------------------------------
   6b. FAQ: intro on the left, rounded accordion cards on the right
   -------------------------------------------------------------------------- */
.faq-intro p:not(.kicker) {
    max-width: 24rem;
    margin-bottom: 1.5rem;
    color: var(--yar-muted-text);
}

/* The FAQ has its own colours (a calm teal on white): they are set here and do not depend on the site palette. */
.faq-intro,
.faq-accordion {
    --faq-accent: #0A6E78;   /* plus icon, question hover, link underline */
    --faq-tint: #E1EEF0;     /* icon circle */
    --faq-open: #F2F6F6;     /* open card */
}

.faq-intro .line-link {
    --line: var(--faq-accent);
    --line-soft: rgba(10, 110, 120, .35);
    color: var(--yar-dark);
}

@media (min-width: 992px) {
    .faq-intro {
        position: sticky;
        top: 6.5rem;
    }
}

/* Accordion: separate rounded cards. The open card fades to a light tint, its plus turns into a cross
   (rotates 135 degrees) and the panel eases open (Bootstrap's collapse animation). */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-accordion .accordion-item {
    border: 1px solid var(--yar-line);
    border-radius: 1.1rem !important;
    overflow: hidden;
    background: #fff;
    transition: background-color .4s ease;
}

.faq-accordion .accordion-button {
    gap: 1rem;
    justify-content: space-between;
    padding: 1.2rem 1.4rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--yar-dark);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
    text-align: left;
    transition: color .3s ease, background-color .4s ease;
}

.faq-accordion .accordion-button::after { display: none; } /* remove Bootstrap's chevron */

.faq-accordion .accordion-button:hover { color: var(--faq-accent); }

/* The open state is painted on the children (button and panel) so both fade together. */
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--faq-open);
    color: var(--yar-dark);
}

.faq-accordion .accordion-collapse { background: var(--faq-open); }

.faq-q {
    flex: 1 1 auto;
    min-width: 0;
}

.faq-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--faq-tint);
    color: var(--faq-accent);
    transition: background-color .4s ease;
}

.faq-icon .icon {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform .5s ease;
}

.faq-accordion .accordion-button:not(.collapsed) .faq-icon { background: #fff; }
.faq-accordion .accordion-button:not(.collapsed) .faq-icon .icon { transform: rotate(135deg); }

.faq-accordion .accordion-body {
    padding: 0 1.4rem 1.4rem;
    color: var(--yar-muted-text);
    font-size: .95rem;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Contact card (photo + gradient, overlaps the footer) and contact modal
   -------------------------------------------------------------------------- */
.section--contact {
    padding-bottom: 0;
    background: #fff;
}

/* The FAQ above is white too, so its bottom padding is enough space before the card. */
#faq + .section--contact { padding-top: 0; }

/* Card with three stacked layers: the photo (::before, slowly animated), a dark teal gradient over it
   (::after: solid on the text side, fading out to the right) and the text. */
.contact-card {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(26rem, 38vw, 30rem);
    margin-bottom: calc(var(--yar-card-overlap) * -1);
    padding: clamp(2rem, 6vw, 4.5rem);
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--yar-dark);
    color: #fff;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}

/* Photo: zooms in, drifts to the right, zooms again, then plays back the same way (endless loop).
   The photo is scaled up from the start, so it never shows an empty edge while it moves. */
.contact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../img/offshore-platform.jpg") 70% 42% / cover no-repeat;
    transform-origin: 65% 50%;
    animation: photo-drift 30s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes photo-drift {
    0%   { transform: scale(1.06) translateX(0); }
    35%  { transform: scale(1.16) translateX(0); }
    70%  { transform: scale(1.16) translateX(3.5%); }
    100% { transform: scale(1.26) translateX(3.5%); }
}

.contact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(34rem 16rem at 100% 100%, rgba(240, 106, 26, .22), transparent 70%),
        linear-gradient(90deg, rgba(0, 18, 19, .95) 0%, rgba(0, 18, 19, .82) 34%, rgba(0, 18, 19, .34) 68%, rgba(0, 18, 19, .1) 100%),
        linear-gradient(0deg, rgba(0, 18, 19, .7) 0%, rgba(0, 18, 19, 0) 55%);
    pointer-events: none;
}

/* On narrow screens the text spans the whole card, so darken the photo from top to bottom instead. */
@media (max-width: 767.98px) {
    .contact-card::before { background-position: 72% 100%; }

    .contact-card::after {
        background:
            radial-gradient(24rem 12rem at 100% 100%, rgba(240, 106, 26, .22), transparent 70%),
            linear-gradient(180deg, rgba(0, 18, 19, .94) 0%, rgba(0, 18, 19, .86) 60%, rgba(0, 18, 19, .6) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-card::before { animation: none; }
}

.contact-content {
    position: relative;
    max-width: 34rem;
}

/* Enquiry / contact button (contact card and hero): softly rounded, slightly transparent, no border, arrow on the
   right. On hover it becomes more transparent, the arrow nudges to the right and the button grows by exactly the
   same distance on its right side, so the arrow keeps its margin to the edge. Both use the same duration and
   easing, so they move together. */
.glass-btn {
    --nudge: .5rem;
    --pad-r: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    height: 3.25rem;
    padding: 0 var(--pad-r) 0 1.75rem;
    border: 0;
    border-radius: .8rem;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: padding-right .4s var(--yar-ease), background .3s;
}

.glass-btn .icon {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform .4s var(--yar-ease);
}

.glass-btn:hover,
.glass-btn:focus-visible {
    padding-right: calc(var(--pad-r) + var(--nudge));
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.glass-btn:hover .icon,
.glass-btn:focus-visible .icon {
    transform: translateX(var(--nudge));
}

.contact-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.contact-intro {
    margin: 0 0 2rem;
    color: #d3dddd;
}

/* The contact form sits in the same side panel as the legal texts (.side-panel, see section 9);
   this only keeps the form at a comfortable width inside the wide panel. */
.contact-form { max-width: 40rem; }

.form-label {
    margin-bottom: .35rem;
    color: var(--yar-dark);
    font-size: .875rem;
    font-weight: 600;
}

.form-control {
    padding: .75rem 1rem;
    border-color: #cbd6d7;
    border-radius: 0;
    color: var(--yar-dark);
}

.form-control::placeholder { color: #7d8b8c; }

.form-control:focus {
    border-color: var(--yar-orange);
    box-shadow: 0 0 0 .25rem rgba(240, 106, 26, .2);
}

/* Only show the error state, not a green "valid" state. */
.was-validated .form-control:valid {
    border-color: #cbd6d7;
    background-image: none;
}

/* Google reCAPTCHA (only rendered when its keys are configured). The widget is a fixed 304 x 78 px box that Google
   draws into the slot; the slot keeps that space free so the form does not jump when it appears. */
.captcha { margin-top: 1.25rem; }

.captcha-slot {
    width: 304px;
    max-width: 100%;
    min-height: 78px;
}

.captcha-error {
    margin-top: .5rem;
    color: #b02a37;
    font-size: .875rem;
}

/* Very narrow phones (320 px): the widget would be wider than the form, so it is scaled down a little. */
@media (max-width: 359.98px) {
    .captcha-slot {
        min-height: 66px;
        transform: scale(.86);
        transform-origin: 0 0;
    }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.form-note {
    max-width: 20rem;
    margin: 0;
    color: var(--yar-muted-text);
    font-size: .8rem;
    line-height: 1.5;
}

.form-alert {
    margin: 1.25rem 0 0;
    border-radius: 0;
}

.alert-success {
    --bs-alert-color: #00542c;
    --bs-alert-bg: #e3f7ec;
    --bs-alert-border-color: #b5e8cd;
}

/* Honeypot field: off-screen for people, still present for bots. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Footer and floating back-to-top button
   -------------------------------------------------------------------------- */
.site-footer {
    /* The bottom padding keeps the last row clear of the floating back-to-top button. */
    padding-block: clamp(3.5rem, 6vw, 5rem) 5.5rem;
    background: #000;
    color: var(--yar-muted);
}

.site-footer.has-card {
    padding-top: calc(var(--yar-card-overlap) + clamp(3.5rem, 6vw, 5rem));
}

.footer-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    color: #fff;
}

/* Clean white logo: the orange parts turn white too. */
.footer-logo .logo-accent { fill: #fff; }

.footer-tagline {
    max-width: 24rem;
    margin: 1.25rem 0 1rem;
}

.footer-address {
    margin: 0 0 2.5rem;
    font-size: .875rem;
    line-height: 1.7;
}

.chip-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .875rem;
}

/* Contact chip: icon + large text, underlined by a rule that turns orange on hover. */
.chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .3s, color .3s;
}

.chip .icon {
    box-sizing: content-box;
    width: 1.1rem;
    height: 1.1rem;
    padding: .4rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.chip:hover {
    border-color: var(--yar-orange);
    color: var(--yar-orange);
}

.chip > span {
    color: #fff;
    overflow-wrap: anywhere;
}

/* The email address is an SVG of outlines (dev/email-svg.js), not text. It sits in the chip's <span> like a line of
   text: its width/height attributes are in em, so the letters are as large as the phone number next to it, and
   it hangs below the baseline by the descender part of its frame (460 of 2048 units = .225em) so both chips get
   the same line box and baseline. On a narrow column it shrinks and the height follows. */
.chip > span {
    min-width: 0;
}

.chip-email {
    max-width: 100%;
    height: auto;
    vertical-align: -.225em;
    fill: currentColor;
}

/* Footer navigation: just the links, no heading. Same hover effect as the header menu:
   the hovered link turns white while the others dim. */
.footer-links {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    display: block;
    padding: .4rem 0;
    color: #eee;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s;
}

.footer-links:hover a { color: rgba(255, 255, 255, .45); }
.footer-links a:hover,
.footer-links a:focus-visible { color: #fff; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .875rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Legal links: same effect as the header menu (hovered link white, siblings dim). */
.footer-legal a {
    color: #eee;
    text-decoration: none;
    transition: color .2s;
}

.footer-legal:hover a { color: rgba(255, 255, 255, .45); }
.footer-legal a:hover,
.footer-legal a:focus-visible { color: #fff; }

/* Floating back-to-top button: appears after a little scrolling; the orange ring shows how far down the page you are. */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1025;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--yar-dark);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s, transform .4s var(--yar-ease), visibility .3s, background .2s, color .2s;
}

.to-top.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--yar-dark);
    color: #fff;
}

.to-top .icon {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2.2;
    transition: transform .3s var(--yar-ease);
}

.to-top:hover .icon { transform: translateY(-2px); }

.to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* start the progress at the top */
}

.to-top-ring circle {
    fill: none;
    stroke-width: 2.5;
}

.to-top-track { stroke: rgba(0, 18, 19, .12); }
.to-top:hover .to-top-track { stroke: rgba(255, 255, 255, .22); }

/* stroke-dashoffset is set by site.js (circumference = 2 * pi * 22). */
.to-top-progress {
    stroke: var(--yar-orange);
    stroke-linecap: round;
    stroke-dasharray: 138.23;
}

/* --------------------------------------------------------------------------
   9. Side panels: contact form and legal texts (privacy, cookies, terms)
   -------------------------------------------------------------------------- */

/* Side panel (Bootstrap offcanvas) that slides in from the left and covers about 70% of the page. The page stays
   visible, dimmed, on the right so it is clear this is not a separate page. On phones the panel is full screen. */
.side-panel {
    --bs-offcanvas-width: min(70vw, 64rem);
    --bs-offcanvas-bg: #fff;
    --bs-offcanvas-color: var(--yar-dark);
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    box-shadow: 40px 0 90px -40px rgba(0, 0, 0, .6);
}

@media (max-width: 991.98px) {
    .side-panel { --bs-offcanvas-width: 86vw; }
}

/* Phones and small tablets: the panel takes the whole screen. */
@media (max-width: 767.98px) {
    .side-panel {
        --bs-offcanvas-width: 100vw;
        box-shadow: none;
    }
}

.side-panel .offcanvas-body {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

/* Dark title band that stays in place while the text below it scrolls. */
.panel-head {
    flex: none;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem);
    background: var(--yar-dark);
    color: #fff;
}

.panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.panel-kicker {
    color: var(--yar-muted);
    font-size: .9rem;
    font-weight: 500;
}

.panel-head .btn-close {
    margin: -.5rem -.5rem -.5rem 0;
    padding: 1rem;
    opacity: .85;
}

.panel-head .btn-close:hover { opacity: 1; }

.panel-title {
    margin: 0;
    font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.panel-note {
    margin: .75rem 0 0;
    color: var(--yar-muted);
}

.legal-body { max-width: 46rem; }

.legal-body .lead-text { font-size: 1.15rem; }

.legal-body h3 {
    margin: 2.5rem 0 .75rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.legal-body p,
.legal-body li { text-wrap: pretty; }

.legal-body ul { padding-left: 1.25rem; }
.legal-body li + li { margin-top: .5rem; }
.legal-body li::marker { color: var(--yar-orange); }

.legal-body address {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--yar-orange);
}

.legal-dl {
    margin: 0;
    border-top: 1px solid var(--yar-line);
}

.legal-dl > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--yar-line);
}

.legal-dl dt { font-weight: 600; }
.legal-dl dd { margin: 0; }

@media (max-width: 575.98px) {
    .legal-dl > div { grid-template-columns: 1fr; gap: .15rem; }
}

.legal-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--yar-line);
}

.legal-more .line-link { color: var(--yar-dark); }

/* --------------------------------------------------------------------------
   10. 404 page
   -------------------------------------------------------------------------- */
.not-found {
    display: flex;
    align-items: center;
    min-height: 60vh;
}

.not-found-code {
    margin: 0;
    color: var(--yar-orange);
    font-size: clamp(4.5rem, 16vw, 8rem);
    font-weight: 700;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js .has-anim,
    .js .rise-words .rise-word > span {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .yar-btn > span,
    .yar-btn::after,
    .line-link::before,
    .line-link::after,
    .process-icon .icon,
    .to-top,
    .site-header {
        transition: none;
    }
}