:root{
  --ink:#081827;
  --ink-deep:#06131e;
  --blue:#1c9cf0;
  --red:#f33d43;
  --muted:#617083;
  --line:#d8dee5;
  --white:#fff;
  --max:1320px;
}

*{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;
  color:var(--ink);
  background:#fff;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 120px));margin:0 auto}

/* =========================
   HEADER
   ========================= */
.site-header{
  position:absolute;
  z-index:100;
  inset:0 0 auto;
  height:72px;
  padding:0 58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  color:#fff;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.site-header .brand{
  display:flex;
  align-items:center;
  flex:0 0 145px;
  width:145px;
  line-height:0;
}

.site-header .cv-header-logo{
  display:block;
  width:145px;
  height:auto;
  max-width:145px;
  max-height:46px;
  object-fit:contain;
  object-position:left center;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:31px;
  margin-left:auto;
  height:72px;
  font-size:12px;
}

.main-nav>a,
.nav-group>button{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:72px;
  color:#fff;
  opacity:.96;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .22s ease,color .22s ease;
}

.main-nav>a:after,
.nav-group>button:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}

.main-nav>a:hover,
.main-nav>a:focus-visible,
.nav-group>button:hover,
.nav-group:focus-within>button{
  opacity:1;
  outline:none;
}

.main-nav>a:hover:after,
.main-nav>a:focus-visible:after,
.nav-group:hover>button:after,
.nav-group:focus-within>button:after{
  transform:scaleX(1);
}

.nav-group{
  position:relative;
  height:72px;
  display:flex;
  align-items:center;
}

/* Keeps the pointer connected to the dropdown while moving downward. */
.nav-group:before{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:100%;
  height:13px;
  background:transparent;
  pointer-events:auto;
}

.nav-group>button span{
  display:inline-block;
  margin-left:5px;
  opacity:.62;
  font-size:9px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .22s ease,opacity .22s ease;
}

.nav-group:hover>button span,
.nav-group:focus-within>button span{
  opacity:1;
  transform:rotate(180deg) translateY(1px);
}

.nav-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  min-width:215px;
  padding:7px;
  display:block;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:rgba(8,24,39,.985);
  border:1px solid rgba(255,255,255,.14);
  border-top:2px solid var(--red);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  border-radius:0 0 4px 4px;
  transform:translate(-50%,6px);
  transform-origin:top center;
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .24s;
  z-index:120;
}

/* Desktop hover state. */
.nav-group:hover > .nav-menu,
.nav-group:focus-within > .nav-menu,
.nav-group.is-open > .nav-menu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
  transition-delay:0s;
}

.nav-group:not(:hover):not(:focus-within):not(.is-open) > .nav-menu{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

.nav-menu a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:40px;
  padding:9px 11px;
  color:rgba(255,255,255,.82);
  font-size:12px;
  border-radius:2px;
  transition:
    color .18s ease,
    background .18s ease,
    padding-left .22s ease;
}

.nav-menu a:after{
  content:"↗";
  margin-left:auto;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease,transform .18s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.075);
  padding-left:15px;
  outline:none;
}

.nav-menu a:hover:after,
.nav-menu a:focus-visible:after{
  opacity:.7;
  transform:translateX(0);
}

.header-cta{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.65);
  border-radius:3px;
  padding:9px 17px;
  color:#fff;
  font-size:12px;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.header-cta:hover,
.header-cta:focus-visible{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  transform:translateY(-1px);
  outline:none;
}

.header-cta span{margin-left:8px}

.mobile-toggle{
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:22px;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  min-height:620px;
  height:47vw;
  max-height:720px;
  overflow:hidden;
  background:#091725;
  color:#fff;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero:after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:min(100%,1440px);
  height:100%;
  margin:0 auto;
  padding:72px 60px 30px;
}
.hero-copy{
  width:48%;
  min-width:560px;
  color:#fff;
  padding-top:53px;
}
.hero .eyebrow{
  position:relative;
  padding-left:29px;
  color:#fff;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:650;
}
.hero .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}
.hero h1{
  margin:13px 0 9px;
  max-width:570px;
  font-size:clamp(46px,4.1vw,67px);
  line-height:1.03;
  letter-spacing:-.045em;
  font-weight:650;
}
.hero p{
  max-width:550px;
  margin:0 0 18px;
  color:rgba(255,255,255,.88);
  font-size:15px;
  line-height:1.35;
}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:34px;
  padding:9px 17px;
  border:1px solid var(--ink);
  border-radius:3px;
  font-size:11px;
  font-weight:600;
}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:rgba(255,255,255,.15);color:var(--ink)}
.hero-capabilities{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:18px;
  max-width:555px;
  border-top:1px solid rgba(255,255,255,.35);
}
.hero-capabilities span{
  padding:9px 12px 0 13px;
  border-right:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.82);
  font-size:7px;
  line-height:1.65;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.hero-capabilities span:first-child{padding-left:0}
