/* Andorra advertising landing (/lp/relocation-services/andorra).
   Page-scoped `lp-` modifiers over the shared foundation: .marketing-shell,
   the shared .service-card, brand tokens, and Outfit/Manrope via the
   existing heading stacks. The reference establishes the composition and
   card treatment; responsive section spacing keeps that rhythm comfortable
   on larger and smaller viewports. */

/* ---------- Hero ---------- */
.lp-hero{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--white) 0%,var(--white) 45%,var(--neutral-50) 100%)}
.lp-hero__grid{position:relative;display:block;min-height:clamp(560px,48vw,640px)}
.lp-hero__copy{position:relative;z-index:2;display:flex;width:min(54%,680px);flex-direction:column;align-items:flex-start;min-width:0;padding:clamp(48px,5vw,68px) 0 118px}
.lp-hero__eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.lp-hero__title{max-width:680px;margin:16px 0 0;--site-heading-hero-size:clamp(48px,4.5vw,64px);font-size:var(--site-heading-hero-size);line-height:1.09}
.lp-hero__title .site-heading__accent{display:block}
.lp-hero__body{max-width:55ch;margin:20px 0 0;color:var(--neutral-700);font-size:18px;line-height:1.48;letter-spacing:-.01em}
.lp-hero__benefit{display:block;margin-top:8px}
.lp-hero__actions{display:flex;align-items:stretch;gap:12px;max-width:560px;margin:24px 0 0}
.lp-hero__cta{display:inline-flex;min-width:310px;min-height:52px;align-items:center;justify-content:center;gap:14px;padding:0 28px;border:1px solid var(--green-800);border-radius:var(--component-button-radius);background:var(--color-action);color:var(--white);font-size:16px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-card);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.lp-hero__cta:hover{background:var(--color-action-hover);color:var(--white)}
.lp-hero__cta:link,.lp-hero__cta:visited,.lp-hero__cta:hover,.lp-hero__cta:active,.lp-hero__cta:focus,.lp-hero__cta:focus-visible{color:var(--white);text-decoration:none}
.lp-hero__cta:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.lp-hero__cta>span{color:inherit}
.lp-hero__cta--secondary{min-width:190px;border-color:var(--neutral-300);background:var(--white);color:var(--green-800);box-shadow:none}
.lp-hero__cta--secondary:hover{border-color:var(--green-700);background:var(--neutral-50);color:var(--green-800)}
.lp-hero__cta--secondary:link,.lp-hero__cta--secondary:visited,.lp-hero__cta--secondary:hover,.lp-hero__cta--secondary:active,.lp-hero__cta--secondary:focus,.lp-hero__cta--secondary:focus-visible{color:var(--green-800)}
.lp-hero__cta-arrow{display:grid;width:17px;height:17px;place-items:center;color:inherit}
.lp-hero__cta-arrow svg{display:block;width:100%;height:100%}
.lp-hero__note{margin:10px 0 0;color:var(--neutral-600);font-size:12.5px}
.lp-hero__media{position:absolute;z-index:0;top:0;right:calc(-1 * var(--marketing-edge-gap));width:min(64vw,900px);height:100%;min-width:0;overflow:hidden}
/* Keep the copy-to-photo transition independent from the image's object-fit.
   This preserves the soft blend even when a near-square asset is contained in
   the wider desktop media box. */
.lp-hero__media::before{position:absolute;z-index:1;top:0;bottom:0;left:0;width:72%;background:linear-gradient(90deg,var(--white) 0%,rgba(255,255,255,.99) 30%,rgba(255,255,255,.92) 52%,rgba(255,255,255,.65) 72%,rgba(255,255,255,.25) 88%,rgba(255,255,255,0) 100%);content:"";pointer-events:none}
/* The reference fades the photo's lower-left corner into the CTA note and
   assurance row, keeping the stone wall vivid at the right edge. */
.lp-hero__media::after{position:absolute;z-index:2;right:0;bottom:0;left:0;height:170px;background:radial-gradient(135% 105% at 4% 116%,var(--white) 24%,rgba(255,255,255,.82) 45%,rgba(255,255,255,0) 74%);content:"";pointer-events:none}
/* Feather the photo into the white copy area (same mask-image pattern as the
   homepage .home-hero__photo), instead of a hard vertical edge. */
.lp-hero__image{display:block;width:100%;height:100%;object-fit:contain;object-position:100% 0}
/* Responsive 1×/2× sources cover the full 434×425 reference block and its
   wider desktop treatment without forcing high-density displays to upscale. */
