/* ==========================================================================
   WHC — Feminine Hygiene Campaign page (Figma 3711:2528)
   Reuses theme tokens (style.css :root) + header/footer.
   ========================================================================== */
.camp {
    --camp-red:    #A32F2F;   /* Washroom Hygiene medium */
    --camp-dark:   #343A40;   /* how-it-works panel */
    --camp-pastel: #FFC19A;
    --camp-pink:   #FF5A5A;
    --camp-pink-2: #FF8A8A;
    --camp-body:   #3B3B3B;
    --camp-line:   #7F7F7F;
    background: var(--whc-white);
    overflow-x: hidden;
}
.camp img { display: block; max-width: 100%; }

/* Shared section heading */
.camp-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-black);
    text-align: center;
}
.camp-heading .pink { color: var(--camp-pink-2); font-weight: 600; }
.camp-heading .dark { color: var(--whc-red-dark); font-weight: 600; }

/* Shared buttons */
.camp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 8px 20px; border-radius: var(--radius-md);
    font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: filter .2s var(--ease), transform .2s var(--ease);
    white-space: nowrap;
}
.camp-btn--orange { background: var(--whc-orange-2); color: #fff; }
.camp-btn--white  { background: #fff; color: var(--whc-black); }
.camp-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* ============ 1. HERO ============ */
.camp-hero { position: relative; background: var(--camp-red); overflow: hidden; }
.camp-hero__photo { position: absolute; top: 0; right: 0; width: 46%; height: 100%; z-index: 0; }
.camp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-hero__photo::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.camp-hero__pattern { position: absolute; top: 0; right: 8%; width: 684px; height: 684px; max-width: 60%; opacity: 0.10; z-index: 1; pointer-events: none; }
.camp-hero__pattern img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
/* Standalone LP: there is no site nav, so the logo sits inside the hero
   (task #467), matching /lp/feminine-hygiene-solutions/. Absolutely positioned
   so it does not disturb the existing centred copy/form flex row. */
.camp-hero__logo { position: absolute; top: 32px; left: var(--container-pad); z-index: 3; display: inline-flex; align-items: center; }
.camp-hero__logo img { height: 46px; width: auto; display: block; }
.camp-hero__inner {
    position: relative; z-index: 2;
    max-width: var(--container-max); margin: 0 auto;
    padding: 130px var(--container-pad) 90px;
    min-height: 684px;
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.camp-hero__copy { width: 560px; max-width: 100%; color: #fff; }
.camp-hero__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 48px; line-height: 1.2; letter-spacing: -0.96px; }
.camp-hero__title .reg { font-weight: 400; }
.camp-hero__title .med { font-weight: 600; }
/* Keep each emphasised phrase intact on its own line (task #443) — the break
   falls naturally between the two phrases, at any width. */
.camp-hero__title .nb { white-space: nowrap; }
.camp-hero__sub { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; }

.camp-form {
    width: 525px; max-width: 100%; flex-shrink: 0;
    background: #fff; border: 1px solid var(--camp-line); border-radius: var(--radius-lg);
    padding: 24px 20px; display: flex; flex-direction: column; gap: 22px;
}
.camp-form__title { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.64px; color: var(--whc-orange); }
.camp-form__input {
    width: 100%; height: 50px; padding: 10px 20px;
    border: 1px solid var(--camp-line); border-radius: 10px;
    font-size: 20px; letter-spacing: -0.4px; color: var(--whc-black);
    font-family: var(--font-body); background: #fff;
}
.camp-form__input::placeholder { color: var(--camp-line); }
.camp-form__phone { display: flex; align-items: center; gap: 0; border: 1px solid var(--camp-line); border-radius: 10px; height: 50px; overflow: hidden; }
.camp-form__prefix { padding: 0 12px 0 20px; font-size: 20px; color: var(--camp-line); }
.camp-form__input--phone { border: 0; border-radius: 0; height: 48px; padding-left: 6px; }
.camp-form__submit {
    width: 100%; height: 50px; border: 0; border-radius: var(--radius-md);
    background: var(--whc-orange-2); color: #fff; font-size: 18px; font-weight: 600; cursor: pointer;
    transition: filter .2s var(--ease);
}
.camp-form__submit:hover { filter: brightness(0.95); }
.camp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ 2. TRUSTED BY ============ */
.camp-trusted { background: #fff; padding: 60px var(--container-pad); text-align: center; }
.camp-trusted__title { margin: 0 0 24px; font-size: 32px; font-weight: 600; line-height: 40px; color: var(--whc-black); }
.camp-trusted__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; max-width: 1160px; margin: 0 auto; }
.camp-trusted__logo { display: inline-flex; align-items: center; }
.camp-trusted__logo img { height: 64px; width: auto; max-width: 180px; object-fit: contain; }

/* ============ 3. BENEFITS ============ */
.camp-benefits { background: #f4f4f4; padding: 72px 0; }
.camp-benefits__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: flex; flex-direction: column; gap: 40px; align-items: center; }
.camp-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 1240px; }
.camp-benefit {
    background: #fff; border-radius: var(--radius-md); min-height: 202px; padding: 24px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.camp-benefit__icon { width: 32px; height: 32px; }
.camp-benefit__icon img { width: 100%; height: 100%; object-fit: contain; }
.camp-benefit__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--whc-black); }
.camp-benefit__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--camp-body); }