.hero-capabilities span:last-child{border-right:0}


.hero-side{
  position:absolute;
  z-index:3;
  top:72px;
  right:60px;
  bottom:30px;
  width:34%;
  color:#fff;
  pointer-events:none;
}
.hero-side-copy{
  position:absolute;
  top:8px;
  right:0;
  text-align:right;
}
.hero-side-copy span{
  display:block;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-side-copy b{
  display:block;
  margin-top:5px;
  font-size:17px;
  line-height:1.1;
  font-weight:650;
}
.hero-impact{
  position:absolute;
  right:0;
  bottom:0;
  text-align:right;
}
.hero-impact strong{
  display:block;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.22em;
}
.hero-impact p{
  margin:7px 0 0;
  color:rgba(255,255,255,.86);
  font-size:11px;
  line-height:1.4;
}
/* =========================
   PRODUCTS — IMPORTANT
   ========================= */
.products-section{
  display:block;
  background:#fff;
  padding:42px 0 47px;
}
.products-layout{
  display:grid;
  grid-template-columns:255px minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.products-intro{padding-top:5px}
.products-section .eyebrow{
  position:relative;
  padding-left:29px;
  color:var(--red);
  font-size:10px;
  line-height:1.8;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:650;
}
.products-section .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}
.products-section h2{
  margin:12px 0 30px;
  font-size:31px;
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:620;
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.product-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  min-width:0;
}
.product-card{
  position:relative;
  display:block;
  height:246px;
  min-width:0;
  overflow:hidden;
  background:#0d2030;
  color:#fff;
  border-radius:2px;
  transform:translateY(0);
  box-shadow:0 0 0 rgba(6,19,30,0);
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    box-shadow .38s cubic-bezier(.22,.61,.36,1);
}
.product-card>img:first-child{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  z-index:0;
  transform:scale(1);
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.product-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,rgba(4,13,21,.95) 0%,rgba(4,13,21,.34) 64%,rgba(4,13,21,.04) 100%);
}
.product-card-content{
  position:absolute;
  z-index:2;
  left:17px;
  right:17px;
  bottom:15px;
}
.product-card .product-logo{
  position:relative;
  display:block;
  width:auto;
  max-width:92px;
  height:25px;
  margin:0 0 2px;
  object-fit:contain;
  object-position:left center;
}
.product-card h3{
  margin:0 0 2px;
  font-size:19px;
  line-height:1.1;
  font-weight:560;
}
.product-card p{
  margin:0 0 11px;
  font-size:11px;
  line-height:1.25;
}
.product-card span{
  position:relative;
  display:block;
  width:100%;
  max-width:145px;
  padding-top:8px;
  border-top:2px solid transparent;
  font-size:10px;
  line-height:1.25;
}
.product-card span:before{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:100%;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.product-card b{
  position:absolute;
  right:0;
  bottom:0;
  font-size:20px;
  font-weight:400;
}
.product-card:before{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  left:-70%;
  width:42%;
  height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.05) 62%,transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:left .7s cubic-bezier(.22,.61,.36,1);
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 28px rgba(6,19,30,.18);
  border-bottom:2px solid var(--red);
}
.product-card:hover:before{
  left:125%;
}
.product-card:hover>img:first-child{
  transform:scale(1.06);
}
.product-card:hover span:before{
  transform:scaleX(1);
}
.product-card:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* =========================
   INDUSTRIES
   ========================= */
.industries-section{
  background:var(--ink);
  color:#fff;
  padding:17px 0 18px;
}
.industries-layout{
  display:grid;
  grid-template-columns:275px minmax(0,1fr);
  gap:50px;
  align-items:center;
}
.industries-intro .eyebrow{
  position:relative;
  padding-left:29px;
  color:#fff;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.industries-intro .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}
.industries-intro h2{
  margin:10px 0;
  font-size:29px;
  line-height:1.04;
  letter-spacing:-.035em;
}
.industries-intro p{
  max-width:270px;
  margin:0 0 14px;
  color:#d2dbe3;
  font-size:11px;
  line-height:1.35;
}
.industries-intro .text-link{color:#fff;border-color:#fff}
.industry-card-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  min-width:0;
}
.industry-card{
  position:relative;
  height:168px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:#172b3b;
  transform:translateY(0);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    box-shadow .38s cubic-bezier(.22,.61,.36,1),
    border-color .38s ease;
}
.industry-card>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  z-index:0;
  opacity:.8;
  transform:scale(1);
  transition:
    transform .7s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease,
    filter .45s ease;
}
.industry-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,rgba(5,16,25,.9),rgba(5,16,25,.06) 72%);
  transition:background .45s ease;
}
.industry-card>div{
  position:absolute;
  z-index:2;
  left:13px;
  right:10px;
  bottom:10px;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.industry-card span{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:20px;
  line-height:1;
}
.industry-card h3{
  margin:0;
  color:#fff;
  font-size:10px;
  line-height:1.25;
  font-weight:500;
}


.industry-card:before{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  left:-70%;
  width:42%;
  height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 62%,transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:left .7s cubic-bezier(.22,.61,.36,1);
}
.industry-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.48);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  border-bottom:2px solid var(--red);
}
.industry-card:hover:before{
  left:125%;
}
.industry-card:hover>img{
  transform:scale(1.055);
  opacity:.94;
  filter:saturate(1.04) brightness(1.04);
}
.industry-card:hover:after{
  background:linear-gradient(0deg,rgba(5,16,25,.93),rgba(5,16,25,.16) 72%);
}
.industry-card:hover>div{
  transform:translateY(-3px);
}
/* =========================
   CAPABILITIES
   ========================= */
