/*
  AMEA — Base styles
  - Mobile-first, responsive
  - CSS variables for theme
  - Minimal reset
*/

:root{
  /* AMEA palette based on Figma */
  --brand: #01013f;        /* Navy */
  --brand-2: #1a1a66;      /* Darker navy tint */
  --accent: #ee5630;       /* Orange */
  --ink: #01013f;          /* Text on light */
  --ink-80: rgba(1,1,63,.8);
  --ink-60: rgba(1,1,63,.6);
  --bg: #0b0f19;
  --surface: #ffffff;
  --surface-2: #f8f8f8;
  --text: #e6e9f2;         /* Text on dark */
  --border: #e6e6ef;
  --border-dark: #232951;
  --shadow: 0 10px 30px rgba(0,0,0,.2);
  --radius: 0;
  --container: 1200px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:#fff;
}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
.section{padding:64px 0}
.section--white{background:#fff}
.section--light{background:var(--surface-2)}
.section--brand{background:var(--brand); color:var(--text)}
.section__lead{color:var(--ink-80); margin-top:.5rem; max-width:42ch; margin-inline:auto}
.section--brand .section__lead{color:rgba(255,255,255,.8)}
.section__intro{display:grid; gap:1.25rem; margin-inline:auto; text-align:left; max-width:90ch}
.section__intro.center{text-align:center}
.section__intro.center .section__lead{margin-inline:auto}
.center{text-align:center}
.inverse{color:#fff}
.sub{margin-top:2rem}

.muted{color:var(--ink-60); margin-top:3rem}
.lead{font-size:1.125rem; line-height:1.6; color:rgba(255,255,255,.9)}

/* Typography */
h1,h2,h3{margin:0 0 .5rem}
h1{font-weight:700; font-size:clamp(2rem, 3.2vw + 1rem, 2.5rem); line-height:1.2}
h2{font-weight:700; font-size:clamp(1.75rem, 2vw + 1rem, 2.25rem); line-height:1.2; color:var(--ink)}
h3{font-weight:600; font-size:1.25rem; line-height:1.4; color:var(--ink)}
p{line-height:1.6}
.inverse h2{color:#fff}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:#fff; color:#111; padding:.5rem .75rem; border-radius:0}

/* Header */
.site-header{position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)}
.header__wrap{display:flex; align-items:center; justify-content:space-between; min-height:80px}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--ink); text-decoration:none}
.brand__logo{display:block; height:56px; width:auto}
.brand__mark{display:grid; place-items:center; width:48px; height:48px; border-radius:0; background:var(--accent); color:#fff; font-weight:700; font-size:1.5rem; letter-spacing:-.02em; box-shadow:0 6px 16px rgba(238,86,48,.25); position:relative; overflow:hidden}
.brand__mark::before{content:""; position:absolute; inset:0; background:var(--brand); clip-path:polygon(48% 0, 100% 0, 100% 100%, 65% 100%)}
.brand__mark span{position:relative; z-index:1; text-shadow:0 4px 10px rgba(0,0,0,.4); text-transform:uppercase}
.brand__text{display:flex; flex-direction:column; gap:2px}
.brand__title{font-size:1.125rem; font-weight:700; letter-spacing:.04em}
.brand__subtitle{font-size:.75rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60)}

