:root{
  --bg:#090b10;
  --bg2:#0d1017;
  --panel:#11151d;
  --panel2:#151a24;
  --text:#f5f7fa;
  --muted:#a7afbc;
  --red:#d71920;
  --line:rgba(255,255,255,.09);
  --soft:rgba(255,255,255,.025);
  --soft2:rgba(255,255,255,.012);
  --button-text:#fff;
  --card-link:#fff;
  --shadow:0 22px 60px rgba(0,0,0,.28);
}
html[data-theme="light"]{
  --bg:#f5f7fa;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f3f5f8;
  --text:#161a20;
  --muted:#5f6875;
  --line:rgba(16,24,40,.13);
  --soft:rgba(17,24,39,.035);
  --soft2:rgba(17,24,39,.018);
  --button-text:#fff;
  --card-link:#171a20;
  --shadow:0 18px 45px rgba(21,28,40,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2) 45%,var(--bg));
  color:var(--text);
  transition:background .22s ease,color .22s ease;
}
a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin:auto}

/* SARCTE v3.9 institutional header — no menu */
.image-link-header{width:100%;margin:0;padding:0;background:#05070b;border:0;overflow:hidden;max-height:220px}
.image-header-anchor{display:block;width:100%;line-height:0}
.image-header-anchor img{display:block;width:100%;height:220px;object-fit:cover;object-position:center 58%;border-radius:0}

.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 17px;border-radius:13px;background:linear-gradient(120deg,#a80d15,#d71920);font-weight:800;border:1px solid transparent}.button-secondary{background:transparent;border-color:var(--line);color:var(--text)}
.hero{min-height:590px;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:50px;padding:68px 0 62px}.eyebrow{color:#ff4047;font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.hero h1{font-size:clamp(56px,7vw,94px);line-height:.93;margin:18px 0 26px;letter-spacing:-.055em}.hero h1 span{color:var(--red)}.lead{font-size:20px;line-height:1.65;color:var(--muted);max-width:760px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-mark{display:flex;justify-content:center}.hero-mark img{width:min(330px,100%);filter:drop-shadow(0 30px 70px rgba(215,25,32,.22))}
.section{padding:72px 0}.compact-section{padding-top:34px}.section-alt{background:linear-gradient(180deg,var(--soft),var(--soft2));border-block:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.section-heading h2,.split h2,.roadmap-card h2{font-size:38px;margin:8px 0 0;letter-spacing:-.035em}.section-heading p,.split p,.roadmap-card p{color:var(--muted);max-width:620px;line-height:1.65}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px}.pill{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--text);font-size:13px}
.card-grid,.repo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card,.repo-card{position:relative;min-height:210px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:var(--shadow)}.repo-card{display:flex;flex-direction:column}.card h3,.repo-card h3{font-size:21px;margin:18px 0 8px}.card p,.repo-card p{color:var(--muted);line-height:1.55;margin:0}.card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.tag,.status-badge{display:inline-flex;padding:7px 9px;border-radius:999px;border:1px solid rgba(215,25,32,.25);background:rgba(215,25,32,.08);color:#ff6d73;font-size:10px;font-weight:900;letter-spacing:.08em}.repo-card a{display:inline-flex;margin-top:auto;padding-top:18px;color:var(--card-link);font-weight:800}.repo-card a:hover{color:#d71920}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}.action-list{display:grid;gap:10px}.action-list a{display:flex;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}.action-list span{color:var(--muted);font-size:13px}.roadmap-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(130deg,var(--panel2),var(--panel));box-shadow:var(--shadow)}.link-badge:hover{color:#fff;background:rgba(215,25,32,.2)}

/* SARCTE v3.9 institutional footer */
.image-link-footer{width:100%;margin:52px 0 0;padding:0;border:0;background:#05070b;display:block}
.footer-v38 .footer-interactive{position:relative;display:block;width:100%;overflow:hidden;line-height:0}
.footer-v38 .footer-interactive>img{display:block;width:100%;height:auto}
.footer-v38 .footer-hotspot{position:absolute;display:block;z-index:25;border-radius:10px}
.footer-v38 .footer-logo-link{left:1.2%;top:10.5%;width:18.5%;height:30%}
.footer-v38 .footer-privacy-link{left:23.4%;top:79.2%;width:4.7%;height:10.8%}
.footer-v38 .footer-cookie-link{left:29.4%;top:79.2%;width:4.4%;height:10.8%}
.footer-v38 .footer-linkedin-link{left:79.3%;top:52.2%;width:3.5%;height:18%;border-radius:50%}
.footer-v38 .footer-corporate-link{left:84.4%;top:49.2%;width:14%;height:22%}
.footer-v38 .footer-hotspot:hover{background:rgba(255,255,255,.03)}
.footer-v38 .footer-hotspot:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}

@media(max-width:1100px){.image-link-header{max-height:190px}.image-header-anchor img{height:190px}.footer-v38 .footer-logo-link{width:20%}.footer-v38 .footer-linkedin-link{left:78.2%;width:4.5%}.footer-v38 .footer-corporate-link{left:84%;width:14.2%}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-mark{display:none}.card-grid,.repo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.footer-v38 .footer-privacy-link{left:21.9%;width:6.1%}.footer-v38 .footer-cookie-link{left:28.8%;width:5.8%}}
@media(max-width:700px){.image-link-header{max-height:150px}.image-header-anchor img{height:150px}.image-link-footer{margin-top:40px}}
@media(max-width:640px){.shell{width:min(100% - 24px,1180px)}.hero{padding:52px 0 48px}.hero h1{font-size:52px}.lead{font-size:17px}.section{padding:54px 0}.compact-section{padding-top:24px}.section-heading{display:block}.section-heading p{margin-top:10px}.card-grid,.repo-grid{grid-template-columns:1fr}.roadmap-card{align-items:flex-start;flex-direction:column}}


/* v1.2 theme switch + responsive polish */
.theme-toolbar{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.theme-toggle:hover{border-color:rgba(215,25,32,.45)}
.theme-toggle:focus-visible{outline:2px solid rgba(215,25,32,.55);outline-offset:3px}
.theme-toggle-icon{font-size:16px;line-height:1}

html[data-theme="light"] .card,
html[data-theme="light"] .repo-card,
html[data-theme="light"] .roadmap-card,
html[data-theme="light"] .action-list a,
html[data-theme="light"] .theme-toggle{
  box-shadow:0 12px 30px rgba(18,28,45,.07);
}
html[data-theme="light"] .button-secondary{background:#fff}
html[data-theme="light"] .eyebrow{color:#c81118}
html[data-theme="light"] .tag,
html[data-theme="light"] .status-badge{
  color:#b20f16;
  background:rgba(215,25,32,.06);
  border-color:rgba(215,25,32,.22);
}
html[data-theme="light"] .hero-mark img{
  filter:drop-shadow(0 24px 55px rgba(215,25,32,.16));
}

/* Keep institutional graphic areas visually unchanged in both themes */
.image-link-header,
.image-link-footer{background:#05070b !important}

@media(max-width:900px){
  .theme-toolbar{padding-top:14px}
  .repo-card{min-height:200px}
}
@media(max-width:640px){
  .theme-toolbar{padding-top:12px}
  .theme-toggle-label{display:none}
  .theme-toggle{width:40px;height:40px;padding:0;justify-content:center}
  .action-list a{align-items:flex-start;flex-direction:column;gap:6px}
  .hero-actions .button{width:100%}
}


/* v1.3 — header logo raised slightly */
@media(max-width:1100px){
  .image-header-anchor img{object-position:center 57%}
}
@media(max-width:700px){
  .image-header-anchor img{object-position:center 55%}
}


/* v1.4 — smartphone/mobile refinement */
@media (max-width: 700px){

  html, body{
    overflow-x:hidden;
  }

  /* Keep the approved SARCTE header readable on phones:
     show the left brand and right CTA instead of center-only crop. */
  .image-link-header{
    height:112px !important;
    max-height:112px !important;
    overflow:hidden;
  }
  .image-header-anchor img{
    width:100% !important;
    height:112px !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  main{
    width:100%;
  }

  .shell{
    width:min(100% - 32px, 1180px) !important;
    margin-inline:auto !important;
  }

  .theme-toolbar{
    padding-top:12px !important;
    padding-bottom:0 !important;
  }

  .hero{
    padding:34px 0 38px !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .hero-copy{
    order:1;
  }

  .hero-mark{
    order:2;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  .hero-mark img{
    width:min(58vw, 220px) !important;
    height:auto !important;
  }

  .hero h1{
    font-size:clamp(42px, 12vw, 58px) !important;
    line-height:.96 !important;
    letter-spacing:-.04em !important;
    margin-bottom:20px !important;
  }

  .hero p{
    font-size:17px !important;
    line-height:1.6 !important;
  }

  .eyebrow{
    font-size:12px !important;
    letter-spacing:.14em !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:24px !important;
  }
  .hero-actions .button{
    width:100% !important;
    justify-content:center !important;
    min-height:48px !important;
  }

  section{
    padding:44px 0 !important;
  }

  .section-heading,
  .section-intro,
  .section-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .section-heading h2,
  .section-intro h2{
    font-size:30px !important;
    line-height:1.08 !important;
  }

  .pill-row{
    gap:8px !important;
  }
  .pill{
    padding:8px 11px !important;
    font-size:12px !important;
  }

  .cards,
  .repo-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .card,
  .repo-card{
    min-height:auto !important;
    padding:20px !important;
  }

  .repo-card a{
    position:static !important;
    display:inline-flex !important;
    margin-top:14px !important;
    padding-top:0 !important;
  }

  .action-list{
    gap:10px !important;
  }
  .action-list a{
    min-height:64px !important;
    padding:15px 16px !important;
  }

  .roadmap-card{
    display:block !important;
    padding:22px !important;
  }
  .roadmap-card .status-badge,
  .roadmap-card .link-badge{
    display:inline-flex !important;
    margin-top:16px !important;
  }

  /* Footer image remains the approved asset, but avoid an oversized mobile block. */
  .image-link-footer{
    margin-top:30px !important;
  }
  .footer-v38 .footer-interactive{
    overflow:hidden !important;
  }
  .footer-v38 .footer-interactive > img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  /* On very narrow screens legal/data hotspots remain large enough to tap. */
  .footer-v38 .footer-privacy-link{
    left:21.0% !important;
    top:78.5% !important;
    width:8.5% !important;
    height:13% !important;
  }
  .footer-v38 .footer-cookie-link{
    left:29.5% !important;
    top:78.5% !important;
    width:8% !important;
    height:13% !important;
  }
  .footer-v38 .footer-linkedin-link{
    left:78% !important;
    top:48% !important;
    width:6% !important;
    height:22% !important;
  }
  .footer-v38 .footer-corporate-link{
    left:83.5% !important;
    top:47% !important;
    width:15.5% !important;
    height:24% !important;
  }
}

@media (max-width: 430px){
  .shell{
    width:calc(100% - 24px) !important;
  }

  .image-link-header{
    height:96px !important;
    max-height:96px !important;
  }
  .image-header-anchor img{
    height:96px !important;
  }

  .hero{
    padding-top:26px !important;
  }

  .hero h1{
    font-size:clamp(38px, 12.5vw, 50px) !important;
  }

  .hero-mark img{
    width:min(54vw, 190px) !important;
  }

  .theme-toggle{
    min-width:40px !important;
    min-height:40px !important;
  }
}


/* v1.5 — definitive mobile header fix
   Do not crop the approved banner on phones. Keep the whole logo + CTA visible. */
@media (max-width: 700px){
  .image-link-header{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:#05070b !important;
  }

  .image-header-anchor{
    display:block !important;
    width:100% !important;
    line-height:0 !important;
  }

  .image-header-anchor img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }
}

@media (max-width: 430px){
  .image-link-header{
    height:auto !important;
    max-height:none !important;
  }

  .image-header-anchor img{
    height:auto !important;
    max-height:none !important;
  }
}


/* === SARCTE PORTRAIT/MOBILE HEADER — definitive override ===
   Landscape/desktop keeps the approved banner.
   Portrait tablet/smartphone uses a dedicated responsive composition:
   background + real logo + CTA, avoiding any crop of the brand. */
.sarcte-mobile-header{display:none}

@media (orientation:portrait) and (max-width:900px){
  .image-link-header{
    position:relative !important;
    width:100% !important;
    height:150px !important;
    max-height:150px !important;
    overflow:hidden !important;
    background:#05070b !important;
  }

  .image-header-anchor{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:150px !important;
    overflow:hidden !important;
    line-height:normal !important;
    text-decoration:none !important;
  }

  /* Original approved banner becomes only the background source on portrait. */
  .image-header-anchor > img:first-child{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:58% center !important;
    opacity:1 !important;
  }

  .sarcte-mobile-header{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    padding:16px 22px !important;
    background:linear-gradient(90deg,rgba(4,6,10,.94) 0%,rgba(4,6,10,.52) 48%,rgba(4,6,10,.18) 100%) !important;
  }

  .sarcte-mobile-brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    max-width:52% !important;
  }

  .sarcte-mobile-brand img{
    display:block !important;
    width:min(230px,100%) !important;
    height:auto !important;
    max-height:98px !important;
    object-fit:contain !important;
    object-position:left center !important;
    filter:none !important;
  }

  .sarcte-mobile-cta{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:11px 16px !important;
    border-radius:10px !important;
    background:#d71920 !important;
    border:1px solid #ef242b !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    box-shadow:0 10px 24px rgba(215,25,32,.25) !important;
  }
}

@media (orientation:portrait) and (max-width:600px){
  .image-link-header,
  .image-header-anchor{
    height:126px !important;
    max-height:126px !important;
  }

  .sarcte-mobile-header{
    padding:12px 14px !important;
    gap:10px !important;
  }

  .sarcte-mobile-brand{
    max-width:57% !important;
  }

  .sarcte-mobile-brand img{
    width:min(180px,100%) !important;
    max-height:82px !important;
  }

  .sarcte-mobile-cta{
    min-height:40px !important;
    padding:9px 11px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }
}

@media (orientation:portrait) and (max-width:390px){
  .image-link-header,
  .image-header-anchor{
    height:112px !important;
    max-height:112px !important;
  }

  .sarcte-mobile-header{padding:10px 11px !important}

  .sarcte-mobile-brand{max-width:58% !important}
  .sarcte-mobile-brand img{
    width:min(160px,100%) !important;
    max-height:72px !important;
  }

  .sarcte-mobile-cta{
    padding:8px 9px !important;
    font-size:11px !important;
  }
}

/* Portrait utility rows must wrap cleanly, without causing horizontal overflow. */
@media (orientation:portrait) and (max-width:900px){
  .utility-strip-inner,
  .subpage-utility{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
}

@media (orientation:portrait) and (max-width:520px){
  .utility-strip-inner,
  .subpage-utility{
    align-items:stretch !important;
  }
  .utility-strip-inner > *,
  .subpage-utility > *{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}



/* ============================================================
   SARCTE UI BASELINE v4.1
   Responsive header shared across sarcte.eu and all subdomains.
   Clean background + real HTML logo + real HTML CTA.
   ============================================================ */

.sarcte-ui-header{
  position:relative;
  width:100%;
  height:170px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}

.sarcte-ui-header-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(3,5,8,.72) 0%,rgba(3,5,8,.32) 42%,rgba(3,5,8,.10) 100%),
    url("assets/sarcte_header_background.png") center center / cover no-repeat;
}

.sarcte-ui-header-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-ui-brand{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  text-decoration:none;
}

.sarcte-ui-brand img{
  display:block;
  width:320px;
  max-width:34vw;
  height:auto;
  max-height:118px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-ui-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.sarcte-ui-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 34px rgba(215,25,32,.32);
  filter:brightness(1.04);
}

.sarcte-ui-cta:focus-visible,
.sarcte-ui-brand:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

/* Tablet landscape / small laptops */
@media (max-width:1100px){
  .sarcte-ui-header{height:150px}
  .sarcte-ui-header-inner{
    width:min(94%,1200px);
    gap:22px;
  }
  .sarcte-ui-brand img{
    width:280px;
    max-width:39vw;
    max-height:102px;
  }
  .sarcte-ui-cta{
    min-height:48px;
    padding:0 24px;
    font-size:16px;
  }
}

/* Tablet portrait */
@media (max-width:820px){
  .sarcte-ui-header{height:138px}
  .sarcte-ui-header-inner{
    width:calc(100% - 36px);
    gap:18px;
  }
  .sarcte-ui-brand img{
    width:235px;
    max-width:50vw;
    max-height:90px;
  }
  .sarcte-ui-cta{
    min-height:44px;
    padding:0 18px;
    border-radius:9px;
    font-size:14px;
  }
}

/* Smartphone */
@media (max-width:600px){
  .sarcte-ui-header{height:118px}
  .sarcte-ui-header-bg{
    background-position:58% center;
  }
  .sarcte-ui-header-inner{
    width:calc(100% - 24px);
    gap:10px;
  }
  .sarcte-ui-brand{
    flex:1 1 auto;
    min-width:0;
  }
  .sarcte-ui-brand img{
    width:185px;
    max-width:56vw;
    max-height:76px;
  }
  .sarcte-ui-cta{
    min-height:40px;
    padding:0 12px;
    font-size:12px;
    border-radius:8px;
  }
}

/* Very narrow smartphones */
@media (max-width:390px){
  .sarcte-ui-header{height:108px}
  .sarcte-ui-header-inner{
    width:calc(100% - 18px);
  }
  .sarcte-ui-brand img{
    width:160px;
    max-width:55vw;
    max-height:68px;
  }
  .sarcte-ui-cta{
    min-height:38px;
    padding:0 10px;
    font-size:11px;
  }
}

/* Utility/navigation rows below the header must never overflow */
@media (max-width:820px){
  .utility-strip-inner,
  .subpage-utility{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
}

@media (max-width:520px){
  .utility-strip-inner,
  .subpage-utility{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:stretch !important;
  }
  .utility-strip-inner > *,
  .subpage-utility > *{
    min-width:0 !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}



/* ============================================================
   SARCTE UI BASELINE v4.2 — HEADER MATCHES FOOTER VISUAL STYLE
   Uses the exact footer artwork as the header visual source,
   cropped to its upper section. Real HTML logo + CTA remain
   responsive and sharp on every device.
   ============================================================ */

.sarcte-ui-header{
  position:relative !important;
  height:178px !important;
  overflow:hidden !important;
  background:#05070b !important;
}

.sarcte-ui-header-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;

  /* same visual language as the approved footer */
  background-image:
    linear-gradient(90deg, rgba(3,5,8,.96) 0%, rgba(3,5,8,.64) 22%, rgba(3,5,8,.16) 52%, rgba(3,5,8,.06) 100%),
    url("assets/footer_tecnologico_sarcte_compact.png") !important;

  background-repeat:no-repeat !important;
  background-size:100% auto !important;
  background-position:center top !important;
}

/* Soft left mask hides the logo baked into the footer artwork.
   The real HTML logo sits above this area. */
.sarcte-ui-header::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  width:34%;
  background:linear-gradient(90deg,
    rgba(3,5,8,.98) 0%,
    rgba(3,5,8,.92) 52%,
    rgba(3,5,8,.55) 78%,
    rgba(3,5,8,0) 100%);
  pointer-events:none;
}

.sarcte-ui-header-inner{
  position:relative !important;
  z-index:3 !important;
  width:min(92%,1600px) !important;
  height:100% !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
}

/* Larger, sharper brand presence */
.sarcte-ui-brand img{
  width:365px !important;
  max-width:38vw !important;
  max-height:126px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
}

/* CTA remains fully HTML and always clickable */
.sarcte-ui-cta{
  min-height:54px !important;
  padding:0 30px !important;
  font-size:18px !important;
}

/* Laptop / tablet landscape */
@media(max-width:1100px){
  .sarcte-ui-header{
    height:158px !important;
  }

  .sarcte-ui-header-bg{
    background-size:auto 285px !important;
    background-position:center top !important;
  }

  .sarcte-ui-header::before{
    width:38% !important;
  }

  .sarcte-ui-brand img{
    width:315px !important;
    max-width:42vw !important;
    max-height:108px !important;
  }

  .sarcte-ui-cta{
    min-height:48px !important;
    padding:0 23px !important;
    font-size:16px !important;
  }
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-ui-header{
    height:142px !important;
  }

  .sarcte-ui-header-bg{
    background-size:auto 255px !important;
    background-position:58% top !important;
  }

  .sarcte-ui-header::before{
    width:46% !important;
  }

  .sarcte-ui-header-inner{
    width:calc(100% - 32px) !important;
    gap:14px !important;
  }

  .sarcte-ui-brand img{
    width:245px !important;
    max-width:52vw !important;
    max-height:92px !important;
  }

  .sarcte-ui-cta{
    min-height:44px !important;
    padding:0 17px !important;
    font-size:14px !important;
  }
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-ui-header{
    height:122px !important;
  }

  .sarcte-ui-header-bg{
    background-size:auto 225px !important;
    background-position:60% top !important;
  }

  .sarcte-ui-header::before{
    width:52% !important;
  }

  .sarcte-ui-header-inner{
    width:calc(100% - 22px) !important;
    gap:8px !important;
  }

  .sarcte-ui-brand{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .sarcte-ui-brand img{
    width:188px !important;
    max-width:55vw !important;
    max-height:76px !important;
  }

  .sarcte-ui-cta{
    min-height:40px !important;
    padding:0 11px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }
}

/* Narrow phones */
@media(max-width:390px){
  .sarcte-ui-header{
    height:112px !important;
  }

  .sarcte-ui-header-bg{
    background-size:auto 205px !important;
    background-position:61% top !important;
  }

  .sarcte-ui-brand img{
    width:158px !important;
    max-width:54vw !important;
    max-height:68px !important;
  }

  .sarcte-ui-cta{
    min-height:38px !important;
    padding:0 9px !important;
    font-size:11px !important;
  }
}



/* ============================================================
   SARCTE UI BASELINE v4.3 FINAL
   One clean header for desktop / tablet / smartphone.
   Visual background derived from the APPROVED footer artwork.
   No baked logo, no ghost text, no duplicate CTA.
   ============================================================ */

.sarcte-final-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}

.sarcte-final-header-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(2,4,7,.58) 0%,rgba(2,4,7,.18) 44%,rgba(2,4,7,.04) 100%),
    url("assets/sarcte_footer_visual_header_bg.png") center center / cover no-repeat;
}

.sarcte-final-header-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-final-brand{
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-width:0;
  color:#fff !important;
  text-decoration:none !important;
}

.sarcte-final-mark{
  display:block;
  width:92px;
  height:92px;
  object-fit:contain;
  flex:0 0 auto;
}

.sarcte-final-wordmark{
  display:block;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:58px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 3px 20px rgba(0,0,0,.35);
}

.sarcte-final-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.sarcte-final-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 34px rgba(215,25,32,.32);
  filter:brightness(1.04);
}

.sarcte-final-brand:focus-visible,
.sarcte-final-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

/* Laptop / tablet landscape */
@media(max-width:1100px){
  .sarcte-final-header{height:156px}
  .sarcte-final-header-inner{width:min(94%,1200px);gap:20px}
  .sarcte-final-mark{width:78px;height:78px}
  .sarcte-final-wordmark{font-size:48px}
  .sarcte-final-cta{min-height:48px;padding:0 23px;font-size:16px}
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-final-header{height:138px}
  .sarcte-final-header-bg{background-position:57% center}
  .sarcte-final-header-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-final-brand{gap:12px}
  .sarcte-final-mark{width:64px;height:64px}
  .sarcte-final-wordmark{font-size:38px}
  .sarcte-final-cta{min-height:44px;padding:0 17px;font-size:14px}
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-final-header{height:116px}
  .sarcte-final-header-bg{background-position:60% center}
  .sarcte-final-header-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-final-brand{gap:8px;flex:1 1 auto}
  .sarcte-final-mark{width:48px;height:48px}
  .sarcte-final-wordmark{font-size:28px}
  .sarcte-final-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-final-header{height:108px}
  .sarcte-final-header-inner{width:calc(100% - 16px)}
  .sarcte-final-mark{width:42px;height:42px}
  .sarcte-final-wordmark{font-size:24px}
  .sarcte-final-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}

/* Keep utility bars orderly below the header */
@media(max-width:820px){
  .utility-strip-inner,
  .subpage-utility{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
}

@media(max-width:520px){
  .utility-strip-inner,
  .subpage-utility{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:stretch !important;
  }
  .utility-strip-inner > *,
  .subpage-utility > *{
    min-width:0 !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}



/* ============================================================
   SARCTE UI BASELINE v4.4 — LOGO MATCH
   Header brand now uses the SAME flat horizontal visual style
   as the approved footer: red flat mark + white SARCTE wordmark.
   ============================================================ */

.sarcte-match-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}

.sarcte-match-header-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(2,4,7,.60) 0%,rgba(2,4,7,.18) 42%,rgba(2,4,7,.04) 100%),
    url("assets/sarcte_footer_visual_header_bg.png") center center / cover no-repeat;
}

.sarcte-match-header-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-match-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-match-brand img{
  display:block;
  width:390px;
  max-width:40vw;
  height:auto;
  max-height:126px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-match-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

.sarcte-match-brand:focus-visible,
.sarcte-match-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

/* Laptop / tablet landscape */
@media(max-width:1100px){
  .sarcte-match-header{height:156px}
  .sarcte-match-header-inner{width:min(94%,1200px);gap:20px}
  .sarcte-match-brand img{
    width:330px;
    max-width:43vw;
    max-height:108px;
  }
  .sarcte-match-cta{min-height:48px;padding:0 23px;font-size:16px}
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-match-header{height:138px}
  .sarcte-match-header-bg{background-position:57% center}
  .sarcte-match-header-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-match-brand img{
    width:260px;
    max-width:53vw;
    max-height:92px;
  }
  .sarcte-match-cta{min-height:44px;padding:0 17px;font-size:14px}
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-match-header{height:116px}
  .sarcte-match-header-bg{background-position:60% center}
  .sarcte-match-header-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-match-brand{flex:1 1 auto}
  .sarcte-match-brand img{
    width:195px;
    max-width:55vw;
    max-height:76px;
  }
  .sarcte-match-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-match-header{height:108px}
  .sarcte-match-header-inner{width:calc(100% - 16px)}
  .sarcte-match-brand img{
    width:168px;
    max-width:54vw;
    max-height:68px;
  }
  .sarcte-match-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}

/* Utility bars below header */
@media(max-width:820px){
  .utility-strip-inner,
  .subpage-utility{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
}
@media(max-width:520px){
  .utility-strip-inner,
  .subpage-utility{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:stretch !important;
  }
  .utility-strip-inner > *,
  .subpage-utility > *{
    min-width:0 !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}



/* ============================================================
   SARCTE UI BASELINE v4.5 — EXACT FOOTER BRAND
   Header brand is extracted from the approved footer artwork,
   so logo AND SARCTE wordmark are visually identical.
   ============================================================ */

.sarcte-exact-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}
.sarcte-exact-header-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(2,4,7,.58) 0%,rgba(2,4,7,.16) 44%,rgba(2,4,7,.04) 100%),
    url("assets/sarcte_footer_visual_header_bg.png") center center / cover no-repeat;
}
.sarcte-exact-header-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.sarcte-exact-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}
.sarcte-exact-brand img{
  display:block;
  width:385px;
  max-width:40vw;
  height:auto;
  max-height:126px;
  object-fit:contain;
  object-position:left center;
}
.sarcte-exact-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}
.sarcte-exact-brand:focus-visible,
.sarcte-exact-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}
@media(max-width:1100px){
  .sarcte-exact-header{height:156px}
  .sarcte-exact-header-inner{width:min(94%,1200px);gap:20px}
  .sarcte-exact-brand img{width:330px;max-width:43vw;max-height:108px}
  .sarcte-exact-cta{min-height:48px;padding:0 23px;font-size:16px}
}
@media(max-width:820px){
  .sarcte-exact-header{height:138px}
  .sarcte-exact-header-bg{background-position:57% center}
  .sarcte-exact-header-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-exact-brand img{width:260px;max-width:53vw;max-height:92px}
  .sarcte-exact-cta{min-height:44px;padding:0 17px;font-size:14px}
}
@media(max-width:600px){
  .sarcte-exact-header{height:116px}
  .sarcte-exact-header-bg{background-position:60% center}
  .sarcte-exact-header-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-exact-brand{flex:1 1 auto}
  .sarcte-exact-brand img{width:195px;max-width:55vw;max-height:76px}
  .sarcte-exact-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}
@media(max-width:390px){
  .sarcte-exact-header{height:108px}
  .sarcte-exact-header-inner{width:calc(100% - 16px)}
  .sarcte-exact-brand img{width:168px;max-width:54vw;max-height:68px}
  .sarcte-exact-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}



/* ============================================================
   SARCTE HEADER v5.0 FINAL
   Brand is a pixel-exact crop from the approved footer artwork.
   No regenerated font, no rewritten wordmark, no antialias changes.
   ============================================================ */

.sarcte-v5-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}

