/* =====================================================================
   Abnormal — main stylesheet
   ===================================================================== */

/* ---------- @font-face — Helvetica Neue ---------- */

@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-Thin-13.ttf') format('truetype');
    font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-ThinItalic-14.ttf') format('truetype');
    font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-UltraLight-06.ttf') format('truetype');
    font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-UltraLightItalic-07.ttf') format('truetype');
    font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-Light-08.ttf') format('truetype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-LightItalic-09.ttf') format('truetype');
    font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-01.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-Italic-03.ttf') format('truetype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-Medium-11.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-MediumItalic-12.ttf') format('truetype');
    font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-Bold-02.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeue";
    src: url('../fonts/HelveticaNeue-BoldItalic-04.ttf') format('truetype');
    font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeueCondensed";
    src: url('../fonts/HelveticaNeue-CondensedBold-05.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HelveticaNeueCondensed";
    src: url('../fonts/HelveticaNeue-CondensedBlack-10.ttf') format('truetype');
    font-weight: 900; font-style: normal; font-display: swap;
}

   :root {
    --abn-navy:        #102b33;
    --abn-navy-deep:   #0a1f25;
    --abn-cream:       #f3eee2;
    --abn-cream-soft:  #efece4;
    --abn-grey:        #e7e6e1;
    --abn-text:        #102b33;
    --abn-muted:       #4d5e63;
    --abn-red:         #c8463a;
    --abn-green:       #6e9b4e;
    --abn-orange:      #d97a3c;

    --abn-font-display:  "HelveticaNeueCondensed", "HelveticaNeue", Helvetica, Arial, sans-serif;
    --abn-font-headline: "mazurquica-vf", sans-serif;
    --abn-font-body:     "HelveticaNeue", Helvetica, Arial, sans-serif;

    --abn-container:    1180px;
    --abn-radius:       6px;

    --abn-header-h:     72px;
    --abn-features-h:   88px;
}

/* ---------- base ---------- */

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--abn-font-body);
    color: var(--abn-text);
    background: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
p   { margin: 0 0 1em; }

.abn-container {
    width: 100%;
    max-width: var(--abn-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================================
   PARALLAX DOT WAVE — fixed behind the whole page
   ===================================================================== */

.abn-site-dots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Extra height so the image stays visible even when translated upward */
    height: 230vh;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/background_dots.png');
    background-size: contain;
    background-position: 20% 90%;
    background-repeat: no-repeat;
    opacity: 1;
    will-change: transform;
}

/* All page sections sit above the fixed dot layer */
.abn-header,
.abn-hero,
.abn-people,
.abn-banner,
.abn-fuel,
.abn-about,
.abn-made,
.abn-footer {
    position: relative;
    z-index: 1;
}

/* ---------- shared display headlines ---------- */

.abn-hero__headline,
.abn-people__headline,
.abn-banner__headline,
.abn-fuel__title,
.abn-product__name,
.abn-footer__title {
    font-family: var(--abn-font-headline);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
}

/* =====================================================================
   HEADER
   ===================================================================== */

.abn-header {
    height: var(--abn-header-h);
    background: #fff;
    position: relative;
    z-index: 5;
}

.abn-header__inner {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 56px;
    padding-right: 0;
}
.abn-header__logo {
    display: inline-flex;
    align-items: center;
}

.abn-logo {
    font-family: var(--abn-font-display);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--abn-navy);
    -webkit-text-stroke: 0.4px currentColor;
    display: inline-flex;
    align-items: flex-start;
}
.abn-logo__tm {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 4px;
    margin-top: 4px;
    -webkit-text-stroke: 0;
}

/* SVG logo images */
.abn-logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: none;
}
.abn-footer__logo-img { height: 40px; }
.abn-banner__brand-img { height: 28px; align-self: flex-start; }

/* nav */

.abn-nav { display: flex; align-items: stretch; height: 100%; }

.abn-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
}

.abn-nav__list > li {
    display: flex;
    align-items: flex-end;
    padding: 0 22px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--abn-navy);
}
.abn-nav__list > li > a {
    color: var(--abn-navy);
    opacity: 0.9;
    transition: opacity .15s ease;
    /* padding-left: 20px; */
    /* padding-right: 90px; */
    /* padding-bottom: 10px; */
}
.abn-nav__list > li > a:hover { opacity: 1; }

/* "stay abnormal" CTA — fills full top-right corner */
.abn-nav__list > li.abn-nav__cta-item,
.abn-nav__list > li:last-child {
    padding: 0;
    align-self: stretch;   /* CTA fills full header height */
}
.abn-nav__cta {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 72px 18px 64px;
    height: 100%;
    background: var(--abn-navy);
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    opacity: 1 !important;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 120px;
    /* padding-bottom: 10px; */
}
.abn-nav__cta:hover { background: var(--abn-navy-deep); }

/* ── Hamburger button (hidden on desktop) ── */
.abn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    flex-shrink: 0;
}
.abn-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--abn-navy);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
    transform-origin: center;
}
.abn-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abn-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.abn-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Slide-out drawer ── */
.abn-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    min-height: 300px;
    background: var(--abn-navy);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform .36s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 8px 40px rgba(0,0,0,.32);
}
.abn-drawer.is-open { transform: translateY(0); }

