/* ==========================================================================
   Accounting2 — "The Fold"
   Warm charcoal + burnt orange + olive-lime, after Armanino.

   The signature is the angled plane: sections don't end on a straight edge,
   they end on overlapping folds, and card imagery is cut on the diagonal. All
   of it is clip-path on ordinary boxes — no images, no SVG.
   ========================================================================== */

:root {
    --a2-ink:         #1c1a17;   /* warm charcoal, never pure black          */
    --a2-ink-800:     #2b2823;
    --a2-ink-600:     #4a443b;
    --a2-muted:       #6e675c;   /* AA on white and on sand                  */
    --a2-sand:        #f7f3ed;   /* warm paper                               */
    --a2-sand-deep:   #efe8dd;
    --a2-white:       #ffffff;
    --a2-rule:        #e5ddd2;

    --a2-orange:      #da720f;   /* reference primary - graphics only        */
    --a2-orange-btn:  #b45c0a;   /* lightest orange that carries white at AA */
    --a2-orange-lift: #f2900f;   /* brighter, for dark grounds               */
    --a2-orange-deep: #a3520a;   /* AA as text on white / sand               */
    --a2-orange-soft: #fdf1e3;

    --a2-lime:        #8dac17;   /* reference secondary                      */
    --a2-lime-deep:   #5d7010;   /* AA as text on white                      */
    --a2-lime-soft:   #f2f6e2;

    --a2-grey:        #8f8a80;   /* mid warm grey — the logo's second plane   */

    --a2-display: 'Archivo', system-ui, sans-serif;
    --a2-sans:    'Figtree', system-ui, sans-serif;

    --a2-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
    --a2-shadow-lg: 0 30px 60px -32px rgba(28, 26, 23, 0.42);
    --a2-shadow-md: 0 18px 36px -22px rgba(28, 26, 23, 0.35);
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--a2-sans);
    color: var(--a2-ink);
    background: var(--a2-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Typography — editorial serif over a humanist sans
   -------------------------------------------------------------------------- */
.a2-display {
    font-family: var(--a2-display);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.03em;
}

/* Hero headlines run lighter — at hero scale 600 reads as shouting. */
.a2-hero .a2-display { font-weight: 500; letter-spacing: -0.025em; }

.a2-title {
    font-family: var(--a2-display);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.a2-eyebrow {
    font-family: var(--a2-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--a2-orange-deep);
}

.a2-eyebrow-light { color: var(--a2-orange-lift); }
.a2-eyebrow-lime  { color: var(--a2-lime-deep); }

/* --------------------------------------------------------------------------
   The fold — overlapping angled planes that close a section.
   Two stacked polygons at slightly different angles read as folded paper.
   -------------------------------------------------------------------------- */
.a2-fold {
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -1px;
    height: 5.5rem;
    pointer-events: none;
    z-index: 4;
}

.a2-fold i {
    position: absolute;
    inset: 0;
    display: block;
}

/* A slice of the primary, cut on the same diagonal as the planes and sitting
   behind both of them, so only its top edge shows. The fold then reads as
   three sheets rather than two, and the orange arrives as part of the fold
   rather than as a stripe laid over it.

   Deliberately an edge, not a field: nothing sits on top of it, so the AA
   problem with --a2-orange never arises. */
.a2-fold::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: var(--a2-orange);
    clip-path: polygon(0 155%, 100% -18%, 100% 100%, 0 100%);
}

/* Back plane: shallower angle, slightly darker, reads as the underside. */
.a2-fold i:nth-child(1) {
    background: var(--a2-sand-deep);
    clip-path: polygon(0 58%, 58% 6%, 100% 44%, 100% 100%, 0 100%);
}

/* Front plane: steeper, in the colour of the section below. */
.a2-fold i:nth-child(2) {
    background: var(--a2-white);
    clip-path: polygon(0 82%, 46% 30%, 100% 76%, 100% 100%, 0 100%);
}

.a2-fold-sand i:nth-child(2) { background: var(--a2-sand); }
.a2-fold-ink  i:nth-child(1) { background: var(--a2-ink-800); }
.a2-fold-ink  i:nth-child(2) { background: var(--a2-ink); }

@media (min-width: 768px) { .a2-fold { height: 8rem; } }
@media (min-width: 1280px) { .a2-fold { height: 11rem; } }

/* A single hard diagonal, for section tops. */
.a2-slant-t { clip-path: polygon(0 0, 100% 5.5%, 100% 100%, 0 100%); }
.a2-slant-b { clip-path: polygon(0 0, 100% 0, 100% 94.5%, 0 100%); }

@media (max-width: 767px) {
    .a2-slant-t { clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%); }
    .a2-slant-b { clip-path: polygon(0 0, 100% 0, 100% 97.5%, 0 100%); }
}