.sarcte-v5-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(2,4,7,.58) 0%,rgba(2,4,7,.18) 42%,rgba(2,4,7,.04) 100%),
    url("assets/sarcte_header_bg_exact_footer_v5.jpg") center center / cover no-repeat;
}

.sarcte-v5-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-v5-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-v5-brand img{
  display:block;
  width:380px;
  max-width:40vw;
  height:auto;
  max-height:126px;
  object-fit:contain;
  object-position:left center;
  border-radius:0;
}

.sarcte-v5-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

/* Laptop / tablet landscape */
@media(max-width:1100px){
  .sarcte-v5-header{height:156px}
  .sarcte-v5-inner{width:min(94%,1200px);gap:20px}
  .sarcte-v5-brand img{width:325px;max-width:44vw;max-height:108px}
  .sarcte-v5-cta{min-height:48px;padding:0 23px;font-size:16px}
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-v5-header{height:138px}
  .sarcte-v5-bg{background-position:57% center}
  .sarcte-v5-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-v5-brand img{width:255px;max-width:54vw;max-height:92px}
  .sarcte-v5-cta{min-height:44px;padding:0 17px;font-size:14px}
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-v5-header{height:116px}
  .sarcte-v5-bg{background-position:60% center}
  .sarcte-v5-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-v5-brand{flex:1 1 auto}
  .sarcte-v5-brand img{width:190px;max-width:55vw;max-height:76px}
  .sarcte-v5-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-v5-header{height:108px}
  .sarcte-v5-inner{width:calc(100% - 16px)}
  .sarcte-v5-brand img{width:164px;max-width:54vw;max-height:68px}
  .sarcte-v5-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}