.abn-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: var(--abn-header-h);
    border-bottom: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.abn-drawer__logo {
    font-size: 22px;
    color: #fff;
}
.abn-drawer__close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
    opacity: .7;
    transition: opacity .15s;
}
.abn-drawer__close:hover { opacity: 1; }

.abn-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 0; }

.abn-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.abn-drawer__list li { border-bottom: 1px solid rgba(255,255,255,.08); }
.abn-drawer__list li a {
    display: block;
    padding: 15px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background .15s;
}
.abn-drawer__list li a:hover { background: rgba(255,255,255,.08); }
.abn-drawer__list li.abn-nav__cta-item { border-bottom: none; margin-top: 4px; }
.abn-drawer__list .abn-nav__cta {
    display: block;
    margin: 12px 24px;
    padding: 12px 24px;
    text-align: center;
    border-radius: 4px;
    height: auto;
    background: rgba(255,255,255,.15);
    color: #fff !important;
}
.abn-drawer__list .abn-nav__cta:hover { background: rgba(255,255,255,.25); }

/* ── Drawer backdrop ── */
.abn-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s ease;
}
.abn-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* =====================================================================
   HERO — fills the rest of the viewport so header+hero = 100vh
   ===================================================================== */

.abn-hero {
    height: calc(100vh - var(--abn-header-h));
    min-height: 560px;
    /* background: #fff; */
    display: flex;
    flex-direction: column;
}

/* split image | content */

.abn-hero__split {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 5fr 4fr;
    min-height: 0;
}

.abn-hero__media {
    position: relative;
    overflow: hidden;
    background: #2c2620;
}
.abn-hero__media-inner {
    position: absolute;
    inset: 0;
    /* Motion-blurred biker placeholder built from gradients. */
    background:
        /* horizontal motion blur streaks */
        linear-gradient(90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.05) 22%,
            rgba(0,0,0,0.10) 50%,
            rgba(255,255,255,0.04) 78%,
            rgba(255,255,255,0.00) 100%),
        /* central biker silhouette glow */
        radial-gradient(ellipse 38% 55% at 38% 55%,
            rgba(60,30,20,0.55) 0%,
            rgba(60,30,20,0.25) 40%,
            rgba(0,0,0,0) 70%),
        /* ground/sky base */
        linear-gradient(180deg,
            #b9b3a4 0%,
            #a89580 28%,
            #6f5a40 55%,
            #564231 75%,
            #3d2f24 100%);
    filter: blur(0.5px) saturate(0.9);
}
/* When a real image is set via inline style, remove gradient fallback & blur */
.abn-hero__media-inner[style],
.abn-people__imgcard-inner[style] {/* background: none !important; */filter: none !important;}
.abn-banner__bg[style] {/* background: none !important; */filter: brightness(0.5);}

.abn-hero__media-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.05) 0 1px,
            transparent 1px 6px);
    mix-blend-mode: overlay;
    opacity: 0.7;
}

/* right content panel */

.abn-hero__content {
    position: relative;
    /* background: #fff; */
    padding: 64px 56px 64px 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.abn-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 470px;
    margin-bottom: 150px;
}
.abn-hero__headline {
    font-size: clamp(68px, 7.8vw, 96px);
    color: var(--abn-navy);
    line-height: 0.95;
    letter-spacing: 0.005em;
}
.abn-hero__sub {
    margin-top: 22px;
    color: var(--abn-navy);
    font-size: 20px;
    line-height: 1.6;
    max-width: 360px;
}


/* ── Features ticker bar ── */

.abn-hero__features {
    flex: 0 0 var(--abn-features-h);
    background: var(--abn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Scrolling track — two identical sets placed end-to-end */
.abn-hero__features-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: abn-ticker 18s linear infinite;
    will-change: transform;
}

.abn-hero__features:hover .abn-hero__features-track {
    animation-play-state: paused;
}

@keyframes abn-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

/* One set of feature items */
.abn-hero__features-set {
    display: flex;
    align-items: center;
    gap: 72px;
    padding: 0 72px;
    font-family: var(--abn-font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14px;
    white-space: nowrap;
}

.abn-features__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.abn-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    opacity: 0.95;
}
.abn-features__icon-img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* =====================================================================
   FOR PEOPLE WHO DON'T DO NORMAL
   ===================================================================== */

.abn-people {
    position: relative;
    background: transparent;
    /* No overflow restriction. CSS transforms never affect layout, so the
       can's translateX(-120%) start position creates no layout overflow and
       no scrollbar. Any overflow property here (hidden/clip/clip-path) would
       clip the drop-shadow on the can, so we leave it at the default visible. */
    padding: 0;
}

/* outer layout row — no container, flush left */
.abn-people__layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    min-height: 650px;
    padding: 76px 80px 76px 56px;
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
}

/* left visual column — image card + floating can */
.abn-people__visual {
    flex: 0 0 46%;
    position: relative;
    min-height: 400px;
    margin-right: 48px;
}

