/*
 * Boligo public website design system (v2).
 *
 * Loaded by the public homepage and by the shared public layout
 * (resources/views/layouts/landing/app.blade.php). It must never leak into the
 * admin or restaurant panels, so every rule is namespaced with `bo2-` and
 * scoped to one of three roots:
 *
 *   .bo2-header  shared public header
 *   .bo2-footer  shared public footer
 *   .bo2-home    homepage body
 *   .bo2-page    public content/form pages rendered through the shared layout
 *
 * No bare element selector is declared outside those roots, so the vendor
 * stylesheets the layout already loads (bootstrap, main.css, select2, toastr)
 * keep working unchanged on the application forms.
 *
 * Image URLs are relative to this file.
 */

:root {
    --bo2-orange: #ff8200;
    --bo2-orange-dark: #e67500;
    --bo2-ink: #171717;
    --bo2-paper: #fff;
    --bo2-muted: #666;
    --bo2-line: #e5e5e5;
    --bo2-focus: #1e5ed0;
    --bo2-max: 1280px;
    --bo2-gutter: clamp(20px, 4.5vw, 72px);
    --bo2-font: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------- scopes - */

.bo2-home,
.bo2-header,
.bo2-footer,
.bo2-page {
    font-family: var(--bo2-font);
    color: var(--bo2-ink);
    -webkit-font-smoothing: antialiased;
}

.bo2-home *,
.bo2-header *,
.bo2-footer * {
    box-sizing: border-box;
}

.bo2-home a,
.bo2-header a,
.bo2-footer a {
    color: inherit;
    text-decoration: none;
}

.bo2-home img,
.bo2-header img,
.bo2-footer img {
    max-width: 100%;
    display: block;
}

.bo2-home h1, .bo2-home h2, .bo2-home h3, .bo2-home p, .bo2-home figure,
.bo2-header p, .bo2-footer p {
    margin: 0;
}

.bo2-home h1, .bo2-home h2, .bo2-home h3 {
    letter-spacing: -.055em;
}

.bo2-home h2 {
    font-size: clamp(32px, 3.5vw, 50px);
    line-height: 1.02;
    font-weight: 900;
}

.bo2-home ul,
.bo2-header ul,
.bo2-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bo2-home a:focus-visible,
.bo2-header a:focus-visible,
.bo2-footer a:focus-visible,
.bo2-page a:focus-visible,
.bo2-home button:focus-visible,
.bo2-header button:focus-visible,
.bo2-home summary:focus-visible,
.bo2-page :is(input, select, textarea, button):focus-visible {
    outline: 3px solid var(--bo2-focus);
    outline-offset: 4px;
}

.bo2-wrap {
    max-width: var(--bo2-max);
    margin-inline: auto;
    padding-inline: var(--bo2-gutter);
}

.bo2-skip {
    position: fixed;
    top: -80px;
    left: 20px;
    background: var(--bo2-ink);
    color: #fff;
    padding: 16px;
    z-index: 100;
    border-radius: 6px;
}

.bo2-skip:focus {
    top: 10px;
}

/* --------------------------------------------------------------- buttons - */

.bo2-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 17px 23px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    line-height: 1.15;
    border: 0;
    cursor: pointer;
    transition: transform .2s, background .2s;
    white-space: nowrap;
    font-family: inherit;
}

.bo2-btn:hover {
    transform: translateY(-2px);
}

/* Doubled class so the button colour outranks the `a { color: inherit }` reset;
   otherwise a dark button inside dark copy renders its label invisible. */
.bo2-btn.bo2-btn--orange {
    background: var(--bo2-orange);
    color: var(--bo2-ink);
}

.bo2-btn.bo2-btn--orange:hover {
    background: var(--bo2-orange-dark);
}

.bo2-btn.bo2-btn--dark {
    background: var(--bo2-ink);
    color: #fff;
}

.bo2-btn.bo2-btn--dark:hover {
    background: #353535;
}

.bo2-btn.bo2-btn--white {
    background: #fff;
    color: var(--bo2-ink);
}

.bo2-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------- header - */

.bo2-header {
    height: 86px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    padding: 0;
    margin: 0;
}

