:root{
  --background:#ffffff; --foreground:#0f1d33; --ink:#0b1b33; --navy:#13315c;
  --muted:#7d8899; --line:#dde3ec; --surface:#eef2f7; --surface-2:#dfe5ee;
  --blue:#2a6fdb; --blue-from:#3b82f0; --blue-to:#1d4fb0; --red:#e63946;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:.875rem;
  --text-watermark:11rem; --container-shell:88rem;
  --e-line:cubic-bezier(.215,.61,.355,1);
  --e-word:cubic-bezier(.165,.84,.44,1);
  --e-a:cubic-bezier(.22,1,.36,1);
  --e-b:cubic-bezier(.16,1,.3,1);
  --e-hv:cubic-bezier(.2,.8,.2,1);
  --display:'Saira',var(--body);
  --body:'Onest',sans-serif;
}
@media (max-width:640px){ :root{ --text-watermark:3rem } }
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:var(--foreground); font-family:var(--body); overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img,svg{ display:block }
input,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
[hidden]{ display:none !important }
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

/* Adaptive rem grid */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

.i{ width:1em; height:1em; display:inline-block; flex:none; vertical-align:middle }
.logo{ display:block; height:2.5rem; width:calc(2.5rem * 808 / 224) }
img.logo{ width:auto; max-width:14rem; object-fit:contain }
.on-dark{ --lg-h:#F3F6FB; --lg-c:#2A6FDB; --lg-dot:var(--ink) }
.shell{ max-width:var(--container-shell); margin-inline:auto; padding-inline:1.25rem }
@media (min-width:640px){ .shell{ padding-inline:2rem } }
.tnum{ font-variant-numeric:tabular-nums }
.sm-only{ display:none } @media (min-width:640px){ .sm-only{ display:inline } }

/* Reveal primitives */
.rv{ opacity:0; transform:translateY(var(--y,0px)) scale(var(--s,1));
  transition:opacity var(--d,.8s) var(--e,var(--e-b)), transform var(--d,.8s) var(--e,var(--e-b));
  transition-delay:var(--dl,0ms) }
.rv.in{ opacity:var(--op,1); transform:none }
.lr{ visibility:hidden } .lr.split{ visibility:visible }
.lr .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em }
.lr .li{ display:block; transform:translateY(100%); opacity:0; transition:transform .9s var(--e-line), opacity .9s var(--e-line) }
.lr.in .li{ transform:none; opacity:1 }
.wr .w{ display:inline-block; opacity:0; transform:translateY(24px); transition:transform .7s var(--e-word), opacity .7s var(--e-word) }
.wr.in .w{ opacity:1; transform:none }

.skip{ position:absolute; left:-9999px; top:auto }
.skip:focus{ position:fixed; left:1rem; top:1rem; z-index:130; border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff }

/* Eyebrow */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(15,29,51,.7) }
.eyebrow .dot{ width:.375rem; height:.375rem; border-radius:9999px; background:var(--red) }
.eyebrow.light{ color:rgba(255,255,255,.7) }