/* dark rounded image card */
.abn-people__imgcard {
    position: absolute;
    top: 20px;
    left: 0;   /* makes room for can to peek out on the left */
    right: 0;
    bottom: 0;
    background: #1b2a35;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.abn-people__imgcard-inner {
    position: absolute;
    inset: 0;
    background:
        /* motion blur person silhouette */
        radial-gradient(ellipse 30% 70% at 55% 50%,
            rgba(80,65,55,.7) 0%,
            rgba(40,35,30,.5) 50%,
            transparent 80%),
        linear-gradient(160deg,
            #2f3a42 0%,
            #242e36 35%,
            #1a2530 65%,
            #141e27 100%);
    filter: blur(0.4px) saturate(0.85);
}
.abn-people__imgcard-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.04) 0 1px,
            transparent 1px 7px);
    opacity: 0.7;
}

/* floating can — overlaps the left side of the card */
/* Outer wrapper: purely positional + owns the filter.
   Keeping filter and transition on the SAME element causes Chrome and
   Safari to lock the compositing layer size to the layout box, clipping
   the shadow at the element edge.  Separating them onto two elements
   lets the browser size the filter layer to include the shadow bleed. */
.abn-people__can-wrap {
    position: absolute;
    bottom: -40px;
    left: 10px;
    z-index: 3;
    width: 350px;
    height: 350px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.42)) drop-shadow(4px 0 16px rgba(0,0,0,.2));
    /* Tells the browser to pre-allocate a compositing layer sized to include
       the filter's paint overflow (the shadow), preventing it from being
       clipped at the element's layout-box edge in Chrome and Safari. */
    will-change: filter;
}

/* Inner wrapper: owns the transform + transition (slide-in animation).
   No filter here — this is the fix.  The filter on the parent sees the
   final composited result including the animated child position. */
.abn-people__can-inner {
    width: 100%;
    height: 100%;
    transform: translateX(-120%);
    opacity: 0;
    transition: transform .8s cubic-bezier(.2,.8,.3,1), opacity .6s ease;
}
.abn-people__can-wrap.is-visible .abn-people__can-inner {
    transform: translateX(0);
    opacity: 1;
}

.abn-people__can-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

/* right text column */
.abn-people__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* padding: 0 0 0 0; */
}
.abn-people__headline {
    font-size: clamp(38px, 8.2vw, 85px);
    color: var(--abn-navy);
    line-height: 0.93;
}
.abn-people__text {
    margin-top: 20px;
    color: var(--abn-navy);
    max-width: 360px;
    font-size: 16.5px;
    line-height: 1.6;
}

/* shared button */
.abn-button {
    display: inline-block;
    padding: 14px 28px;
    font-family: var(--abn-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 6px;
    margin-top: 28px;
    align-self: flex-start;
    transition: transform .15s ease, opacity .15s ease;
}
.abn-button:hover { transform: translateY(-1px); opacity: .9; }
.abn-button--dark {
    background: var(--abn-navy);
    color: #fff;
}

/* =====================================================================
   MOVE DIFFERENT BANNER
   ===================================================================== */

.abn-banner {
    position: relative;
    overflow: visible; /* let can bleed below */
    color: #fff;
    min-height: 540px;
}

/* teal ocean background */
.abn-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.1) 30%,
            rgba(0,0,0,.05) 60%,
            rgba(0,0,0,.2) 100%),
        linear-gradient(180deg,
            #1d5c58 0%,
            #2a6e68 25%,
            #236158 60%,
            #154842 100%);
    filter: saturate(1.1);
}
.abn-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,.05) 0 1px,
        transparent 1px 9px);
    opacity: 0.65;
}

/* blurry person silhouette — right side */
.abn-banner__silhouette {
    position: absolute;
    right: 7%;
    top: -10%;
    bottom: -10%;
    width: 260px;
    z-index: 1;
    pointer-events: none;
    /* head */
    background:
        radial-gradient(ellipse 28% 18% at 58% 12%,
            rgba(0,0,0,.58) 40%, transparent 75%),
        /* torso */
        radial-gradient(ellipse 28% 40% at 55% 45%,
            rgba(0,0,0,.52) 35%, transparent 70%),
        /* legs */
        radial-gradient(ellipse 22% 35% at 50% 78%,
            rgba(0,0,0,.45) 35%, transparent 72%),
        /* raised arm */
        radial-gradient(ellipse 14% 26% at 76% 22%,
            rgba(0,0,0,.45) 30%, transparent 70%);
    filter: blur(14px);
}

/* inner layout — copy is offset to the right to leave room for the absolutely-positioned can */
.abn-banner__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 540px;
    padding-left: 330px;  /* space for the can column */
    padding-right: 80px;
    overflow: hidden;
    max-width: 1440px;
    margin: 0 auto;
}

/* can — absolute, pinned to the bottom-left of the section */
.abn-banner__can-wrap {
    position: absolute;
    bottom: -110px;
    left: -64px;
    z-index: 3;
    width: 490px;
    height: 540px;
}
.abn-banner__can-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    /* filter: drop-shadow(0 24px 48px rgba(0,0,0,.55)) drop-shadow(-6px 0 20px rgba(0,0,0,.25)); */
}