.bo2-header__inner {
    max-width: 1440px;
    height: 100%;
    margin: auto;
    padding: 0 var(--bo2-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.bo2-brand {
    flex-shrink: 0;
    display: block;
}

.bo2-brand img {
    object-fit: contain;
    width: 130px;
    height: 47px;
}

.bo2-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1;
    justify-content: center;
}

.bo2-nav a,
.bo2-login {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.bo2-nav a:hover,
.bo2-login:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.bo2-actions {
    display: flex;
    gap: 24px;
    align-items: center;
}

.bo2-btn--join {
    padding: 13px 17px;
    font-size: 13px;
    gap: 0;
}

.bo2-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    background: none;
    padding: 11px;
    cursor: pointer;
}

.bo2-burger span {
    display: block;
    width: 21px;
    height: 2px;
    background: var(--bo2-ink);
    margin: 5px 0;
}

.bo2-mnav[hidden] {
    display: none;
}

.bo2-mnav {
    background: #fff;
    padding: 16px var(--bo2-gutter) 24px;
    border-bottom: 1px solid var(--bo2-line);
    position: relative;
    z-index: 29;
}

/* The open menu sat directly on the hero with nothing between them, so the
   headline carried on underneath it and the panel read as a rendering fault
   rather than as an open menu. The backdrop is a body-level element because a
   pseudo-element on the menu cannot escape the menu's own stacking context.
   The page is also held still, so scrolling under an open menu is not
   possible. */
body.bo2-menu-open {
    overflow: hidden;
}

body.bo2-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .45);
    z-index: 20;
    pointer-events: none;
}

.bo2-mnav a {
    display: block;
    padding: 13px 0;
    font-weight: 700;
    font-size: 15px;
}

/* ------------------------------------------------------------------ hero - */

.bo2-hero {
    position: relative;
    background: var(--bo2-orange);
    overflow: hidden;
    min-height: 620px;
}

.bo2-hero__art {
    position: absolute;
    inset: 0;
    background-image: url('hero-food.webp');
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

/*
 * The scrim the hero copy is read against.
 *
 * White on the brand orange is 2.5:1, and over the photograph the brightness
 * changes from word to word, so the copy needs a background it can rely on
 * rather than whatever the food happens to be. Black at .40 over the orange
 * brings white to about 5.4:1 - comfortably past the 4.5:1 body-text mark -
 * and the gradient is gone before it reaches the food, so the photograph
 * keeps its colour.
 *
 * It is `::after` on purpose: as the last child it paints above both the art
 * and the inner wrapper, while `.bo2-hero__copy` carries `z-index: 1` and so
 * still paints above it. No markup change, one layer.
 */
.bo2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(95deg,
        rgba(0, 0, 0, .38) 0%,
        rgba(0, 0, 0, .35) 34%,
        rgba(0, 0, 0, .13) 58%,
        rgba(0, 0, 0, 0) 78%);
}