/* Pill button */
.pill{ display:inline-block }
.pill__sc{ display:inline-block; transition:transform .35s var(--e-hv) }
.pill__in{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.875rem; font-weight:500; padding:.875rem 1.75rem; white-space:nowrap }
.pill.arrow .pill__in{ padding:.375rem .375rem .375rem 1.5rem }
.pill--dark .pill__in{ background:var(--ink); color:#fff }
.pill--light .pill__in{ background:#fff; color:var(--foreground) }
.pill--outline .pill__in{ border:1px solid var(--line); background:rgba(255,255,255,.35); color:var(--foreground) }
.pill__badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; background:var(--ink); color:#fff }
.pill--dark .pill__badge{ background:var(--red); color:#fff }
.pill--light .pill__badge{ background:var(--red); color:#fff }
.pill__badge .i{ transition:transform .35s var(--e-hv) }

/* Loader */
.loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; background:var(--ink); color:#fff; border-radius:0 0 2rem 2rem; transition:transform .75s var(--e-a) }
.loader.out{ transform:translateY(-100%) }
.loader__c{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .6s var(--e-a), transform .6s var(--e-a) }
.loader.out .loader__c{ opacity:0; transform:translateY(-12px) }
.loader .logo{ height:3.75rem; width:calc(3.75rem * 808 / 224) }
.loader img.logo{ width:auto }
.loader__tag{ max-width:28ch; font-size:.875rem; color:rgba(255,255,255,.55) }
.loader__p{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
.loader__track{ position:relative; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px) }
.loader__fill{ position:relative; height:100%; width:0; background:var(--red); transition:width .1s ease-out }
.loader__fill::after{ content:""; position:absolute; right:-5px; top:-4.5px; width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(230,57,70,.25), 0 0 14px 2px rgba(230,57,70,.7) }
.loader__row{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
.loader__row .tnum{ color:rgba(255,255,255,.8) }

/* Header */
.hdr{ position:absolute; inset-inline:0; top:0; z-index:50 }
.hdr__row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.25rem }
@media (min-width:640px){ .hdr__row{ padding-block:1.5rem } }
.brand__in{ display:block; transition:transform .35s var(--e-hv) }
.hdr__nav{ display:none }
@media (min-width:1024px){ .hdr__nav{ display:flex } }
.hdr__nav ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 }
.hdr__nav a > span{ display:inline-flex; align-items:center; gap:.25rem; opacity:.8; transition:transform .35s var(--e-hv), opacity .35s var(--e-hv) }
.caret{ font-size:.75rem; opacity:.6 }
.hdr__right{ display:flex; align-items:center; gap:.75rem }
.glass{ border:1px solid rgba(221,227,236,.9); background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:.875rem }
.clock{ display:none; align-items:center; gap:.75rem; padding:.5rem .75rem; font-size:.75rem; color:rgba(15,29,51,.7) }
@media (min-width:768px){ .clock{ display:flex } }
.clock__lbl{ color:rgba(15,29,51,.45) }
.clock__t{ min-width:2.75rem; font-weight:500; color:var(--foreground) }
.clock__sep{ color:var(--red) }
.clock__d{ font-weight:500 }
.menu-btn{ transition:background .2s }
.menu-btn:hover{ background:rgba(255,255,255,.85) }
.menu-btn > span{ display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s var(--e-hv) }
.menu-btn .i{ font-size:.875rem }

/* Hero */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; background:#dfe6f0 }
.lq{ position:absolute; inset:0; z-index:0 }
.lq canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.hero__vig{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(255,255,255,.45)), linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,0) 60%) }
.hero__wm{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1; display:flex; justify-content:center; white-space:nowrap; user-select:none; -webkit-user-select:none; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:.02em; font-size:var(--text-watermark); color:rgba(255,255,255,.55) }
.hero__grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding-top:7rem; padding-bottom:5rem; pointer-events:none }
.hero__grid > *{ pointer-events:auto }
@media (min-width:1024px){ .hero__grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding-top:9rem; padding-bottom:7rem; align-items:end } }
.hero__left{ display:flex; flex-direction:column; gap:1.75rem }
@media (min-width:1024px){ .hero__left{ grid-column:span 7 } }
.hero__h1{ max-width:19ch; font-family:var(--display); font-size:1.85rem; font-weight:700; line-height:1.02; letter-spacing:-.01em; color:var(--navy) }
@media (min-width:640px){ .hero__h1{ font-size:3.25rem } }
@media (min-width:768px){ .hero__h1{ font-size:4.25rem } }
.hero__h1 .acc{ color:var(--blue) }
.spec{ display:flex; align-items:center; gap:.75rem; font-size:.875rem; font-weight:500; color:rgba(15,29,51,.7) }
.ring{ width:1.125rem; height:1.125rem; flex:none; border-radius:50%; background:var(--red); position:relative }
.ring::after{ content:""; position:absolute; inset:32%; border-radius:50%; background:#fff }
.ctas{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero__right{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem }
@media (min-width:1024px){ .hero__right{ grid-column:span 5; align-items:flex-end } }

.hcard{ width:100%; max-width:24rem; border-radius:1.25rem; background:rgba(255,255,255,.75); padding:.5rem; box-shadow:0 1px 2px 0 rgba(13,33,66,.06), 0 0 0 1px rgba(221,227,236,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
@media (min-width:1024px){ .hcard{ width:21rem } }
.hcard__row{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem }
.hcard__tile{ aspect-ratio:1; width:6rem; flex:none; display:grid; place-items:center; border-radius:.875rem; background:var(--ink) }
.hcard__tile svg{ width:3.75rem; height:calc(3.75rem * 302 / 468) }
.hcard__panel{ flex:1; border-radius:.875rem; background:rgba(238,242,247,.8); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between; gap:.5rem; min-width:0 }
.hcard__slot{ position:relative; min-height:3.4rem; overflow:hidden }
.hc-item{ position:absolute; inset:0; transition:transform .45s var(--e-a), opacity .45s var(--e-a) }
.hc-cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--red) }
.hc-ttl{ max-width:11rem; font-size:.875rem; font-weight:500; line-height:1.35 }
.hcard__bot{ display:flex; align-items:center; justify-content:space-between }
.dots{ display:flex; gap:.25rem }
.dots span{ height:.25rem; width:.375rem; border-radius:9999px; background:rgba(15,29,51,.2); transition:all .3s }
.dots span.on{ width:1rem; background:var(--navy) }
.hcard__nav{ display:flex; gap:.25rem }
.hcard__nav button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px; background:#fff; color:rgba(15,29,51,.7); box-shadow:0 0 0 1px var(--line); font-size:.875rem; transition:color .2s }
.hcard__nav button:hover{ color:var(--foreground) }
.hcard__nav .prev .i{ transform:rotate(180deg) }

.partners{ width:100%; max-width:24rem }
@media (min-width:1024px){ .partners{ width:21rem } }
.partners__lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(15,29,51,.5); text-align:left }
@media (min-width:1024px){ .partners__lbl{ text-align:right } }
.partners ul{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:1rem; row-gap:.75rem }
.partners li > span{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(15,29,51,.75); opacity:.75; transition:transform .35s var(--e-hv), opacity .35s var(--e-hv) }
.partners li .i{ font-size:.875rem; color:var(--blue) }

.statusbar{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(15,29,51,.12); padding-block:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(15,29,51,.6) }
.statusbar .mid{ display:none } @media (min-width:640px){ .statusbar .mid{ display:inline } }
.statusbar .scroll{ display:inline-flex; gap:.5rem }

.laser{ position:absolute; z-index:30; left:0; top:0; width:1.5rem; height:1.5rem; margin:-.75rem 0 0 -.75rem; border-radius:50%; background:var(--red); pointer-events:none; opacity:0; transition:opacity .25s; box-shadow:0 0 0 .35rem rgba(230,57,70,.18) }
.laser::after{ content:""; position:absolute; inset:33%; border-radius:50%; background:#fff }
.laser.on{ opacity:1 }
@media not ((hover:hover) and (pointer:fine)){ .laser{ display:none } }

/* About */
.about .shell{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding-block:5rem }
@media (min-width:1024px){ .about .shell{ grid-template-columns:1fr 1fr; padding-block:7rem } }
.globe{ position:relative; min-height:14rem; display:flex; flex-direction:column; justify-content:space-between }
@media (min-width:1024px){ .globe{ min-height:20rem } }
.globe__bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); width:12rem; height:auto; aspect-ratio:468/302; opacity:.09 }
@media (min-width:640px){ .globe__bg{ width:16rem } }
@media (min-width:1024px){ .globe__bg{ left:-1.5rem; width:24rem } }
.globe .eyebrow{ position:relative }
.globe__note{ position:relative; display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:rgba(15,29,51,.7) }
.globe__note .i{ font-size:1.5rem; color:var(--blue) }
.globe__note span{ max-width:16rem }
.stmt{ display:flex; flex-direction:column; gap:2.5rem }
.stmt h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
@media (min-width:640px){ .stmt h2{ font-size:1.875rem } }
.stmt h2 .mut{ color:var(--muted) }
.stmt__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem }
.stmt__lbl{ font-size:.875rem; color:rgba(15,29,51,.45); margin-bottom:.75rem }
.socials{ display:flex; gap:.5rem }
.socials a{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.95rem; background:var(--surface); color:rgba(15,29,51,.75) }
.socials a.x{ background:var(--blue); color:#fff }
.socials a .i{ transition:transform .35s var(--e-hv) }

/* Create band */
.band ul{ display:flex; flex-direction:column; gap:.75rem; padding-block:2.5rem }
@media (min-width:640px){ .band ul{ flex-direction:row; gap:1rem } }
.band li{ flex:1 }
.tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-family:var(--display); font-size:1.875rem; font-weight:600; transition:transform .35s var(--e-hv) }
@media (min-width:640px){ .tile{ height:10rem; font-size:2.5rem } }
.tile--light{ background:var(--surface); color:var(--navy) }
.tile--accent{ background:linear-gradient(to bottom right,var(--blue-from),var(--blue-to)); color:#fff }
.tile--dark{ background:var(--ink); color:#fff; position:relative }
.tile--dark .i{ font-size:2.25rem } @media (min-width:640px){ .tile--dark .i{ font-size:3rem } }
.tile--ghost{ background:rgba(238,242,247,.6); color:rgba(15,29,51,.35) }
.tile--dark .cutline{ position:absolute; inset-inline:2rem; top:50%; height:0; border-top:2px dashed rgba(230,57,70,.5) }
.tile--dark .i{ position:relative; color:#fff }

/* Section heads */
.h2{ font-family:var(--display); font-size:2.25rem; font-weight:700; letter-spacing:-.01em; line-height:1.05; color:var(--navy) }
@media (min-width:640px){ .h2{ font-size:3.25rem } }

/* Portfolio */
.works .shell{ padding-top:2.5rem; padding-bottom:5rem }
@media (min-width:1024px){ .works .shell{ padding-bottom:7rem } }
.works__head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem; text-align:center }
.eyebrow.bordered{ border:1px solid var(--line); border-radius:9999px; padding:.375rem 1rem }
.works__head .h2{ width:fit-content; margin-inline:auto }
.works__sub{ max-width:36rem; font-size:1rem; color:rgba(15,29,51,.6) }
.cards{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:768px){ .cards{ grid-template-columns:1fr 1fr } }
.pcard{ display:block }
.pcard article{ position:relative; min-height:24rem; overflow:hidden; border-radius:2rem; background:var(--ink); padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05); transition:transform .45s var(--e-hv) }
@media (min-width:640px){ .pcard article{ min-height:28rem; padding:2rem } }
.pcard article::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(91,155,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(91,155,255,.07) 1px, transparent 1px); background-size:1.5rem 1.5rem; mask-image:linear-gradient(to bottom, #000 30%, transparent 75%); -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 75%) }
.pcard__meta{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) }
.pcard__badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15); transition:transform .4s var(--e-hv), background .4s }
.pcard__art{ position:absolute; right:1.5rem; top:4.5rem; width:13rem; height:12rem; pointer-events:none }
@media (min-width:640px){ .pcard__art{ right:2.5rem; top:4rem; width:15rem; height:14rem } }
.pcard__art svg{ width:100%; height:100%; overflow:visible }
.pcard__art .piece{ fill:rgba(42,111,219,.22); stroke:rgba(255,255,255,.85); stroke-width:1.5; vector-effect:non-scaling-stroke }
.pcard__art .grain{ stroke:rgba(255,255,255,.4); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke }
.pcard__art .cut{ fill:none; stroke:var(--red); stroke-width:1.6; stroke-dasharray:7 6; vector-effect:non-scaling-stroke; animation:march 1.6s linear infinite; animation-play-state:paused }
.pcard__art .lbl{ font:600 13px var(--body); fill:rgba(255,255,255,.55); letter-spacing:.06em }
@keyframes march{ to{ stroke-dashoffset:-26 } }
.pcard__body{ position:absolute; inset-inline:1.5rem; bottom:1.5rem }
@media (min-width:640px){ .pcard__body{ inset-inline:2rem; bottom:2rem } }
.pcard h3{ font-family:var(--display); font-size:1.625rem; font-weight:600; letter-spacing:-.005em }
@media (min-width:640px){ .pcard h3{ font-size:2rem } }
.pcard p{ margin-top:.5rem; max-width:28rem; font-size:.875rem; color:rgba(255,255,255,.6) }
.tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.875rem }