.abn-banner__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
}
.abn-banner__brand {
    font-family: var(--abn-font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 4px;
    line-height: 1;
}
.abn-banner__tm {
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
    -webkit-text-stroke: 0;
    vertical-align: super;
}
.abn-banner__headline {
    font-family: var(--abn-font-headline);
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0;
    color: #fff;
}
.abn-banner__text {
    margin-top: 18px;
    color: rgba(255,255,255,.78);
    max-width: 400px;
    font-size: 16.5px;
    line-height: 1.6;
}

/* =====================================================================
   PICK YOUR FUEL
   ===================================================================== */

.abn-fuel {
    background: transparent;
    padding: 80px 56px 120px;
    max-width: 1440px;
    margin: 0 auto;
}

.abn-fuel__title {
    text-align: center;
    font-size: clamp(36px, 6.8vw, 85px);
    color: var(--abn-navy);
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}
.abn-fuel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
}
/* 4th item wraps to new row, occupies 1/3 naturally */
.abn-fuel__grid .abn-product:nth-child(4) {
    grid-column: 1;
}

/* product card */

.abn-product {
    background: var(--abn-cream-soft);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    position: relative;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.abn-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
.abn-product:focus-visible {
    outline: 3px solid var(--abn-green);
    outline-offset: 3px;
}
.abn-product__top {
    flex: 1;
    padding: 28px 28px 0;
    display: flex;
    flex-direction: column;
}
.abn-product__eyebrow {
    font-family: var(--abn-font-body);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.14em;
    color: black;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: bold;
}
.abn-product__name {
    font-size: clamp(60px, 1.8vw, 40px);
    color: var(--abn-navy);
    margin-bottom: 14px;
}
.abn-product__text {
    font-size: 16px;
    color: var(--abn-muted);
    line-height: 1.6;
    margin: 0 0 0;
    max-width: 90%;
}
.abn-product__img {
    display: block;
    margin-top: auto;
    align-self: center;
    width: 250px;
    height: 410px;
    object-fit: contain;
    object-position: bottom center;
    margin-top: 50px;
    filter: drop-shadow(0 24px 20px rgba(0,0,0,.30)) drop-shadow(0 8px 8px rgba(0,0,0,.18));
}
.abn-product__can,
.abn-product__bottle {
    margin-top: auto;
    align-self: center;
    width: 160px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(0,0,0,.18), inset 0 0 0 3px rgba(0,0,0,.05);
}
.abn-product__can--red    { background: linear-gradient(180deg, #f6efe1 0%, #e7dcc2 100%); }
.abn-product__can--green  { background: linear-gradient(180deg, #efeede 0%, #d8e0c2 100%); }
.abn-product__can--orange { background: linear-gradient(180deg, #f7ede1 0%, #ead2b6 100%); }
.abn-product__bottle {
    width: 120px;
    height: 320px;
    border-radius: 14px 14px 22px 22px / 18px 18px 28px 28px;
    background: linear-gradient(180deg, #e7c08b 0%, #c98e51 100%);
}

.abn-product__cta {
    display: block;
    text-align: left;
    padding: 18px 28px;
    border: none;
    outline: none;
    font-family: var(--abn-font-body);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    background: var(--abn-navy);
    margin-top: 24px;
    transition: opacity .15s ease;
}
.abn-product__cta:hover { opacity: .88; }

.abn-product--red    .abn-product__cta { background: var(--abn-red); }
.abn-product--green  .abn-product__cta { background: var(--abn-green); }
.abn-product--orange .abn-product__cta { background: var(--abn-orange); }

/* =====================================================================
   FOOTER
   ===================================================================== */

.abn-footer {
    background: #e8e8e3;
    color: var(--abn-navy);
}

/* 3-col × 2-row grid */
.abn-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1.35fr 1.35fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 56px;
    padding: 72px 80px 64px;
    max-width: 1360px;
    margin: 0 auto;
}

/* Row 1 Col 1 — GET IN TOUCH */
.abn-footer__cell--cta { align-self: start; }

.abn-footer__title {
    font-family: var(--abn-font-headline);
    font-size: clamp(40px, 5vw, 62px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--abn-navy);
    margin: 0 0 20px;
}
.abn-footer__lead {
    font-size: 14px;
    color: var(--abn-navy);
    line-height: 1.65;
    max-width: 360px;
    margin: 0;
}

/* Row 1 Col 2 & 3 — Sales / Order */
.abn-footer__cell--contact { align-self: start; padding-top: 8px; }

.abn-footer__contact-head {
    margin-bottom: 14px;
}
.abn-footer__contact-label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--abn-navy);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.abn-footer__rule {
    border: none;
    border-top: 1.5px solid var(--abn-navy);
    margin: 0;
    opacity: 0.85;
}
.abn-footer__contact-text {
    font-size: 14px;
    color: var(--abn-navy);
    line-height: 1.75;
    margin: 0;
}
.abn-footer__contact-text a { color: var(--abn-navy); }

/* Row 2 Col 1 — brand */
.abn-footer__cell--brand { align-self: start; }

.abn-footer__logo-link { display: inline-block; text-decoration: none; margin-bottom: 12px; }
.abn-footer__logo {
    font-family: var(--abn-font-display);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: var(--abn-navy);
    -webkit-text-stroke: 0.4px currentColor;
    line-height: 1;
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
}
.abn-footer__logo-tm {
    font-size: 8px;
    font-weight: 700;
    -webkit-text-stroke: 0;
    vertical-align: super;
    margin-top: 2px;
}
.abn-footer__tagline {
    font-size: 12px;
    color: var(--abn-navy);
    line-height: 1.65;
    max-width: 260px;
    margin: 0;
    opacity: 0.75;
}

/* Row 2 Col 3 — social (right-aligned) */
.abn-footer__cell--social {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.abn-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--abn-navy);
    text-decoration: none;
}
.abn-footer__social-handle {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--abn-navy);
}
.abn-footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abn-navy);
}

/* bottom bar */
.abn-footer__bar {
    border-top: 1px solid rgba(18,44,51,.15);
    background-color: #102b33;
}
.abn-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 80px;
    font-size: 11px;
    color: white;
    opacity: 0.65;
    max-width: 1360px;
    margin: 0 auto;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 960px) {

    .abn-header__inner { padding-left: 24px; padding-right: 0; }

    /* Hide all nav items except the "stay abnormal" CTA */
    .abn-nav__list > li:not(:last-child) { display: none; }

    /* Logo stays left */
    .abn-header__logo { order: 1; }

    /* Spacer pushes hamburger + CTA to the right */
    .abn-header__logo { flex: 1 1 auto; }

    /* Hamburger sits just before the CTA */
    .abn-hamburger {
        display: flex;
        order: 2;
        flex: 0 0 auto;
        align-self: center;
        margin-right: 4px;
    }

    /* Nav (now only the CTA item) goes last */
    .abn-nav {
        order: 3;
        flex: 0 0 auto;
    }

    .abn-nav__cta { padding-right: 20px; }

    /* Hero: image fills full background, content overlays it */
    .abn-hero { height: auto; min-height: 100vh; }
    .abn-hero__split {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        position: relative;
        min-height: calc(100vh - var(--abn-header-h) - var(--abn-features-h));
    }
    /* Image becomes full-bleed background layer */
    .abn-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    /* Dark overlay so text stays readable */
    .abn-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.48) 100%);
        z-index: 1;
    }
    /* Content sits on top of image */
    .abn-hero__content {
        position: relative;
        z-index: 2;
        background: transparent;
        padding: 60px 28px 48px;
        display: flex;
        align-items: flex-end;
    }
    /* Flip text to white */
    .abn-hero__headline,
    .abn-hero__sub { color: #fff; }

    .abn-hero__copy { margin-bottom: 50px; }

    .abn-hero__features-set { gap: 40px; padding: 0 40px; font-size: 12px; }
    .abn-hero__features-track { animation-duration: 12s; }

    /* People — mobile: card full-width, content below */
    .abn-people__layout {
        flex-direction: column;
        padding: 32px 20px 60px;
        min-height: 0;
        gap: 0;
    }
    .abn-people__visual {
        flex: 0 0 auto;
        width: 100%;
        /* tall enough to show the card + let can peek out bottom */
        height: 420px;
        margin-right: 0;
        /* extra bottom space for the can overflow */
        margin-bottom: 80px;
    }
    /* Card fills the full visual column */
    .abn-people__imgcard {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
    }
    /* Can: sticks out from bottom-left of the card */
    .abn-people__can-wrap {
        width: 220px;
        height: 280px;
        bottom: -70px;
        left: 12px;
    }
    /* Text column: full width below the card */
    .abn-people__content {
        align-items: flex-start;
        width: 100%;
        padding-bottom: 0;
    }
    .abn-people__headline {
        font-size: clamp(42px, 10vw, 72px);
        line-height: 0.92;
    }
    .abn-people__text { max-width: 100%; }
    .abn-people__content .abn-button { margin-top: 28px; }

    .abn-banner__inner { padding-left: 28px; padding-right: 28px; padding-top: 280px; }
    .abn-banner__can-wrap {left: 28px;width: 120px;height: 300px;bottom: 210px;}

    /* products: hand off to Slick, no right padding so next card peeks */
    .abn-fuel { padding-right: 0; overflow: hidden; }
    .abn-fuel__grid { display: block; margin-right: 56px; } /* 56px right gap = peek size */

    /* Slick track & slides */
    .abn-fuel__grid .slick-list { overflow: visible; }
    .abn-fuel__grid .slick-track { display: flex; align-items: stretch; }
    .abn-fuel__grid .slick-slide {
        height: auto;
        margin-right: 16px;
        float: none;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
    }
    .abn-fuel__grid .slick-slide > div { height: 100%; display: flex !important; flex-direction: column; }
    .abn-fuel__grid .slick-slide .abn-product { height: 100%; display: flex !important; flex-direction: column; }

    /* dots */
    .abn-fuel__grid .slick-dots {
        position: static;
        margin-top: 28px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0;
        list-style: none;
    }
    .abn-fuel__grid .slick-dots li { margin: 0; width: auto; height: auto; }
    .abn-fuel__grid .slick-dots li button {
        width: 12px; height: 12px;
        border-radius: 50%;
        border: 2px solid var(--abn-navy);
        background: transparent;
        font-size: 0;
        padding: 0;
        cursor: pointer;
        transition: background .2s ease;
    }
    .abn-fuel__grid .slick-dots li button::before { display: none; }
    .abn-fuel__grid .slick-dots li.slick-active button { background: var(--abn-navy); }

    .abn-footer__grid {
        grid-template-columns: 1fr;
        padding: 48px 24px 40px;
        row-gap: 40px;
    }
    /* Remove the empty spacer cell on mobile */
    .abn-footer__cell[aria-hidden] { display: none; }
    .abn-footer__title { font-size: clamp(40px, 10vw, 64px); margin-bottom: 12px; }
    .abn-footer__lead { max-width: 100%; }
    .abn-footer__cell--contact { padding-top: 0; }
    .abn-footer__contact-head { margin-bottom: 10px; }
    .abn-footer__cell--social { justify-content: flex-start; }
    .abn-footer__social { flex-direction: row; gap: 14px; align-items: center; }
    .abn-footer__social-handle { font-size: 18px; order: 2; }
    .abn-footer__social-icon { order: 1; }
    .abn-footer__bar-inner { padding: 14px 24px; flex-direction: column; gap: 6px; align-items: flex-start; }
}