.bo2-hero__inner {
    position: relative;
    max-width: 1440px;
    margin: auto;
    padding: 54px var(--bo2-gutter) 46px;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.bo2-hero__copy {
    width: 56%;
    max-width: 680px;
    position: relative;
    z-index: 1;
    /* Read against the scrim above, not against the orange. The shadow is a
       second line of defence for the few pixels where a bright piece of food
       still shows through, not the thing doing the work. */
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* The address bar is a white card; its own text stays dark. */
.bo2-hero__copy .bo2-address {
    color: var(--bo2-ink);
    text-shadow: none;
}

.bo2-hero .bo2-eyebrow {
    margin-bottom: 21px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.bo2-dot {
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
}

.bo2-home h1 {
    font-weight: 900;
    font-size: clamp(64px, 7.8vw, 116px);
    /* .9 is tighter than the font's own ascent plus descent, so every
       descender hung outside its line box: the comma of "çekerse," landed on
       the B of "Boligo.", the cedilla touched the line above, and the g of
       "Boligo." ran into the sentence below. 1 keeps the display setting
       tight and gives the descenders the room they were already using. */
    line-height: 1;
    letter-spacing: -.075em;
    margin-left: -5px;
}

/* `.bo2-home p` in the reset is one class plus one element and so outranked
   `.bo2-hero__sub`, which is one class: the 25px below the headline was never
   applied and the two sat flush against each other at every width. Matching
   the reset's weight is what makes the gap real. */
.bo2-home .bo2-hero__sub {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 28px;
    font-weight: 500;
    color: rgba(255, 255, 255, .93);
}

.bo2-address {
    margin-top: 29px;
    display: flex;
    background: #fff;
    padding: 7px;
    border-radius: 10px;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 610px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .07);
    min-height: 66px;
    font-size: 15px;
}

.bo2-address > svg {
    height: 25px;
    width: 25px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    margin-left: 11px;
}

.bo2-address > span {
    flex: 1;
    white-space: nowrap;
}

.bo2-address strong {
    padding: 17px 16px;
    background: var(--bo2-ink);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    gap: 15px;
    align-items: center;
}

.bo2-address:hover strong {
    background: #353535;
}

/* Same reset problem as the subtitle: this sat flush under the card. */
.bo2-home .bo2-address__help {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 12px;
    max-width: 390px;
    /* .88 rendered at about rgb(214) and measured 4.2:1 on the darkest
       pixel it sits on; .95 clears 4.5:1 and still reads as a quieter
       off-white beside the subtitle. */
    color: rgba(255, 255, 255, .95);
}

.bo2-mobile-only {
    display: none;
}

/* ------------------------------------------------------------ categories - */

.bo2-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    padding-block: 40px 38px;
}

.bo2-cat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.025em;
    text-align: center;
}

.bo2-pic {
    display: block;
    background-image: url('food-collection.webp');
    background-size: 300% 200%;
    background-repeat: no-repeat;
}

.bo2-crop-0 { background-position: 0 0; }
.bo2-crop-1 { background-position: 50% 0; }
.bo2-crop-2 { background-position: 100% 0; }
.bo2-crop-3 { background-position: 0 100%; }
.bo2-crop-4 { background-position: 50% 100%; }
.bo2-crop-5 { background-position: 100% 100%; }

.bo2-cat .bo2-pic {
    width: clamp(82px, 10vw, 145px);
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform .25s;
    background-color: #fafafa;
}

.bo2-cat:hover .bo2-pic {
    transform: translateY(-5px) rotate(-3deg);
}

/* -------------------------------------------------------------- discover - */

.bo2-discover {
    padding-top: 24px;
    padding-bottom: 65px;
}

.bo2-shead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.bo2-shead .bo2-eyebrow {
    color: var(--bo2-muted);
    margin-bottom: 9px;
}

.bo2-tlink {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    display: flex;
    gap: 16px;
    white-space: nowrap;
}

.bo2-tlink:hover {
    text-decoration: underline;
}

.bo2-fgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.bo2-fcard {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f4;
    position: relative;
    isolation: isolate;
}

.bo2-fcard > .bo2-pic {
    aspect-ratio: 1;
    transition: transform .35s;
}

.bo2-fcard:hover > .bo2-pic {
    transform: scale(1.035);
}

.bo2-fcard__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px;
    background: var(--bo2-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bo2-fcard__title h3 {
    font-size: clamp(19px, 2.1vw, 29px);
    font-weight: 800;
    letter-spacing: -.05em;
}

.bo2-fcard__title > span {
    font-size: 23px;
}

/* ------------------------------------------------------------------ apps - */

.bo2-apps {
    background: var(--bo2-ink);
    color: #fff;
    overflow: hidden;
}

.bo2-apps__inner {
    display: grid;
    grid-template-columns: .9fr 1.3fr;
    align-items: center;
    gap: 42px;
    padding-block: 55px 25px;
}

.bo2-apps .bo2-eyebrow {
    color: var(--bo2-orange);
    margin-bottom: 19px;
}

.bo2-apps h2 {
    font-size: clamp(38px, 4.3vw, 62px);
    line-height: 1;
}

.bo2-apps__copy > p:not(.bo2-eyebrow) {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 21px;
    margin-bottom: 26px;
    color: #ddd;
}

.bo2-phones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    scroll-margin-top: 110px;
}

.bo2-phone-item {
    flex: 1;
    min-width: 0;
    max-width: 180px;
}

.bo2-phone {
    padding: 5px;
    background: #292929;
    border: 1.5px solid #666;
    border-radius: 27px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}