.capabilities-section{
  background:#fff;
  padding:40px 0 38px;
}
.capabilities-layout{
  display:grid;
  grid-template-columns:305px minmax(0,1fr) 118px;
  gap:35px;
  align-items:center;
}
.capabilities-intro{
  position:relative;
}
.capabilities-section .eyebrow{
  position:relative;
  padding-left:29px;
  color:var(--red);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.capabilities-section .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}
.capabilities-intro h2{
  margin:10px 0;
  font-size:31px;
  line-height:1.04;
  letter-spacing:-.035em;
}
.capabilities-intro p{
  max-width:300px;
  margin:0 0 14px;
  color:#516171;
  font-size:11px;
  line-height:1.4;
}
.btn.outline{
  color:var(--ink);
  background:#fff;
  border-color:#9ba8b4;
  border-radius:3px;
  min-height:29px;
  padding:6px 13px;
}
.capability-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #d8dee5;
  background:#fff;
}
.capability-grid>div{
  position:relative;
  min-height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-right:1px solid #d8dee5;
  border-bottom:1px solid #d8dee5;
  text-align:center;
  color:var(--ink);
  font-size:24px;
  line-height:1;
  transition:background .25s ease, transform .25s ease;
  overflow:hidden;
}
.capability-grid>div:nth-child(4n){border-right:0}
.capability-grid>div:nth-child(n+5){border-bottom:0}
.capability-grid>div:after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s ease;
}
.capability-grid>div:hover{
  background:#f8fafc;
  transform:translateY(-2px);
}
.capability-grid>div:hover:after{
  transform:scaleX(1);
}
.capability-grid>div>span{
  display:block;
  font-size:9px;
  line-height:1.25;
  color:var(--ink);
}
.capability-statement{
  position:relative;
  border-left:0;
  padding-left:24px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.capability-statement:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--red);
}
.capability-statement span{
  font-size:8px;
  letter-spacing:.22em;
  line-height:1.55;
  color:#344657;
  transition:transform .2s ease,color .2s ease;
}
.capability-statement span:last-child{
  color:var(--ink);
  font-weight:650;
}
.capability-statement span:hover{
  transform:translateX(3px);
  color:var(--red);
}

/* =========================
   EXPERIENCE
   ========================= */
.experience-section{
  position:relative;
  overflow:hidden;
  background:var(--ink) url("../images/experience-global-network.jpg") center center / cover no-repeat;
  color:#fff;
  padding:37px 0 33px;
}

.experience-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr) 125px;
  gap:28px;
  align-items:center;
}

.experience-copy .eyebrow{
  position:relative;
  padding-left:29px;
  color:#fff;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.experience-copy .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}

.experience-copy h2{
  margin:9px 0 -1px;
  font-size:38px;
  line-height:1;
  letter-spacing:-.04em;
}

.experience-copy h3{
  margin:0 0 9px;
  font-size:18px;
  line-height:1.05;
  font-weight:500;
}

.experience-copy p{
  max-width:350px;
  margin:0 0 12px;
  color:#d0d9e1;
  font-size:10px;
  line-height:1.35;
}

.btn.light{
  color:var(--ink);
  background:#fff;
  border-color:#fff;
  border-radius:3px;
  min-height:27px;
  padding:6px 12px;
}

.experience-art{
  height:190px;
  overflow:hidden;
  position:relative;
}

.experience-art img{
  display:none;
}

.experience-side{
  padding-left:18px;
  border-left:2px solid var(--red);
}

.experience-side strong{
  font-size:8px;
  line-height:1.9;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
}

/* =========================
   ROOTS
   ========================= */
.roots-section{
  background:#fff;
  padding:28px 0 20px;
}
.roots-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr) 100px;
  gap:32px;
  align-items:center;
}
.roots-section .eyebrow{
  position:relative;
  padding-left:29px;
  color:var(--red);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.roots-section .eyebrow:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:2px;
  background:var(--red);
}
.roots-copy h2{
  margin:8px 0 6px;
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.03em;
}
.roots-copy p{
  margin:0;
  max-width:385px;
  color:#435465;
  font-size:10px;
  line-height:1.4;
}
.roots-art{
  position:relative;
  height:155px;
  min-width:0;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}