@media (max-width: 560px) {
    .abn-nav__list > li:not(:last-child) { display: none; }
    .abn-footer__inner { grid-template-columns: 1fr; }
}

/* =====================================================================
   PRODUCT MODAL
   ===================================================================== */

/* Backdrop */
.abn-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 25, 0.55);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.abn-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Modal shell */
.abn-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    width: min(880px, 94vw);
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 9100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
.abn-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
body.abn-modal-open,
body.abn-drawer-open { overflow: hidden; }

/* Two-column body — true 50 / 50 */
.abn-modal__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

/* Left — can image */
.abn-modal__media {
    background: var(--abn-cream-soft);
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    overflow: hidden;
    padding-left: 100px;
}
/* Eyebrow + title sit at the top of the left column */
.abn-modal__media-header {
    flex-shrink: 0;
    margin-bottom: 0px;
}
.abn-modal__media-header .abn-product__eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--abn-muted);
    text-transform: uppercase;
}
/* Can image fills the rest of the left column, centered */
.abn-modal__media-img {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: start;
    min-height: 0;
}
.abn-modal__can-img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: 440px;
    object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,.18));
}
.abn-modal__can-placeholder {
    width: 140px;
    height: 300px;
    background: var(--abn-grey);
    border-radius: 8px;
}