/* --------------------------------------------------------------------------
   Buttons — pill with a circular arrow, after the reference
   -------------------------------------------------------------------------- */
.a2-btn {
    display: inline-flex;
    align-items: center;
    /* Inert at content width; when the button stretches (stacked on mobile) it
       pushes the arrow to the trailing edge instead of stranding it mid-button. */
    justify-content: space-between;
    gap: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--a2-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.28s var(--a2-ease), color 0.28s var(--a2-ease),
                border-color 0.28s var(--a2-ease), transform 0.28s var(--a2-ease),
                box-shadow 0.28s var(--a2-ease);
}

.a2-btn-dot {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex: none;
    transition: background-color 0.28s var(--a2-ease), transform 0.28s var(--a2-ease);
}

.a2-btn svg { transition: transform 0.28s var(--a2-ease); }
.a2-btn:hover svg { transform: translateX(3px); }

.a2-btn-primary {
    background: var(--a2-orange-btn);
    color: var(--a2-white);
}
.a2-btn-primary .a2-btn-dot { background: rgba(255, 255, 255, 0.22); color: var(--a2-white); }
.a2-btn-primary:hover {
    background: var(--a2-orange-deep);
    color: var(--a2-white);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(218, 114, 15, 0.75);
}

.a2-btn-outline {
    background: transparent;
    color: var(--a2-ink);
    border-color: var(--a2-rule);
}
.a2-btn-outline .a2-btn-dot { background: var(--a2-sand-deep); color: var(--a2-ink); }
.a2-btn-outline:hover {
    color: var(--a2-ink);
    border-color: var(--a2-ink);
    transform: translateY(-2px);
}
.a2-btn-outline:hover .a2-btn-dot { background: var(--a2-orange); color: var(--a2-white); }

.a2-btn-light {
    background: transparent;
    color: var(--a2-white);
    border-color: rgba(255, 255, 255, 0.42);
}
.a2-btn-light .a2-btn-dot { background: rgba(255, 255, 255, 0.18); color: var(--a2-white); }
.a2-btn-light:hover {
    background: var(--a2-white);
    color: var(--a2-ink);
    border-color: var(--a2-white);
    transform: translateY(-2px);
}
.a2-btn-light:hover .a2-btn-dot { background: var(--a2-orange); color: var(--a2-white); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--a2-orange-deep);
    outline-offset: 3px;
}

.a2-on-dark a:focus-visible,
.a2-on-dark button:focus-visible { outline-color: var(--a2-orange-lift); }

/* Text link with a rule that extends on hover */
.a2-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--a2-orange-deep);
    text-decoration: none;
    padding-bottom: 0.35rem;
}

.a2-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0.32);
    transform-origin: left;
    transition: transform 0.32s var(--a2-ease);
}

.a2-link:hover::after,
.a2-link:focus-visible::after { transform: scaleX(1); }
.a2-link svg { transition: transform 0.28s var(--a2-ease); }
.a2-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.a2-hero {
    position: relative;
    overflow: hidden;
    /* Sits under the footage. Neutral, not orange: it is only visible for the
       instant before the poster paints, and an orange flash reads as a bug. */
    background: linear-gradient(118deg, #141517 0%, #1d1f22 55%, #26282c 100%);
    color: var(--a2-white);
    isolation: isolate;
}

.a2-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Shown at full strength — no colour cast, no blend, fully opaque. The last
   point matters twice over: a semi-transparent video let the poster frame
   underneath show through it, which read as a static image ghosting over the
   footage. Opaque, the video simply covers its own fallback. */
.a2-hero-photo img,
.a2-hero-photo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Landscape source in a tall mobile hero crops to the middle, which is
       blurred mid-ground. Bias right to the subject; centre it once the hero
       is wide enough that the whole frame shows. */
    object-position: 72% 38%;
}

