/* =========================================================
   STEP 6 — VISUAL ACCURACY PASS
   Purpose: tighten proportions, spacing, type hierarchy,
   cards, inner-page banners and responsive behavior.
   ========================================================= */

:root{
  --bg:#f3f1ec;
  --surface:#ffffff;
  --surface-2:#e9e6de;
  --ink:#171717;
  --muted:#686760;
  --line:rgba(23,23,23,.11);
  --container:1280px;
  --gutter:32px;
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
}

body{background:var(--bg);color:var(--ink)}
.container{width:min(var(--container),calc(100% - (var(--gutter)*2)))}

h1,h2,h3,h4{font-family:var(--heading);font-weight:700}
h1{font-size:clamp(48px,6.2vw,92px);line-height:.98;letter-spacing:-.055em}
h2{font-size:clamp(38px,4.8vw,68px);line-height:1.02;letter-spacing:-.05em}
h3{font-size:clamp(24px,2.5vw,34px);line-height:1.08}

.site-header{
  padding:20px 0 16px;
  background:rgba(243,241,236,.94);
  backdrop-filter:blur(14px);
}
.navbar{min-height:50px}
.logo{font-size:25px}
.nav{gap:2px}
.nav>a,.nav summary{
  font-size:13px;
  padding:9px 12px;
  transition:background .25s ease,transform .25s ease;
}
.nav>a:hover,.nav summary:hover{background:rgba(23,23,23,.055);transform:translateY(-1px)}

.dropdown{
  top:44px;
  min-width:260px;
  padding:8px;
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.11);
}
.dropdown a{font-size:13px;padding:10px 11px}

.btn{
  min-height:50px;
  padding:0 21px;
  font-size:14px;
  letter-spacing:-.01em;
}
.btn:hover{transform:translateY(-2px)}

.hero{padding:76px 0 48px}
.hero-grid{grid-template-columns:1.03fr .97fr;gap:50px}
.hero-copy{padding-bottom:32px}
.hero-copy h1{max-width:720px;margin:17px 0 27px}
.hero-copy p{font-size:17px;line-height:1.6;max-width:560px}
.hero-media{
  min-height:610px;
  border-radius:32px;
}
.hero-badge{font-size:13px}

.section{padding:118px 0}
.section-head{gap:55px;margin-bottom:58px}
.section-head p{font-size:16px;line-height:1.65}
.eyebrow{font-size:11px;letter-spacing:.14em}

.about-grid{gap:95px}
.about-copy h2{max-width:650px}
.about-media{gap:16px}
.about-media .image-frame:first-child{height:535px}
.about-media .image-frame:last-child{height:365px;margin-bottom:55px}

.services-grid{gap:16px}
.service-card{
  min-height:385px;
  border-radius:24px;
  padding:29px;
}
.service-card h3{font-size:29px}
.service-card p{font-size:14px;line-height:1.55}

.visa-section{
  margin:0 var(--gutter);
  border-radius:32px;
}
.visa-grid{gap:75px}
.visa-map{min-height:555px;border-radius:25px}

.country-wrap{gap:70px}
.country-image{height:535px}