/* Right — scrollable content */
.abn-modal__content {
    padding: 36px 40px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 100px;
}
.abn-modal__name {
    font-family: var(--abn-font-headline);
    font-weight: 600;
    font-size: clamp(36px, 12.8vw, 56px);
    text-transform: uppercase;
    color: var(--abn-navy);
    line-height: 0.92;
    letter-spacing: 0.01em;
    margin: 0 0 18px;
}
.abn-modal__desc {
    font-size: 13px;
    line-height: 1.68;
    color: var(--abn-navy);
    margin-bottom: 22px;
}

/* Nutrition table */
.abn-modal__nutrition { margin-bottom: 20px; }
.abn-modal__nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--abn-navy);
}
.abn-modal__nutrition-table thead th {
    text-align: left;
    padding: 6px 0 8px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 2px solid var(--abn-navy);
}
.abn-modal__nutrition-table thead th:last-child { text-align: right; }
.abn-modal__nutrition-table tbody td {
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
    color: var(--abn-navy);
    font-size: 13px;
}
.abn-modal__nutrition-table tbody td:last-child {
    text-align: right;
    white-space: nowrap;
}
.abn-modal__nutrition-table tbody tr:last-child td { border-bottom: 1px solid var(--abn-navy); }

/* Pack / case image */
.abn-modal__pack { margin-top: 16px; }
.abn-modal__pack-img {
    max-height: 100px;
    width: auto;
    object-fit: contain;
}

/* Bottom colored bar */
.abn-modal__bar {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 36px;
}
.abn-modal__close {
    background: none;
    border: none;
    font-family: var(--abn-font-display);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--abn-navy);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: opacity .15s;
}
.abn-modal__close:hover { opacity: 0.7; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .abn-modal {
        width: 100vw;
        max-height: 100dvh;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(30px) scale(0.98);
        border-radius: 16px 16px 0 0;
    }
    .abn-modal.is-open { transform: translateY(0) scale(1); }
    .abn-modal__body { grid-template-columns: 1fr; overflow-y: auto; }
    .abn-modal__media {
        padding: 24px 24px 16px;
        flex-direction: column;
        min-height: 310px;
        height: auto;
    }
    .abn-modal__media-img {
        flex: 0 0 auto;
        min-height: 180px;
        height: 180px;
        justify-content: center;
    }
    .abn-modal__can-img {
        height: 180px;
        width: auto;
        max-height: 180px;
    }
    .abn-modal__content { padding: 24px 24px 16px; overflow-y: unset; }
}

/* =====================================================================
   ABOUT PAGE — "We Are Abnormal" + "Made in Sweden"
   ===================================================================== */

.abn-main--about {
    position: relative;
    overflow: hidden;
}

/* The about page leaves room for the can to bleed below the image card,
   so we expose more of the parallax wave between the two sections. */

/* ---------- We Are Abnormal section ---------- */

.abn-about {
    background: transparent;
    overflow: visible;
    padding: 0;
}