.roots-art img{
  width:175%;
  height:180px;
  max-width:none;
  object-fit:contain;
  object-position:center;
  transform:translateX(-13%);
  mix-blend-mode:multiply;
}
.roots-art:before{
  content:"";
  position:absolute;
  z-index:3;
  top:7px;
  left:46%;
  width:64px;
  height:28px;
  pointer-events:none;
  opacity:.72;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%20102%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%233e474d%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%2013c3-4%206-4%209%200%203-4%206-4%209%200%27%2F%3E%3Cpath%20d%3D%27M27%208c2.5-3.2%205-3.2%207.5%200%202.5-3.2%205-3.2%207.5%200%27%2F%3E%3Cpath%20d%3D%27M46%2016c2.2-2.8%204.4-2.8%206.6%200%202.2-2.8%204.4-2.8%206.6%200%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%280%2034%29%27%20fill%3D%27none%27%20stroke%3D%27%233e474d%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%2014c3%201%206%201%209%200%203%201%206%201%209%200%27%2F%3E%3Cpath%20d%3D%27M27%209c2.5%201%205%201%207.5%200%202.5%201%205%201%207.5%200%27%2F%3E%3Cpath%20d%3D%27M46%2017c2.2%201%204.4%201%206.6%200%202.2%201%204.4%201%206.6%200%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%280%2068%29%27%20fill%3D%27none%27%20stroke%3D%27%233e474d%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%2014c3%204%206%204%209%200%203%204%206%204%209%200%27%2F%3E%3Cpath%20d%3D%27M27%209c2.5%203.2%205%203.2%207.5%200%202.5%203.2%205%203.2%207.5%200%27%2F%3E%3Cpath%20d%3D%27M46%2017c2.2%202.8%204.4%202.8%206.6%200%202.2%202.8%204.4%202.8%206.6%200%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 64px 102px no-repeat;
  animation:roots-birds-subtle 4.8s ease-in-out infinite;
}


@keyframes roots-birds-subtle{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  20%{transform:translate3d(2px,-1px,0) rotate(.35deg)}
  45%{transform:translate3d(4px,0,0) rotate(-.25deg)}
  70%{transform:translate3d(2px,1px,0) rotate(.25deg)}
} 