/* Footage over its own poster; the poster is the fallback beneath. */
.a2-hero-photo video { z-index: 1; }

/* Scrim: headline contrast first, tone second.
   The directional gradients do the contrast work on the left where the copy
   sits; the flat layer over the whole frame is a neutral dark grey, cooling
   the footage rather than tinting it. The orange lives in the fold below and
   in the buttons — it does not need to be on the picture as well. */
.a2-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(96deg, rgba(12, 10, 9, 0.74) 0%, rgba(12, 10, 9, 0.46) 44%, rgba(12, 10, 9, 0.12) 78%),
        linear-gradient(180deg, rgba(12, 10, 9, 0.42) 0%, transparent 28%),
        linear-gradient(0deg, rgba(38, 40, 44, 0.25), rgba(38, 40, 44, 0.25));
}

@media (min-width: 1024px) {
    .a2-hero-photo img,
    .a2-hero-photo video { object-position: 50% 45%; }
}

/* The <img> is a fallback, not a layer: hidden while the video plays, shown
   when it cannot. The video's own poster attribute covers the case where
   autoplay is refused. */
.a2-hero-photo img { display: none; }

/* Motion is decoration here. Hiding the video leaves the poster frame, so the
   hero still has a picture rather than a flat panel. */
@media (prefers-reduced-motion: reduce) {
    .a2-hero-photo video { display: none; }
    .a2-hero-photo img   { display: block; }
}

/* Fine line-work, echoing the reference's faceted backdrops. */
.a2-hero-facets {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(66deg, transparent 48%, rgba(255, 255, 255, 0.5) 48.4%, transparent 49%),
        linear-gradient(-58deg, transparent 62%, rgba(255, 255, 255, 0.35) 62.3%, transparent 63%),
        linear-gradient(78deg, transparent 30%, rgba(255, 255, 255, 0.28) 30.3%, transparent 31%);
}

/* --------------------------------------------------------------------------
   Cards — image cut on the diagonal, content rises into it
   -------------------------------------------------------------------------- */
.a2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--a2-white);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--a2-shadow-md);
    transition: transform 0.3s var(--a2-ease), box-shadow 0.3s var(--a2-ease);
}

.a2-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--a2-shadow-lg);
}

.a2-card-figure {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(122deg, var(--a2-orange) 0%, #efa02a 100%);
    overflow: hidden;
    /* The card's white ground shows through the cut, so the body appears to
       rise diagonally into the image. */
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}

.a2-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) contrast(1.06);
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: transform 0.6s var(--a2-ease);
}

.a2-card:hover .a2-card-figure img { transform: scale(1.05); }