/* Utility rows below the header */
@media(max-width:820px){
  .utility-strip-inner,
  .subpage-utility{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
}
@media(max-width:520px){
  .utility-strip-inner,
  .subpage-utility{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:stretch !important;
  }
  .utility-strip-inner > *,
  .subpage-utility > *{
    min-width:0 !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}



/* ============================================================
   SARCTE HEADER v5.1 — FOOTER BRAND MATCH
   Brand is an exact pixel crop from the approved footer.
   The left side of the header fades to the same black backdrop,
   so the crop blends seamlessly without a visible rectangle.
   ============================================================ */

.sarcte-v51-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#020305;
  isolation:isolate;
}

.sarcte-v51-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,
      #020305 0%,
      #020305 24%,
      rgba(2,3,5,.96) 31%,
      rgba(2,3,5,.55) 42%,
      rgba(2,3,5,.12) 60%,
      rgba(2,3,5,.03) 100%),
    url("assets/sarcte_header_bg_exact_footer_v5.jpg") center center / cover no-repeat;
}

.sarcte-v51-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-v51-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-v51-brand img{
  display:block;
  width:430px;
  max-width:43vw;
  height:auto;
  max-height:128px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-v51-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

@media(max-width:1100px){
  .sarcte-v51-header{height:156px}
  .sarcte-v51-inner{width:min(94%,1200px);gap:20px}
  .sarcte-v51-brand img{width:360px;max-width:46vw;max-height:108px}
  .sarcte-v51-cta{min-height:48px;padding:0 23px;font-size:16px}
}

@media(max-width:820px){
  .sarcte-v51-header{height:138px}
  .sarcte-v51-bg{
    background:
      linear-gradient(90deg,#020305 0%,#020305 31%,rgba(2,3,5,.72) 48%,rgba(2,3,5,.08) 100%),
      url("assets/sarcte_header_bg_exact_footer_v5.jpg") 60% center / cover no-repeat;
  }
  .sarcte-v51-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-v51-brand img{width:280px;max-width:55vw;max-height:94px}
  .sarcte-v51-cta{min-height:44px;padding:0 17px;font-size:14px}
}

@media(max-width:600px){
  .sarcte-v51-header{height:116px}
  .sarcte-v51-bg{
    background:
      linear-gradient(90deg,#020305 0%,#020305 37%,rgba(2,3,5,.75) 55%,rgba(2,3,5,.10) 100%),
      url("assets/sarcte_header_bg_exact_footer_v5.jpg") 65% center / cover no-repeat;
  }
  .sarcte-v51-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-v51-brand{flex:1 1 auto}
  .sarcte-v51-brand img{width:205px;max-width:57vw;max-height:78px}
  .sarcte-v51-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

@media(max-width:390px){
  .sarcte-v51-header{height:108px}
  .sarcte-v51-inner{width:calc(100% - 16px)}
  .sarcte-v51-brand img{width:178px;max-width:56vw;max-height:70px}
  .sarcte-v51-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}



/* ============================================================
   SARCTE HEADER v5.2 — EXACT BRAND FIX
   Complete brand crop from approved footer. No clipped wordmark.
   ============================================================ */
.sarcte-v52-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#020305;
  isolation:isolate;
}
.sarcte-v52-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,#020305 0%,#020305 23%,rgba(2,3,5,.88) 34%,rgba(2,3,5,.28) 50%,rgba(2,3,5,.04) 100%),
    url("assets/sarcte_header_bg_footer_exact_v52.jpg") center center / cover no-repeat;
}
.sarcte-v52-inner{
  position:relative;
  z-index:2;
  width:min(92%,1600px);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.sarcte-v52-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}
.sarcte-v52-brand img{
  display:block;
  width:430px;
  max-width:43vw;
  height:auto;
  max-height:126px;
  object-fit:contain;
  object-position:left center;
}
.sarcte-v52-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}
@media(max-width:1100px){
  .sarcte-v52-header{height:156px}
  .sarcte-v52-inner{width:min(94%,1200px);gap:20px}
  .sarcte-v52-brand img{width:360px;max-width:46vw;max-height:108px}
  .sarcte-v52-cta{min-height:48px;padding:0 23px;font-size:16px}
}
@media(max-width:820px){
  .sarcte-v52-header{height:138px}
  .sarcte-v52-bg{
    background:
      linear-gradient(90deg,#020305 0%,#020305 30%,rgba(2,3,5,.72) 48%,rgba(2,3,5,.08) 100%),
      url("assets/sarcte_header_bg_footer_exact_v52.jpg") 60% center / cover no-repeat;
  }
  .sarcte-v52-inner{width:calc(100% - 34px);gap:14px}
  .sarcte-v52-brand img{width:280px;max-width:55vw;max-height:94px}
  .sarcte-v52-cta{min-height:44px;padding:0 17px;font-size:14px}
}
@media(max-width:600px){
  .sarcte-v52-header{height:116px}
  .sarcte-v52-bg{
    background:
      linear-gradient(90deg,#020305 0%,#020305 36%,rgba(2,3,5,.74) 55%,rgba(2,3,5,.10) 100%),
      url("assets/sarcte_header_bg_footer_exact_v52.jpg") 65% center / cover no-repeat;
  }
  .sarcte-v52-inner{width:calc(100% - 22px);gap:8px}
  .sarcte-v52-brand{flex:1 1 auto}
  .sarcte-v52-brand img{width:205px;max-width:57vw;max-height:78px}
  .sarcte-v52-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}
@media(max-width:390px){
  .sarcte-v52-header{height:108px}
  .sarcte-v52-inner{width:calc(100% - 16px)}
  .sarcte-v52-brand img{width:178px;max-width:56vw;max-height:70px}
  .sarcte-v52-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}



/* ============================================================
   SARCTE HEADER v5.3 — FINAL ALIGN
   Fine tuning on top of v5.2 exact-footer-brand:
   - exact footer logo/wordmark preserved
   - brand slightly higher and visually stronger
   - CTA stays aligned
   - responsive behavior preserved
   ============================================================ */

.sarcte-v52-inner{
  width:min(94%,1640px) !important;
}

.sarcte-v52-brand{
  transform:translate(-4px,-8px);
}

.sarcte-v52-brand img{
  width:455px !important;
  max-width:45vw !important;
  max-height:132px !important;
}

.sarcte-v52-cta{
  transform:translateY(-4px);
}

@media(max-width:1100px){
  .sarcte-v52-inner{
    width:min(95%,1240px) !important;
  }
  .sarcte-v52-brand{
    transform:translate(-2px,-6px);
  }
  .sarcte-v52-brand img{
    width:378px !important;
    max-width:47vw !important;
    max-height:112px !important;
  }
  .sarcte-v52-cta{
    transform:translateY(-3px);
  }
}

@media(max-width:820px){
  .sarcte-v52-brand{
    transform:translate(0,-4px);
  }
  .sarcte-v52-brand img{
    width:292px !important;
    max-width:56vw !important;
    max-height:98px !important;
  }
  .sarcte-v52-cta{
    transform:translateY(-2px);
  }
}

@media(max-width:600px){
  .sarcte-v52-brand{
    transform:translate(0,-2px);
  }
  .sarcte-v52-brand img{
    width:214px !important;
    max-width:58vw !important;
    max-height:80px !important;
  }
  .sarcte-v52-cta{
    transform:none;
  }
}

@media(max-width:390px){
  .sarcte-v52-brand img{
    width:184px !important;
    max-width:57vw !important;
    max-height:72px !important;
  }
}



/* ============================================================
   SARCTE HEADER v5.4 — VISUAL MATCH
   Exact footer brand retained; position/scale matched to footer.
   ============================================================ */

.sarcte-v52-inner{
  width:100% !important;
  max-width:none !important;
  padding-left:64px !important;
  padding-right:64px !important;
  box-sizing:border-box !important;
}

.sarcte-v52-brand{
  transform:none !important;
}

.sarcte-v52-brand img{
  width:350px !important;
  max-width:36vw !important;
  max-height:112px !important;
}

.sarcte-v52-cta{
  transform:none !important;
}

/* Tablet landscape */
@media(max-width:1100px){
  .sarcte-v52-inner{
    padding-left:38px !important;
    padding-right:38px !important;
  }

  .sarcte-v52-brand img{
    width:300px !important;
    max-width:43vw !important;
    max-height:102px !important;
  }
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-v52-inner{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .sarcte-v52-brand img{
    width:245px !important;
    max-width:51vw !important;
    max-height:88px !important;
  }
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-v52-inner{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .sarcte-v52-brand img{
    width:185px !important;
    max-width:54vw !important;
    max-height:72px !important;
  }
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-v52-inner{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .sarcte-v52-brand img{
    width:158px !important;
    max-width:53vw !important;
    max-height:64px !important;
  }
}



/* ============================================================
   SARCTE HEADER v5.6 — LOGO UP 0.5 CM
   Final requested adjustment:
   brand/logo raised by approx. 0.5 cm (~19px desktop).
   Footer/content unchanged.
   ============================================================ */

.sarcte-v52-brand{
  transform:translateY(-19px) !important;
}

/* Tablet landscape */
@media(max-width:1100px){
  .sarcte-v52-brand{
    transform:translateY(-16px) !important;
  }
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-v52-brand{
    transform:translateY(-13px) !important;
  }
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-v52-brand{
    transform:translateY(-10px) !important;
  }
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-v52-brand{
    transform:translateY(-8px) !important;
  }
}



/* ============================================================
   SARCTE HEADER v5.7 — LOGO UP MORE
   Further vertical adjustment only.
   index.html unchanged: existing .sarcte-v52-brand markup is reused.
   ============================================================ */

.sarcte-v52-brand{
  transform:translateY(-30px) !important;
}

@media(max-width:1100px){
  .sarcte-v52-brand{
    transform:translateY(-24px) !important;
  }
}

@media(max-width:820px){
  .sarcte-v52-brand{
    transform:translateY(-18px) !important;
  }
}

@media(max-width:600px){
  .sarcte-v52-brand{
    transform:translateY(-13px) !important;
  }
}

@media(max-width:390px){
  .sarcte-v52-brand{
    transform:translateY(-10px) !important;
  }
}



/* ============================================================
   SARCTE HEADER v5.8 — LOGO UP 80PX
   Desktop: -80px
   Tablet landscape: -64px
   Tablet portrait: -48px
   Smartphone: -32px
   Narrow smartphone: -24px
   ============================================================ */

.sarcte-v52-brand{
  transform:translateY(-80px) !important;
}

@media(max-width:1100px){
  .sarcte-v52-brand{ transform:translateY(-64px) !important; }
}

@media(max-width:820px){
  .sarcte-v52-brand{ transform:translateY(-48px) !important; }
}

@media(max-width:600px){
  .sarcte-v52-brand{ transform:translateY(-32px) !important; }
}

@media(max-width:390px){
  .sarcte-v52-brand{ transform:translateY(-24px) !important; }
}



/* ============================================================
   SARCTE HEADER v5.9 — CENTER ALIGN
   Final correction requested:
   logo/brand lowered and aligned vertically with "Visita sarcte.it".
   ============================================================ */

.sarcte-v52-brand{
  transform:translateY(0) !important;
}

.sarcte-v52-cta{
  transform:translateY(0) !important;
}

@media(max-width:1100px){
  .sarcte-v52-brand{ transform:translateY(0) !important; }
  .sarcte-v52-cta{ transform:translateY(0) !important; }
}

@media(max-width:820px){
  .sarcte-v52-brand{ transform:translateY(0) !important; }
  .sarcte-v52-cta{ transform:translateY(0) !important; }
}

@media(max-width:600px){
  .sarcte-v52-brand{ transform:translateY(0) !important; }
  .sarcte-v52-cta{ transform:translateY(0) !important; }
}

@media(max-width:390px){
  .sarcte-v52-brand{ transform:translateY(0) !important; }
  .sarcte-v52-cta{ transform:translateY(0) !important; }
}



/* ============================================================
   SARCTE HEADER v6.0 — DEFINITIVE
   IMPORTANT:
   Logo + wordmark are NOT reconstructed and NOT separate images.
   The header uses the exact upper strip of the approved footer.
   Therefore the SARCTE mark/wordmark is literally identical.
   ============================================================ */

.sarcte-v60-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#020305 url("assets/sarcte_header_exact_footer_strip_v60.jpg")
             left top / auto 100% no-repeat;
  isolation:isolate;
}

/* Invisible clickable area over the baked-in SARCTE brand */
.sarcte-v60-brand-hit{
  position:absolute;
  z-index:2;
  left:3.2%;
  top:18%;
  width:25%;
  height:64%;
  display:block;
  text-decoration:none;
}

.sarcte-v60-cta{
  position:absolute;
  z-index:3;
  right:3.4%;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

.sarcte-v60-cta:hover{
  filter:brightness(1.04);
}

.sarcte-v60-brand-hit:focus-visible,
.sarcte-v60-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

/* Tablet landscape */
@media(max-width:1100px){
  .sarcte-v60-header{
    height:156px;
    background-size:auto 100%;
  }
  .sarcte-v60-brand-hit{
    left:3%;
    top:18%;
    width:31%;
    height:64%;
  }
  .sarcte-v60-cta{
    right:3%;
    min-height:48px;
    padding:0 23px;
    font-size:16px;
  }
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-v60-header{
    height:138px;
    background-size:auto 100%;
  }
  .sarcte-v60-brand-hit{
    left:2.4%;
    top:18%;
    width:39%;
    height:64%;
  }
  .sarcte-v60-cta{
    right:2.4%;
    min-height:44px;
    padding:0 17px;
    font-size:14px;
  }
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-v60-header{
    height:116px;
    background-size:auto 100%;
  }
  .sarcte-v60-brand-hit{
    left:2%;
    top:16%;
    width:48%;
    height:68%;
  }
  .sarcte-v60-cta{
    right:2%;
    min-height:40px;
    padding:0 10px;
    border-radius:8px;
    font-size:11.5px;
  }
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-v60-header{
    height:108px;
  }
  .sarcte-v60-brand-hit{
    width:50%;
  }
  .sarcte-v60-cta{
    right:1.5%;
    min-height:38px;
    padding:0 8px;
    font-size:10.5px;
  }
}



/* ============================================================
   SARCTE HEADER v6.1 — FINAL
   Exact footer brand as a complete IMG, vertically centered.
   No background crop can clip the logo or SARCTE wordmark.
   ============================================================ */

.sarcte-v61-header{
  position:relative;
  width:100%;
  height:176px;
  overflow:hidden;
  background:#020305;
  isolation:isolate;
}

.sarcte-v61-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,#020305 0%,rgba(2,3,5,.92) 24%,rgba(2,3,5,.35) 46%,rgba(2,3,5,.04) 100%),
    url("assets/sarcte_header_bg_footer_v61.jpg") center center / cover no-repeat;
}

.sarcte-v61-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:0 64px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.sarcte-v61-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-v61-brand img{
  display:block;
  width:410px;
  max-width:40vw;
  height:auto;
  max-height:116px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-v61-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

.sarcte-v61-brand:focus-visible,
.sarcte-v61-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:4px;
}

/* Tablet landscape */
@media(max-width:1100px){
  .sarcte-v61-header{height:156px}
  .sarcte-v61-inner{padding:0 38px;gap:20px}
  .sarcte-v61-brand img{
    width:340px;
    max-width:44vw;
    max-height:104px;
  }
  .sarcte-v61-cta{
    min-height:48px;
    padding:0 23px;
    font-size:16px;
  }
}

/* Tablet portrait */
@media(max-width:820px){
  .sarcte-v61-header{height:138px}
  .sarcte-v61-bg{background-position:60% center}
  .sarcte-v61-inner{padding:0 24px;gap:14px}
  .sarcte-v61-brand img{
    width:265px;
    max-width:52vw;
    max-height:90px;
  }
  .sarcte-v61-cta{
    min-height:44px;
    padding:0 17px;
    font-size:14px;
  }
}

/* Smartphone */
@media(max-width:600px){
  .sarcte-v61-header{height:116px}
  .sarcte-v61-bg{background-position:65% center}
  .sarcte-v61-inner{padding:0 14px;gap:8px}
  .sarcte-v61-brand{
    flex:1 1 auto;
  }
  .sarcte-v61-brand img{
    width:190px;
    max-width:54vw;
    max-height:74px;
  }
  .sarcte-v61-cta{
    min-height:40px;
    padding:0 10px;
    font-size:11.5px;
    border-radius:8px;
  }
}

/* Narrow smartphone */
@media(max-width:390px){
  .sarcte-v61-header{height:108px}
  .sarcte-v61-inner{padding:0 10px}
  .sarcte-v61-brand img{
    width:162px;
    max-width:53vw;
    max-height:66px;
  }
  .sarcte-v61-cta{
    min-height:38px;
    padding:0 8px;
    font-size:10.5px;
  }
}



/* ============================================================
   SARCTE HEADER v6.2 — TALL HEADER / NO CLIP
   Taller header and generous brand box to avoid any clipping.
   ============================================================ */

.sarcte-v62-header{
  position:relative;
  width:100%;
  height:220px;
  overflow:hidden;
  background:#020305;
  isolation:isolate;
}

.sarcte-v62-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,#020305 0%,rgba(2,3,5,.94) 22%,rgba(2,3,5,.34) 47%,rgba(2,3,5,.04) 100%),
    url("assets/sarcte_header_bg_footer_v62_1788596489.jpg") center center / cover no-repeat;
}

.sarcte-v62-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:0 64px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.sarcte-v62-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-v62-brand img{
  display:block;
  width:430px;
  max-width:41vw;
  height:auto;
  max-height:150px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-v62-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:56px;
  padding:0 30px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

@media(max-width:1100px){
  .sarcte-v62-header{height:190px}
  .sarcte-v62-inner{padding:0 38px;gap:20px}
  .sarcte-v62-brand img{width:360px;max-width:45vw;max-height:126px}
  .sarcte-v62-cta{min-height:50px;padding:0 23px;font-size:16px}
}

@media(max-width:820px){
  .sarcte-v62-header{height:164px}
  .sarcte-v62-bg{background-position:60% center}
  .sarcte-v62-inner{padding:0 24px;gap:14px}
  .sarcte-v62-brand img{width:280px;max-width:53vw;max-height:108px}
  .sarcte-v62-cta{min-height:46px;padding:0 17px;font-size:14px}
}

@media(max-width:600px){
  .sarcte-v62-header{height:138px}
  .sarcte-v62-bg{background-position:65% center}
  .sarcte-v62-inner{padding:0 14px;gap:8px}
  .sarcte-v62-brand{flex:1 1 auto}
  .sarcte-v62-brand img{width:205px;max-width:55vw;max-height:88px}
  .sarcte-v62-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

@media(max-width:390px){
  .sarcte-v62-header{height:128px}
  .sarcte-v62-inner{padding:0 10px}
  .sarcte-v62-brand img{width:172px;max-width:54vw;max-height:76px}
  .sarcte-v62-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}



/* ============================================================
   SARCTE HEADER v6.3 — FINAL NO CLIP
   Complete footer-derived brand + taller header.
   ============================================================ */

.sarcte-v63-header{
  position:relative;
  width:100%;
  height:240px;
  overflow:hidden;
  background:#020305;
  isolation:isolate;
}

.sarcte-v63-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,#020305 0%,rgba(2,3,5,.95) 22%,rgba(2,3,5,.34) 47%,rgba(2,3,5,.04) 100%),
    url("assets/sarcte_header_bg_footer_v63_1788597295.jpg") center center / cover no-repeat;
}

.sarcte-v63-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:0 72px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.sarcte-v63-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none !important;
}

.sarcte-v63-brand img{
  display:block;
  width:470px;
  max-width:42vw;
  height:auto;
  max-height:168px;
  object-fit:contain;
  object-position:left center;
}

.sarcte-v63-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:58px;
  padding:0 32px;
  border:1px solid #ef242b;
  border-radius:9px;
  background:linear-gradient(180deg,#e31c23,#c9141a);
  color:#fff !important;
  text-decoration:none !important;
  font-size:18px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(215,25,32,.25);
}

@media(max-width:1100px){
  .sarcte-v63-header{height:205px}
  .sarcte-v63-inner{padding:0 42px;gap:22px}
  .sarcte-v63-brand img{width:390px;max-width:46vw;max-height:142px}
  .sarcte-v63-cta{min-height:50px;padding:0 24px;font-size:16px}
}

@media(max-width:820px){
  .sarcte-v63-header{height:176px}
  .sarcte-v63-bg{background-position:60% center}
  .sarcte-v63-inner{padding:0 26px;gap:14px}
  .sarcte-v63-brand img{width:300px;max-width:54vw;max-height:116px}
  .sarcte-v63-cta{min-height:46px;padding:0 18px;font-size:14px}
}

@media(max-width:600px){
  .sarcte-v63-header{height:148px}
  .sarcte-v63-bg{background-position:65% center}
  .sarcte-v63-inner{padding:0 14px;gap:8px}
  .sarcte-v63-brand{flex:1 1 auto}
  .sarcte-v63-brand img{width:215px;max-width:56vw;max-height:92px}
  .sarcte-v63-cta{min-height:40px;padding:0 10px;font-size:11.5px;border-radius:8px}
}

@media(max-width:390px){
  .sarcte-v63-header{height:136px}
  .sarcte-v63-inner{padding:0 10px}
  .sarcte-v63-brand img{width:178px;max-width:55vw;max-height:80px}
  .sarcte-v63-cta{min-height:38px;padding:0 8px;font-size:10.5px}
}