.roots-art:after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:28%;
  width:48%;
  height:42px;
  pointer-events:none;
  opacity:.27;
  background:
    radial-gradient(ellipse 32px 11px at 8% 58%,#b8bec2 0 48%,transparent 52%),
    radial-gradient(ellipse 43px 15px at 27% 42%,#c7cbce 0 48%,transparent 52%),
    radial-gradient(ellipse 35px 12px at 49% 57%,#b8bec2 0 48%,transparent 52%),
    radial-gradient(ellipse 46px 15px at 72% 40%,#c5c9cc 0 48%,transparent 52%),
    radial-gradient(ellipse 28px 10px at 91% 62%,#b8bec2 0 48%,transparent 52%);
  background-size:130% 100%;
  background-position:0 0;
  background-repeat:repeat-x;
  filter:blur(1.2px);
  animation:roots-clouds-move 18s linear infinite;
}

@keyframes roots-clouds-move{
  0%{background-position:0 0;opacity:.24}
  50%{background-position:-2.5% 0;opacity:.28}
  100%{background-position:-5% 0;opacity:.24}
}
  50%{background-position:-2.5% 0;opacity:.28}
  100%{background-position:-5% 0;opacity:.24}
}
  50%{opacity:.32}
  100%{background-position:-5% 0;opacity:.25}
}


.roots-art small{
  display:block;
  margin-top:0;
  font-size:6px;
  letter-spacing:.12em;
}
.roots-side{
  padding-left:18px;
  border-left:2px solid var(--red);
  font-size:8px;
  line-height:1.9;
  letter-spacing:.2em;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background:var(--ink-deep);
  color:#b7c2cc;
  padding:33px 58px 14px;
}
.site-footer .cv-footer-logo{
  display:block;
  width:125px;
  height:auto;
  max-height:40px;
  object-fit:contain;
}
.footer-top{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1.35fr 1fr;
  gap:35px;
  max-width:1400px;
  margin:auto;
}
.site-footer h4{color:#fff;margin:0 0 9px;font-size:11px}
.site-footer a{display:block;margin:5px 0;font-size:10px}
.footer-brand p{max-width:285px;font-size:9px;line-height:1.4}
.footer-bottom{
  max-width:1400px;
  margin:25px auto 0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#778594;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1100px){
  .site-header{padding:0 30px}
  .main-nav{gap:18px}
  .hero-inner{padding-left:40px;padding-right:40px}
  .hero-copy{width:55%;min-width:0}
  .products-layout,.industries-layout{grid-template-columns:220px minmax(0,1fr);gap:25px}
  .capabilities-layout{grid-template-columns:260px minmax(0,1fr)}
  .capability-statement{display:none}
  .experience-layout{grid-template-columns:330px minmax(0,1fr)}
  .experience-side{display:none}
  .roots-layout{grid-template-columns:330px minmax(0,1fr)}
  .roots-side{display:none}
}
@media(max-width:820px){
  .site-header{height:68px;padding:0 22px}
  .site-header .brand{width:125px;flex-basis:125px}
  .site-header .cv-header-logo{width:125px}
  .main-nav{display:none}
  .header-cta{margin-left:auto}
  .mobile-toggle{display:block}
  .hero{height:auto;min-height:760px}
  .hero:after{display:none !important;background:none !important;}
  .hero-inner{padding:95px 28px 28px}
  .hero-copy{width:100%;padding-top:20px}
  .hero h1{font-size:52px}
  .hero-side{display:none}
  .hero-capabilities{max-width:100%}
  .products-layout,.industries-layout,.capabilities-layout,.experience-layout,.roots-layout{
    grid-template-columns:1fr;
  }
  .container{width:min(100% - 56px,var(--max))}
  .product-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .experience-art{height:240px}
  .roots-art{order:-1}
}
@media(max-width:520px){
  .header-cta{display:none}
  .hero{min-height:780px}
  .hero h1{font-size:42px}
  .hero p{font-size:14px}
  .hero-capabilities{grid-template-columns:repeat(2,1fr)}
  .hero-capabilities span:nth-child(2){border-right:0}
  .hero-capabilities span{border-bottom:1px solid rgba(8,24,39,.22);padding-bottom:8px}
  .product-card-grid,.industry-card-grid{grid-template-columns:1fr}
  .product-card{height:250px}
  .industry-card{height:190px}
  .capability-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;gap:8px}
  .site-footer{padding-left:28px;padding-right:28px}
}

/* =========================================================
   ENTERPRISE RESPONSIVE OVERRIDES
   These rules intentionally come after the original responsive
   rules so they correct tablet/mobile behaviour without changing
   the desktop composition.
   ========================================================= */

/* ---------- Compact desktop / large tablet ---------- */
@media (max-width:1100px){
  .container{width:min(var(--max),calc(100% - 72px));}
  .site-header{padding:0 32px;}
  .main-nav{gap:17px;font-size:11px;}
  .header-cta{padding:8px 13px;font-size:11px;}

  .hero-inner{padding-left:42px;padding-right:42px;}
  .hero-copy{width:57%;min-width:0;}
  .hero h1{font-size:clamp(42px,4.8vw,60px);}

  .products-layout{grid-template-columns:220px minmax(0,1fr);gap:28px;}
  .product-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .product-card{height:235px;}

  .industries-layout{grid-template-columns:220px minmax(0,1fr);gap:28px;}
  .industry-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .industry-card{height:180px;}

  .capabilities-layout{grid-template-columns:260px minmax(0,1fr);gap:28px;}
  .capability-statement{display:none;}

  .experience-layout{grid-template-columns:310px minmax(0,1fr);gap:25px;}
  .experience-side{display:none;}

  .roots-layout{grid-template-columns:310px minmax(0,1fr);gap:25px;}
  .roots-side{display:none;}
}

/* ---------- Tablet: 901px–900px boundary and below ---------- */
@media (max-width:900px){
  .site-header{
    height:68px;
    padding:0 24px;
    gap:18px;
  }

  .site-header .brand{
    width:130px;
    flex:0 0 130px;
  }

  .site-header .cv-header-logo{
    width:130px;
    max-width:130px;
  }

  /* Closed mobile/tablet menu */
  .main-nav{
    display:none;
    position:absolute;
    top:68px;
    left:18px;
    right:18px;
    height:auto;
    max-height:calc(100vh - 86px);
    overflow-y:auto;
    margin:0;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    background:rgba(6,19,30,.985);
    border:1px solid rgba(255,255,255,.14);
    border-top:2px solid var(--red);
    box-shadow:0 18px 42px rgba(0,0,0,.28);
  }

  /* Open state controlled by the existing navbar.js */
  .main-nav.is-mobile-open{
    display:flex;
  }

  .main-nav>a,
  .nav-group>button{
    width:100%;
    min-height:48px;
    height:48px;
    justify-content:space-between;
    padding:0 13px;
    font-size:12px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-group{
    width:100%;
    height:auto;
    display:block;
  }

  .nav-group:before{display:none;}

  /* Mobile/tablet dropdowns become inline accordions */
  .nav-menu{
    position:static;
    min-width:0;
    width:100%;
    padding:4px 0;
    display:none;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
    background:rgba(255,255,255,.045);
    border:0;
    border-left:2px solid var(--red);
    border-radius:0;
    box-shadow:none;
    transition:none;
  }

  .nav-group.is-open > .nav-menu{
    display:block;
  }

  .nav-group:hover > .nav-menu,
  .nav-group:focus-within > .nav-menu{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  .nav-menu a{
    min-height:42px;
    padding:9px 15px 9px 20px;
    font-size:11px;
    border-radius:0;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible{
    padding-left:20px;
    background:rgba(255,255,255,.06);
  }

  .nav-menu a:after{display:none;}

  .header-cta{display:none;}

  /* Functional hamburger */
  .mobile-toggle{
    display:inline-flex;
    width:42px;
    height:42px;
    margin-left:auto;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.34);
    border-radius:3px;
    color:#fff;
    background:rgba(6,19,30,.18);
    font-size:20px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-toggle:hover,
  .mobile-toggle:focus-visible{
    border-color:#fff;
    outline:none;
  }

  /* The original mobile white wash is explicitly disabled. */
  .hero:after{display:none !important;background:none !important;}

  .hero{
    min-height:720px;
    height:auto;
  }

  .hero-inner{
    padding:104px 32px 34px;
  }

  .hero-copy{
    width:min(100%,620px);
    min-width:0;
    padding-top:20px;
  }

  .hero h1{
    max-width:650px;
    font-size:clamp(42px,6vw,58px);
  }

  .hero p{
    max-width:610px;
    font-size:15px;
    line-height:1.5;
  }

  .hero-capabilities{
    max-width:610px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-capabilities span{
    min-height:40px;
    display:flex;
    align-items:flex-start;
    padding:9px 12px 8px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  .hero-capabilities span:nth-child(2){border-right:0;}
  .hero-side{display:none;}

  .products-section,
  .capabilities-section{padding:56px 0;}

  .industries-section{padding:52px 0;}
  .experience-section{padding:58px 0;}
  .roots-section{padding:50px 0 38px;}

  .products-layout,
  .industries-layout,
  .capabilities-layout,
  .experience-layout,
  .roots-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .products-intro,
  .industries-intro,
  .capabilities-intro,
  .experience-copy,
  .roots-copy{
    max-width:680px;
  }

  .products-section h2,
  .capabilities-intro h2{
    font-size:clamp(30px,4.5vw,40px);
  }

  .product-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .product-card{height:260px;}

  .industry-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .industry-card{height:200px;}

  .capability-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .experience-art{
    height:280px;
    order:2;
  }

  .roots-art{
    order:2;
    width:100%;
    height:210px;
  }

  .roots-art img{
    width:145%;
    height:210px;
    transform:translateX(-8%);
  }

  .site-footer{padding:48px 32px 18px;}

  .footer-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 24px;
  }
}

/* ---------- Phones ---------- */
@media (max-width:600px){
  .container{width:min(100% - 40px,var(--max));}

  .site-header{padding:0 20px;}

  .site-header .brand,
  .site-header .cv-header-logo{
    width:118px;
    max-width:118px;
  }

  .main-nav{
    left:12px;
    right:12px;
    top:68px;
  }

  .hero{
    min-height:760px;
  }

  .hero-inner{
    padding:98px 20px 28px;
  }

  .hero-copy{padding-top:18px;}

  .hero .eyebrow{
    font-size:9px;
    letter-spacing:.2em;
  }

  .hero h1{
    margin-top:11px;
    font-size:clamp(38px,10.5vw,48px);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  .hero p{
    font-size:14px;
    line-height:1.5;
    margin-bottom:20px;
  }

  .actions{gap:9px;}

  .btn{
    min-height:38px;
    padding:9px 14px;
    font-size:10px;
  }

  .hero-capabilities{
    margin-top:22px;
    grid-template-columns:1fr 1fr;
  }

  .hero-capabilities span{
    min-height:48px;
    font-size:7px;
    letter-spacing:.14em;
    padding:10px 9px 9px;
  }

  .products-section,
  .capabilities-section,
  .experience-section,
  .roots-section{
    padding:46px 0 42px;
  }

  .industries-section{padding:46px 0;}

  .products-section h2,
  .capabilities-intro h2{font-size:31px;}

  .products-section .eyebrow,
  .industries-intro .eyebrow,
  .capabilities-section .eyebrow,
  .experience-copy .eyebrow,
  .roots-section .eyebrow{
    font-size:9px;
    letter-spacing:.2em;
  }

  .product-card-grid,
  .industry-card-grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .product-card{height:245px;}
  .industry-card{height:190px;}

  .capability-grid{
    grid-template-columns:1fr 1fr;
  }

  .capability-grid>div{
    min-height:92px;
    font-size:24px;
  }

  .experience-copy h2{font-size:36px;}

  .experience-copy h3{
    font-size:17px;
    line-height:1.2;
  }

  .experience-copy p{
    font-size:11px;
    line-height:1.5;
  }

  .experience-art{height:220px;}

  .roots-art{height:180px;}

  .roots-art img{
    width:170%;
    height:190px;
    transform:translateX(-14%);
  }

  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:26px 18px;
  }

  .site-footer{
    padding:42px 20px 16px;
  }

  .footer-bottom{
    margin-top:28px;
    flex-direction:column;
    gap:9px;
    line-height:1.5;
  }
}

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .site-header{padding:0 16px;}

  .site-header .brand,
  .site-header .cv-header-logo{
    width:108px;
    max-width:108px;
  }

  .hero-inner{
    padding-left:16px;
    padding-right:16px;
  }

  .hero h1{font-size:36px;}
  .hero p{font-size:13px;}

  .hero-capabilities{grid-template-columns:1fr;}

  .hero-capabilities span{
    border-right:0 !important;
  }

  .capability-grid{grid-template-columns:1fr 1fr;}

  .footer-top{grid-template-columns:1fr;}
}


/* =========================================================
   FINAL MOBILE / TABLET EXPERIENCE COMPOSITION
   Keep the eyebrow at the top.
   Move the main experience copy down into the darker image area.
   Improve readability without changing desktop composition.
   ========================================================= */

@media (max-width:900px){

  .experience-section{
    position:relative;
    overflow:hidden;
  }

  /* Readability layer: transparent at the top, progressively darker
     around the lower image area where the copy sits. */
  .experience-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(5,16,28,0) 0%,
      rgba(5,16,28,.08) 22%,
      rgba(5,16,28,.48) 48%,
      rgba(5,16,28,.82) 72%,
      rgba(5,16,28,.94) 100%
    );
  }

  .experience-layout{
    position:relative;
    z-index:1;
  }

  /* Keep the eyebrow in its original top position. */
  .experience-copy .eyebrow{
    position:relative;
    z-index:2;
  }

  /* Move the main content down on tablets, including 720px viewports. */
  .experience-copy h2{
    margin-top:150px;
  }
}

@media (max-width:600px){
  .experience-copy h2{
    margin-top:135px;
  }
}

@media (max-width:380px){
  .experience-copy h2{
    margin-top:120px;
  }
}

/* VERIFIED HERO OVERLAY RESET — applies to every viewport */
.hero,
.hero::before,
.hero::after,
.hero-inner::before,
.hero-inner::after,
.hero-copy::before,
.hero-copy::after{
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  content:none !important;
}

.hero-video{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}


/* =========================================================
   EXPERIENCE — WHITE GLASS READABILITY PANEL
   The eyebrow remains outside the glass.
   The main Experience copy receives a translucent white glass
   surface so it stays readable over the map artwork, especially
   on narrow mobile screens.
   ========================================================= */

@media (max-width:900px){

  .experience-copy{
    position:relative;
    isolation:isolate;
  }

  /* Glass panel begins below the eyebrow and behind the main copy. */
  .experience-copy::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-18px;
    right:-18px;
    top:112px;
    bottom:-18px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:4px;
    background:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:
      0 18px 45px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.22);
    pointer-events:none;
  }

  .experience-copy h2,
  .experience-copy h3,
  .experience-copy p,
  .experience-copy .btn{
    position:relative;
    z-index:1;
    text-shadow:0 1px 10px rgba(0,0,0,.34);
  }
}

@media (max-width:600px){

  /* Stronger glass on smaller screens where the artwork is tighter. */
  .experience-copy::before{
    left:-14px;
    right:-14px;
    top:104px;
    bottom:-14px;
    background:rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(13px);
    backdrop-filter:blur(13px);
    border-color:rgba(255,255,255,.34);
  }

  .experience-copy h2,
  .experience-copy h3,
  .experience-copy p{
    text-shadow:0 1px 9px rgba(0,0,0,.42);
  }
}

@media (max-width:380px){

  /* Maximum readability for very narrow phones. */
  .experience-copy::before{
    left:-10px;
    right:-10px;
    top:94px;
    bottom:-10px;
    background:rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-color:rgba(255,255,255,.40);
  }
}



/* =========================================================
   FINAL MOBILE HERO CAPABILITY ALIGNMENT
   Keep the 2-column mobile layout, but force every capability
   cell to start from its own left edge. This keeps item 3
   (row 2 / column 1) aligned with item 1.
   ========================================================= */
@media (max-width:600px){
  .hero-capabilities{
    width:100%;
    margin-left:0;
    margin-right:0;
    justify-items:stretch;
    align-items:start;
  }

  .hero-capabilities span{
    width:100%;
    box-sizing:border-box;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    margin-left:0;
    margin-right:0;
  }

  .hero-capabilities span:nth-child(3){
    grid-column:1;
    justify-self:stretch;
    text-align:left;
  }
}

@media (max-width:380px){
  .hero-capabilities span:nth-child(3){
    grid-column:1;
  }
}


/* =========================================================
   FINAL RESPONSIVE POLISH
   Roots image + Hero capability alignment + Mobile footer
   ========================================================= */

/* --- Roots: keep text and sketch visually together on mobile --- */
@media (max-width: 900px){
  .roots-section,
  .roots-layout{
    overflow:hidden;
  }

  .roots-layout{
    grid-template-columns:minmax(0,1fr) minmax(120px,38%);
    gap:14px;
    align-items:center;
  }

  .roots-copy{
    min-width:0;
  }

  .roots-visual{
    min-width:0;
    width:100%;
    justify-self:start;
    transform:translateX(-8px);
  }

  .roots-visual img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    object-fit:contain;
  }
}

