:root{
  --bg:#ffffff;
  --text:#0d2a3a;
  --muted:#476072;
  --accent:#0d2a3a; /* blue from logo */
  --gold:#f0b400;
  --light:#f6f8fa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}
img{max-width:100%;height:auto}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.92}
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:72px 0}
.section.alt{background:var(--light)}
.small{font-size:.9rem;color:var(--muted)}
.lead{color:var(--muted)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;background:transparent;border-bottom:none;overflow:visible;transition:background-color .25s ease, box-shadow .25s ease,border-color .25s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:96px}

.logo{height:224px;width:auto;display:block;padding:0;transform-origin:left center} /* no overflow; centered vertically */
.main-nav a{margin:0 12px;font-weight:700}
.lang-switch{display:flex;gap:8px;align-items:center}
.lang{border:1px solid #e0e0e0;background:#fff;padding:4px 6px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.lang.active{outline:2px solid var(--gold)}
.flag{display:inline-block;width:24px;height:16px;background-size:cover;border-radius:2px}
.flag-it{background-image:url('images/flag-it.svg')}
.flag-uk{background-image:url('images/flag-uk.svg')}
.flag-br{background-image:url('images/flag-br.svg')}

/* Hero */
.hero{position:relative;min-height:100svh;overflow:hidden}
.hero-video-wrapper{position:absolute;inset:0;overflow:hidden}
/* Cover technique for iframe: use aspect-ratio media queries */
.hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-width:100vw;min-height:56.25vw;pointer-events:none}
@media (max-aspect-ratio: 16/9){
  .hero-video{width:177.78vh;height:100vh;min-width:177.78vh;min-height:100vh}
}
.hero-overlay{position:relative;z-index:2;color:#fff}
.hero-overlay.left{display:flex;align-items:center;min-height:100svh}
.hero-title{font-size:clamp(16px,2vw,24px);font-weight:500;max-width:860px;margin:0 0 12px 0;color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.35)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.hero-bullets{list-style:none;padding:0;margin:8px 0 0 0;display:flex;gap:14px;flex-wrap:wrap;color:#fff;opacity:.95}
.btn{display:inline-block;padding:11px 16px;border-radius:10px;font-weight:800}
.btn-primary{background:var(--accent);color:#fff;border:2px solid var(--accent)}
.btn-ghost{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.btn.big{padding:14px 18px;font-size:1.05rem}

/* Grids */
.grid-2{display:grid;grid-template-columns:1.2fr .9fr;gap:28px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
@media (max-width:900px){.services-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr}}
.service{border:1px solid #eaeaea;border-radius:16px;padding:16px;background:#fff}
.service h3{margin:0 0 6px}

/* Video grid */
.video-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width:700px){.video-grid.two{grid-template-columns:1fr}}
.embed{position:relative;padding-top:56.25%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%}

/* About */
.about-photo{border-radius:16px;display:block;width:100%;object-fit:cover}
.about-card{border:1px solid #eaeaea;background:#fff;border-radius:16px;padding:14px;margin-top:10px}
.about-card .kv{display:grid;grid-template-columns:120px 1fr;gap:8px}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.price-card{border:1px solid #eaeaea;background:#fff;border-radius:16px;padding:18px}

/* Contact */
.contact-layout{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.contact-info ul{list-style:none;padding:0;margin:8px 0}
.contact-info li{margin:4px 0}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid #eaeaea;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:700px){.footer-inner{flex-direction:column;text-align:center}}

/* Accessibility */
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.flag-img{width:24px;height:16px;display:block}
/* FAQ styles */
.faq details{border:1px solid #eaeaea;border-radius:12px;padding:10px 14px;background:#fff;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
@media (max-width:700px){
  .header-inner{display:flex;align-items:center;justify-content:space-between;height:96px}
  .logo{height:224px;width:auto;display:block;padding:0;transform-origin:left center}
}

.center{text-align:center}
.hero-title{font-size:clamp(14px,1.6vw,20px);font-weight:400}
.hero-overlay .container{margin-left:clamp(8px,2vw,24px);margin-right:auto;max-width:900px}

.hero-title{font-size:clamp(12px,1.4vw,18px);font-weight:400}
.hero-overlay .container{margin-left:clamp(4px,1.5vw,16px);margin-right:auto;max-width:880px}
/* Contact spacing */
.contact-layout{grid-template-columns:1fr 1fr;column-gap:120px}

/* v8 contact alignment */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;column-gap:140px}
.contact-info{margin-left:auto;text-align:left}

.brand{position:relative; height:96px; display:block}
.logo{position:absolute; top:50%; left:0; transform:translateY(-50%);} /* centers the tall logo inside slim header */

/* Push contact info further right */
.contact-layout{display:grid; grid-template-columns:1.1fr 0.9fr; column-gap:220px}
.contact-info{justify-self:end; text-align:left;}

/* Mobile responsiveness */
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr; column-gap:24px}
  .contact-info{justify-self:start}
}
@media (max-width:700px){
  .header-inner{height:88px}
  .brand{height:88px}
  .logo{height:224px; left:0; transform:translateY(-50%);}
}

/* v10: fix logo visibility and centering */
.brand{position:relative; height:96px; width:360px; display:block; z-index:3}
.logo{position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:3}
.header-inner{overflow:visible}
@media (max-width:900px){
  .brand{width:260px;height:88px}
}

/* v11 centering */
.brand{position:relative;height:96px;width:360px;display:block;z-index:3}
.logo{position:absolute;top:50%;left:0;transform:translateY(-50%);height:224px;width:auto;display:block}
.header-inner{overflow:visible}
@media (max-width:900px){
  .brand{width:260px;height:88px}
  .logo{height:110px}
}

/* v11.2: transparent header that becomes solid on scroll */
.site-header.solid{background:#fff;border-bottom:1px solid #eaeaea;box-shadow:0 2px 12px rgba(0,0,0,.04)}
/* Nav/link colors */
.site-header:not(.solid) .main-nav a{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.site-header.solid .main-nav a{color:var(--text)}
/* Flags on transparent header */
.site-header:not(.solid) .lang{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.6)}
/* Logo contrast on transparent */
.site-header:not(.solid) .logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* v11.2.3: fixed header overlay and anchor offset */
:root{ --headerH: 96px; }
section{ scroll-margin-top: calc(var(--headerH) + 8px); }
.hero{ margin-top: 0; } /* ensure hero touches the very top */

/* v12 Mobile header */
.menu-toggle{display:none; padding:6px 12px; border:1px solid #e0e0e0; border-radius:10px; background:#fff; font-weight:800}
@media (max-width:900px){
  .main-nav{display:none}
  .lang-switch{display:flex} /* flags visíveis também no mobile */
  .menu-toggle{display:inline-flex}
}
.mobile-nav{display:none; position:fixed; top:96px; left:0; right:0; background:rgba(255,255,255,0.98); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eaeaea; padding:16px 20px; z-index:60}
.mobile-nav.open{display:flex; flex-direction:column; gap:12px}
.mobile-nav a{font-size:20px; font-weight:800; padding:6px 2px}
.mobile-langs{display:flex; gap:8px; margin-top:8px}
/* About order on mobile: show photo/card first */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-aside{order:1}
  .about-grid > div:first-child{order:2}
}

/* v12.2 mobile header spacing + larger logo */
@media (max-width:900px){
  .menu-toggle{margin-right:0}
  .lang-switch{gap:4px; margin-left:14px}
  .lang{padding:2px 4px}
  .logo{height:128px}
}