.bo2-phone img {
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 1110;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
    background: #fff;
}

.bo2-phone__speaker {
    position: absolute;
    top: 11px;
    left: 37%;
    width: 26%;
    height: 5px;
    border-radius: 8px;
    background: #333;
    z-index: 1;
}

.bo2-phone-item figcaption {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding-top: 14px;
}

.bo2-phone-item figcaption span {
    font-size: 10px;
    font-weight: 400;
    display: block;
    color: #aaa;
    margin-top: 5px;
}

.bo2-note {
    grid-column: 1 / -1;
    color: #aaa;
    font-size: 10px;
    line-height: 1.6;
    border-top: 1px solid #3a3a3a;
    padding-top: 15px;
    margin-top: 4px;
}

/* -------------------------------------------------------------- partners - */

.bo2-partners {
    padding-block: 55px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.bo2-partner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 330px;
    border-radius: 12px;
    scroll-margin-top: 110px;
}

.bo2-partner--rest {
    background: var(--bo2-orange);
}

.bo2-partner--courier {
    background: #eee;
}

/* The source photo is a single two-panel image; crop it as portraits rather
   than stretching the subjects. */
.bo2-partner__photo {
    position: absolute;
    inset: 0;
    left: 45%;
    background-image: url('partners.webp');
    background-size: 200% 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

.bo2-photo-chef { background-position: left center; }
.bo2-photo-courier { background-position: right center; }

.bo2-partner__copy {
    padding: 32px 25px;
    max-width: 65%;
    position: relative;
    z-index: 1;
}

.bo2-partner__copy .bo2-eyebrow {
    font-size: 10px;
    margin-bottom: 22px;
}

.bo2-partner__copy h2 {
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 900;
    line-height: 1.02;
}

.bo2-partner__copy > p:not(.bo2-eyebrow) {
    font-size: 13px;
    line-height: 1.45;
    max-width: 190px;
    margin-top: 14px;
    margin-bottom: 25px;
}

.bo2-partner__copy .bo2-btn {
    padding: 14px 16px;
    font-size: 12px;
    gap: 15px;
}

.bo2-partner--rest .bo2-partner__copy {
    background: var(--bo2-orange);
    min-height: 100%;
    clip-path: polygon(0 0, 100% 0, 89% 100%, 0 100%);
    padding-right: 40px;
}

.bo2-partner--courier .bo2-partner__copy {
    background: #f3f3f3;
    min-height: 100%;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    padding-right: 35px;
    max-width: 61%;
}

/* ------------------------------------------------------------------- faq - */

.bo2-faq {
    padding-top: 10px;
    padding-bottom: 70px;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
}

.bo2-faq .bo2-eyebrow {
    color: var(--bo2-muted);
    margin-bottom: 12px;
}

.bo2-faq__items details {
    border-bottom: 1px solid var(--bo2-line);
}

.bo2-faq__items summary {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.bo2-faq__items summary::-webkit-details-marker {
    display: none;
}

.bo2-faq__items summary span {
    font-size: 23px;
    font-weight: 400;
}

.bo2-faq__items details[open] summary span {
    transform: rotate(45deg);
}

.bo2-faq__items details p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bo2-muted);
    padding-bottom: 20px;
    max-width: 560px;
}

/* ---------------------------------------------------------------- footer - */

.bo2-footer {
    background: var(--bo2-ink);
    color: #fff;
    padding: 0;
    margin: 0;
}

.bo2-footer__top {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-block: 35px;
    border-bottom: 1px solid #383838;
}

.bo2-footer__top .bo2-brand img {
    width: 130px;
    height: 45px;
}

.bo2-footer__top p {
    color: #ddd;
    font-size: 15px;
    flex: 1;
}

.bo2-footer__cta {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    gap: 20px;
}

.bo2-footer__links {
    padding-block: 28px;
}

.bo2-footer__links nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 27px;
    font-size: 12px;
    color: #ddd;
    margin-bottom: 25px;
}

.bo2-footer__links nav a:hover {
    color: var(--bo2-orange);
}

.bo2-footer__legal {
    font-size: 10px;
    line-height: 1.6;
    color: #999;
    max-width: 760px;
}

.bo2-footer__legal strong {
    color: #ccc;
    font-weight: 700;
}