.abn-about__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    padding: 110px 50px 0px 50px;
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
}

.abn-about__content {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.abn-about__headline {
    font-family: var(--abn-font-headline);
    font-weight: 600;
    font-size: clamp(84px, 6.6vw, 88px);
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: var(--abn-navy);
    margin: 0 0 28px;
}

.abn-about__text {
    color: var(--abn-navy);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 400px;
}
.abn-about__text p { margin: 0 0 1.1em; }
.abn-about__text p:last-child { margin-bottom: 0; }

/* right column: image card + floating can */
.abn-about__visual {
    position: relative;
    min-height: 360px;
    /* leave space below for the can to bleed out */
    padding-bottom: 160px;
}

.abn-about__imgcard {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    background: #1b2a35;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.abn-about__imgcard-inner {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 30% 70% at 55% 50%,
            rgba(80,65,55,.7) 0%,
            rgba(40,35,30,.5) 50%,
            transparent 80%),
        linear-gradient(160deg,
            #2f3a42 0%,
            #242e36 35%,
            #1a2530 65%,
            #141e27 100%);
    filter: blur(0.4px) saturate(0.85);
}
.abn-about__imgcard-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.04) 0 1px,
            transparent 1px 7px);
    opacity: 0.7;
}

/* Floating can — centered on the image card, bleeds far below it */
.abn-about__can-wrap {
    position: absolute;
    bottom: 90px;
    left: 30%;
    transform: translateX(-50%);
    z-index: 3;
    width: 190px;
    height: 384px;
}
.abn-about__can-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    filter: drop-shadow(0 24px 40px rgba(0,0,0,.42))
            drop-shadow(4px 0 14px rgba(0,0,0,.2));
}

/* ---------- Made in Sweden section ---------- */
/* The whole block is offset to align with the image-card column above,
   mirroring the same flex proportions as .abn-about__layout. */

.abn-made {
    background: transparent;
    padding: 0;
    position: relative;
    z-index: 1;
}

.abn-made__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    padding: 0px 160px 140px 50px;
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
}

/* .abn-made__spacer: empty left grid cell. Keeps the right column aligned
   with the image-card column above. No styles needed — the grid handles it. */

/* .abn-made__inner: right grid cell with text content. Default left-aligned
   in its cell. */

.abn-made__headline {
    font-family: var(--abn-font-headline);
    font-weight: 600;
    font-size: clamp(40px, 6.4vw, 78px);
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--abn-navy);
    margin: 0 0 22px;
    text-align: left;
}

.abn-made__text {
    color: var(--abn-navy);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 420px;
    text-align: left;
}
.abn-made__text p { margin: 0 0 1.1em; }
.abn-made__text p:last-child { margin-bottom: 0; }

/* ---------- Tablet (medium screens) ---------- */

@media (max-width: 1200px) {
    .abn-about__layout {
        padding: 80px 60px 40px 60px;
        gap: 48px;
    }
    .abn-made__layout {
        padding: 32px 60px 100px 60px;
        gap: 48px;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .abn-about__layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 48px 20px 0;
    }
    .abn-about__content {
        padding-top: 0;
        width: 100%;
    }
    .abn-about__text { max-width: 100%; }

    .abn-about__visual {
        width: 100%;
        max-width: 100%;
        padding-bottom: 200px;
        min-height: 0;
    }
    .abn-about__can-wrap {
        width: 180px;
        height: 380px;
        bottom: 0;
    }

    .abn-made__layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 24px 20px 80px;
    }
    .abn-made__spacer { display: none; }
    .abn-made__inner {
        max-width: 100%;
    }
    .abn-made__headline {
        font-size: clamp(40px, 9vw, 56px);
    }
    .abn-made__text { max-width: 100%; }
}

/* =====================================================================
   INSTAGRAM FEED
   ===================================================================== */

.abn-instagram {
    background: #f6f4f0;
    position: relative;
    z-index: 1;
}

.abn-instagram__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 60px 56px 28px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

.abn-instagram__title {
    font-family: var(--abn-font-headline);
    font-weight: 600;
    font-size: clamp(32px, 5vw, 60px);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--abn-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.abn-instagram__icon {
    flex-shrink: 0;
    color: var(--abn-navy);
}

.abn-instagram__follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--abn-navy);
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 3px;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    margin-bottom: 8px;
}

.abn-instagram__follow:hover { opacity: 0.55; }

.abn-instagram__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.abn-instagram__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    background: var(--abn-navy);
}

.abn-instagram__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.35s ease;
}

.abn-instagram__item:hover img {
    transform: scale(1.06);
    opacity: 0.72;
}

.abn-instagram__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.abn-instagram__item:hover .abn-instagram__overlay {
    opacity: 1;
}

@media (max-width: 960px) {
    .abn-instagram__header {
        padding: 40px 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .abn-instagram__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .abn-instagram__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }
}

/* =====================================================================
   SINGLE POST & PAGE — article layout
   ===================================================================== */

/* ── Hero ── */

.abn-single__hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    background-color: var(--abn-navy-deep);
    background-size: cover;
    background-position: center;
}

.abn-single__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 31, 37, 0.94) 0%,
        rgba(10, 31, 37, 0.55) 50%,
        rgba(10, 31, 37, 0.28) 100%
    );
    z-index: 1;
}