.lp-hero__assurances{position:absolute;z-index:2;right:0;bottom:28px;left:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 0}
.lp-hero__assurance{display:inline-flex;align-items:center;gap:10px;color:var(--neutral-800);font-size:13px;line-height:1.25}
.lp-hero__assurance+ .lp-hero__assurance{margin-left:28px;padding-left:28px;border-left:1px solid var(--neutral-300)}
.lp-hero__assurance b{font-weight:600}
.lp-hero__assurance-icon{display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;color:var(--green-700)}
.lp-hero__assurance-icon svg{display:block;width:100%;height:100%}
.lp-hero__assurance-icon--euro{border-radius:var(--radius-round);background:var(--green-700);color:var(--white);font-size:13px;font-weight:700;line-height:1}

/* ---------- Services ---------- */
.lp-services{padding:clamp(36px,2.8vw,48px) 0;background:#f6fafa}
.lp-services__intro{max-width:640px;margin:0 auto;text-align:center}
.lp-services__intro .ui-lead{max-width:640px;margin:0 auto}
.lp-services__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:242px;gap:16px;margin-top:28px}

/* ---------- Why Andorra ---------- */
.lp-why{padding:clamp(36px,2.8vw,48px) 0;--lp-bleed-left:24px}
.lp-why__grid{display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);column-gap:clamp(28px,4.5vw,64px);align-items:center}
.lp-why__media{min-width:0;margin-left:calc(-1 * var(--lp-bleed-left))}
.lp-why__image{display:block;width:100%;height:auto;border-radius:0 var(--radius-md) var(--radius-md) 0}
.lp-why__copy>.site-heading{margin:12px 0 0}
.lp-why__copy>.ui-lead{margin:16px 0 0}
.lp-why__checks{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.lp-why__check-item{display:flex;align-items:center;gap:12px;color:var(--neutral-800);font-size:14px}
.lp-why__check{display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;border-radius:var(--radius-round);background:var(--green-600);color:var(--white)}
.lp-why__check svg{display:block;width:14px;height:14px;stroke-width:3.2}

/* ---------- Reviews ---------- */
.lp-reviews__intro{margin:0 auto 28px;text-align:center}
.lp-reviews__eyebrow{margin:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.lp-reviews__title{margin:6px 0 0;text-align:center;color:var(--neutral-950);font-family:var(--font-display);font-size:clamp(28px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.12}

@media(min-width:1601px){.lp-hero__copy{width:min(50%,720px)}.lp-hero__media{width:min(58vw,1040px)}}

/* ---------- Wide shell: keep the Why bleed aligned to the asymmetric margin ---------- */
@media(min-width:1121px) and (max-width:1600px){.lp-why{--lp-bleed-left:calc(8vw + 16px)}}
@media(min-width:1601px){.lp-why{--lp-bleed-left:142px}}

/* ---------- Tablet: keep the 5×2 grid like the homepage catalogue ---------- */
@media(min-width:761px) and (max-width:1120px){
.lp-hero__grid{min-height:590px}
.lp-hero__copy{width:62%;padding-right:8px}
.lp-hero__title{--site-heading-hero-size:clamp(42px,5.4vw,54px)}
.lp-hero__body{font-size:16px}
.lp-hero__media{width:58%}
.lp-hero__assurance+ .lp-hero__assurance{margin-left:18px;padding-left:18px}
}

/* ---------- Mobile: copy first, media next, full-width CTA, stacked assurances ---------- */
@media(max-width:760px){
/* Mobile stacks the photo as a standalone full-bleed block — no seam to feather. */
.lp-hero{overflow:visible;background:var(--white)}
.lp-hero__media::before{display:none}
.lp-hero__grid{display:block;min-height:0}
.lp-hero__copy{width:auto;padding:34px 0 4px}
.lp-hero__title{--site-heading-hero-size:clamp(38px,10.6vw,48px)}
.lp-hero__actions{width:100%;max-width:none;flex-direction:column}
.lp-hero__cta{width:100%;min-width:0}
.lp-hero__media{position:relative;top:auto;right:auto;width:calc(100% + (2 * var(--marketing-edge-gap)));height:auto;max-width:none;margin:20px calc(-1 * var(--marketing-edge-gap)) 0}
.lp-hero__image{height:auto;max-height:none;object-fit:initial;object-position:initial}
.lp-hero__media::after{height:90px}
.lp-hero__assurances{position:static;margin:18px 0 4px;padding-inline:0;flex-direction:column;align-items:flex-start;gap:12px}
.lp-hero__assurance+ .lp-hero__assurance{margin-left:0;padding-left:0;border-left:0}
.lp-services{padding:40px 0}
.lp-services__grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px;margin-top:22px}
.lp-why{padding:40px 0 44px;--lp-bleed-left:20px}
.lp-why__grid{display:block}
.lp-why__media{margin-left:0}
.lp-why__image{border-radius:var(--radius-md)}
.lp-why__copy{margin-top:28px}
.lp-reviews__intro{margin-bottom:22px;padding:0 20px}
}