/* The diagonal: the white body cuts up into the image. */
.a2-card-body {
    position: relative;
    padding: 1.5rem 1.75rem 1.875rem;
    background: var(--a2-white);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.a2-card-num {
    font-family: var(--a2-display);
    font-size: 0.9375rem;
    color: var(--a2-orange-deep);
}

/* Service marks: white strokes on the orange figure, one charcoal accent. */
.a2-mark {
    color: rgba(255, 255, 255, 0.94);
    display: block;
    overflow: visible;
    transition: transform 0.4s var(--a2-ease);
}

.a2-mark .a2-mark-accent {
    color: var(--a2-ink);
    stroke: var(--a2-ink);
    transition: transform 0.4s var(--a2-ease);
}

.a2-card:hover .a2-mark { transform: translateY(-3px); }
.a2-card:hover .a2-mark .a2-mark-accent { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .a2-mark, .a2-mark .a2-mark-accent { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Brand panel — the big rounded orange field
   -------------------------------------------------------------------------- */
.a2-panel {
    position: relative;
    border-radius: 1.75rem;
    background: linear-gradient(122deg, #8f4507 0%, #a3520a 52%, #b05c0a 100%);
    color: var(--a2-white);
    overflow: hidden;
}

.a2-panel-lime {
    background: linear-gradient(122deg, #47570c 0%, #55690f 55%, #627a11 100%);
}

.a2-panel::after {
    content: "";
    position: absolute;
    right: -12%;
    top: -30%;
    width: 60%;
    height: 160%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(18deg);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Stats — rule under each figure, first one accented
   -------------------------------------------------------------------------- */
.a2-stat {
    padding-bottom: 0.875rem;
    border-bottom: 2px solid var(--a2-rule);
    transition: border-color 0.3s var(--a2-ease);
}

.a2-stat:hover { border-bottom-color: var(--a2-orange); }
.a2-stat-figure {
    font-family: var(--a2-display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.a2-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    background: var(--a2-white);
    border-bottom: 1px solid var(--a2-rule);
    transition: box-shadow 0.3s var(--a2-ease);
}

.a2-nav.is-stuck { box-shadow: 0 2px 24px -12px rgba(28, 26, 23, 0.4); }

.a2-navlink {
    position: relative;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--a2-ink-600);
    text-decoration: none;
    padding: 0.4rem 0;
    transition: color 0.24s var(--a2-ease);
}

.a2-navlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15rem;
    width: 100%;
    height: 2px;
    background: var(--a2-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--a2-ease);
}

.a2-navlink:hover { color: var(--a2-ink); }
.a2-navlink:hover::after,
.a2-navlink:focus-visible::after,
.a2-navlink[aria-current="page"]::after { transform: scaleX(1); }
.a2-navlink[aria-current="page"] { color: var(--a2-ink); }

.a2-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 80;
    width: min(22rem, 88vw);
    background: var(--a2-ink);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.a2-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(28, 26, 23, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.a2-drawer-link {
    display: block;
    font-family: var(--a2-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.75rem;
    color: var(--a2-white);
    text-decoration: none;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: color 0.24s var(--a2-ease), padding-left 0.24s var(--a2-ease);
}

.a2-drawer-link:hover,
.a2-drawer-link:focus-visible {
    color: var(--a2-orange-lift);
    padding-left: 0.5rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.a2-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--a2-muted);
    margin-bottom: 0.5rem;
}

.a2-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--a2-sans);
    font-size: 0.9375rem;
    color: var(--a2-ink);
    background: var(--a2-white);
    border: 1px solid var(--a2-rule);
    border-radius: 3px;
    transition: border-color 0.22s var(--a2-ease), box-shadow 0.22s var(--a2-ease);
}

.a2-input::placeholder { color: #a49a8c; }

.a2-input:focus {
    outline: none;
    border-color: var(--a2-orange);
    box-shadow: 0 0 0 3px rgba(218, 114, 15, 0.18);
}

.a2-input[aria-invalid="true"] {
    border-color: #b3261e;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

select.a2-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236e675c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.a2-error {
    margin-top: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b3261e;
}

.a2-required { color: var(--a2-orange-deep); }

/* --------------------------------------------------------------------------
   Reveal — driven by the x-reveal Alpine directive
   -------------------------------------------------------------------------- */
.a2-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s var(--a2-ease) var(--a2-rv-d, 0ms),
                transform 0.55s var(--a2-ease) var(--a2-rv-d, 0ms);
}

.a2-rv-left  { transform: translateX(-26px); }
.a2-rv-right { transform: translateX(26px); }

@media (max-width: 1023px) {
    .a2-rv-left, .a2-rv-right { transform: translateY(22px); }
}

.a2-rv.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.a2-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--a2-ink);
    color: var(--a2-white);
    font-weight: 700;
}

.a2-skip:focus { left: 0.75rem; top: 0.75rem; }

.a2-map { filter: grayscale(100%) contrast(1.04); transition: filter 0.4s var(--a2-ease); }
.a2-map:hover { filter: grayscale(0%); }

.a2-marquee {
    display: flex;
    width: max-content;
    animation: a2-marquee 36s linear infinite;
}

@keyframes a2-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.a2-mask-x {
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .a2-rv { opacity: 1 !important; transform: none !important; }
    .a2-marquee { animation: none !important; }
}