.nav-toggle{display:grid; gap:4px; background:#fff; border:none; border-radius:0; padding:.45rem .6rem; color:var(--ink)}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink)}

.nav{position:fixed; inset:80px 0 auto 0; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 12px 30px rgba(1,1,63,.12); transform:translateY(-120%); transition:transform .3s ease}
.nav.open{transform:translateY(35px)}
.nav ul{list-style:none; margin:0; padding:1.25rem 1.5rem; display:grid; gap:.75rem}
.nav a{display:block; padding:.5rem 0; color:var(--ink); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="true"], .nav a[aria-current="page"]{color:var(--accent)}

/* Desktop nav */
@media (min-width: 900px){
  .nav-toggle{display:none}
  .nav{position:static; transform:none; box-shadow:none; border:0}
  .nav ul{display:flex; gap:2rem; padding:0; align-items:center}
  .nav a{padding:.25rem 0}
  .nav a:hover{color:var(--accent)}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; border-radius:0; border:1px solid var(--border); padding:.8rem 1rem; transition:all .2s ease}
.btn--sm{padding:.5rem .75rem; border-radius:0}
.btn--primary{background:linear-gradient(135deg,var(--brand), var(--brand-2)); border-color:transparent; color:#fff}
.btn--primary:hover{filter:brightness(1.05)}
.btn--accent{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn--accent:hover{filter:brightness(1.05)}
.btn--brand{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn--brand:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent; color:#e8ecff}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--inverse{background:#fff; color:#0b0f19; border-color:#fff}
.btn--inverse:hover{filter:brightness(.95)}

.section__actions{margin-top:2.5rem}

/* Tags */
.tag{display:inline-block; padding:.4rem .75rem; border-radius:0; font-weight:600; letter-spacing:.05em; font-size:.875rem}
.tag--accent{background:var(--accent); color:#fff}

/* Hero */
.hero{position:relative; overflow:hidden; padding:88px 0}
.hero--amea{background:var(--brand); color:#fff}
.hero--amea::after{content:""; position:absolute; inset:-8% -30% 0 55%; background:var(--accent); opacity:.12; transform:skewX(-8deg)}
.hero__wrap{position:relative; z-index:1; display: grid; gap:2.5rem; align-items:center}
.hero__copy{max-width:36rem}
.hero__copy .tag{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:.5rem 1.5rem; border-radius:0; font-size:.875rem; letter-spacing:.12em; text-transform:uppercase}
.hero__copy h1{font-size:clamp(2.25rem, 2.4vw + 1.5rem, 2.8rem); line-height:1.2; margin:1.25rem 0 1.5rem; max-width:36rem}
.hero__copy p{color:rgba(255,255,255,.8); font-size:1.125rem; line-height:1.6}
.hero__copy .lead{font-size:1.25rem; line-height:2; margin:0 0 1rem; color:rgba(255,255,255,.92)}
.hero__copy p + p{margin-top:1rem}
.hero__actions{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap}
.hero__visual{position:relative; display:flex; justify-content:flex-end; min-height:320px; padding-right:48px}
.hero__image{position:relative; z-index:1; width:100%; max-width:36.5rem; border-radius:0; overflow:hidden; box-shadow:0 16px 40px rgba(1,1,63,.32)}
.hero__image img{display:block; width:100%; height:100%; min-height:400px; object-fit:cover}
.hero__image::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,1,63,.4) 0%, rgba(1,1,63,0) 55%)}
.hero__accent{position:absolute; z-index:0; width:128px; height:128px; background:var(--accent); right:48px; bottom:-16px;  border-radius:0}

.hero--about.hero--amea::after{opacity:0; background:none}

.hero--services{position:relative; background:var(--brand); color:#fff; overflow:hidden}
.hero--services .hero__wrap{position:relative; z-index:1; align-items:center; gap:clamp(2rem, 4vw, 4rem)}
.services-hero__copy{display:grid; gap:1.5rem; max-width:36rem}
.services-hero__copy p{margin:0; color:rgba(255,255,255,.85)}
.services-hero__copy .lead{font-size:1.25rem; line-height:1.6; color:#fff}
.services-hero__visual{position:relative; display:flex; justify-content:flex-end; width:100%; padding-right:clamp(0rem, 3vw, 2.5rem)}
.services-hero__image{position:relative; z-index:1; max-width:36rem; border-radius:0; overflow:hidden; box-shadow:0 25px 50px -12px rgba(1,1,63,.42)}
.services-hero__image::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(1,1,63,.55) 0%, rgba(1,1,63,0) 60%); z-index:1}
.services-hero__image img{display:block; width:100%; height:100%; object-fit:cover; min-height:360px}
.services-hero__accent{position:absolute; width:128px; height:128px; background:var(--accent); right:48px; bottom:-16px; z-index:0}
.services-hero__cta{box-shadow:0 12px 28px rgba(238,86,48,.35)}
.services-hero__cta .btn__icon{font-size:1.1rem}

@media (max-width: 899px){
  .hero--services::before{inset:0; opacity:.45}
  .hero__wrap{display: flex;    flex-direction: column;}
  .hero--services .hero__wrap{display: flex; flex-direction: column-reverse;}
  .services-hero__visual{order:-1; justify-content:center; padding-right:0; margin-bottom:2.5rem}
  .services-hero__image{max-width:min(90%, 420px)}
  .services-hero__image img{min-height:380px}
  .services-hero__accent{width:96px; height:96px; right:42px; bottom:-4px; border-radius:0}
}

@media (max-width: 599px){
  .services-hero__copy{gap:1.25rem}
}

@media (min-width: 900px){
  .hero__wrap{grid-template-columns: 1.05fr .95fr}
  .hero{padding:112px 0}
  .hero__image img{min-height:480px}
}

@media (max-width: 899px){
  .brand__subtitle{font-size:.7rem; letter-spacing:.18em}
  .nav{inset:45px 0 auto 0}
  .brand__logo{height:64px}
  .hero{padding:72px 0}
  .hero__copy .tag{font-size:.75rem; padding:.45rem 1.25rem}
  .hero__visual{padding-right:20px}
  .hero__image{max-width:100%; border-radius:0}
  .hero__image img{min-height:380px}
  .hero__accent{width:96px; height:96px; right:42px; bottom:-4px; border-radius:0}
}

/* Features list */
.grid{display:grid; gap:1rem}
.grid--cols-3{grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.features{margin-top:3rem; row-gap:2.5rem; column-gap:2.5rem}
.feature{position:relative; display:flex; flex-direction:column; gap:1rem; padding:1.5rem 1.5rem 1.5rem 2.25rem; border-left:4px solid var(--accent); background:#fff; width:100%; min-height:7.5rem}
.feature::before{content:""; position:absolute; top:1.5rem; left:1rem; width:8px; height:8px; background:var(--accent)}
.feature p{color:var(--ink-80); margin:0; line-height:1.6}

/* About — Why choose us */
.about-why__grid{display:grid; gap:3rem; align-items:start}
.about-why__column{display:grid; gap:1.75rem}
.about-why__column h2{margin:0}
.about-why__list{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1rem}
.about-why__item{display:flex; align-items:flex-start; gap:1rem; font-size:1.05rem; line-height:1.6; color:var(--ink-80)}
.about-why__icon{width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.about-why__icon img{width:100%; height:100%; display:block}
.about-why__card{background:var(--surface-2); padding:2.5rem; display:grid; gap:1.25rem; box-shadow:0 16px 40px rgba(1,1,63,.12)}
.about-why__card h3{margin:0; font-size:1.75rem}
.about-why__card p{margin:0; color:var(--ink-80); line-height:1.65}
.about-why__card .btn{justify-self:start}

@media (min-width: 900px){
  .about-why__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 899px){
  .about-why__card{padding:2rem}
}

/* Services support */
.services-support .support-grid{margin-top:3rem}
.services-support .support-card p{margin:0}

/* Services offerings */

.services-offerings .services-grid{display:grid; gap:1.5rem; margin-top:3rem}
.services-grid--primary{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.services-grid--secondary{grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); margin-top:2rem}
.service-card{display:flex; flex-direction:column; background:#fff; overflow:hidden; box-shadow:0 20px 46px rgba(1,1,63,.18)}
.service-card__media{position:relative; width:100%; aspect-ratio:4/3; background:#000; margin: 0;}
.service-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.service-card__body{padding:1.25rem 1.5rem 1.5rem; background:#fff; color:var(--ink)}
.service-card__body h3{margin:0; font-size:1.25rem; line-height:1.35; color:var(--ink)}

@media (min-width: 1024px){
  .services-grid--primary{grid-template-columns:repeat(3, minmax(0,1fr))}
  .services-grid--secondary{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:880px; margin-inline:auto; gap:2rem}
}

@media (max-width: 599px){
  .service-card__body{padding:1rem 1.25rem 1.25rem}
}

/* Product grid */
.product-grid{margin-top:3rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:2.5rem}
.product{position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; min-height:18.25rem; background:#000; transition:transform .3s ease; text-decoration:none}
.product img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* Stronger dark-blue overlay for better legibility */
.product::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,1,63,.55) 0%, rgba(1,1,63,.75) 100%); z-index:0; transition:opacity .3s ease}
/* Additional bottom gradient to reinforce text contrast */
.product::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(1,1,63,.92) 0%, rgba(1,1,63,0) 60%); z-index:0; pointer-events:none; transition:opacity .3s ease}
.product__title{position:relative; z-index:1; display:block; width:100%; padding:1.25rem 1.5rem; color:#fff; font-weight:600; font-size:1.125rem; line-height:1.45; text-align:center; letter-spacing:.01em; text-transform:none; text-shadow:0 8px 22px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2)}
.product:hover{transform:translateY(-6px)}
.product:hover::before,.product:hover::after{opacity:1}

/* Methodology */
.methodology{display:grid; gap:3rem; align-items:center}
.methodology__content{max-width:36rem;  margin:0 auto;}
.methodology__content .tag{display:inline-flex; align-items:center; min-height:40px; padding:.5rem 1.5rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.5rem}
.methodology__content h2{margin-bottom:1.5rem}
.methodology__copy{margin:0; color:var(--ink-80); font-size:1.125rem; line-height:1.6; max-width:36rem}
.methodology__copy + .methodology__copy{margin-top:1.5rem}
.methodology__actions{margin-top:2.5rem}
.methodology__visual{position:relative; display:flex; justify-content:flex-end}
.methodology__visual .photo-card{max-width:36.5rem}

.btn--icon{gap:.75rem; padding-right:1.25rem}
.btn__icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:1rem; line-height:1; transition:transform .2s ease}
.btn--icon:hover .btn__icon{transform:translateX(2px)}

/* Split photo card */
.photo-card{position:relative; border-radius:0; ; aspect-ratio:4 / 3; min-height:20rem; box-shadow:var(--shadow)}
.photo-card img{display:block; width:100%; height:100%; object-fit:cover}
.photo-card__accent{position:absolute; width:128px; height:128px; background:var(--accent); right:-32px; bottom:-32px; border-radius:0}

@media (min-width: 900px){
  .methodology{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4rem}
}

@media (max-width: 899px){
  .methodology{display:block;}
  .methodology__content .tag{min-height:32px; padding:.45rem 1.25rem}
  .methodology__visual{justify-content:center}
  .methodology__visual .photo-card{width:100%; box-shadow:0 12px 32px rgba(1,1,63,.18)}
  .photo-card__accent{right:-32px; bottom:-32px; width:112px; height:112px}
}

@media (min-width: 900px){
  .features{grid-template-columns:repeat(3, minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}

/* Project types */
.section--project-types{position:relative; overflow:hidden}
.section--project-types::before{content:""; position:absolute; inset:-20% -25% -10% -10%; background:radial-gradient(circle at top left, rgba(238,86,48,.25) 0%, rgba(238,86,48,0) 55%), linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 65%); opacity:.6}
.project-types{position:relative; z-index:1; display:grid; gap:3rem}
.project-types__intro{max-width:54rem; margin-inline:auto}
.project-types__grid{list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.project-types__item{display:flex; align-items:flex-start; gap:1rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:1rem 1.25rem; min-height:3.5rem; box-shadow:0 12px 32px rgba(1,1,63,.22)}
.project-types__icon{width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.project-types__icon img{width:100%; height:100%; display:block}
.project-types__label{color:#fff; font-weight:500; font-size:1rem; line-height:1.5}

@media (min-width: 900px){
  .project-types__grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem}
}

/* Phases */
.section--phases{background:linear-gradient(180deg, rgba(1,1,63,.04) 0%, rgba(1,1,63,0) 100%)}
.phases{display:grid; gap:3rem}
.phases__intro{max-width:60rem; margin-inline:auto; text-align:center}
.phases__list{list-style:none; margin:0; padding:0; display:grid; gap:1.5rem}
.phase-card{display:grid; grid-template-columns:minmax(0,72px) minmax(0,1fr); gap:1.5rem; align-items:stretch}
.phase-card__num{font-weight:700; font-size:3rem; color:var(--accent); line-height:1; letter-spacing:.02em}
.phase-card__body{background:var(--surface-2); border-left:4px solid var(--accent); padding:1.75rem 2rem; display:grid; gap:.75rem; box-shadow:0 12px 32px rgba(1,1,63,.12)}
.phase-card__title{margin:0; font-size:1.375rem; line-height:1.35; color:var(--ink)}
.phase-card__copy{margin:0; color:var(--ink-80); font-size:1.05rem; line-height:1.6}

@media (max-width: 899px){
  .phase-card{grid-template-columns:minmax(0,1fr); gap:.75rem}
  .phase-card__num{font-size:2.25rem}
  .phase-card__body{padding:1.5rem}
}

/* About — CTA */
.about-cta h2{margin-bottom:1rem; font-size:clamp(1.9rem, 2.4vw + 1rem, 2.4rem); color:var(--ink)}
.about-cta .section__lead{color:var(--ink-80)}

/* Project showcases */
.section--projects{position:relative}
.projects{display:grid; gap:4rem}
.projects__grid{display:grid; gap:4rem}
.projects__grid--cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 2.5rem;
}

@media (max-width: 992px){
  .projects__grid--cards{
    grid-template-columns: 1fr;
  }
}
.project-case{display:grid; gap:2.5rem; align-items:center}
.project-case__media{position:relative; background:#fff; box-shadow:0 18px 44px rgba(1,1,63,.16); overflow:hidden}
.project-case__media::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--accent);  }
.project-case__media img{display:block; width:100%; height:100%; object-fit:cover; min-height:20rem; max-height: 320px}
.project-case__content{display:grid; gap:1.25rem}
.project-case__title{margin:0; font-size:1.75rem; line-height:1.3; color:var(--ink)}
.project-case__copy{margin:0; color:var(--ink-80); font-size:1.05rem; line-height:1.7}

.project-card{position:relative; display:flex; flex-direction:column; gap:1.25rem; background:#fff; border:1px solid var(--border); padding:1.75rem 1.75rem 1.5rem; box-shadow:0 18px 44px rgba(1,1,63,.08)}
.project-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--accent)}
.project-card__header{display:flex; flex-direction:column; gap:.5rem; padding-top:.5rem}
.project-card__title{margin:0; font-size:1.35rem; line-height:1.35; color:var(--ink)}
.project-card__copy{margin:0; color:var(--ink-80); font-size:1.05rem; line-height:1.65}
.project-card__highlight{margin:0; color:var(--ink); font-weight:600; line-height:1.6}
.project-card__link{margin-top:auto; display:inline-flex; align-items:center; gap:.6rem; font-weight:600; color:var(--accent); text-decoration:none; letter-spacing:.01em}
.project-card__link:hover{color:#d7441f}
.project-card__icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; transition:transform .2s ease; flex-shrink:0}
.project-card__icon img{width:100%; height:100%; display:block}
.project-card__link:hover .project-card__icon{transform:translateX(2px)}

@media (min-width: 1024px){
  .project-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .project-case:nth-child(even) .project-case__media{order:2}
  .project-case:nth-child(even) .project-case__content{order:1}
}

@media (max-width: 599px){
  .project-case__media img{min-height:16rem}
}

/* Footer */
.site-footer{margin-top:0; background:var(--brand); color:var(--text); padding:64px 0 32px}
.footer__content{display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start}
.footer__brand{display:flex; flex-direction:column; gap:16px; max-width:280px}
.footer__logo{width:50px; height:auto; display:block}
.footer__description{margin:0; color:rgba(255,255,255,.8); line-height:1.6}
.footer__links,.footer__contact{display:flex; flex-direction:column; gap:16px}
.footer__heading{font-size:1.125rem; margin:0; color:#fff}
.footer__nav{display:flex; flex-direction:column; gap:12px}
.footer__nav a{color:rgba(255,255,255,.8); text-decoration:none}
.footer__nav a:hover{color:#fff}
.footer__cta{align-self:flex-start}
.footer__meta{border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px}
.footer__meta .container{display:flex; justify-content:center}
.footer__copy{margin:0; color:rgba(255,255,255,.6); font-size:.95rem; text-align:center}

/* Footer — Social */
.footer__social{display:flex; align-items:center; gap:12px; margin-top:16px}
.footer__social a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.24); border-radius:50%; color:rgba(255,255,255,.85); text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent}
.footer__social a:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}

/* En móviles quitar decoración para evitar efecto resaltado al tocar */
@media (max-width: 599px){
  .footer__social a{
    border:0;
    background:transparent;
    color:rgba(255,255,255,.95);
    box-shadow:none;
    transition:none;
    -webkit-tap-highlight-color: transparent;
  }
  .footer__social a:hover,
  .footer__social a:active,
  .footer__social a:focus{
    background:transparent;
    color:rgba(255,255,255,.95);
    border-color:transparent;
    outline:0;
    box-shadow:none;
  }
}

/* Contact */
.hero--contact{position:relative; background:linear-gradient(90deg, #01013f 0%, #01013f 44%, #04045a 100%); color:#fff; overflow:hidden}
.hero--contact::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 24%, rgba(238,86,48,.18) 0%, rgba(238,86,48,0) 58%); opacity:.6; pointer-events:none}
.hero--contact::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(1,1,63,0) 0%, rgba(1,1,63,.35) 55%, rgba(1,1,63,.65) 100%); pointer-events:none}
.hero--contact .hero__wrap{position:relative; z-index:1; align-items:center; gap:3rem}
.contact-hero__copy{display:grid; gap:2rem; max-width:36rem}
.contact-hero__copy h1{margin:0; font-size:clamp(2.75rem, 4vw + 1.15rem, 3.5rem); line-height:1.15; color:#fff}
.contact-hero__copy .lead{font-size:1.5rem; line-height:1.65; color:rgba(255,255,255,.9); margin:0}
.contact-hero__copy p{color:rgba(255,255,255,.85); margin:0}
.contact-hero__mark{width:56px; height:auto; filter:drop-shadow(0 12px 32px rgba(0,0,0,.35))}
.contact-hero__visual{justify-content:flex-end; padding:0; position:relative}
.contact-hero__image{position:relative; max-width:36rem; border-radius:0; overflow:visible; box-shadow:0 28px 52px rgba(1,1,63,.35)}
.contact-hero__image::before{content:""; position:absolute; inset:-16px; border:4px solid var(--accent); border-radius:0; z-index:0; pointer-events:none}
.contact-hero__image img{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; min-height:480px}

.contact-info__grid{display:grid; gap:2.5rem}
.contact-info__intro p{margin:0; color:var(--ink-80); max-width:36rem}
.contact-info__list{list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1.5rem}
.contact-info__item{display:flex; align-items:flex-start; gap:1.25rem; padding:1.5rem 1.75rem; background:#f8f9ff; border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 44px rgba(1,1,63,.08)}
.contact-info__icon{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--accent); flex-shrink:0}
.contact-info__icon svg{width:24px; height:24px; fill:#fff}
.contact-info__item h3{margin:0 0 .4rem; font-size:1.15rem; color:var(--ink)}
.contact-info__item p{margin:0; color:var(--ink-80); line-height:1.5}
.contact-info__item a{color:var(--ink-80); text-decoration:none; font-weight:600}
.contact-info__item a:hover{color:var(--accent)}

.contact-form{background:var(--brand); color:#fff; padding:2.75rem; border-radius:24px; display:grid; gap:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}
.contact-form__row{display:grid; gap:1.25rem}
.contact-form__field{display:flex; flex-direction:column; gap:.65rem}
.contact-form__field span{font-weight:600; font-size:.95rem; letter-spacing:.01em}
.contact-form__field sup{color:var(--accent); font-size:1rem; line-height:1}
.contact-form__field input,
.contact-form__field textarea{background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18); border-radius:12px; padding:.9rem 1rem; color:#fff; resize:vertical; min-height:52px}
.contact-form__field textarea{min-height:150px}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder{color:rgba(255,255,255,.55)}
.contact-form__field input:focus,
.contact-form__field textarea:focus{border-color:var(--accent); outline:0; box-shadow:0 0 0 2px rgba(238,86,48,.2)}
.contact-form__status{min-height:1.5rem; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.75)}
.contact-form__status[data-state="success"]{color:rgba(255,255,255,.92)}
.contact-form__status[data-state="error"]{color:var(--accent)}
.contact-form__submit{display:inline-flex; align-items:center; justify-content:center; gap:.75rem; padding:1rem 1.5rem; background:var(--accent); color:#fff; font-weight:600; font-size:1.1rem; border:0; border-radius:12px; cursor:pointer; transition:filter .2s ease, transform .2s ease; box-shadow:0 12px 32px rgba(238,86,48,.35)}
.contact-form__submit:hover{filter:brightness(1.05); transform:translateY(-1px)}
.contact-form__submit-icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px}
.contact-form__submit-icon svg{width:100%; height:100%; fill:#fff}

.contact-cta__wrap{display:grid; gap:1.25rem; text-align:center; max-width:56rem}
.contact-cta__wrap h2{margin:0; color:var(--ink); font-size:clamp(1.8rem, 2.2vw + 1.25rem, 2.45rem); line-height:1.4}
.contact-cta__wrap p{margin:0; color:var(--ink-80); font-size:1.2rem; line-height:1.6}

@media (min-width: 900px){
  .contact-info__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:3rem}
  .contact-form{padding:3rem}
  .contact-form__row{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 899px){
  .hero--contact::after{opacity:.35}
  .contact-hero__mark{width:60px}
  .contact-hero__image{max-width:100%; margin-inline:auto}
  .contact-hero__image img{min-height:380px}
}

@media (max-width: 599px){
  .contact-form{padding:2.25rem}
}