/* Services */
.services .shell{ padding-block:5rem }
@media (min-width:1024px){ .services .shell{ padding-block:7rem } }
.services .h2{ margin:1.25rem 0 3rem; max-width:16ch }
@media (min-width:640px){ .services .h2{ margin-bottom:3.5rem } }
.srow-li{ border-top:1px solid var(--line) } .srow-li:first-child{ border-top:0 }
.srow{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem; background:rgba(238,242,247,0); transition:background .5s var(--e-a), padding .5s var(--e-a) }
@media (min-width:640px){ .srow{ gap:1.5rem; padding-block:2rem } }
.srow__i{ width:1.75rem; flex:none; font-size:.875rem; font-weight:500; color:var(--red) }
@media (min-width:640px){ .srow__i{ width:2.5rem } }
.srow h3{ flex:1; font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:-.005em; color:var(--navy) }
@media (min-width:640px){ .srow h3{ font-size:1.875rem } }
@media (min-width:768px){ .srow h3{ font-size:2.25rem } }
.srow h3 small{ display:inline-block; margin-left:.5rem; vertical-align:middle; font-family:var(--body); font-size:.7rem; font-weight:600; letter-spacing:.06em; padding:.25rem .5rem; border-radius:.4rem; background:rgba(42,111,219,.1); color:var(--blue) }
.srow p{ display:none; max-width:21rem; font-size:.875rem; color:rgba(15,29,51,.6) }
@media (min-width:1024px){ .srow p{ display:block } }
.srow__b{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:#fff; transition:transform .35s var(--e-hv), background .35s }
@media (min-width:640px){ .srow__b{ width:3rem; height:3rem } }

/* Stats */
.stats .shell{ padding-bottom:5rem }
@media (min-width:1024px){ .stats .shell{ padding-bottom:7rem } }
.stats__panel{ position:relative; overflow:hidden; border-radius:2rem; background:var(--ink); padding:3rem 1.5rem; color:#fff }
@media (min-width:640px){ .stats__panel{ padding:4rem 2rem } }
@media (min-width:768px){ .stats__panel{ padding-inline:4rem } }
.stats__panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(91,155,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(91,155,255,.06) 1px, transparent 1px); background-size:2rem 2rem }
.stats__panel > *{ position:relative }
.stats__h{ margin-top:1rem; max-width:22ch; font-family:var(--display); font-size:1.875rem; font-weight:600; letter-spacing:-.005em; line-height:1.15 }
@media (min-width:768px){ .stats__h{ font-size:2.5rem } }
.stats__grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
@media (min-width:1024px){ .stats__grid{ grid-template-columns:repeat(4,1fr) } }
.stats__grid li{ border-left:1px dashed rgba(230,57,70,.55); padding-left:1.25rem }
.stat__n{ font-family:var(--display); font-size:3rem; font-weight:700; letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums }
@media (min-width:640px){ .stat__n{ font-size:3.75rem } }
@media (min-width:768px){ .stat__n{ font-size:4.5rem } }
.stat__n .suf{ color:#5b9bff }
.stat__l{ margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.6) }

/* Footer */
.foot{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:var(--ink); color:#fff }
.foot .shell{ position:relative; z-index:10; padding-top:5rem; padding-bottom:2.5rem }
@media (min-width:1024px){ .foot .shell{ padding-top:6rem } }
.foot__cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
@media (min-width:1024px){ .foot__cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } }
.foot__cta h2{ max-width:17ch; font-family:var(--display); font-size:2.25rem; font-weight:700; letter-spacing:-.01em; line-height:1.02 }
@media (min-width:640px){ .foot__cta h2{ font-size:3rem } }
@media (min-width:768px){ .foot__cta h2{ font-size:3.75rem } }
.foot__cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
@media (min-width:768px){ .foot__cols{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .foot__cols{ grid-template-columns:repeat(4,1fr) } }
.foot__tag{ margin-top:1.25rem; max-width:20rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.foot__t{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1.25rem }
.foot__col ul{ display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.al{ display:inline-flex }
.al > span{ display:inline-block; opacity:.65; transition:transform .35s var(--e-hv), opacity .35s var(--e-hv) }
.foot__legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) }
@media (min-width:640px){ .foot__legal{ flex-direction:row } }
.foot__legal div{ display:flex; gap:1.5rem }
.foot__legal .al > span{ opacity:.7 }
.foot__wm{ position:absolute; inset-inline:0; bottom:-1.25rem; z-index:0; display:flex; justify-content:center; white-space:nowrap; pointer-events:none; user-select:none; -webkit-user-select:none; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:.02em; font-size:var(--text-watermark); color:rgba(255,255,255,.05) }

/* Hovers (pointer devices only) */
@media (hover:hover) and (pointer:fine){
  .pill:hover .pill__sc{ transform:scale(1.04) }
  .pill:hover .pill__badge .i.r{ transform:translate(3px,0) }
  .pill:hover .pill__badge .i.ur{ transform:translate(2px,-2px) }
  .brand:hover .brand__in{ transform:scale(1.04) }
  .hdr__nav a:hover > span{ transform:translateY(-2px); opacity:1 }
  .menu-btn:hover > span{ transform:scale(1.05) }
  .partners li:hover > span{ transform:translateY(-2px); opacity:1 }
  .socials a:hover .i{ transform:scale(1.18) }
  .tile:hover{ transform:scale(1.03) }
  .pcard:hover article{ transform:translateY(-8px) scale(1.012) }
  .pcard:hover .pcard__badge{ transform:rotate(45deg) scale(1.08); background:var(--red) }
  .pcard:hover .cut{ animation-play-state:running }
  .srow:hover{ background:rgba(238,242,247,1); padding-left:2rem; padding-right:1.25rem }
  .srow:hover .srow__b{ transform:translateX(5px); background:var(--red) }
  .al:hover > span{ transform:translateX(4px); opacity:1 }
  .foot__legal .al:hover > span{ transform:translateX(3px); opacity:1 }
}

/* Nav overlay */
.navov{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:var(--ink); color:#fff; opacity:0; transition:opacity .45s var(--e-a) }
.navov.open{ opacity:1 }
.navov__top{ display:flex; align-items:center; justify-content:space-between; padding-block:1.25rem; width:100% }
@media (min-width:640px){ .navov__top{ padding-block:1.5rem } }
.navov__close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .2s, color .2s }
.navov__close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navov__close .i{ font-size:.875rem }
.navov nav{ flex:1; display:flex; flex-direction:column; justify-content:center; width:100% }
.navov ul{ display:flex; flex-direction:column; gap:.25rem }
.nitem{ display:flex; align-items:baseline; gap:1rem; width:100%; padding-block:.5rem; text-align:left; font-family:var(--display); font-size:2.25rem; font-weight:600; letter-spacing:-.01em; opacity:0; transform:translateY(1rem); transition:all .5s ease-out }
@media (min-width:640px){ .nitem{ font-size:3.75rem } }
.navov.open .nitem{ opacity:1; transform:translateY(0) }
.nitem small{ font-family:var(--body); font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.nitem span{ color:rgba(255,255,255,.7); transition:color .3s }
.nitem:hover small{ color:var(--red) } .nitem:hover span{ color:#fff }
.navov__bot{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45); width:100% }
@media (min-width:640px){ .navov__bot{ flex-direction:row; justify-content:space-between } }
.navov__bot button{ text-align:left; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.7) }
.navov__bot button:hover{ text-decoration:underline; color:#fff }

/* Modal */
.modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(13,33,66,.35); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; transition:opacity .45s var(--e-a) }
@media (min-width:640px){ .modal{ align-items:center } }
.modal.open{ opacity:1 }
.modal__p{ position:relative; width:100%; max-width:32rem; max-height:calc(100dvh - 2rem); overflow:auto; border-radius:2rem; background:#fff; padding:1.5rem; box-shadow:0 25px 50px -12px rgba(13,33,66,.3), 0 0 0 1px var(--line); transform:translateY(28px); opacity:0; transition:transform .5s var(--e-a), opacity .5s var(--e-a) }
@media (min-width:640px){ .modal__p{ padding:2rem } }
.modal.open .modal__p{ transform:translateY(0); opacity:1 }
.modal.closing .modal__p{ transform:translateY(18px); opacity:0 }
.modal__x{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface); color:rgba(15,29,51,.6); transition:background .2s, color .2s }
.modal__x:hover{ background:var(--surface-2); color:var(--foreground) }
.modal__head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem }
.modal h2{ font-family:var(--display); font-size:1.5rem; font-weight:700; letter-spacing:-.005em; color:var(--navy) }
@media (min-width:640px){ .modal__head h2{ font-size:1.875rem } }
.modal form{ display:flex; flex-direction:column; gap:1rem }
.frow{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .frow{ grid-template-columns:1fr 1fr } }
.fld{ display:flex; flex-direction:column; gap:.5rem }
.fld > span{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(15,29,51,.5) }
.fld input,.fld textarea{ width:100%; border:1px solid var(--line); background:rgba(238,242,247,.6); border-radius:.875rem; padding:.75rem 1rem; font-size:.875rem; outline:none; transition:border-color .2s, background .2s }
.fld textarea{ resize:none }
.fld input:focus,.fld textarea:focus{ border-color:var(--blue); background:#fff }
.modal__foot{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.modal__note{ font-size:.75rem; color:rgba(15,29,51,.45) }
.modal__ok{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:2rem }
.modal__okb{ width:4rem; height:4rem; display:grid; place-items:center; border-radius:9999px; background:var(--ink) }
.modal__okb svg{ width:2.5rem; height:calc(2.5rem * 302 / 468) }
.modal__ok p{ max-width:34ch; font-size:.875rem; color:rgba(15,29,51,.6) }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ---- Sem animações de entrada (opção do backoffice) ---- */
.no-reveal .rv{ opacity:var(--op,1); transform:none; transition:none }
.no-reveal .lr{ visibility:visible }

/* ---- Cabeçalho em páginas internas ---- */
.is-page .hdr{ position:relative; opacity:1; transform:none; border-bottom:1px solid var(--line) }
.is-page .hdr.rv{ opacity:1; transform:none }

/* ---- Páginas de conteúdo ---- */
.doc__shell{ max-width:52rem; padding-top:3.5rem; padding-bottom:6rem }
.doc__back{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; color:rgba(15,29,51,.6) }
.doc__back .i{ transform:rotate(180deg) }
.doc__back:hover{ color:var(--blue) }
.doc__title{ margin-top:1.5rem; font-family:var(--display); font-size:2.5rem; font-weight:700; line-height:1.05; color:var(--navy) }
@media (min-width:640px){ .doc__title{ font-size:3.5rem } }
.doc__meta{ margin-top:.75rem; font-size:.8rem; color:var(--muted) }
.doc__body{ margin-top:2.5rem; font-size:1.0625rem; line-height:1.7; color:rgba(15,29,51,.85) }
.doc__body > * + *{ margin-top:1rem }
.doc__body h2{ margin-top:2.5rem; font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--navy) }
.doc__body h3{ margin-top:2rem; font-size:1.2rem; font-weight:600; color:var(--navy) }
.doc__body ul,.doc__body ol{ padding-left:1.25rem } .doc__body ul{ list-style:disc } .doc__body ol{ list-style:decimal }
.doc__body li + li{ margin-top:.35rem }
.doc__body a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px }
.doc__body img{ max-width:100%; height:auto; border-radius:1rem }
.doc__body blockquote{ border-left:3px solid var(--red); padding-left:1rem; color:rgba(15,29,51,.7) }
.doc__body table{ width:100%; border-collapse:collapse; font-size:.95rem } .doc__body td,.doc__body th{ border-bottom:1px solid var(--line); padding:.5rem; text-align:left }

/* ---- Rodapé: contactos ---- */
.foot__contacts{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.6rem; font-size:.875rem; color:rgba(255,255,255,.75) }
.foot__contacts li{ display:flex; gap:.6rem; align-items:flex-start }
.foot__contacts .i{ margin-top:.15rem; color:#5b9bff }
.foot__contacts a:hover{ color:#fff; text-decoration:underline }

/* ---- Cartões de produção com imagem ---- */
.pcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .45s, transform .8s var(--e-a) }
.pcard article.has-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--ink) 25%, rgba(11,27,51,.2) 70%, rgba(11,27,51,.5)); pointer-events:none }
.pcard article.has-img > *:not(.pcard__img){ position:relative; z-index:2 }
.pcard article.has-img .pcard__body{ position:absolute; z-index:2 }
@media (hover:hover) and (pointer:fine){ .pcard:hover .pcard__img{ opacity:.7; transform:scale(1.04) } }