.bo2-footer__legal a {
    color: #ccc;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bo2-footer__note {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
    color: #999;
}

/* ----------------------------------------------- public content / forms - */
/*
 * Applied to pages rendered through the shared public layout: restaurant
 * application, courier application, contact, policy pages and their error and
 * success states. Only typography, controls and spacing are themed; the page
 * markup and the bootstrap grid the forms rely on stay untouched.
 */

.bo2-page {
    background: #fff;
    padding-block: 10px 60px;
    min-height: 50vh;
}

.bo2-page .page-header-title,
.bo2-page h1 {
    font-weight: 900;
    letter-spacing: -.045em;
    color: var(--bo2-ink);
}

.bo2-page h1 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.05;
}

.bo2-page h2,
.bo2-page h3,
.bo2-page h4,
.bo2-page h5 {
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--bo2-ink);
}

.bo2-page .nav-subtitle,
.bo2-page .input-label,
.bo2-page .form-label {
    font-weight: 700;
    color: var(--bo2-ink);
    font-size: 13px;
}

.bo2-page .card {
    border: 1px solid var(--bo2-line);
    border-radius: 12px;
    box-shadow: none;
}

.bo2-page .form-control,
.bo2-page .custom-select,
.bo2-page .select2-container--default .select2-selection--single,
.bo2-page .select2-container--default .select2-selection--multiple {
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    min-height: 46px;
    font-size: 14px;
    font-family: inherit;
}

.bo2-page .form-control:focus,
.bo2-page .custom-select:focus {
    border-color: var(--bo2-orange);
    box-shadow: 0 0 0 3px rgba(255, 130, 0, .18);
}

.bo2-page .btn-primary,
.bo2-page .btn--primary {
    background: var(--bo2-orange);
    border-color: var(--bo2-orange);
    color: var(--bo2-ink);
    font-weight: 700;
    border-radius: 8px;
}

.bo2-page .btn-primary:hover,
.bo2-page .btn--primary:hover {
    background: var(--bo2-orange-dark);
    border-color: var(--bo2-orange-dark);
    color: var(--bo2-ink);
}

.bo2-page .btn-secondary,
.bo2-page .btn--reset {
    border-radius: 8px;
    font-weight: 700;
}

.bo2-page .invalid-feedback,
.bo2-page .text-danger,
.bo2-page .error {
    font-size: 12px;
    font-weight: 600;
}

.bo2-page .is-invalid,
.bo2-page .form-control.is-invalid {
    border-color: #d33b3b;
}

.bo2-page .alert-success,
.bo2-page .alert-danger {
    border-radius: 10px;
    font-size: 14px;
    border-width: 1px;
}

/* Long addresses and e-mail addresses in the contact tiles have no break
   opportunity and pushed the page sideways at 320px. */
.bo2-page .contact-item .content,
.bo2-page .contact-item .info {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* The captcha row puts a full-width image and a reload button in one half-width
   column, which pushed the page sideways on narrow screens. */
.bo2-page #reload-captcha img {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.bo2-page #reload-captcha .capcha-spin {
    flex: 0 0 auto;
    padding: .6rem;
}

/* The upload widgets ship an empty <img> that their script fills in once a file
   is chosen. Until then it is a broken image, so keep it out of the page. */
.bo2-page img[src=""] {
    display: none;
}

/* Spacer kept by the public views for the old fixed header. The shared header
   is in normal flow now, so the spacer would only add dead whitespace. */
.bo2-page .h-148px {
    display: none;
}

/* Turkish file-picker control; the native input stays in place behind it so the
   browser's own file dialog, validation and submission are unchanged. */
.bo2-page .bo2-file {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    min-height: 46px;
}

.bo2-page .bo2-file__button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 6px;
    background: var(--bo2-ink);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
}

.bo2-page .bo2-file__button:hover {
    background: #353535;
}

.bo2-page .bo2-file__name {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 13px;
    color: var(--bo2-muted);
    overflow-wrap: anywhere;
}

/* Keep the real control reachable by keyboard without showing its native text. */
.bo2-page .bo2-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.bo2-page .bo2-file__input:focus-visible + .bo2-file__button,
.bo2-page .bo2-file:focus-within {
    outline: 3px solid var(--bo2-focus);
    outline-offset: 3px;
}