.abn-single__hero--minimal {
    min-height: 340px;
}

.abn-single__hero--page {
    min-height: 360px;
}

.abn-single__hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--abn-container);
    margin: 0 auto;
    padding: 100px 56px 56px;
    box-sizing: border-box;
}

.abn-single__eyebrow {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--abn-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.abn-single__eyebrow-link {
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease;
}

.abn-single__eyebrow-link:hover {
    color: #fff;
}

.abn-single__title {
    font-family: var(--abn-font-headline);
    font-size: clamp(40px, 7vw, 82px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
    max-width: 880px;
}

/* ── Content wrapper ── */

.abn-single__wrap {
    background: var(--abn-cream-soft);
    padding: 72px 56px 100px;
}

.abn-single__layout {
    max-width: var(--abn-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 80px;
    align-items: start;
}

.abn-page__layout {
    max-width: 780px;
    margin: 0 auto;
}

/* ── Back link ── */

.abn-single__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--abn-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--abn-navy);
    margin-bottom: 44px;
    transition: opacity 0.15s ease;
}

.abn-single__back:hover {
    opacity: 0.55;
}

/* ── Entry content typography ── */

.abn-single__entry p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--abn-text);
    margin: 0 0 1.5em;
}

.abn-single__entry h2 {
    font-family: var(--abn-font-headline);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--abn-navy);
    margin: 1.8em 0 0.55em;
}

.abn-single__entry h3 {
    font-family: var(--abn-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--abn-navy);
    margin: 1.8em 0 0.5em;
}

.abn-single__entry h4,
.abn-single__entry h5,
.abn-single__entry h6 {
    font-family: var(--abn-font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--abn-navy);
    margin: 1.4em 0 0.4em;
}

.abn-single__entry a {
    color: var(--abn-navy);
    border-bottom: 1.5px solid currentColor;
    transition: opacity 0.15s ease;
}

.abn-single__entry a:hover {
    opacity: 0.6;
}

.abn-single__entry ul,
.abn-single__entry ol {
    font-size: 17px;
    line-height: 1.75;
    padding-left: 1.4em;
    margin: 0 0 1.5em;
}

.abn-single__entry li {
    margin-bottom: 0.4em;
}

.abn-single__entry blockquote {
    border-left: 3px solid var(--abn-navy);
    margin: 2em 0;
    padding: 12px 28px;
    font-size: 20px;
    font-style: italic;
    color: var(--abn-navy);
    background: rgba(16, 43, 51, 0.04);
    border-radius: 0 var(--abn-radius) var(--abn-radius) 0;
}

.abn-single__entry blockquote p:last-child {
    margin-bottom: 0;
}

.abn-single__entry img {
    border-radius: var(--abn-radius);
    margin: 2em 0;
}

.abn-single__entry figure {
    margin: 2em 0;
}

.abn-single__entry figcaption {
    font-size: 13px;
    color: var(--abn-muted);
    margin-top: 8px;
    text-align: center;
}

.abn-single__entry hr {
    border: none;
    border-top: 1.5px solid var(--abn-grey);
    margin: 2.5em 0;
}

.abn-single__entry pre,
.abn-single__entry code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 14px;
    background: rgba(16, 43, 51, 0.06);
    border-radius: 3px;
    padding: 2px 6px;
}

.abn-single__entry pre {
    padding: 20px 24px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.abn-single__entry pre code {
    background: none;
    padding: 0;
}

/* ── Tags ── */

.abn-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1.5px solid var(--abn-grey);
}

.abn-single__tag {
    display: inline-block;
    font-family: var(--abn-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--abn-navy);
    border: 1.5px solid var(--abn-navy);
    border-radius: 100px;
    padding: 5px 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.abn-single__tag:hover {
    background: var(--abn-navy);
    color: #fff;
}

/* ── Sidebar meta card ── */

.abn-single__sidebar {
    position: sticky;
    top: calc(var(--abn-header-h) + 32px);
}

.abn-single__meta-card {
    background: var(--abn-cream);
    border-radius: var(--abn-radius);
    padding: 28px 24px;
}

.abn-single__meta-label {
    font-family: var(--abn-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--abn-muted);
    margin-bottom: 4px;
}

.abn-single__meta-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--abn-navy);
    margin-bottom: 22px;
    line-height: 1.3;
}

.abn-single__meta-val:last-child {
    margin-bottom: 0;
}

.abn-single__meta-val a {
    color: inherit;
    border-bottom: 1px solid currentColor;
}

/* ── Paginated posts ── */

.abn-single__page-links {
    margin-top: 2em;
    font-size: 14px;
    font-weight: 600;
    color: var(--abn-navy);
}

/* ── Mobile ── */

@media (max-width: 960px) {
    .abn-single__hero-inner {
        padding: 80px 20px 40px;
    }
    .abn-single__wrap {
        padding: 40px 20px 60px;
    }
    .abn-single__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .abn-single__sidebar {
        position: static;
        margin-top: 40px;
    }
    .abn-single__meta-card {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0 24px;
    }
    .abn-single__entry p,
    .abn-single__entry ul,
    .abn-single__entry ol {
        font-size: 16px;
    }
}