@media (max-width:600px){
  .roots-layout{
    grid-template-columns:minmax(0,1fr) minmax(105px,35%);
    gap:10px;
  }

  .roots-visual{
    transform:translateX(-10px);
  }
}

@media (max-width:380px){
  .roots-layout{
    grid-template-columns:minmax(0,1fr) minmax(92px,34%);
    gap:7px;
  }

  .roots-visual{
    transform:translateX(-8px);
  }
}


/* --- Hero capabilities: item 3 aligns exactly with item 1 --- */
@media (max-width:900px){
  .hero-capabilities{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-capabilities span:nth-child(3){
    grid-column:1;
    grid-row:2;
    margin-left:0 !important;
    padding-left:0 !important;
    justify-self:stretch;
    text-align:left;
    box-sizing:border-box;
  }
}

@media (max-width:600px){
  .hero-capabilities span:nth-child(3){
    margin-left:0 !important;
    padding-left:0 !important;
    justify-self:stretch;
    text-align:left;
  }
}

@media (max-width:380px){
  .hero-capabilities span:nth-child(3){
    margin-left:0 !important;
    padding-left:0 !important;
    justify-self:stretch;
    text-align:left;
  }
}


/* --- Mobile footer: Codevione first, quick links in 3 columns --- */
@media (max-width:900px){
  .site-footer .footer-inner,
  .site-footer .footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:34px;
  }

  .site-footer .footer-brand,
  .site-footer .footer-about,
  .site-footer .footer-intro{
    grid-column:1/-1;
  }

  .site-footer .footer-links{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 18px;
    grid-column:1/-1;
  }

  .site-footer .footer-links > *,
  .site-footer .footer-column{
    min-width:0;
  }
}