/* ============ 4. HOW IT WORKS ============ */
.camp-how { background: var(--camp-dark); padding: 72px 0; }
.camp-how__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.camp-how__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.camp-how__title { margin: 0 0 16px; font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.96px; color: #fff; }
.camp-how__title span { font-weight: 500; }
.camp-how__sub { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -0.4px; color: #fff; }
.camp-how__track {
    display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
}
.camp-how__track::-webkit-scrollbar { display: none; }
/* While mouse-dragging the cards or the scrollbar, disable snap + text selection. */
.camp-how__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.camp-step {
    flex: 0 0 412px; scroll-snap-align: start;
    background: #fff; border-radius: var(--radius-lg); min-height: 446px;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 12px 25px 0;
}
.camp-step__num { font-size: 64px; font-weight: 800; line-height: 1.2; letter-spacing: -1.28px; color: var(--camp-pink); }
.camp-step__title { margin: 8px 0 16px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--whc-black); }
.camp-step__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.camp-step__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--whc-grey-dark); }
.camp-step__bullet { flex: 0 0 auto; width: 7px; margin-top: 4px; }
.camp-step__bullet img { width: 7px; height: auto; }
.camp-step__photo { margin: auto -25px 0; height: 121px; overflow: hidden; }
.camp-step__photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-how__bar { position: relative; height: 9px; border-radius: 12px; background: rgba(255,255,255,0.48); margin-top: 28px; cursor: pointer; touch-action: none; }
.camp-how__bar span { position: absolute; left: 0; top: 0; height: 9px; width: 40%; border-radius: 12px; background: #fff; cursor: grab; }
.camp-how__bar.is-dragging, .camp-how__bar.is-dragging span { cursor: grabbing; }

/* ============ 5. SERVICES COVERED ============ */
.camp-services { background: #fff; padding: 70px 0; }
.camp-services__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: flex; flex-direction: column; gap: 32px; }
.camp-services__head { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.camp-services__sub { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -0.4px; color: var(--whc-black); }
.camp-services__group { display: flex; flex-direction: column; gap: 28px; }
.camp-services__label { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.64px; color: var(--whc-black); text-align: center; padding-bottom: 12px; border-bottom: 0.5px solid #666; }
.camp-services__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.camp-svc { background: #fff; border: 1px solid #eaeaea; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.camp-svc__media { width: 100%; aspect-ratio: 290 / 191; overflow: hidden; background: #f5f5f5; }
.camp-svc__media img { width: 100%; height: 100%; object-fit: cover; }
.camp-svc__body { padding: 18px 12px 24px; text-align: center; display: flex; flex-direction: column; gap: 9px; }
.camp-svc__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--camp-red); }
.camp-svc__text { margin: 0; font-size: 16px; line-height: 1.4; color: var(--camp-body); }
.camp-services__cta { align-self: center; margin-top: 4px; }

/* ============ 6. VALUE-ADDED ============ */
.camp-va { position: relative; background: var(--camp-red); overflow: hidden; }
.camp-va__photo { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 0; }
.camp-va__photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-va__inner { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 72px var(--container-pad); min-height: 590px; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.camp-va__title { margin: 0; font-size: 48px; font-weight: 600; line-height: 1.2; letter-spacing: -0.96px; color: var(--camp-pastel); max-width: 590px; }
.camp-va__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; max-width: 590px; }
.camp-va__list li { display: flex; gap: 24px; align-items: flex-start; font-size: 18px; font-weight: 500; line-height: 1.5; color: #fff; }
.camp-va__icon { flex: 0 0 auto; width: 32px; height: 32px; }
.camp-va__icon img { width: 100%; height: 100%; object-fit: contain; }
.camp-va .camp-btn { align-self: flex-start; }

/* ============ 7. WHY CHOOSE ============ */
.camp-why { background: #f4f4f4; padding: 72px 0; }
.camp-why__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.camp-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.camp-wcard { background: #fff; border: 1px solid #c1c1c1; border-radius: var(--radius-md); padding: 32px 16px; display: flex; flex-direction: column; gap: 20px; }
.camp-wcard__icon { width: 40px; height: 40px; }
.camp-wcard__icon img { width: 100%; height: 100%; object-fit: contain; }
.camp-wcard__title { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; color: #222; }
.camp-wcard__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--whc-black); }

/* ============ 8. INDUSTRIES ============ */
.camp-ind { background: #fff; padding: 70px 0; }
.camp-ind__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: flex; flex-direction: column; gap: 40px; }
.camp-ind__head { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.camp-ind__sub { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -0.4px; color: var(--whc-black); }
.camp-ind__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 17px; }
.camp-ind__tile { background: #fff; border: 1px solid #b3b3b3; border-radius: var(--radius-lg); padding: 20px 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; text-align: center; }
.camp-ind__icon { width: 40px; height: 40px; }
.camp-ind__icon img { width: 100%; height: 100%; object-fit: contain; }
.camp-ind__name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.18px; color: var(--whc-black); }
.camp-ind__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--whc-black); }

/* ============ 9. COMPLIANCE ============ */
.camp-comp { background: #fff; }
.camp-comp__inner { max-width: var(--container-max); margin: 0 auto; padding: 44px var(--container-pad); display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.camp-comp__head { flex: 0 1 auto; }
.camp-comp__title { margin: 0 0 10px; font-size: 48px; font-weight: 400; line-height: 1.22; letter-spacing: 0.5px; color: var(--whc-black); }
.camp-comp__sub { margin: 0; font-size: 24px; font-weight: 500; color: var(--whc-red-dark); }
.camp-comp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.camp-comp__list li { display: flex; gap: 20px; align-items: flex-start; font-size: 18px; line-height: 26px; letter-spacing: 0.25px; color: var(--whc-black); }
.camp-comp__check { flex: 0 0 auto; width: 26px; height: 26px; }
.camp-comp__check img { width: 100%; height: 100%; object-fit: contain; }

/* ============ 10. FAQ ============ */
.camp-faq { background: #fff; padding: 72px 0; }
.camp-faq__inner { max-width: 1186px; margin: 0 auto; padding: 0 var(--container-pad); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.camp-faq__title { width: 100%; }
.camp-faq__list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.camp-faq__item { background: #fff; border: 1px solid #b2b2b2; border-radius: var(--radius-md); overflow: hidden; }
.camp-faq__q {
    width: 100%; background: none; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px; text-align: left;
    font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--camp-line);
}
.camp-faq__item.is-open .camp-faq__q { color: var(--whc-black); }
.camp-faq__chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--whc-orange-bright); transition: transform .25s var(--ease); }
.camp-faq__item.is-open .camp-faq__chevron { transform: rotate(180deg); }
.camp-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.camp-faq__item.is-open .camp-faq__a { max-height: 400px; }
.camp-faq__a p { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 26px; letter-spacing: 0.25px; color: #797979; }

/* ============ 11. CTA ============ */
.camp-cta { position: relative; background: var(--whc-grey-dark); overflow: hidden; }
.camp-cta__photo { position: absolute; top: 0; right: 0; width: 42%; height: 100%; z-index: 0; }
.camp-cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-cta__pattern { position: absolute; top: 0; right: 34%; width: 598px; height: 598px; max-width: 45%; opacity: 0.10; z-index: 1; pointer-events: none; }
.camp-cta__pattern img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.camp-cta__inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: 72px var(--container-pad); min-height: 580px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.camp-cta__title { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.2; color: #fff; max-width: 424px; }
.camp-cta__sub { margin: 0; font-size: 18px; line-height: 1.5; color: #fff; max-width: 400px; }
.camp-cta .camp-btn { align-self: flex-start; }

/* Orange copyright strip (Figma node 3711:4161) — between CTA and footer */
.camp-copystrip { background: var(--whc-orange); padding: 20px var(--container-pad); }
.camp-copystrip p { margin: 0; text-align: center; color: #fff; font-size: 16px; line-height: 26px; letter-spacing: 0.25px; }
.camp-copystrip a { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .camp-ind__row { grid-template-columns: repeat(3, 1fr); }
}
/* Hero stacks early (≤1280) — the emphasised phrases are kept on one line via
   white-space:nowrap (task #443), which widens the copy column's min-content; the
   fixed-width lead form beside it needs a wider viewport, so below 1280 we stack
   (photo becomes the backdrop, form drops below the copy) rather than cramp them. */
@media (max-width: 1280px) {
    .camp-hero__photo { width: 100%; }
    .camp-hero__pattern { display: none; }
    .camp-hero__inner { flex-direction: column; align-items: stretch; min-height: 0; gap: 32px; padding: 116px var(--container-pad) 64px; }
    .camp-hero__copy { width: 100%; }
    .camp-form { width: 100%; }
}
@media (max-width: 991px) {
    .camp-heading, .camp-hero__title, .camp-how__title, .camp-va__title, .camp-cta__title { font-size: 36px; letter-spacing: -0.6px; }
    .camp-comp__title { font-size: 36px; }
    .camp-benefits__grid, .camp-why__grid { grid-template-columns: repeat(2, 1fr); }
    .camp-services__row { grid-template-columns: repeat(2, 1fr); }
    .camp-how__head { flex-direction: column; }
    /* value-added / cta → stacked with photo on top */
    .camp-va__photo, .camp-cta__photo { position: relative; width: 100%; height: 240px; }
    .camp-cta__pattern { display: none; }
    .camp-va__inner, .camp-cta__inner { min-height: 0; padding: 48px var(--container-pad); }
    .camp-va__title, .camp-va__list { max-width: 100%; }
    .camp-comp__inner { flex-direction: column; gap: 28px; }
}
@media (max-width: 600px) {
    .camp-heading, .camp-hero__title, .camp-how__title, .camp-va__title, .camp-cta__title, .camp-comp__title { font-size: 30px; letter-spacing: -0.5px; }
    .camp-hero__sub { font-size: 18px; }
    .camp-form__title { font-size: 26px; }
    .camp-benefits__grid, .camp-why__grid, .camp-services__row, .camp-ind__row { grid-template-columns: 1fr; }
    .camp-step { flex-basis: 300px; }
    .camp-wcard__title { font-size: 24px; }
    .camp-trusted__logo img { height: 48px; }
    .camp-comp__sub { font-size: 20px; }
}
/* Very small phones: shrink the hero headline a step so the nowrap phrase
   "Commercial Buildings" still fits on one line without clipping (task #443). */
@media (max-width: 360px) {
    .camp-hero__title { font-size: 24px; letter-spacing: -0.4px; }
}