/* ---- Formulário ---- */
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden }
.frow--one{ grid-template-columns:1fr !important }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; line-height:1.45; color:rgba(15,29,51,.65); cursor:pointer }
.consent input{ margin-top:.15rem; width:1rem; height:1rem; accent-color:var(--blue); flex:none }
.consent a{ color:var(--blue); text-decoration:underline }
.form-err{ border-radius:.75rem; background:rgba(230,57,70,.1); color:#b4232f; padding:.65rem .9rem; font-size:.8rem }
.fld input:invalid:not(:placeholder-shown){ border-color:rgba(230,57,70,.5) }
.srow{ cursor:default }

/* ---- Barra de aviso: modo manutenção (só visível para quem tem sessão iniciada) ---- */
.maint-bar{ position:fixed; z-index:125; left:50%; bottom:16px; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; border-radius:16px; background:var(--ink); color:#fff;
  font-size:13px; line-height:1.35; box-shadow:0 12px 30px -8px rgba(11,27,51,.5), 0 0 0 1px rgba(255,255,255,.08) }
.maint-bar b{ font-weight:600 }
.maint-bar a{ padding:5px 10px; border-radius:9px; background:rgba(255,255,255,.12); font-weight:500; white-space:nowrap }
.maint-bar a:hover{ background:var(--red) }
.maint-bar__dot{ width:10px; height:10px; flex:none; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(230,57,70,.25) }

/* ---- Menu fixo ao fazer scroll ---- */
@keyframes hdr-in{ from{ transform:translateY(-100%) } to{ transform:translateY(0) } }
.hdr.is-stuck{ position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(15,29,51,.08), 0 10px 30px -18px rgba(11,27,51,.35);
  animation:hdr-in .5s var(--e-a); transition:transform .4s var(--e-a) }
.is-page .hdr.is-stuck{ border-bottom:0 }
.hdr.is-stuck .hdr__row{ padding-block:.65rem }
.hdr.is-stuck .logo{ height:2.1rem; width:calc(2.1rem * 808 / 224) }
.hdr.is-stuck img.logo{ width:auto }
.hdr.is-stuck .glass{ background:rgba(238,242,247,.7) }
.hdr.is-stuck.is-hidden{ transform:translateY(-110%) }

/* ---- Botão voltar ao topo ---- */
.totop{ position:fixed; z-index:61; right:1rem; bottom:1rem; width:3.25rem; height:3.25rem; display:grid; place-items:center;
  border-radius:50%; background:var(--ink); color:#fff; cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(11,27,51,.55), 0 0 0 1px rgba(255,255,255,.06);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--e-a), transform .35s var(--e-a), visibility .3s, background .25s }
@media (min-width:640px){ .totop{ right:1.5rem; bottom:1.5rem } }
.totop.on{ opacity:1; visibility:visible; transform:none }
.totop__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.totop__ring circle{ fill:none; stroke-width:2.5 }
.totop__track{ stroke:rgba(255,255,255,.14) }
.totop__prog{ stroke:var(--red); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .12s linear }
.totop__ic{ position:relative; font-size:1.15rem; transform:rotate(-90deg); transition:transform .3s var(--e-hv) }
.totop:focus-visible{ outline:2px solid var(--blue); outline-offset:3px }
@media (hover:hover) and (pointer:fine){
  .totop:hover{ background:var(--navy) }
  .totop:hover .totop__ic{ transform:rotate(-90deg) translateX(3px) }
}
.has-maint-bar .totop{ bottom:5.25rem }

/* ---- Rodapé: preferências de cookies e Livro de Reclamações ---- */
.foot__legal div{ flex-wrap:wrap; align-items:center; justify-content:center }
.foot__legal button.al{ color:inherit; font:inherit; background:none; border:0; padding:0; cursor:pointer }
.foot__lr{ display:inline-flex; border-radius:.4rem; opacity:.85; transition:opacity .2s }
.foot__lr:hover{ opacity:1 }
.foot__lr img{ height:2.25rem; width:auto; display:block }
.doc__body .cky-audit-table-element{ overflow-x:auto }
.foot .shell{ padding-bottom:5.5rem }
@media (min-width:640px){ .foot .shell{ padding-bottom:6rem } }

/* ---- Faixa dos fundos europeus ---- */
.eu{ position:relative; z-index:10; background:#fff; color:var(--foreground) }
.eu__in{ max-width:var(--container-shell); margin-inline:auto; padding:.9rem 1.25rem; display:flex; justify-content:center; align-items:center }
.eu img{ display:block; width:auto; height:auto; max-width:100% }
.eu__link{ display:inline-flex; border-radius:.5rem; transition:opacity .2s, transform .2s }
.eu__link:hover{ opacity:.85 }
.eu__link:focus-visible{ outline:2px solid var(--blue); outline-offset:4px }
.eu--dark{ background:transparent; border-top:1px solid rgba(255,255,255,.1) }
.eu--fixed{ position:fixed; left:0; right:0; bottom:0; z-index:58; background:#fff; box-shadow:0 -8px 24px -12px rgba(11,27,51,.35), 0 -1px 0 rgba(15,29,51,.08) }
.eu--fixed.eu--dark{ background:var(--ink); border-top:0 }
.eu--fixed .eu__in{ padding:.6rem 1rem }
.has-eu-fixed{ padding-bottom:var(--eu-h, 84px) }
.has-eu-fixed .totop{ bottom:calc(var(--eu-h, 84px) + 1rem) }
.has-eu-fixed .maint-bar{ bottom:calc(var(--eu-h, 84px) + 1rem) }
.has-eu-fixed.has-maint-bar .totop{ bottom:calc(var(--eu-h, 84px) + 5.25rem) }
.foot__main{ position:relative; overflow:hidden }