/* A single, consistent intro band above every public content page. */
.bo2-pagehead {
    background: #faf7f3;
    border-bottom: 1px solid var(--bo2-line);
    padding-block: 34px;
    margin-bottom: 34px;
}

.bo2-pagehead .bo2-eyebrow {
    color: var(--bo2-orange-dark);
    margin-bottom: 10px;
}

.bo2-pagehead h1 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1.04;
}

.bo2-pagehead p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bo2-muted);
    max-width: 640px;
}

/* --------------------------------------------------------------- 1600px+ - */

@media (min-width: 1600px) {
    .bo2-hero__art {
        background-size: 1440px auto;
        background-repeat: no-repeat;
        background-position: center;
    }

    .bo2-hero,
    .bo2-hero__inner {
        min-height: 660px;
    }
}

/* --------------------------------------------------- 1101px to 1340px - */
/* The hero photo scales with the viewport while the headline does not, so in
   this band the one-line subtitle reaches the food. Wrap it instead. */

@media (min-width: 1101px) and (max-width: 1340px) {
    .bo2-hero__sub { max-width: 360px; }
}

/* ---------------------------------------------------------------- 1100px - */

@media (max-width: 1100px) {
    .bo2-nav { gap: 15px; }
    .bo2-nav a, .bo2-login { font-size: 11px; }
    .bo2-actions { gap: 14px; }
    .bo2-brand img { width: 108px; }
    .bo2-hero__copy { width: 59%; }
    /* Between tablet and desktop the hero photo reaches further left than the
       copy column, so wrap the subtitle before it runs over the food. */
    .bo2-hero__sub { max-width: 330px; }
    .bo2-address { gap: 7px; }
    .bo2-address strong { padding: 17px 12px; font-size: 11px; }
    .bo2-address > span { font-size: 13px; }
    .bo2-hero, .bo2-hero__inner { min-height: 580px; }
    .bo2-partner__copy { max-width: 67%; padding: 24px 20px; }
    .bo2-partner__copy h2 { font-size: 31px; }
    .bo2-partner__copy .bo2-eyebrow { margin-bottom: 15px; }
    .bo2-apps__inner { gap: 24px; }
    .bo2-phones { gap: 9px; }
    .bo2-phone { border-radius: 24px; }
    .bo2-phone img { border-radius: 18px; }
}

/* ----------------------------------------------------------------- 800px - */