.testimonials{background:#e7e4dc}
.quote-card{padding:50px}
.quote-card blockquote{font-size:clamp(26px,3vw,40px)}

.blog-grid{gap:16px}
.blog-card{border-radius:20px}
.blog-card .image-frame{height:255px}
.blog-card-body{padding:23px}
.blog-card h3{font-size:22px}

.cta{
  border-radius:30px;
  padding:76px;
}
.cta h2{font-size:clamp(38px,5vw,67px)}

.site-footer{margin-top:118px;padding:82px 0 26px}
.footer-top{grid-template-columns:1.3fr .8fr .8fr .9fr;gap:60px}
.footer-col a,.footer-col p{font-size:13px}
.footer-bottom{font-size:11px}

/* Inner pages */
.inner-hero{padding:74px 0 54px}
.inner-hero h1{max-width:900px;margin:15px 0 21px}
.inner-hero p{font-size:17px;line-height:1.65;max-width:700px}
.inner-hero-art{
  height:345px;
  margin-top:48px;
  border-radius:30px;
}
.stat-grid{margin-top:15px}
.stat-item{padding:34px 22px}
.stat-number{font-size:64px}
.service-page-grid,.visa-cards,.country-grid,.coaching-grid{gap:16px}
.service-page-card,.visa-card,.country-card,.coaching-card{
  border-radius:22px;
}
.service-page-card .image-frame,.country-card .image-frame{height:245px}
.service-page-card-body{padding:24px}
.service-page-card h3,.visa-card h3{font-size:27px}
.visa-card{min-height:250px;padding:29px}
.country-body{padding:22px}
.coaching-card{padding:30px}

.detail-layout{gap:70px}
.detail-side{border-radius:24px;padding:30px}

/* Make form controls inherit the same visual language. */
input,textarea,select{
  font-family:var(--body);
  background:#fff;
}

/* Subtle hover motion on image containers */
.image-frame{transition:box-shadow .35s ease,transform .35s ease}
.image-frame:hover{box-shadow:0 18px 45px rgba(0,0,0,.08)}

@media(max-width:991px){
  :root{--gutter:24px}
  .hero{padding-top:55px}
  .hero-grid{gap:35px}
  .hero-media{min-height:500px}
  .section{padding:90px 0}
  .about-grid{gap:45px}
  .visa-grid{gap:35px}
  .footer-top{gap:40px}
}
@media(max-width:767px){
  :root{--gutter:18px}
  .site-header{padding-top:16px}
  .hero{padding-top:38px}
  .hero-copy h1{margin-top:13px}
  .hero-media{min-height:390px;border-radius:24px}
  .section{padding:72px 0}
  .section-head{margin-bottom:40px}
  .about-media .image-frame:first-child,.about-media .image-frame:last-child{height:310px}
  .visa-section{margin:0 var(--gutter);border-radius:24px}
  .visa-map{min-height:320px}
  .cta{padding:42px 24px}
  .site-footer{margin-top:72px;padding-top:65px}
  .inner-hero{padding-top:45px}
  .inner-hero-art{height:255px;border-radius:23px;margin-top:34px}
  .stat-number{font-size:47px}
}
@media(max-width:480px){
  h1{font-size:clamp(43px,13vw,62px)}
  h2{font-size:clamp(35px,10vw,52px)}
  .hero-media{min-height:330px}
  .stat-item{padding:20px 13px}
}

/* =========================================================
   STEP 7 RE-CHECK — ORIGINAL RELOCA UI/UX FIDELITY
   The original preview uses a floating navigation pill, a
   lavender hero, compact page-menu dropdown and orange CTA.
   ========================================================= */

:root{
  --reloca-lavender:#dfe0f7;
  --reloca-orange:#d86a18;
  --reloca-blue:#5c62d9;
  --reloca-soft:#f7f6f2;
}

body{padding-top:0}
.site-header{
  position:fixed;
  top:18px;
  left:50%;
  width:min(1160px,calc(100% - 48px));
  transform:translateX(-50%);
  padding:0;
  background:transparent;
  z-index:1000;
}
.site-header .container{width:100%;max-width:none}
.navbar{
  min-height:58px;
  padding:7px 9px 7px 18px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 35px rgba(20,20,20,.10),0 2px 6px rgba(20,20,20,.04);
  backdrop-filter:blur(18px) saturate(140%);
  transition:box-shadow .25s ease,transform .25s ease;
}
.site-header.is-scrolled .navbar{box-shadow:0 18px 45px rgba(20,20,20,.15);transform:translateY(-2px)}
.logo{display:inline-flex;align-items:center;gap:7px;font-family:var(--heading);font-size:17px;font-weight:800;letter-spacing:-.055em;text-decoration:none}
.logo-mark{width:17px;height:17px;border-radius:50% 50% 50% 8px;background:linear-gradient(135deg,#5860cf 0 55%,#e8a15e 56% 100%);display:inline-block;transform:rotate(-18deg)}
.nav{gap:1px}
.nav>a,.nav summary{font-size:11.5px;font-weight:600;padding:10px 11px;color:#242424;white-space:nowrap}
.nav>a:hover,.nav summary:hover{background:#f1f1f1;transform:none}
.nav-contact{background:var(--reloca-orange)!important;color:#fff!important;border-radius:12px!important;padding:11px 15px!important;margin-left:4px;box-shadow:0 5px 12px rgba(216,106,24,.18)}
.nav-contact:hover{background:#c95f12!important;transform:translateY(-1px)!important}
.all-pages-menu{position:relative}
.all-pages-menu summary{display:flex;align-items:center;gap:4px}
.chevron{font-size:13px;line-height:1;transition:transform .2s ease}
.all-pages-menu[open] .chevron,.mobile-menu details[open] .chevron{transform:rotate(180deg)}
.dropdown.all-pages-dropdown{top:49px;left:50%;transform:translateX(-50%);min-width:205px;padding:7px;border-radius:15px}
.dropdown.all-pages-dropdown a{padding:9px 10px;font-size:12px}
.dropdown.all-pages-dropdown a:hover{background:#f3f3f3}
.mobile-toggle{width:42px;height:42px;border-radius:12px;background:#f4f4f4;font-size:21px}
.mobile-menu{margin-top:9px;padding:10px;border:1px solid rgba(20,20,20,.08);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(0,0,0,.12);backdrop-filter:blur(18px)}
.mobile-menu>a,.mobile-menu summary{padding:11px 9px;border-radius:10px}
.mobile-menu>a:hover,.mobile-menu summary:hover{background:#f4f4f4}
.mobile-contact{background:var(--reloca-orange)!important;color:#fff!important;text-align:center;margin-top:7px!important}
.mobile-sub{padding:2px 9px 8px 18px}
.mobile-sub a{padding:7px 0}

.home-page .hero-v2{padding:112px 0 55px;background:var(--reloca-lavender);margin:0 18px;border-radius:0 0 28px 28px}
.home-page .hero-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:45px;align-items:center;min-height:660px}
.home-page .hero-copy{padding:50px 0 35px 35px}
.home-page .hero-eyebrow{display:flex;align-items:center;gap:7px;letter-spacing:.02em;text-transform:none;font-size:11px;color:#333}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--reloca-orange);display:inline-block}
.home-page .hero-copy h1{font-size:clamp(52px,5.1vw,76px);line-height:.98;max-width:650px;margin:14px 0 22px;letter-spacing:-.065em}
.home-page .hero-copy p{font-size:16px;line-height:1.55;max-width:500px;margin-bottom:26px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-primary{background:#5b61d6;border-color:#5b61d6;color:#fff;box-shadow:0 8px 20px rgba(91,97,214,.18)}
.btn-primary:hover{background:#4e54c7;border-color:#4e54c7}
.rating-chip{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:600;color:#343434}
.stars{color:#e16b18;letter-spacing:1px;font-size:12px;line-height:1}
.hero-media-v2{min-height:560px;height:560px;border-radius:25px;background:#bfc4d9;overflow:visible;box-shadow:0 18px 55px rgba(44,48,70,.13)}
.hero-media-v2>img{border-radius:25px;object-fit:cover;object-position:center;width:100%;height:100%;display:block}
.hero-country-tag{position:absolute;background:#fff;border:1px solid rgba(20,20,20,.08);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;box-shadow:0 7px 20px rgba(0,0,0,.10);white-space:nowrap}
.tag-portugal{left:-10px;top:46%}.tag-germany{right:15px;top:-11px}.tag-canada{right:-11px;top:46%}
.hero-people-badge{position:absolute;left:-28px;bottom:22px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(20,20,20,.08);border-radius:14px;padding:8px 13px 8px 9px;font-size:11px;box-shadow:0 9px 24px rgba(0,0,0,.12)}
.hero-people-badge strong{font-size:12px}.hero-people-badge span{color:#555}
.mini-avatars{display:flex}.mini-avatars img{width:25px;height:25px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-5px}.mini-avatars img:first-child{margin-left:0}
.home-page .section{padding:108px 0}
.home-page .about-grid{position:relative}
.home-page .about-grid:before{content:"";position:absolute;width:520px;height:260px;left:30%;top:10%;background:#ecebf8;border-radius:55% 45% 60% 40%;z-index:-1;filter:blur(.2px)}
.home-page .service-card{border-radius:20px}
.home-page .service-card .tag{background:rgba(255,255,255,.92);color:#333}
.home-page .visa-section{background:#151515}
.home-page .marquee{margin-top:30px}

/* Make text links feel like the original compact Framer links. */
.text-link{position:relative;display:inline-flex;align-items:center;gap:7px;font-weight:700}
.text-link:after{content:"↗";font-size:.9em;transition:transform .2s ease}
.text-link:hover:after{transform:translate(2px,-2px)}

:focus-visible{outline:3px solid rgba(91,97,214,.45);outline-offset:3px}

@media(max-width:991px){
  .site-header{top:12px;width:calc(100% - 28px)}
  .navbar{padding:7px 8px 7px 14px}
  .home-page .hero-v2{margin:0 10px;padding-top:95px}
  .home-page .hero-shell{grid-template-columns:1fr;min-height:0;gap:24px}
  .home-page .hero-copy{padding:35px 20px 10px}
  .home-page .hero-copy h1{max-width:760px}
  .hero-media-v2{height:500px;min-height:500px;margin:0 20px}
  .tag-portugal{left:10px}.tag-canada{right:10px}
  .hero-people-badge{left:18px}
}
@media(max-width:767px){
  .site-header{width:calc(100% - 20px);top:8px}
  .navbar{min-height:52px;border-radius:15px}
  .home-page .hero-v2{margin:0 6px;border-radius:0 0 22px 22px;padding-top:78px}
  .home-page .hero-copy{padding:35px 13px 6px}
  .home-page .hero-copy h1{font-size:clamp(43px,12vw,60px)}
  .hero-actions{align-items:flex-start;gap:15px}
  .rating-chip{padding-top:5px}
  .hero-media-v2{height:390px;min-height:390px;margin:0 13px;border-radius:19px}
  .hero-media-v2>img{border-radius:19px}
  .hero-country-tag{font-size:10px;padding:6px 8px}
  .tag-germany{top:-9px;right:8px}.tag-portugal{left:8px;top:44%}.tag-canada{right:8px;top:44%}
  .hero-people-badge{left:8px;bottom:13px;font-size:10px;padding:7px 10px 7px 7px}
  .mini-avatars img{width:22px;height:22px}
  .home-page .section{padding:78px 0}
}
.nav>a[aria-current="page"]{background:#f1f1f1}