@media (max-width:600px){
  .site-footer .footer-links{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 12px;
  }

  .site-footer .footer-column h4,
  .site-footer .footer-links h4{
    font-size:10px;
    line-height:1.35;
    letter-spacing:.12em;
  }

  .site-footer .footer-column a,
  .site-footer .footer-links a{
    font-size:11px;
    line-height:1.65;
  }
}

@media (max-width:380px){
  .site-footer .footer-links{
    gap:18px 9px;
  }

  .site-footer .footer-column h4,
  .site-footer .footer-links h4{
    font-size:9px;
  }

  .site-footer .footer-column a,
  .site-footer .footer-links a{
    font-size:10px;
    line-height:1.6;
  }
}


/* =========================================================
   FOOTER SOCIAL MEDIA
   Uses the existing footer stylesheet — no separate CSS file.
   ========================================================= */

.social-links{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
}

.social-links a{
  width:28px;
  height:28px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#b7c2cc;
  background:rgba(255,255,255,.025);
  transition:
    transform .2s ease,
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.social-links a:hover,
.social-links a:focus-visible{
  transform:translateY(-2px);
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.08);
  outline:none;
}

.social-links svg{
  width:13px;
  height:13px;
  fill:currentColor;
  display:block;
}

@media (max-width:600px){
  .social-links{
    margin-top:14px;
    gap:8px;
  }

  .social-links a{
    width:27px;
    height:27px;
  }

  .social-links svg{
    width:12px;
    height:12px;
  }
}

@media (max-width:380px){
  .social-links{
    gap:7px;
  }

  .social-links a{
    width:26px;
    height:26px;
  }
}