@media (max-width: 800px) {
    .bo2-header { height: 72px; }
    .bo2-nav, .bo2-btn--join { display: none; }
    .bo2-burger { display: block; }
    .bo2-header__inner { gap: 15px; }
    .bo2-brand img { width: 113px; }
    .bo2-actions { gap: 15px; }
    .bo2-login { font-size: 12px; }

    .bo2-hero__art {
        inset: auto -10% 0 0;
        height: 400px;
        background-size: auto 100%;
        background-position: right bottom;
        background-repeat: no-repeat;
    }

    .bo2-hero__inner {
        align-items: flex-start;
        min-height: 790px;
        padding-top: 32px;
        padding-bottom: 375px;
    }

    .bo2-hero { min-height: 790px; }
    .bo2-hero__copy { width: 100%; max-width: 600px; }
    .bo2-hero .bo2-eyebrow { font-size: 11px; margin-bottom: 18px; }
    .bo2-home h1 { font-size: clamp(70px, 12vw, 100px); line-height: 1; }
    .bo2-home .bo2-hero__sub { font-size: 16px; margin-top: 22px; }
    .bo2-address { margin-top: 22px; max-width: 520px; }
    .bo2-address > span { font-size: 14px; }
    .bo2-address strong { font-size: 12px; padding: 17px 14px; }
    .bo2-home .bo2-address__help { font-size: 10px; }

    /* Below this width the copy sits on flat orange with the photo beneath
       it, so the scrim runs top to bottom instead of left to right.
       The photograph starts at about 56% of the hero and the copy does not
       finish until 61%, so the last line - the small note under the address
       bar - crosses the top of the image, where the ayran foam is almost
       white. The band between 56% and 64% therefore carries more weight than
       the rest: measured against the brightest pixel the note actually sits
       on, that is what takes white past 4.5:1. Below 64% the scrim clears and
       the food keeps its colour. */
    .bo2-hero::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, .35) 0%,
            rgba(0, 0, 0, .35) 50%,
            rgba(0, 0, 0, .58) 57%,
            rgba(0, 0, 0, .58) 63%,
            rgba(0, 0, 0, 0) 76%);
    }

    .bo2-cats {
        gap: 22px 12px;
        padding-block: 28px;
        grid-template-columns: repeat(6, 1fr);
        overflow-x: auto;
    }

    .bo2-cat { font-size: 12px; gap: 9px; min-width: 74px; }
    .bo2-cat .bo2-pic { width: 74px; }
    .bo2-discover { padding-top: 15px; padding-bottom: 35px; }
    .bo2-shead { margin-bottom: 19px; }
    .bo2-shead .bo2-eyebrow { font-size: 10px; }
    .bo2-shead h2 { font-size: 34px; }
    .bo2-tlink { font-size: 11px; gap: 6px; }
    .bo2-fgrid { gap: 12px; }
    .bo2-fcard__title { padding: 12px; }
    .bo2-fcard__title h3 { font-size: 18px; }
    .bo2-fcard__title > span { font-size: 17px; }

    .bo2-apps__inner { grid-template-columns: 1fr; gap: 30px; padding-top: 38px; }
    .bo2-apps__copy { text-align: center; }
    .bo2-apps__copy .bo2-eyebrow { margin-bottom: 14px; }
    .bo2-apps h2 { font-size: 46px; }
    .bo2-apps__copy > p:not(.bo2-eyebrow) { font-size: 16px; margin-top: 15px; margin-bottom: 20px; }
    .bo2-phones { gap: 15px; max-width: 600px; margin: auto; width: 100%; }
    .bo2-phone-item { max-width: 180px; }
    .bo2-note { text-align: center; }

    .bo2-partners { gap: 14px; padding-block: 35px; }
    .bo2-partner { min-height: 315px; }
    .bo2-partner__copy { max-width: 75%; padding: 24px 17px; }
    .bo2-partner__copy h2 { font-size: 28px; }
    .bo2-partner__copy > p:not(.bo2-eyebrow) { font-size: 12px; max-width: 150px; }
    .bo2-partner__copy .bo2-eyebrow { font-size: 9px; }
    .bo2-partner--courier .bo2-partner__copy { max-width: 73%; }

    .bo2-faq { padding-bottom: 40px; grid-template-columns: 1fr; gap: 20px; }
    .bo2-faq h2 { font-size: 35px; }

    .bo2-footer__top { gap: 20px; flex-wrap: wrap; }
    .bo2-footer__top p { font-size: 13px; }
    .bo2-footer__cta { font-size: 12px; }

    .bo2-pagehead { padding-block: 26px; margin-bottom: 26px; }
}

/* ----------------------------------------------------------------- 520px - */

@media (max-width: 520px) {
    :root { --bo2-gutter: 20px; }

    .bo2-hero, .bo2-hero__inner { min-height: 780px; }
    .bo2-hero__inner { padding-top: 29px; padding-bottom: 315px; }

    .bo2-hero__art {
        height: 330px;
        inset: auto -30% 0 -23%;
        background-position: 75% bottom;
        background-size: auto 100%;
    }

    .bo2-hero__copy { max-width: none; }
    /* line-height .9 makes the text box shorter than the glyphs, so on a
       narrow screen the descenders of the last line ran into the sentence
       underneath. The overhang is paid for with padding rather than by
       loosening the leading, which is part of the design. */
    .bo2-home h1 { font-size: 68px; letter-spacing: -.075em; margin-left: -3px; padding-bottom: .12em; }
    .bo2-hero .bo2-eyebrow { font-size: 10px; margin-bottom: 17px; }
    .bo2-hero__sub { font-size: 15px; line-height: 1.45; margin-top: 19px; max-width: 300px; }
    .bo2-mobile-only { display: block; }

    .bo2-address {
        padding: 7px;
        gap: 8px;
        flex-wrap: wrap;
        border-radius: 9px;
        margin-top: 21px;
        min-height: 106px;
        max-width: 390px;
    }

    .bo2-address > svg { height: 21px; width: 21px; margin-left: 6px; }
    .bo2-address > span { font-size: 14px; white-space: normal; }
    .bo2-address strong { width: 100%; justify-content: space-between; padding: 14px; font-size: 13px; }
    .bo2-address__help { max-width: 290px; font-size: 10px; margin-top: 10px; }

    .bo2-cats {
        gap: 17px;
        padding-block: 24px;
        grid-template-columns: repeat(6, 75px);
        scrollbar-width: none;
    }

    .bo2-cats::-webkit-scrollbar { display: none; }
    .bo2-cat { font-size: 12px; }
    .bo2-cat .bo2-pic { width: 72px; }

    .bo2-shead { align-items: center; }
    .bo2-shead h2 { font-size: 32px; }
    .bo2-shead .bo2-tlink { max-width: 90px; white-space: normal; font-size: 11px; }
    .bo2-shead .bo2-eyebrow { font-size: 10px; }

    .bo2-fgrid { grid-template-columns: 1fr; gap: 14px; }
    .bo2-fcard > .bo2-pic { aspect-ratio: 1; }
    .bo2-fcard__title { padding: 16px 18px; }
    .bo2-fcard__title h3 { font-size: 27px; }
    .bo2-fcard__title > span { font-size: 24px; }

    .bo2-apps__copy { text-align: left; }
    .bo2-apps h2 { font-size: 43px; }
    .bo2-apps__copy > p:not(.bo2-eyebrow) { font-size: 16px; }
    .bo2-phones { gap: 8px; }
    .bo2-phone { padding: 3px; border-radius: 17px; }
    .bo2-phone img { border-radius: 13px; }
    .bo2-phone__speaker { top: 7px; height: 3px; }
    .bo2-phone-item figcaption { font-size: 11px; padding-top: 12px; }
    .bo2-phone-item figcaption span { font-size: 9px; line-height: 1.4; }
    .bo2-note { text-align: left; font-size: 9px; }

    .bo2-partners { grid-template-columns: 1fr; }
    .bo2-partner { min-height: 320px; }
    .bo2-partner__copy { max-width: 64%; padding: 29px 22px; }
    .bo2-partner__copy h2 { font-size: 34px; }
    .bo2-partner__copy > p:not(.bo2-eyebrow) { font-size: 13px; max-width: 175px; }
    .bo2-partner__copy .bo2-eyebrow { font-size: 10px; margin-bottom: 20px; }
    .bo2-partner--courier .bo2-partner__copy { max-width: 62%; }

    .bo2-faq__items summary { font-size: 14px; padding-block: 18px; }
    .bo2-faq__items details p { font-size: 13px; }

    .bo2-footer__top { padding-block: 30px; gap: 14px; }
    .bo2-footer__top .bo2-brand img { width: 110px; }
    .bo2-footer__top p { font-size: 12px; }
    .bo2-footer__cta { width: 100%; padding-top: 6px; font-size: 13px; }
    .bo2-footer__links { padding-block: 25px; }
    .bo2-footer__links nav { gap: 18px; font-size: 11px; line-height: 1.5; }
}

/* ----------------------------------------------------------------- 360px - */
/* At the narrowest supported width the 76px headline wraps to four lines and
   its descenders meet the subtitle, so step the hero down one notch. */

@media (max-width: 360px) {
    .bo2-home h1 { font-size: 56px; }
    .bo2-hero__sub { margin-top: 23px; font-size: 14px; }
    .bo2-hero__inner { padding-bottom: 300px; }
    .bo2-address__help { max-width: none; }
    .bo2-partner__copy { max-width: 72%; padding: 24px 18px; }
    .bo2-partner__copy h2 { font-size: 29px; }
    .bo2-partner__copy > p:not(.bo2-eyebrow) { max-width: 150px; }
    .bo2-partner--courier .bo2-partner__copy { max-width: 70%; }
}

/* ------------------------------------------------------- reduced motion - */

@media (prefers-reduced-motion: reduce) {
    .bo2-home *,
    .bo2-home *::before,
    .bo2-home *::after,
    .bo2-header *,
    .bo2-footer * {
        animation: none !important;
        transition: none !important;
    }
}